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

Add register to sign page(temp)

Browse Source
This commit is contained in:
Fat Snake
2023-12-22 17:57:32 +08:00
parent 85aba29ced
commit bbc669ba3e
11 changed files with 247 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/assets/css/pages/login-.scss
View File

@@ -1,65 +0,0 @@
@use "@/assets/css/constants" as constants;
.login-background {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
background-color: #B3E5FC;
}
.login-box {
display: flex;
width: 800px;
height: 450px;
background-color: #448AFF;
}
.login-box-left {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
flex: 2;
}
.login-box-left-text {
font-size: 3rem;
color: constants.$origin-color;
font-weight: bold;
> div:last-child {
font-size: 1.8rem;
font-weight: normal;
}
}
.login-box-right {
position: relative;
height: 100%;
flex: 3;
background-color: constants.$origin-color;
}
.login-from-text {
position: absolute;
top: 60px;
left: 40px;
font-weight: bold;
font-size: 2rem;
}
.login-from {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30px;
width: 100%;
height: 100%;
}
.login-from-item {
width: 80%;
}

21
src/assets/css/pages/sign.scss
View File

@@ -68,6 +68,10 @@
.form {
width: 300px;
button {
font-weight: bolder;
}
.addition {
justify-content: space-between;
margin-bottom: 14px;
@@ -87,13 +91,22 @@
}
}
.sign-up {
.sign-up, .sign-in, .forget {
.footer {
a {
font-weight: bolder;
}
}
}
.sign-in {
.sign-up, .forget {
.retry {
margin-bottom: 16px;
a {
font-weight: bolder;
}
}
}
}

6
src/components/common/sidebar/SidebarFooter.tsx
View File

@@ -2,7 +2,8 @@ import React from 'react'
import Icon from '@ant-design/icons'
import { COLOR_ERROR } from '@/constants/common.constants'
import { getRedirectUrl } from '@/util/route'
import { getLoginStatus, getNickname, logout } from '@/util/auth'
import { getLoginStatus, getNickname, removeToken } from '@/util/auth'
import { r_auth_logout } from '@/services/auth'
const SidebarFooter: React.FC = () => {
const matches = useMatches()
@@ -26,7 +27,8 @@ const SidebarFooter: React.FC = () => {
}
setExiting(true)
void logout().finally(() => {
void r_auth_logout().finally(() => {
removeToken()
notification.info({
message: '已退出登录',
icon: <Icon component={IconFatwebExit} style={{ color: COLOR_ERROR }} />

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

@@ -34,6 +34,9 @@ export const PERMISSION_LOGIN_SUCCESS = 20000
export const PERMISSION_PASSWORD_CHANGE_SUCCESS = 20001
export const PERMISSION_LOGOUT_SUCCESS = 20002
export const PERMISSION_TOKEN_RENEW_SUCCESS = 20003
export const PERMISSION_REGISTER_SUCCESS = 20004
export const PERMISSION_RESEND_SUCCESS = 20005
export const PERMISSION_VERIFY_SUCCESS = 20006
export const PERMISSION_UNAUTHORIZED = 20050
export const PERMISSION_USERNAME_NOT_FOUND = 20051
@@ -47,6 +50,9 @@ export const PERMISSION_OLD_PASSWORD_NOT_MATCH = 20058
export const PERMISSION_LOGOUT_FAILED = 20059
export const PERMISSION_TOKEN_ILLEGAL = 20060
export const PERMISSION_TOKEN_HAS_EXPIRED = 20061
export const PERMISSION_NO_VERIFICATION_REQUIRED = 20062
export const PERMISSION_VERIFY_CODE_ERROR_OR_EXPIRED = 20063
export const PERMISSION_ACCOUNT_NEED_INIT = 20064
export const DATABASE_SELECT_SUCCESS = 30000
export const DATABASE_SELECT_FAILED = 30005

2
src/constants/urls.constants.ts
View File

@@ -1,3 +1,5 @@
export const URL_REGISTER = '/register'
export const URL_VERIFY = '/verify'
export const URL_LOGIN = '/login'
export const URL_TOKEN = '/token'
export const URL_LOGOUT = '/logout'

22
src/global.d.ts vendored
View File

@@ -57,6 +57,23 @@ interface TokenVo {
token: string
}
interface RegisterParam {
username: string
email: string
password: string
}
interface VerifyParam {
code: string
nickname?: string
avatar?: string
}
interface LoginParam {
account: string
password: string
}
interface UserWithPowerInfoVo {
id: string
username: string
@@ -148,11 +165,6 @@ interface GroupVo {
updateTime: string
}
interface LoginForm {
account: string
password: string
}
interface PageVo<T> {
current: number
pages: number

156
src/pages/Login-.tsx
View File

@@ -1,156 +0,0 @@
import React from 'react'
import '@/assets/css/pages/login-.scss'
import {
PERMISSION_LOGIN_SUCCESS,
PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
PERMISSION_USER_DISABLE,
PERMISSION_USERNAME_NOT_FOUND
} from '@/constants/common.constants'
import { utcToLocalTime } from '@/util/datetime'
import { getUserInfo, login, setToken } from '@/util/auth'
import { AppContext } from '@/App'
const Login: React.FC = () => {
const { refreshRouter } = useContext(AppContext)
const [messageApi, contextHolder] = message.useMessage()
const navigate = useNavigate()
const [searchParams] = useSearchParams()
const [isLoggingIn, setIsLoggingIn] = useState(false)
const onFinish = (values: LoginForm) => {
setIsLoggingIn(true)
void login(values.account, values.password)
.then((value) => {
const res = value.data
const { code, data } = res
switch (code) {
case PERMISSION_LOGIN_SUCCESS:
setToken(data?.token ?? '')
void messageApi.success('登录成功')
setTimeout(() => {
void getUserInfo().then((user) => {
refreshRouter()
if (searchParams.has('redirect')) {
navigate(searchParams.get('redirect') ?? '/')
} else {
navigate('/')
}
notification.success({
message: '欢迎回来',
description: (
<>
<span>
你好 <strong>{user.userInfo.nickname}</strong>
</span>
<br />
<span>
最近登录：
{user.lastLoginTime
? `${utcToLocalTime(user.lastLoginTime)}【${
user.lastLoginIp
}】`
: '无'}
</span>
</>
),
placement: 'topRight'
})
})
}, 1500)
break
case PERMISSION_USERNAME_NOT_FOUND:
case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
void messageApi.error(
<>
<strong>账号</strong>或<strong>密码</strong>错误，请重试
</>
)
setIsLoggingIn(false)
break
case PERMISSION_USER_DISABLE:
void messageApi.error(
<>
该用户已被<strong>禁用</strong>
</>
)
setIsLoggingIn(false)
break
default:
void messageApi.error(
<>
<strong>服务器出错了</strong>
</>
)
setIsLoggingIn(false)
}
})
.catch(() => {
setIsLoggingIn(false)
})
}
return (
<>
{contextHolder}
<div className={'login-background'}>
<div className={'login-box'}>
<div className={'login-box-left'}>
<div className={'login-box-left-text'}>
<div>欢迎回来</div>
<div>Welcome back</div>
</div>
</div>
<div className={'login-box-right'}>
<div className={'login-from-text'}>
<span>登&ensp;录</span>
</div>
<AntdForm
name="login-form"
autoComplete="on"
onFinish={onFinish}
className={'login-from'}
>
<AntdForm.Item
className={'login-from-item'}
name={'account'}
rules={[{ required: true, message: '账号为空' }]}
>
<AntdInput
prefix={<UserOutlined />}
placeholder={'邮箱/用户名'}
disabled={isLoggingIn}
/>
</AntdForm.Item>
<AntdForm.Item
className={'login-from-item'}
name={'password'}
rules={[{ required: true, message: '密码为空' }]}
>
<AntdInput.Password
prefix={<LockOutlined />}
placeholder={'密码'}
disabled={isLoggingIn}
/>
</AntdForm.Item>
<AntdForm.Item className={'login-from-item'}>
<AntdButton
style={{ width: '100%' }}
type={'primary'}
htmlType={'submit'}
disabled={isLoggingIn}
loading={isLoggingIn}
>
登&ensp;&ensp;&ensp;&ensp;录
</AntdButton>
</AntdForm.Item>
</AntdForm>
</div>
</div>
</div>
</>
)
}
export default Login

225
src/pages/Sign.tsx
View File

@@ -1,43 +1,179 @@
import React, { useState } from 'react'
import '@/assets/css/pages/sign.scss'
import FitFullscreen from '@/components/common/FitFullscreen'
import FitCenter from '@/components/common/FitCenter'
import FlexBox from '@/components/common/FlexBox'
import { useNavigate } from 'react-router'
import Icon from '@ant-design/icons'
import { getUserInfo, login, setToken } from '@/util/auth.tsx'
import '@/assets/css/pages/sign.scss'
import {
DATABASE_DUPLICATE_KEY,
PERMISSION_LOGIN_SUCCESS,
PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
PERMISSION_REGISTER_SUCCESS,
PERMISSION_USER_DISABLE,
PERMISSION_USERNAME_NOT_FOUND
} from '@/constants/common.constants.ts'
import { AppContext } from '@/App.tsx'
import { utcToLocalTime } from '@/util/datetime.tsx'
import { useUpdatedEffect } from '@/util/hooks.tsx'
import { getLoginStatus, getUserInfo, 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 FitFullscreen from '@/components/common/FitFullscreen'
import FitCenter from '@/components/common/FitCenter'
import FlexBox from '@/components/common/FlexBox'
const SignUp: React.FC = () => {
const navigate = useNavigate()
const [searchParams] = useSearchParams()
const [isSigningUp, setIsSigningUp] = useState(false)
const [isFinish, setIsFinish] = useState(false)
const handleOnFinish = (registerParam: RegisterParam) => {
if (isSigningUp) {
return
}
setIsSigningUp(true)
void r_auth_register({
username: registerParam.username,
email: registerParam.email,
password: registerParam.password
})
.then((res) => {
const response = res.data
switch (response.code) {
case PERMISSION_REGISTER_SUCCESS:
void message.success('恭喜，您快要完成注册了')
setIsFinish(true)
break
case DATABASE_DUPLICATE_KEY:
void message.error('用户名或邮箱已被注册，请重试')
setIsSigningUp(false)
break
default:
void message.error('服务器出错了，请稍后重试')
setIsSigningUp(false)
}
})
.catch(() => {
setIsSigningUp(false)
})
}
const handleOnRetry = () => {}
return (
<div className={'sign-up'}>
<FitCenter>
<FlexBox>
<div>Welcome join us</div>
<AntdButton
onClick={() =>
navigate(
`/login${
searchParams.toString() ? `?${searchParams.toString()}` : ''
}`
)
}
>
登录
</AntdButton>
<AntdForm>
<AntdForm.Item></AntdForm.Item>
<div className={'title'}>
<div className={'primary'}>创建账号</div>
<div className={'secondary'}>Create account</div>
</div>
<AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
{!isFinish ? (
<>
<AntdForm.Item
name={'username'}
rules={[
{ required: true, message: '请输入用户名' },
{
pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,38}$/,
message:
'只能包含字母、数字、连字符和下划线，不能以数字开头'
}
]}
>
<AntdInput
prefix={<Icon component={IconFatwebUser} />}
placeholder={'用户名'}
maxLength={39}
showCount={true}
disabled={isSigningUp}
/>
</AntdForm.Item>
<AntdForm.Item
name={'email'}
rules={[
{ required: true, message: '请输入邮箱' },
{ type: 'email', message: '不是有效的邮箱地址' }
]}
>
<AntdInput
type={'email'}
prefix={<Icon component={IconFatwebEmail} />}
placeholder={'邮箱'}
disabled={isSigningUp}
/>
</AntdForm.Item>
<AntdForm.Item
name={'password'}
rules={[
{ required: true, message: '请输入密码' },
{ min: 10, message: '密码至少为10位' },
{ max: 30, message: '密码最多为30位' }
]}
>
<AntdInput.Password
prefix={<Icon component={IconFatwebPassword} />}
placeholder={'密码'}
disabled={isSigningUp}
/>
</AntdForm.Item>
<AntdForm.Item
name={'passwordConfirm'}
rules={[
{ required: true, message: '请确认密码' },
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve()
}
return Promise.reject(
new Error('两次密码输入必须一致')
)
}
})
]}
>
<AntdInput.Password
prefix={<Icon component={IconFatwebPassword} />}
placeholder={'确认密码'}
disabled={isSigningUp}
/>
</AntdForm.Item>
<AntdForm.Item>
<AntdButton
style={{ width: '100%' }}
type={'primary'}
htmlType={'submit'}
disabled={isSigningUp}
loading={isSigningUp}
>
注&ensp;&ensp;&ensp;&ensp;册
</AntdButton>
</AntdForm.Item>
</>
) : (
<div className={'retry'}>
我们发送了一封包含激活账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
<a onClick={handleOnRetry}>重新发送</a>
</div>
)}
<div className={'footer'}>
已有账号？
<a
onClick={() =>
navigate(
`/login${
searchParams.toString()
? `?${searchParams.toString()}`
: ''
}`,
{ replace: true }
)
}
>
登录
</a>
</div>
</AntdForm>
</FlexBox>
</FitCenter>
@@ -45,6 +181,21 @@ const SignUp: React.FC = () => {
)
}
const Verify: React.FC = () => {
const navigate = useNavigate()
const [searchParams] = useSearchParams()
useUpdatedEffect(() => {
if (!getLoginStatus()) {
navigate(`/login${searchParams.toString() ? `?${searchParams.toString()}` : ''}`, {
replace: true
})
}
}, [])
return <></>
}
const Forget: React.FC = () => {
const navigate = useNavigate()
const [searchParams] = useSearchParams()
@@ -72,7 +223,10 @@ const Forget: React.FC = () => {
<>
<AntdForm.Item
name={'account'}
rules={[{ required: true, message: '请输入邮箱' }]}
rules={[
{ required: true, message: '请输入邮箱' },
{ type: 'email', message: '不是有效的邮箱地址' }
]}
>
<AntdInput
prefix={<Icon component={IconFatwebEmail} />}
@@ -93,7 +247,7 @@ const Forget: React.FC = () => {
</AntdForm.Item>
</>
) : (
<div style={{ marginBottom: 10 }}>
<div className={'retry'}>
我们发送了一封包含找回密码链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
<a onClick={handleOnRetry}>重新发送</a>
</div>
@@ -108,7 +262,8 @@ const Forget: React.FC = () => {
searchParams.toString()
? `?${searchParams.toString()}`
: ''
}`
}`,
{ replace: true }
)
}
>
@@ -128,13 +283,13 @@ const SignIn: React.FC = () => {
const [searchParams] = useSearchParams()
const [isSigningIn, setIsSigningIn] = useState(false)
const handleOnFinish = (loginForm: LoginForm) => {
const handleOnFinish = (loginParam: LoginParam) => {
if (isSigningIn) {
return
}
setIsSigningIn(true)
void login(loginForm.account, loginForm.password)
void r_auth_login({ account: loginParam.account, password: loginParam.password })
.then((res) => {
const response = res.data
const { code, data } = response
@@ -216,7 +371,7 @@ const SignIn: React.FC = () => {
<AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
<AntdForm.Item
name={'account'}
rules={[{ required: true, message: '账号为空' }]}
rules={[{ required: true, message: '请输入账号' }]}
>
<AntdInput
prefix={<Icon component={IconFatwebUser} />}
@@ -226,7 +381,7 @@ const SignIn: React.FC = () => {
</AntdForm.Item>
<AntdForm.Item
name={'password'}
rules={[{ required: true, message: '密码为空' }]}
rules={[{ required: true, message: '请输入密码' }]}
>
<AntdInput.Password
prefix={<Icon component={IconFatwebPassword} />}
@@ -243,7 +398,8 @@ const SignIn: React.FC = () => {
searchParams.toString()
? `?${searchParams.toString()}`
: ''
}`
}`,
{ replace: true }
)
}}
>
@@ -262,7 +418,7 @@ const SignIn: React.FC = () => {
</AntdButton>
</AntdForm.Item>
<div className={'footer'}>
还没有账户？
还没有账号？
<a
onClick={() =>
navigate(
@@ -270,7 +426,8 @@ const SignIn: React.FC = () => {
searchParams.toString()
? `?${searchParams.toString()}`
: ''
}`
}`,
{ replace: true }
)
}
>
@@ -290,7 +447,7 @@ const Sign: React.FC = () => {
const match = useMatches().reduce((_, second) => second)
const [isSwitch, setIsSwitch] = useState(false)
const leftPage = ['register', 'forget']
const leftPage = ['register', 'verify', 'forget']
useUpdatedEffect(() => {
lastPage.current = currentPage.current
@@ -303,6 +460,8 @@ const Sign: React.FC = () => {
switch (leftPage.includes(currentPage.current) ? currentPage.current : lastPage.current) {
case 'forget':
return <Forget />
case 'verify':
return <Verify />
default:
return <SignUp />
}

6
src/router/index.tsx
View File

@@ -21,9 +21,9 @@ const root: RouteJsonObject[] = [
component: lazySignPage
},
{
path: 'confirm',
absolutePath: '/confirm',
id: 'confirm',
path: 'verify',
absolutePath: '/verify',
id: 'verify',
component: lazySignPage
},
{

12
src/services/auth.tsx
View File

@@ -1,10 +1,10 @@
import { URL_LOGIN, URL_LOGOUT } from '@/constants/urls.constants'
import { URL_LOGIN, URL_LOGOUT, URL_REGISTER, URL_VERIFY } from '@/constants/urls.constants'
import request from '@/services'
export const r_auth_login = (account: string, password: string) =>
request.post<TokenVo>(URL_LOGIN, {
account,
password
})
export const r_auth_register = (param: RegisterParam) => request.post(URL_REGISTER, param)
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)
export const r_auth_logout = () => request.post(URL_LOGOUT)

11
src/util/auth.tsx
View File

@@ -8,7 +8,6 @@ import { floorNumber, randomColor, randomFloat, randomInt } from '@/util/common'
import { getLocalStorage, removeLocalStorage, setLocalStorage } from '@/util/browser'
import { getFullTitle } from '@/util/route'
import { r_sys_user_info } from '@/services/system'
import { r_auth_login, r_auth_logout } from '@/services/auth'
let captcha: Captcha
@@ -65,16 +64,6 @@ export const getCaptcha = (width: number, high: number, num: number) => {
}
}
export const login = async (account: string, password: string) => {
return await r_auth_login(account, password)
}
export const logout = async () => {
return r_auth_logout().finally(() => {
removeToken()
})
}
export const getLoginStatus = () => {
return getLocalStorage(STORAGE_TOKEN_KEY) !== null
}