Finish register in Sign

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,17 +10,24 @@ 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) {
+
-            return (
+        if (matches.some(({ handle }) => (handle as RouteHandle)?.auth)) {
-                <Navigate
+            if (!isLogin) {
-                    to={getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)}
+                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={'/'} />

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'

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

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,8 +55,22 @@ const SignUp: React.FC = () => {
                 const response = res.data
                 switch (response.code) {
                     case PERMISSION_REGISTER_SUCCESS:
-                        void message.success('恭喜，您快要完成注册了')
+                        void r_auth_login({
-                        setIsFinish(true)
+                            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('用户名或邮箱已被注册，请重试')
@@ -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(
+                                    navigate(`/login${location.search}`, { replace: true })
-                                        `/login${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { 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(
+                                    navigate(`/login${location.search}`, { replace: true })
-                                        `/login${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { replace: true }
-                                    )
                                 }
                             >
                                 登录
@@ -393,14 +606,7 @@ const SignIn: React.FC = () => {
                             <AntdCheckbox disabled={isSigningIn}>记住密码</AntdCheckbox>
                             <a
                                 onClick={() => {
-                                    navigate(
+                                    navigate(`/forget${location.search}`, { replace: true })
-                                        `/forget${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { replace: true }
-                                    )
                                 }}
                             >
                                 忘记密码？
@@ -421,14 +627,7 @@ const SignIn: React.FC = () => {
                             还没有账号？
                             <a
                                 onClick={() =>
-                                    navigate(
+                                    navigate(`/register${location.search}`, { replace: true })
-                                        `/register${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { replace: true }
-                                    )
                                 }
                             >
                                 注册

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)

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) => {