refactor: authenticate (#96)

* refactor: login page

* refactor: register page

* refactor: clean authenticate

app/(root)/authenticate/components/register.tsx

@@ -15,7 +15,6 @@ export default function Register({
     userName,
     setCode,
     setPassword,
-    setAccount,
     setConfirmPassword,
     setUserName
 }: RegisterProps){
@@ -86,11 +85,9 @@ export interface RegisterProps {
     password: string;
     confirmPassword: string;
     passwordRobustness: boolean[];
-    valide: boolean;
     userName: string;
     setCode: (val: string) => void;
     setPassword: (val: string) => void,
-    setAccount: (val: string) => void,
     setConfirmPassword: (val: string) => void,
     setUserName: (val:string) => void;
 }

app/(root)/authenticate/hooks/useRegister.ts

@@ -0,0 +1,22 @@
+import { useState } from "react"
+
+export const useRegister = (
+) => {
+    const [code, setCode] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [passwordRobustness, setRobustness] = useState<boolean[]>([]);
+    const [userName, setUsername] = useState('');
+    return {
+        code,
+        setCode,
+        password,
+        setPassword,
+        confirmPassword,
+        setConfirmPassword,
+        passwordRobustness,
+        setRobustness,
+        userName,
+        setUsername
+    }
+}

app/(root)/authenticate/hooks/useValide.ts

@@ -1,6 +1,7 @@
-import { useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { PageType } from "../page";
-import { z,ZodError } from 'zod';
+import { z,ZodError, ZodIssue } from 'zod';
+import { useUpdate, useUpdateEffect } from "ahooks";
 
 const validateEmail = (val: string) => val.match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,10}$/i);
 const validatePhone = (val: string) => val.match(/^1[3-9]\d{9}$/i);
@@ -42,26 +43,25 @@ export const useValide = (
     props: Partial<ValidePrpos>,
 ) => {
     const [valide, setValide] = useState(false);
-    const [errors, setErrors] = useState<ZodError>();
+    const [errors, setErrors] = useState<ZodIssue[]>();
     const valideData = ()=>{
         if (pageType !== 'register'){
             const schemaValideRes = schema[pageType].safeParse(props);
             if (!schemaValideRes.success){
-                setErrors(schemaValideRes.error)
+                setErrors(schemaValideRes.error.errors)
             }
             setValide(schemaValideRes.success);
             return;
         }
         if (pageType === 'register'){
-            console.log(props.password, props.confirmPassword)
             const schemaRes = schema['register'].safeParse(props)
             setValide(schemaRes.success && (props.password === props.confirmPassword));
             if (!schemaRes.success){
-                setErrors(schemaRes.error)
+                setErrors(schemaRes.error.errors)
             }
             return;
         }
-    }
+    };
     return {
         valide,errors,
         setValide,setErrors,

app/(root)/authenticate/layout.tsx

@@ -1,11 +1,19 @@
+'use client'
 import React from "react";
+import { useMount } from "ahooks";
+import { useRouter } from "next/navigation";
 
 export default function AuthenticateLayout({children}: {
     children: React.ReactNode;
 }) {
+    const router = useRouter();
+    useMount(()=>{
+        router.prefetch('/authenticate/login')
+        router.prefetch('/authenticate/register')
+    })
     return (
         <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-            <div className="inline-block max-w-lg text-center justify-center">
+            <div className="inline-block max-w-md w-full text-center justify-center">
                 {children}
             </div>
         </section>

app/(root)/authenticate/login/page.tsx

@@ -0,0 +1,77 @@
+'use client';
+import { useState } from "react";
+import { Login } from "../components/login";
+import { useAtom } from "jotai";
+import { accountAtom } from "@/app/store";
+import { Button, Card, CardBody, CardFooter, Checkbox, Input } from "@nextui-org/react";
+import Link from "next/link";
+import IOC from "@/providers";
+import { UserAPI } from "@/interface/userAPI";
+import { Message } from "@/components/message";
+import { SetLoggedInState } from "@/interface/hooks";
+import { useRouter } from "next/navigation";
+export default function LoginPage(){
+    const [password, setPassword] = useState('');
+    const [account, setAccount] = useAtom(accountAtom);
+    const [policy, setPolicy] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const router = useRouter();
+    const login = () => {
+        setLoading(true);
+        UserAPI.login(account, password)
+        .then((
+            [state, text]
+        )=>{
+            if (state){
+                Message.success('登陆成功');
+                SetLoggedInState(true);
+                router.push('/dashboard')
+            } else {
+                Message.success(text);
+            }
+        })
+        .finally(()=>{
+            setLoading(false);
+        })
+    }
+    return (
+        <form>
+            <Card className='w-full'>
+                <CardBody>
+                    <div className='space-y-5'>
+                        <div className='space-y-5'>
+                            <Input
+                                label={'请输入手机号'}
+                                placeholder={'请输入手机号'}
+                                isClearable
+                                value={account}
+                                onValueChange={setAccount}
+                                className='w-full'
+                            />
+                            <Login password={password} setPassword={setPassword} />
+                            <div className="space-x-2">
+                                <Link href={'/authenticate/register'} className="text-primary-500 text-sm">
+                                    点击注册
+                                </Link>
+                            </div>
+                        </div>
+                        <Checkbox isSelected={policy} onValueChange={setPolicy}>
+                            登录或注册即代表同意服务条款
+                        </Checkbox>
+                    </div>
+                </CardBody>
+                <CardFooter className='px-5'>
+                    <Button 
+                        color={(account.length && policy) ? 'primary' : 'default'}
+                        isDisabled={!policy}
+                        onClick={login}
+                        isLoading={loading}
+                        type='submit'
+                    >
+                        登录
+                    </Button>
+                </CardFooter>
+            </Card>
+        </form>
+    )
+}