2024-02-23 16:31:17 +08:00
6 changed files with 278 additions and 52 deletions
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -1,6 +1,7 @@
 import { PRODUCTION_NAME } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
-import { getLoginStatus } from '@/util/auth'
+import { getLoginStatus, getVerifyStatus_async } from '@/util/auth'
+import { Navigate } from 'react-router'

 const AuthRoute = () => {
    const matches = useMatches()
@@ -9,18 +10,25 @@ const AuthRoute = () => {
    const location = useLocation()
    const outlet = useOutlet()
    const isLogin = getLoginStatus()
+    const isVerify = getVerifyStatus_async()

    return useMemo(() => {
        document.title = `${handle?.titlePrefix ?? ''}${
            handle?.title ? handle?.title : PRODUCTION_NAME
        }${handle?.titlePostfix ?? ''}`
-        if (matches.some(({ handle }) => (handle as RouteHandle)?.auth) && !isLogin) {
+
+        if (matches.some(({ handle }) => (handle as RouteHandle)?.auth)) {
+            if (!isLogin) {
                return (
                    <Navigate
                        to={getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)}
                    />
                )
            }
+            if (isVerify === false && lastMatch.pathname !== '/verify') {
+                return <Navigate to={'/verify'} />
+            }
+        }
        if (isLogin && lastMatch.pathname === '/login') {
            return <Navigate to={'/'} />
        }
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -1,4 +1,5 @@
 export const URL_REGISTER = '/register'
+export const URL_RESEND = '/resend'
 export const URL_VERIFY = '/verify'
 export const URL_LOGIN = '/login'
 export const URL_TOKEN = '/token'
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -77,6 +77,7 @@ interface LoginParam {
 interface UserWithPowerInfoVo {
    id: string
    username: string
+    verified: boolean
    locking: boolean
    expiration: string
    credentialsExpiration: string
@@ -97,6 +98,7 @@ interface UserWithPowerInfoVo {
 interface UserWithRoleInfoVo {
    id: string
    username: string
+    verify: string
    locking: boolean
    expiration: string
    credentialsExpiration: string
--- a/src/pages/Sign.tsx
+++ b/src/pages/Sign.tsx
@@ -3,27 +3,43 @@ import { useNavigate } from 'react-router'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/sign.scss'
 import {
+    COLOR_BACKGROUND,
    DATABASE_DUPLICATE_KEY,
+    PERMISSION_ACCOUNT_NEED_INIT,
    PERMISSION_LOGIN_SUCCESS,
    PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
    PERMISSION_REGISTER_SUCCESS,
    PERMISSION_USER_DISABLE,
    PERMISSION_USERNAME_NOT_FOUND
 } from '@/constants/common.constants.ts'
-import { getLoginStatus, getUserInfo, setToken } from '@/util/auth'
+import { getLoginStatus, getUserInfo, requestUserInfo, setToken } from '@/util/auth'
 import { AppContext } from '@/App'
 import { utcToLocalTime } from '@/util/datetime'
 import { useUpdatedEffect } from '@/util/hooks'
-import { r_auth_login, r_auth_register } from '@/services/auth'
+import { r_auth_login, r_auth_register, r_auth_resend, r_auth_verify } from '@/services/auth'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
+import { getRedirectUrl } from '@/util/route.tsx'
+import { r_api_avatar_random_base64 } from '@/services/api/avatar.tsx'

 const SignUp: React.FC = () => {
+    const location = useLocation()
    const navigate = useNavigate()
-    const [searchParams] = useSearchParams()
    const [isSigningUp, setIsSigningUp] = useState(false)
    const [isFinish, setIsFinish] = useState(false)
+    const [isSending, setIsSending] = useState(false)
+
+    useUpdatedEffect(() => {
+        if (location.pathname !== '/register') {
+            return
+        }
+        if (getLoginStatus()) {
+            navigate(`/login${location.search}`, {
+                replace: true
+            })
+        }
+    }, [location.pathname])

    const handleOnFinish = (registerParam: RegisterParam) => {
        if (isSigningUp) {
@@ -39,9 +55,23 @@ const SignUp: React.FC = () => {
                const response = res.data
                switch (response.code) {
                    case PERMISSION_REGISTER_SUCCESS:
+                        void r_auth_login({
+                            account: registerParam.email,
+                            password: registerParam.password
+                        }).then((res_) => {
+                            const response_ = res_.data
+                            switch (response_.code) {
+                                case PERMISSION_LOGIN_SUCCESS:
+                                    setToken(response_.data?.token ?? '')
                                    void message.success('恭喜，您快要完成注册了')
                                    setIsFinish(true)
                                    break
+                                default:
+                                    void message.success('出错了，请稍后重试')
+                                    setIsSigningUp(false)
+                            }
+                        })
+                        break
                    case DATABASE_DUPLICATE_KEY:
                        void message.error('用户名或邮箱已被注册，请重试')
                        setIsSigningUp(false)
@@ -56,7 +86,26 @@ const SignUp: React.FC = () => {
            })
    }

-    const handleOnRetry = () => {}
+    const handleOnResend = () => {
+        if (isSending) {
+            return
+        }
+        setIsSending(true)
+        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
+        void r_auth_resend()
+            .then((res) => {
+                const response = res.data
+                message.destroy('sending')
+                if (response.success) {
+                    void message.success('已发送验证邮件，请查收')
+                } else {
+                    void message.error('出错了，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsSending(false)
+            })
+    }

    return (
        <div className={'sign-up'}>
@@ -153,22 +202,15 @@ const SignUp: React.FC = () => {
                        ) : (
                            <div className={'retry'}>
                                我们发送了一封包含激活账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
-                                <a onClick={handleOnRetry}>重新发送</a>
+                                <a onClick={handleOnResend}>重新发送</a>
                            </div>
                        )}

-                        <div className={'footer'}>
+                        <div className={'footer'} hidden={isFinish}>
                            已有账号？
                            <a
                                onClick={() =>
-                                    navigate(
-                                        `/login${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { replace: true }
-                                    )
+                                    navigate(`/login${location.search}`, { replace: true })
                                }
                            >
                                登录
@@ -182,23 +224,201 @@ const SignUp: React.FC = () => {
 }

 const Verify: React.FC = () => {
+    const { refreshRouter } = useContext(AppContext)
    const navigate = useNavigate()
    const [searchParams] = useSearchParams()
+    const [hasCode, setHasCode] = useState(true)
+    const [isValid, setIsValid] = useState(true)
+    const [isSending, setIsSending] = useState(false)
+    const [isGettingAvatar, setIsGettingAvatar] = useState(false)
+    const [avatar, setAvatar] = useState('')
+    const [isVerifying, setIsVerifying] = useState(false)

    useUpdatedEffect(() => {
+        if (location.pathname !== '/verify') {
+            return
+        }
+
        if (!getLoginStatus()) {
-            navigate(`/login${searchParams.toString() ? `?${searchParams.toString()}` : ''}`, {
+            navigate(getRedirectUrl('/login', `${location.pathname}${location.search}`), {
                replace: true
            })
+            return
        }
-    }, [])

-    return <></>
+        const code = searchParams.get('code')
+
+        if (!code) {
+            setHasCode(false)
+            return
+        }
+        void r_auth_verify({ code })
+            .then((res) => {
+                const response = res.data
+                if (response.code === PERMISSION_ACCOUNT_NEED_INIT) {
+                    void getUserInfo().then((user) => {
+                        setAvatar(user.userInfo.avatar)
+                    })
+                } else {
+                    setIsValid(false)
+                }
+            })
+            .catch(() => {
+                setIsValid(false)
+            })
+    }, [location.pathname])
+
+    const handleOnResend = () => {
+        if (isSending) {
+            return
+        }
+        setIsSending(true)
+        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
+        void r_auth_resend()
+            .then((res) => {
+                const response = res.data
+                message.destroy('sending')
+                if (response.success) {
+                    void message.success('已发送验证邮件，请查收')
+                } else {
+                    void message.error('出错了，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsSending(false)
+            })
+    }
+
+    const handleOnChangeAvatar = () => {
+        if (isGettingAvatar) {
+            return
+        }
+        setIsGettingAvatar(true)
+        void r_api_avatar_random_base64()
+            .then((res) => {
+                const response = res.data
+                if (response.success) {
+                    response.data?.base64 && setAvatar(response.data.base64)
+                }
+            })
+            .finally(() => {
+                setIsGettingAvatar(false)
+            })
+    }
+
+    const handleOnFinish = (verifyParam: VerifyParam) => {
+        if (isVerifying) {
+            return
+        }
+        setIsVerifying(true)
+
+        void r_auth_verify({
+            code: searchParams.get('code') ?? '',
+            avatar,
+            nickname: verifyParam.nickname
+        }).then((res) => {
+            const response = res.data
+            if (response.success) {
+                void message.success('恭喜你，完成了')
+                setTimeout(() => {
+                    void requestUserInfo().then(() => {
+                        refreshRouter()
+                        if (searchParams.has('redirect')) {
+                            navigate(searchParams.get('redirect') ?? '/')
+                        } else {
+                            navigate('/')
+                        }
+                    })
+                }, 1500)
+            } else {
+                void message.error('出错了，请稍后重试')
+                setIsVerifying(false)
+            }
+        })
+    }
+
+    return (
+        <>
+            <div className={'verify'}>
+                <FitCenter>
+                    <FlexBox>
+                        <div className={'title'}>
+                            <div className={'primary'}>验证账号</div>
+                            <div className={'secondary'}>Verify account</div>
+                        </div>
+                        <AntdForm className={'form'} onFinish={handleOnFinish}>
+                            <div className={'verify-process'} hidden={!hasCode || !isValid}>
+                                <div
+                                    style={{
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        marginBottom: 20
+                                    }}
+                                >
+                                    <AntdTooltip title={'点击获取新头像'}>
+                                        <AntdAvatar
+                                            src={
+                                                <img
+                                                    src={`data:image/png;base64,${avatar}`}
+                                                    alt={'avatar'}
+                                                />
+                                            }
+                                            size={100}
+                                            style={{
+                                                background: COLOR_BACKGROUND,
+                                                cursor: 'pointer'
+                                            }}
+                                            onClick={handleOnChangeAvatar}
+                                        />
+                                    </AntdTooltip>
+                                </div>
+                                <AntdForm.Item hidden name={'avatar'}>
+                                    <AntdInput value={avatar} />
+                                </AntdForm.Item>
+                                <AntdForm.Item
+                                    name={'nickname'}
+                                    rules={[
+                                        { required: true, message: '请输入昵称' },
+                                        { min: 3, message: '昵称至少为3个字符' }
+                                    ]}
+                                >
+                                    <AntdInput
+                                        disabled={isVerifying}
+                                        maxLength={20}
+                                        showCount
+                                        addonBefore={'昵称'}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item>
+                                    <AntdButton
+                                        style={{ width: '100%' }}
+                                        type={'primary'}
+                                        htmlType={'submit'}
+                                        disabled={isVerifying}
+                                        loading={isVerifying}
+                                    >
+                                        确&ensp;&ensp;&ensp;&ensp;定
+                                    </AntdButton>
+                                </AntdForm.Item>
+                            </div>
+                            <div className={'no-code'} hidden={hasCode}>
+                                在继续使用之前，我们需要确定您的电子邮箱地址的有效性，请点击&nbsp;
+                                <a onClick={handleOnResend}>发送验证邮件</a>
+                            </div>
+                            <div className={'not-valid'} hidden={!hasCode || isValid}>
+                                此链接有误或已失效，请点击&nbsp;
+                                <a onClick={handleOnResend}>重新发送验证邮件</a>
+                            </div>
+                        </AntdForm>
+                    </FlexBox>
+                </FitCenter>
+            </div>
+        </>
+    )
 }

 const Forget: React.FC = () => {
    const navigate = useNavigate()
-    const [searchParams] = useSearchParams()
    const [isLoading, setIsLoading] = useState(false)
    const [isFinish, setIsFinish] = useState(false)

@@ -257,14 +477,7 @@ const Forget: React.FC = () => {
                            找到了？
                            <a
                                onClick={() =>
-                                    navigate(
-                                        `/login${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { replace: true }
-                                    )
+                                    navigate(`/login${location.search}`, { replace: true })
                                }
                            >
                                登录
@@ -393,14 +606,7 @@ const SignIn: React.FC = () => {
                            <AntdCheckbox disabled={isSigningIn}>记住密码</AntdCheckbox>
                            <a
                                onClick={() => {
-                                    navigate(
-                                        `/forget${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { replace: true }
-                                    )
+                                    navigate(`/forget${location.search}`, { replace: true })
                                }}
                            >
                                忘记密码？
@@ -421,14 +627,7 @@ const SignIn: React.FC = () => {
                            还没有账号？
                            <a
                                onClick={() =>
-                                    navigate(
-                                        `/register${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { replace: true }
-                                    )
+                                    navigate(`/register${location.search}`, { replace: true })
                                }
                            >
                                注册
--- a/src/services/auth.tsx
+++ b/src/services/auth.tsx
@@ -1,8 +1,16 @@
-import { URL_LOGIN, URL_LOGOUT, URL_REGISTER, URL_VERIFY } from '@/constants/urls.constants'
+import {
+    URL_LOGIN,
+    URL_LOGOUT,
+    URL_REGISTER,
+    URL_RESEND,
+    URL_VERIFY
+} from '@/constants/urls.constants'
 import request from '@/services'

 export const r_auth_register = (param: RegisterParam) => request.post(URL_REGISTER, param)

+export const r_auth_resend = () => request.post(URL_RESEND)
+
 export const r_auth_verify = (param: VerifyParam) => request.post(URL_VERIFY, param)

 export const r_auth_login = (param: LoginParam) => request.post<TokenVo>(URL_LOGIN, param)
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -68,6 +68,14 @@ export const getLoginStatus = () => {
    return getLocalStorage(STORAGE_TOKEN_KEY) !== null
 }

+export const getVerifyStatus_async = () => {
+    if (getLocalStorage(STORAGE_USER_INFO_KEY) === null) {
+        return undefined
+    }
+    return (JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as UserWithPowerInfoVo)
+        .verified
+}
+
 export const getUserInfo = async (): Promise<UserWithPowerInfoVo> => {
    if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) {
        return new Promise((resolve) => {