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 = () => {
) : (
我们发送了一封包含激活账号链接的邮件到您的邮箱里,如未收到,可能被归为垃圾邮件,请仔细检查。
-
重新发送
+
重新发送
)}
-
+
已有账号?
- 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 (
+ <>
+
+
+
+
+
验证账号
+
Verify account
+
+
+
+
+
+
+ }
+ size={100}
+ style={{
+ background: COLOR_BACKGROUND,
+ cursor: 'pointer'
+ }}
+ onClick={handleOnChangeAvatar}
+ />
+
+
+
+
+
+
+
+
+
+
+ 确 定
+
+
+
+
+ 在继续使用之前,我们需要确定您的电子邮箱地址的有效性,请点击
+
发送验证邮件
+
+
+
+
+
+
+ >
+ )
}
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 = () => {
找到了?
- navigate(
- `/login${
- searchParams.toString()
- ? `?${searchParams.toString()}`
- : ''
- }`,
- { replace: true }
- )
+ navigate(`/login${location.search}`, { replace: true })
}
>
登录
@@ -393,14 +606,7 @@ const SignIn: React.FC = () => {
记住密码
{
- navigate(
- `/forget${
- searchParams.toString()
- ? `?${searchParams.toString()}`
- : ''
- }`,
- { replace: true }
- )
+ navigate(`/forget${location.search}`, { replace: true })
}}
>
忘记密码?
@@ -421,14 +627,7 @@ const SignIn: React.FC = () => {
还没有账号?
- navigate(
- `/register${
- searchParams.toString()
- ? `?${searchParams.toString()}`
- : ''
- }`,
- { replace: true }
- )
+ navigate(`/register${location.search}`, { replace: true })
}
>
注册
diff --git a/src/services/auth.tsx b/src/services/auth.tsx
index 8cf2075..6348b95 100644
--- 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(URL_LOGIN, param)
diff --git a/src/util/auth.tsx b/src/util/auth.tsx
index ea138c3..75d0a9e 100644
--- 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 => {
if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) {
return new Promise((resolve) => {