refactor: Refactor the login page.

jaywcjlove · Jul 10, 2023 · 2cfb2a4 · 2cfb2a4
1 parent eecfec9
commit 2cfb2a4
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 76 deletions.
diff --git a/client/package.json b/client/package.json
@@ -8,7 +8,7 @@
     "start": "kkt start"
   },
   "dependencies": {
-    "@react-login-page/page3": "^0.4.11",
+    "@react-login-page/base": "^0.4.16",
     "@tanstack/react-query": "^4.24.10",
     "@types/crypto-js": "^4.1.1",
     "@uiw/copy-to-clipboard": "^1.0.12",
@@ -25,13 +25,12 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
     "react-router-dom": "^6.14.0",
-    "styled-components": "^5.3.10"
+    "styled-components": "^6.0.3"
   },
   "devDependencies": {
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-test-renderer": "^18.0.0",
-    "@types/styled-components": "^5.1.26",
     "http-proxy-middleware": "^2.0.6",
     "kkt": "^7.4.6"
   },

diff --git a/client/src/pages/login/login.tsx b/client/src/pages/login/login.tsx
@@ -1,89 +1,66 @@
-import Login from '@react-login-page/page3';
-import defaultBannerImage from '@react-login-page/page3/bg.jpeg';
+import Login from '@react-login-page/base';
 import styled from 'styled-components';
-import toast from 'react-hot-toast';
-import { useFetcher, useLocation, useNavigate, NavLink } from 'react-router-dom';
+import { useEffect } from 'react';
+import { Form, useLocation, useNavigate, NavLink, useActionData } from 'react-router-dom';
 import { useAuth } from '../../store';
 import { login } from '../../services/login';
-import { useEffect, useRef } from 'react';
+import logoSrc from '../../asset/logo.png';
 
-const LoginPage = styled(Login)`
+export const LoginPage = styled(Login)`
   height: 100vh !important;
 `;
 
-export const ErrorInfo = styled.div`
-  color: red;
-  word-break: break-all;
-  white-space: pre-wrap;
-  width: 100%;
-  max-width: 265px;
+export const LogoImage = styled.img`
+  width: 34px;
+  display: block;
 `;
 
 export const action = login;
 export function Component() {
-  const fetcher = useFetcher();
+  const data = useActionData() as any;
   const { token, dispatch } = useAuth();
   const navigate = useNavigate();
   const location = useLocation();
-  const toastId = useRef<string>();
-  const submitHanle = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    toastId.current = toast.loading('正在登录中...');
-    fetcher.submit(e.currentTarget);
-  };
-
+  const currentToken = data?.token;
   useEffect(() => {
-    if (fetcher.data && fetcher.data.token) {
+    if (currentToken) {
+      console.log(currentToken);
       dispatch({
-        token: fetcher.data.token,
+        token: currentToken,
         user: {
-          id: fetcher.data.data?.id,
-          username: fetcher.data.data?.username,
-          name: fetcher.data.data?.name,
+          id: data?.id,
+          username: data?.username,
+          name: data?.name,
         },
       });
-      toastId.current &&
-        toast.success('登录成功!', {
-          id: toastId.current,
-        });
       setTimeout(() => {
         // 跳转到上一个页面或者 `/`
         const from = location.state?.from?.pathname || '/passwords';
         navigate(from, { replace: true });
       });
     }
-  }, [fetcher.data, location.state, dispatch, navigate]);
-
-  useEffect(() => {
-    if (fetcher.data?.code !== 1 && fetcher.data?.message) {
-      toastId.current &&
-        toast.error(fetcher.data?.message || '登录失败', {
-          id: toastId.current,
-        });
-    }
-  }, [fetcher.data]);
+  }, [currentToken]);
 
   useEffect(() => {
-    if (token && fetcher.state === 'idle') {
+    if (token) {
       dispatch({ token: null });
     }
     // eslint-disable-next-line
   }, []);
 
   return (
-    <fetcher.Form method="post" onSubmit={submitHanle}>
+    <Form method="post">
       <LoginPage>
-        <Login.Banner style={{ backgroundImage: `url(${defaultBannerImage})` }} />
-        <Login.Title> Password Manager Lite </Login.Title>
-        <Login.Welcome>Welcome back! Log in to your account.</Login.Welcome>
-        <Login.Submit>登录</Login.Submit>
-        <Login.Password autoComplete="on"></Login.Password>
-        <Login.ButtonAfter>
-          <NavLink to="/signup">现在注册</NavLink>
-        </Login.ButtonAfter>
+        <LoginPage.Title> PML Login </LoginPage.Title>
+        <LoginPage.Logo>
+          <LogoImage src={logoSrc} />
+        </LoginPage.Logo>
+        <LoginPage.Username placeholder="Email address" name="email" />
+        <LoginPage.Footer>
+          New to PML? <NavLink to="/signup">Create an account</NavLink>.
+        </LoginPage.Footer>
       </LoginPage>
-      <div>{fetcher.data?.code !== 1 && <ErrorInfo>{fetcher.data?.message}</ErrorInfo>}</div>
-    </fetcher.Form>
+    </Form>
   );
 }
 

diff --git a/client/src/pages/login/signup.tsx b/client/src/pages/login/signup.tsx
@@ -1,15 +1,10 @@
-import Login from '@react-login-page/page3';
-import defaultBannerImage from '@react-login-page/page3/bg.jpeg';
-import styled from 'styled-components';
+import { useEffect, useRef } from 'react';
 import toast from 'react-hot-toast';
 import { useFetcher, useLocation, useNavigate, NavLink } from 'react-router-dom';
 import { useAuth } from '../../store';
 import { signup } from '../../services/login';
-import { useEffect, useRef } from 'react';
-
-const LoginPage = styled(Login)`
-  height: 100vh !important;
-`;
+import logoSrc from '../../asset/logo.png';
+import { LogoImage, LoginPage } from './login';
 
 export const action = signup;
 export function Component() {
@@ -54,18 +49,17 @@ export function Component() {
   return (
     <fetcher.Form method="post" onSubmit={submitHanle}>
       <LoginPage>
-        <Login.Banner style={{ backgroundImage: `url(${defaultBannerImage})` }} />
-        <Login.Title> Task Tracker </Login.Title>
-        <Login.Logo visible={false} />
-        <Login.Welcome>Welcome! Signup to your account.</Login.Welcome>
-        <Login.Submit>注册</Login.Submit>
-        <Login.Password label="密码" placeholder="请输入你的密码" />
-        <Login.Password label="确认密码" keyname="confirmPassword" placeholder="确认你的密码" />
-        <Login.Email label="邮箱" placeholder="请输入你的邮箱" />
-        <Login.Email label="姓名" type="text" keyname="name" placeholder="请输入你的姓名" index={-1} />
-        <Login.ButtonAfter>
-          <NavLink to="/login">现在登录</NavLink>
-        </Login.ButtonAfter>
+        <LoginPage.Title> Sign Up </LoginPage.Title>
+        <LoginPage.Logo>
+          <LogoImage src={logoSrc} />
+        </LoginPage.Logo>
+        <LoginPage.Password keyname="confirmPassword" placeholder="Confirm Password" />
+        <LoginPage.Username name="email" placeholder="Email address" />
+        <LoginPage.Username keyname="name" placeholder="Please enter your name" />
+        <LoginPage.Reset></LoginPage.Reset>
+        <LoginPage.Footer>
+          <NavLink to="/login">Login now</NavLink>
+        </LoginPage.Footer>
       </LoginPage>
     </fetcher.Form>
   );

diff --git a/client/src/services/login.ts b/client/src/services/login.ts
@@ -1,7 +1,9 @@
 import { ActionFunction } from 'react-router-dom';
+import toast from 'react-hot-toast';
 import { fetchFn } from '../utils/react-query';
 
 export const login: ActionFunction = async ({ request }) => {
+  const toastId = toast.loading('正在登陆中...');
   const formData = await request.formData();
   const data = Object.fromEntries(formData);
   if (!data.email) {
@@ -10,7 +12,14 @@ export const login: ActionFunction = async ({ request }) => {
   if (!data.password) {
     return Promise.resolve({ code: 0, message: '请输入密码!' });
   }
-  return fetchFn('/api/users/login', { ...request, method: 'POST', body: JSON.stringify(data) });
+  const result = await fetchFn('/api/users/login', { ...request, method: 'POST', body: JSON.stringify(data) });
+  const resultData = await result.json();
+  if (result.status !== 200) {
+    toast.error(`登录失败! ${resultData.message}`, { id: toastId });
+    return { statusCode: result.status, message: resultData.message || '添加密码失败!' };
+  }
+  toast.success(`登录成功!`, { id: toastId });
+  return resultData;
 };
 
 export const signup: ActionFunction = async ({ request }) => {

diff --git a/server/package.json b/server/package.json
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@types/papaparse": "^5.3.7",
-    "nodemon": "^2.0.22",
+    "nodemon": "^3.0.1",
     "supertest": "^6.3.3",
     "ts-node": "^10.9.1",
     "tsbb": "^4.1.14"