refactor: 注册界面与注册请求

shared/index.tsx

@@ -23,4 +23,4 @@ export { getStorage, setStorage, useStorage } from './manager/storage';
 export { setTokenGetter } from './manager/request';
 
 // model
-export { loginWithEmail } from './model/user';
+export { loginWithEmail, registerWithEmail } from './model/user';

shared/model/user.ts

@@ -1,12 +1,41 @@
 import { request } from '../api/request';
 
+interface UserLoginInfo {
+  _id: string;
+  email: string;
+  password: string;
+  token: string;
+  avatar: string | null;
+  createdAt: string;
+}
+
 /**
  * 邮箱登录
  * @param email 邮箱
  * @param password 密码
  */
-export async function loginWithEmail(email: string, password: string) {
-  const data = await request.post('/api/user/login', {
+export async function loginWithEmail(
+  email: string,
+  password: string
+): Promise<UserLoginInfo> {
+  const { data } = await request.post('/api/user/login', {
+    email,
+    password,
+  });
+
+  return data;
+}
+
+/**
+ * 邮箱注册账号
+ * @param email 邮箱
+ * @param password 密码
+ */
+export async function registerWithEmail(
+  email: string,
+  password: string
+): Promise<UserLoginInfo> {
+  const { data } = await request.post('/api/user/register', {
     email,
     password,
   });

web/src/routes/Entry/LoginView.tsx

@@ -1,9 +1,10 @@
 import { Icon } from '@iconify/react';
 import { Divider } from 'antd';
 import { loginWithEmail, useAsyncFn } from 'pawchat-shared';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Spinner } from '../../components/Spinner';
 import { string } from 'yup';
+import { useHistory } from 'react-router';
 
 /**
  * TODO:
@@ -28,10 +29,9 @@ OAuthLoginView.displayName = 'OAuthLoginView';
 export const LoginView: React.FC = React.memo(() => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const history = useHistory();
 
   const [{ loading, error }, handleLogin] = useAsyncFn(async () => {
-    console.log({ email, password });
-
     await string()
       .email('邮箱格式不正确')
       .required('邮箱不能为空')
@@ -43,8 +43,14 @@ export const LoginView: React.FC = React.memo(() => {
       .validate(password);
 
     await loginWithEmail(email, password);
+
+    // TODO
   }, [email, password]);
 
+  const toRegisterView = useCallback(() => {
+    history.push('/entry/register');
+  }, [history]);
+
   return (
     <div className="w-96 text-white">
       <div className="mb-4 text-2xl">登录 Paw Chat</div>
@@ -53,7 +59,7 @@ export const LoginView: React.FC = React.memo(() => {
         <div className="mb-4">
           <div className="mb-2">邮箱</div>
           <input
-            id="email"
+            name="login-email"
             className="appearance-none rounded-md relative block w-full px-4 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 text-base sm:text-sm"
             placeholder="name@example.com"
             type="text"
@@ -64,7 +70,7 @@ export const LoginView: React.FC = React.memo(() => {
         <div className="mb-4">
           <div className="mb-2">密码</div>
           <input
-            id="password"
+            name="login-password"
             className="appearance-none rounded-md relative block w-full px-4 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 text-base sm:text-sm"
             type="password"
             placeholder="******"
@@ -76,13 +82,22 @@ export const LoginView: React.FC = React.memo(() => {
         {error && <p className="text-red-500 text-sm mb-4">{error.message}</p>}
 
         <button
-          className="group relative w-full py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+          className="w-full py-2 px-4 mb-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
           disabled={loading}
           onClick={handleLogin}
         >
           {loading && <Spinner />}
           登录
         </button>
+
+        <button
+          className="w-full py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white focus:outline-none disabled:opacity-50"
+          disabled={loading}
+          onClick={toRegisterView}
+        >
+          注册账号
+          <Icon icon="mdi-arrow-right" className="ml-1 inline" />
+        </button>
       </div>
     </div>
   );

web/src/routes/Entry/RegisterView.tsx

@@ -0,0 +1,88 @@
+import { registerWithEmail, useAsyncFn } from 'pawchat-shared';
+import React, { useCallback, useState } from 'react';
+import { Spinner } from '../../components/Spinner';
+import { string } from 'yup';
+import { Icon } from '@iconify/react';
+import { useHistory } from 'react-router';
+
+/**
+ * 注册视图
+ */
+export const RegisterView: React.FC = React.memo(() => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const history = useHistory();
+
+  const [{ loading, error }, handleRegister] = useAsyncFn(async () => {
+    await string()
+      .email('邮箱格式不正确')
+      .required('邮箱不能为空')
+      .validate(email);
+
+    await string()
+      .min(6, '密码不能低于6位')
+      .required('密码不能为空')
+      .validate(password);
+
+    const data = await registerWithEmail(email, password);
+
+    // TODO
+    console.log(data);
+  }, [email, password]);
+
+  const toLoginView = useCallback(() => {
+    history.push('/entry/login');
+  }, [history]);
+
+  return (
+    <div className="w-96 text-white">
+      <div className="mb-4 text-2xl">注册账号</div>
+
+      <div>
+        <div className="mb-4">
+          <div className="mb-2">邮箱</div>
+          <input
+            name="reg-email"
+            className="appearance-none rounded-md relative block w-full px-4 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 text-base sm:text-sm"
+            placeholder="name@example.com"
+            type="text"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+        </div>
+        <div className="mb-4">
+          <div className="mb-2">密码</div>
+          <input
+            name="reg-password"
+            className="appearance-none rounded-md relative block w-full px-4 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 text-base sm:text-sm"
+            type="password"
+            placeholder="******"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </div>
+
+        {error && <p className="text-red-500 text-sm mb-4">{error.message}</p>}
+
+        <button
+          className="w-full py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+          disabled={loading}
+          onClick={handleRegister}
+        >
+          {loading && <Spinner />}
+          注册账号
+        </button>
+
+        <button
+          className="w-full py-2 px-4 border border-transparent text-sm text-left font-medium text-white disabled:opacity-50"
+          disabled={loading}
+          onClick={toLoginView}
+        >
+          <Icon icon="mdi-arrow-left" className="mr-1 inline" />
+          返回登录
+        </button>
+      </div>
+    </div>
+  );
+});
+RegisterView.displayName = 'RegisterView';

web/src/routes/Entry/index.tsx

@@ -5,6 +5,7 @@ import bgImage from '../../../assets/images/bg.jpg';
 import clsx from 'clsx';
 import styles from './index.module.less';
 import loginPatternUrl from '../../../assets/images/login-pattern.svg';
+import { RegisterView } from './RegisterView';
 
 export const EntryRoute = React.memo(() => {
   return (
@@ -18,6 +19,7 @@ export const EntryRoute = React.memo(() => {
       >
         <Switch>
           <Route path="/entry/login" component={LoginView} />
+          <Route path="/entry/register" component={RegisterView} />
           <Redirect to="/entry/login" />
         </Switch>
       </div>