fix/use auth provider

app/authenticate/components/check-code.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useState } from "react";
+import IOC from "@/providers";
+import { Button } from "@nextui-org/react";
+import CountDown from "./count-down";
+
+const CheckCode = (props: {type: 'email' | 'phone' | 'unknown', userInput: string}) => {
+    const {type} = props;
+    const [cd, setCD] = useState(0)
+    const onCountdownFinish = () => {
+        setCD(0)
+    }
+    const getCode = () => {
+        if (type === 'email'){
+            IOC.user.getCheckCodeByEmail(props.userInput)
+            .then((val)=>{
+                setCD(val.data.cd + 1);
+            })
+            .catch((err)=>{
+                console.log(err);
+                setCD(60 * 1000);
+            })
+        }
+        if (type === 'phone'){
+            IOC.user.getCheckCodeByPhone(props.userInput)
+            .then((val)=>{
+                setCD(val.data.cd + 1);
+                console.log(val.data.cd)
+            })
+            .catch(()=>{
+                setCD(60 * 1000);
+            })
+        }
+    }
+    return (
+        <Button onClick={getCode} isDisabled={cd > 0} size="lg" className="flex gap-2 flex-grow-0 flex-shrink-0 basis-auto px-2 w-32 break-words">
+            {
+                cd > 0 ? <CountDown countDown={cd} onFinish={onCountdownFinish} /> : '发送验证码'
+            }
+        </Button>
+    )
+}
+
+export default CheckCode;

app/authenticate/components/count-down.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { useEffect, useRef, useState } from "react";
+import { useCountDown } from "../hooks"
+
+const CountDown = (
+    props: {countDown: number, onFinish: () => void}
+) => {
+    const [cd, setCD] = useState(
+        Number((props.countDown / 1000).toFixed())
+    );
+    const [time, start] = useCountDown(cd);
+    useEffect(()=>{
+        start();
+    },[])
+    useEffect(()=>{
+        if (time === 0){
+            props.onFinish();
+        }
+    },[time, props])
+    return (
+        <span>{time}秒后重新获取</span>
+    )
+}
+
+export default CountDown;

app/authenticate/components/password-robustness-list.tsx

@@ -0,0 +1,49 @@
+import { IoCheckmark, IoCloseSharp } from "react-icons/io5";
+
+const PasswordRobustnessList = (props: {active: boolean[]}) => {
+    const labels = [
+        {
+            key: 'min',
+            label: '至少8位',
+            defaultShow: true
+        },
+        {
+            key: 'fuck',
+            label: '大写字母、小写字母、数字、特殊符号中至少包含两种',
+            defaultShow: true
+        },
+        {
+            key: 'max',
+            label: '至多30位',
+            defaultShow: false
+        }
+    ]
+    return (
+        <ul className="w-full">
+            {
+                labels.map(({label, key, defaultShow}, idx)=>{
+                    let show = defaultShow;
+                    if (idx === labels.length-1){
+                        show = !props.active[idx];
+                    }
+                    return show && (
+                        <li
+                                key={key}
+                                className={`
+                                    flex items-center transition
+                                    ${props.active[idx] ? 'text-green-600 dark:text-green-500' : 'text-red-600 dark:text-red-500'}`
+                                }
+                            >
+                            {
+                                props.active[idx] ?  <IoCheckmark className="inline text-xl" /> : <IoCloseSharp className="inline text-xl" />
+                            }
+                            <span>{label}</span>
+                        </li>
+                    )
+                })
+            }
+        </ul>
+    )
+}
+
+export default PasswordRobustnessList

app/authenticate/hooks/useButton.ts

@@ -1,5 +1,5 @@
-import { SetStateAction, useEffect, useState } from "react";
-import { Colors, PageType } from "../page";
+import { useEffect, useState } from "react";
+import { PageType } from "../page";
 
 export const useButtonMessage = (pageType: PageType, initMessage: string) => {
     const [buttonMessage, setButtonMessage] = useState(initMessage);
@@ -20,41 +20,75 @@ export const useButtonMessage = (pageType: PageType, initMessage: string) => {
         setButtonMessage
     }
 }
+
 export const useDisabled = (
-    policyState: boolean,
-    userName: string,
-    password: string,
-    confirmPassword: string,
-    checkCode: string,
-    valide: boolean
-):[boolean,React.Dispatch<SetStateAction<boolean>>] => {
-    const [disabled, setDisabled] = useState<boolean>(
-        !policyState ||
-        (userName.length > 30 || userName.length < 2) ||
-        password !== confirmPassword
-    )
-    useEffect(()=>{
-        setDisabled(!policyState ||
-        (password !== confirmPassword) || !valide || 
-        checkCode.length !== 0) 
-    }, [policyState, userName.length, password, confirmPassword, valide, checkCode])
-    return [disabled, setDisabled]
-}
-export const useButtonColor = (
-    disabled: boolean
+    props: {
+        policyState: boolean,
+        userName: string,
+        password: string,
+        confirmPassword: string,
+        checkCode: string,
+        valide: boolean,
+        passwordRobustness: boolean[],
+        pageType: PageType,
+        isEmail: boolean,
+        isPhone: boolean,
+        account: string
+    },
 ) => {
-    const [buttonColor, setButtonColor] = useState<Colors>('default');
+    const {
+        policyState,
+        pageType,
+        userName,
+        password,
+        confirmPassword,
+        checkCode,
+        valide,
+        passwordRobustness,
+        isEmail,
+        isPhone,
+        account
+    } = props;
+    const [disabled, setDisabled] = useState(true);
     useEffect(()=>{
-        if (
-            !disabled
-        ){
-            setButtonColor('primary')
-            return;
+        if (pageType === 'wait-check'){
+            setDisabled(
+                !policyState || account.length === 0
+            )
         }
-        setButtonColor('default')
-    }, [disabled])
-    return {
-        buttonColor,
-        setButtonColor
-    }
+        if (pageType === 'login'){
+            setDisabled(!policyState || password.length === 0 || account.length === 0);
+        }
+        if (pageType === 'register') {
+            setDisabled(
+                !(
+                    policyState && password === confirmPassword && valide && checkCode.length > 0 && passwordRobustness.every((v) => v) && isPhone
+                )
+            )
+        }
+    }, [checkCode, confirmPassword, isEmail, isPhone, pageType, password, passwordRobustness, policyState, valide, userName, account])
+    return {disabled, setDisabled};
+}
+
+
+export const useButton = (props: {
+        policyState: boolean,
+        userName: string,
+        password: string,
+        confirmPassword: string,
+        checkCode: string,
+        valide: boolean,
+        passwordRobustness: boolean[],
+        pageType: PageType,
+        isEmail: boolean,
+        isPhone: boolean,
+        account: string
+}) => {
+    const {disabled} = useDisabled(props);
+    const [color, setColor] = useState<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined>(disabled ? 'default' : 'primary');
+    const {buttonMessage} = useButtonMessage(props.pageType, '下一步')
+    useEffect(()=>{
+        setColor(disabled ? 'default' : 'primary')
+    }, [disabled]);
+    return {color,disabled, buttonMessage};
 }

app/authenticate/hooks/useCountDown.ts

@@ -1,27 +1,30 @@
-import { SetStateAction, useEffect, useState } from "react"
+import React, { useState, useEffect } from "react";
 
-export const useCountDown = (
-    cd: number
-):[string, React.Dispatch<SetStateAction<string>>] => {
-    let _cd = cd >= 1000 ? Number((cd/1000).toFixed()) : cd;
-    const [time, setTime] = useState('');
-    let timer:any = null;
-    const dealData = () => {
-        if (_cd < 0){
-            setTime('');
-            return timer && clearTimeout(timer);
-        }
-        setTime(`${_cd}`)
-        _cd --;
-        timer = setTimeout(()=>{
-            dealData()
-        },1000)
+export function useCountDown(ms: number):[number, ()=>void,()=>void,()=>void] {
+  const [time, setTime] = useState(ms);
+  const [isRunning, setIsRunning] = useState(false);
+  useEffect(() => {
+    if (isRunning && time > 0) {
+      const timerId = setTimeout(() => {
+        setTime(time - 1);
+      }, 1000);
+      return () => {
+        clearTimeout(timerId);
+      };
     }
-    useEffect(()=>{
-        dealData();
-        return ()=>{
-            timer && clearTimeout(timer)
-        }
-    },[]);
-    return [time,setTime]
-}
+    else {
+      setIsRunning(false);
+    }
+  }, [isRunning, time]);
+  const start = () => {
+    setIsRunning(true)
+  }
+  const pause = ()=>{
+    setIsRunning(false);
+  }
+  const reset = () => {
+    setTime(ms);
+    setIsRunning(false);
+  }
+  return [time, start, pause, reset];
+}