From 27a41944c6bc3b7937be6275c533e27694053b62 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Sun, 24 Dec 2023 23:44:51 +0800 Subject: [PATCH] Finish register in Sign --- src/AuthRoute.tsx | 22 ++- src/constants/urls.constants.ts | 1 + src/global.d.ts | 2 + src/pages/Sign.tsx | 287 +++++++++++++++++++++++++++----- src/services/auth.tsx | 10 +- src/util/auth.tsx | 8 + 6 files changed, 278 insertions(+), 52 deletions(-) diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx index 4fe0f43..2019960 100644 --- 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,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)) { + if (!isLogin) { + return ( + + ) + } + if (isVerify === false && lastMatch.pathname !== '/verify') { + return + } } if (isLogin && lastMatch.pathname === '/login') { return diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts index 4795746..00c4129 100644 --- 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' diff --git a/src/global.d.ts b/src/global.d.ts index 53d6df0..f3b852c 100644 --- 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 diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx index 6ba1a08..b72a083 100644 --- 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,8 +55,22 @@ const SignUp: React.FC = () => { const response = res.data switch (response.code) { case PERMISSION_REGISTER_SUCCESS: - void message.success('恭喜，您快要完成注册了') - setIsFinish(true) + 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('用户名或邮箱已被注册，请重试') @@ -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 (
@@ -153,22 +202,15 @@ const SignUp: React.FC = () => { ) : (
我们发送了一封包含激活账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。 - 重新发送 + 重新发送
)} -
+