FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Optimize register. Add turnstile captcha to login.

Browse Source
This commit is contained in:
Fat Snake
2023-12-29 17:33:37 +08:00
parent 0b8df09336
commit 837ea40bf1
9 changed files with 56 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development
View File

@@ -1,2 +1,3 @@
VITE_API_URL=http://localhost:8080
VITE_API_TOKEN_URL=${VITE_API_URL}/token
VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

1
.env.production
View File

@@ -1,2 +1,3 @@
VITE_API_URL=${PRODUCT_API_URL}
VITE_API_TOKEN_URL=${VITE_API_URL}/token
VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

1
.env.testing
View File

@@ -1,3 +1,4 @@
NODE_ENV=development
VITE_API_URL=${TEST_API_URL}
VITE_API_TOKEN_URL=${VITE_API_URL}/token
VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

10
package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@ant-design/icons": "^5.2.6",
"@marsidev/react-turnstile": "^0.4.0",
"antd": "^5.12.1",
"axios": "^1.6.2",
"dayjs": "^1.11.10",
@@ -1231,6 +1232,15 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@marsidev/react-turnstile": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.4.0.tgz",
"integrity": "sha512-U0lwTWQhP04AnIdWEbLpF/phpqtblNbrnE4yJMdvGyeOZOTmuHW3wB+V8X+BO55pTXZitp2GgJsrGkbUjwJIeQ==",
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

1
package.json
View File

@@ -15,6 +15,7 @@
},
"dependencies": {
"@ant-design/icons": "^5.2.6",
"@marsidev/react-turnstile": "^0.4.0",
"antd": "^5.12.1",
"axios": "^1.6.2",
"dayjs": "^1.11.10",

3
src/constants/common.constants.ts
View File

@@ -29,6 +29,7 @@ export const SYSTEM_ERROR = 10050
export const SYSTEM_TIMEOUT = 10051
export const SYSTEM_REQUEST_ILLEGAL = 10052
export const SYSTEM_ARGUMENT_NOT_VALID = 10053
export const SYSTEM_INVALID_CAPTCHA_CODE = 10054
export const PERMISSION_LOGIN_SUCCESS = 20000
export const PERMISSION_PASSWORD_CHANGE_SUCCESS = 20001
@@ -73,3 +74,5 @@ export const DATABASE_NO_RECORD_FOUND = 30052
export const API_AVATAR_SUCCESS = 50100
export const API_AVATAR_ERROR = 50150
export const H_CAPTCHA_SITE_KEY = import.meta.env.VITE_TURNSTILE_SITE_KEY

2
src/global.d.ts vendored
View File

@@ -4,6 +4,7 @@
interface ImportMetaEnv {
readonly VITE_API_URL: string
readonly VITE_API_TOKEN_URL: string
readonly VITE_TURNSTILE_SITE_KEY: string
}
interface ImportMeta {
@@ -81,6 +82,7 @@ interface RetrieveParam {
interface LoginParam {
account: string
password: string
captchaCode: string
}
interface UserWithPowerInfoVo {

47
src/pages/Sign.tsx
View File

@@ -1,10 +1,12 @@
import React, { useState } from 'react'
import { useNavigate } from 'react-router'
import Icon from '@ant-design/icons'
import { Turnstile } from '@marsidev/react-turnstile'
import '@/assets/css/pages/sign.scss'
import {
COLOR_BACKGROUND,
DATABASE_DUPLICATE_KEY,
H_CAPTCHA_SITE_KEY,
PERMISSION_ACCOUNT_NEED_INIT,
PERMISSION_FORGET_SUCCESS,
PERMISSION_LOGIN_SUCCESS,
@@ -15,7 +17,8 @@ import {
PERMISSION_RETRIEVE_SUCCESS,
PERMISSION_USER_DISABLE,
PERMISSION_USER_NOT_FOUND,
PERMISSION_USERNAME_NOT_FOUND
PERMISSION_USERNAME_NOT_FOUND,
SYSTEM_INVALID_CAPTCHA_CODE
} from '@/constants/common.constants.ts'
import { getLoginStatus, getUserInfo, requestUserInfo, setToken } from '@/util/auth'
import { AppContext } from '@/App'
@@ -67,23 +70,10 @@ 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 ?? '')
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)
@@ -632,6 +622,11 @@ const SignIn: React.FC = () => {
const navigate = useNavigate()
const [searchParams] = useSearchParams()
const [isSigningIn, setIsSigningIn] = useState(false)
const [captchaCode, setCaptchaCode] = useState('')
const handleOnTurnstileSuccess = (token: string) => {
setCaptchaCode(token)
}
const handleOnFinish = (loginParam: LoginParam) => {
if (isSigningIn) {
@@ -639,7 +634,17 @@ const SignIn: React.FC = () => {
}
setIsSigningIn(true)
void r_auth_login({ account: loginParam.account, password: loginParam.password })
if (!captchaCode) {
void message.warning('请先通过验证')
setIsSigningIn(false)
return
}
void r_auth_login({
account: loginParam.account,
password: loginParam.password,
captchaCode
})
.then((res) => {
const response = res.data
const { code, data } = response
@@ -696,6 +701,9 @@ const SignIn: React.FC = () => {
)
setIsSigningIn(false)
break
case SYSTEM_INVALID_CAPTCHA_CODE:
void message.error('验证码有误，请刷新重试')
break
default:
void message.error(
<>
@@ -739,6 +747,13 @@ const SignIn: React.FC = () => {
disabled={isSigningIn}
/>
</AntdForm.Item>
<AntdForm.Item>
<Turnstile
siteKey={H_CAPTCHA_SITE_KEY}
options={{ theme: 'light' }}
onSuccess={handleOnTurnstileSuccess}
/>
</AntdForm.Item>
<FlexBox direction={'horizontal'} className={'addition'}>
<AntdCheckbox disabled={isSigningIn}>记住密码</AntdCheckbox>
<a

2
src/services/auth.tsx
View File

@@ -9,7 +9,7 @@ import {
} from '@/constants/urls.constants'
import request from '@/services'
export const r_auth_register = (param: RegisterParam) => request.post(URL_REGISTER, param)
export const r_auth_register = (param: RegisterParam) => request.post<TokenVo>(URL_REGISTER, param)
export const r_auth_resend = () => request.post(URL_RESEND)