xinyin025/new-api
1
0
Fork 0
mirror of https://github.com/linux-do/new-api.git synced 2025-09-18 00:16:37 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: update register page

Browse Source
This commit is contained in:
CalciumIon 2024-07-16 15:48:56 +08:00
parent 963985e76c
commit eb9b4b07ad
1 changed files with 113 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
web/src/components/RegisterForm.js
View File

@ -1,16 +1,10 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import {
Button,
Form,
Grid,
Header,
Image,
Message,
Segment,
} from 'semantic-ui-react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { API, getLogo, showError, showInfo, showSuccess } from '../helpers'; import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
import Turnstile from 'react-turnstile'; import Turnstile from 'react-turnstile';
import { Button, Card, Form, Layout } from '@douyinfe/semi-ui';
import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import Text from '@douyinfe/semi-ui/lib/es/typography/text';
const RegisterForm = () => { const RegisterForm = () => {
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
@ -18,7 +12,7 @@ const RegisterForm = () => {
password: '', password: '',
password2: '', password2: '',
email: '', email: '',
verification_code: '', verification_code: ''
}); });
const { username, password, password2 } = inputs; const { username, password, password2 } = inputs;
const [showEmailVerification, setShowEmailVerification] = useState(false); const [showEmailVerification, setShowEmailVerification] = useState(false);
@ -46,9 +40,7 @@ const RegisterForm = () => {
let navigate = useNavigate(); let navigate = useNavigate();
function handleChange(e) { function handleChange(name, value) {
const { name, value } = e.target;
console.log(name, value);
setInputs((inputs) => ({ ...inputs, [name]: value })); setInputs((inputs) => ({ ...inputs, [name]: value }));
} }
@ -73,7 +65,7 @@ const RegisterForm = () => {
inputs.aff_code = affCode; inputs.aff_code = affCode;
const res = await API.post( const res = await API.post(
`/api/user/register?turnstile=${turnstileToken}`, `/api/user/register?turnstile=${turnstileToken}`,
inputs, inputs
); );
const { success, message } = res.data; const { success, message } = res.data;
if (success) { if (success) {
@ -94,7 +86,7 @@ const RegisterForm = () => {
} }
setLoading(true); setLoading(true);
const res = await API.get( const res = await API.get(
`/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`, `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
); );
const { success, message } = res.data; const { success, message } = res.data;
if (success) { if (success) {
@ -106,96 +98,113 @@ const RegisterForm = () => {
}; };
return ( return (
<Grid textAlign='center' style={{ marginTop: '48px' }}> <div>
<Grid.Column style={{ maxWidth: 450 }}> <Layout>
<Header as='h2' color='' textAlign='center'> <Layout.Header></Layout.Header>
<Image src={logo} /> 新用户注册 <Layout.Content>
</Header> <div
<Form size='large'> style={{
<Segment> justifyContent: 'center',
<Form.Input display: 'flex',
fluid marginTop: 120
icon='user' }}
iconPosition='left' >
placeholder='输入用户名，最长 12 位' <div style={{ width: 500 }}>
onChange={handleChange} <Card>
name='username' <Title heading={2} style={{ textAlign: 'center' }}>
/> 新用户注册
<Form.Input </Title>
fluid <Form size="large">
icon='lock' <Form.Input
iconPosition='left' field={'username'}
placeholder='输入密码，最短 8 位，最长 20 位' label={'用户名'}
onChange={handleChange} placeholder="用户名"
name='password' name="username"
type='password' onChange={(value) => handleChange('username', value)}
/> />
<Form.Input <Form.Input
fluid field={'password'}
icon='lock' label={'密码'}
iconPosition='left' placeholder="密码，最短 8 位，最长 20 位"
placeholder='输入密码，最短 8 位，最长 20 位' name="password"
onChange={handleChange} type="password"
name='password2' onChange={(value) => handleChange('password', value)}
type='password' />
/> <Form.Input
{showEmailVerification ? ( field={'password2'}
<> label={'确认密码'}
<Form.Input placeholder="确认密码"
fluid name="password2"
icon='mail' type="password"
iconPosition='left' onChange={(value) => handleChange('password2', value)}
placeholder='输入邮箱地址' />
onChange={handleChange} {showEmailVerification ? (
name='email' <>
type='email' <Form.Input
action={ field={'email'}
<Button onClick={sendVerificationCode} disabled={loading}> label={'邮箱'}
获取验证码 placeholder="输入邮箱地址"
</Button> onChange={(value) => handleChange('email', value)}
} name="email"
type="email"
suffix={
<Button onClick={sendVerificationCode} disabled={loading}>
获取验证码
</Button>
}
/>
<Form.Input
field={'verification_code'}
label={'验证码'}
placeholder="输入验证码"
onChange={(value) => handleChange('verification_code', value)}
name="verification_code"
/>
</>
) : (
<></>
)}
<Button
theme='solid'
style={{ width: '100%' }}
type={'primary'}
size='large'
htmlType={'submit'}
onClick={handleSubmit}
>
注册
</Button>
</Form>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginTop: 20
}}
>
<Text>
已有账户？
<Link to="/login">
点击登录
</Link>
</Text>
</div>
</Card>
{turnstileEnabled ? (
<Turnstile
sitekey={turnstileSiteKey}
onVerify={(token) => {
setTurnstileToken(token);
}}
/> />
<Form.Input ) : (
fluid <></>
icon='lock' )}
iconPosition='left' </div>
placeholder='输入验证码' </div>
onChange={handleChange} </Layout.Content>
name='verification_code' </Layout>
/> </div>
</>
) : (
<></>
)}
{turnstileEnabled ? (
<Turnstile
sitekey={turnstileSiteKey}
onVerify={(token) => {
setTurnstileToken(token);
}}
/>
) : (
<></>
)}
<Button
color='green'
fluid
size='large'
onClick={handleSubmit}
loading={loading}
>
注册
</Button>
</Segment>
</Form>
<Message>
已有账户？
<Link to='/login' className='btn btn-link'>
点击登录
</Link>
</Message>
</Grid.Column>
</Grid>
); );
}; };