xinyin025/new-api
1
0
Fork 0
mirror of https://github.com/linux-do/new-api.git synced 2025-09-18 08:26: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

159
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,67 +98,98 @@ 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',
display: 'flex',
marginTop: 120
}}
>
<div style={{ width: 500 }}>
<Card>
<Title heading={2} style={{ textAlign: 'center' }}>
新用户注册
</Title>
<Form size="large">
<Form.Input <Form.Input
fluid field={'username'}
icon='user' label={'用户名'}
iconPosition='left' placeholder="用户名"
placeholder='输入用户名，最长 12 位' name="username"
onChange={handleChange} onChange={(value) => handleChange('username', value)}
name='username'
/> />
<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='password' onChange={(value) => handleChange('password', value)}
type='password'
/> />
<Form.Input <Form.Input
fluid field={'password2'}
icon='lock' label={'确认密码'}
iconPosition='left' placeholder="确认密码"
placeholder='输入密码，最短 8 位，最长 20 位' name="password2"
onChange={handleChange} type="password"
name='password2' onChange={(value) => handleChange('password2', value)}
type='password'
/> />
{showEmailVerification ? ( {showEmailVerification ? (
<> <>
<Form.Input <Form.Input
fluid field={'email'}
icon='mail' label={'邮箱'}
iconPosition='left' placeholder="输入邮箱地址"
placeholder='输入邮箱地址' onChange={(value) => handleChange('email', value)}
onChange={handleChange} name="email"
name='email' type="email"
type='email' suffix={
action={
<Button onClick={sendVerificationCode} disabled={loading}> <Button onClick={sendVerificationCode} disabled={loading}>
获取验证码 获取验证码
</Button> </Button>
} }
/> />
<Form.Input <Form.Input
fluid field={'verification_code'}
icon='lock' label={'验证码'}
iconPosition='left' placeholder="输入验证码"
placeholder='输入验证码' onChange={(value) => handleChange('verification_code', value)}
onChange={handleChange} name="verification_code"
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 ? ( {turnstileEnabled ? (
<Turnstile <Turnstile
sitekey={turnstileSiteKey} sitekey={turnstileSiteKey}
@ -177,25 +200,11 @@ const RegisterForm = () => {
) : ( ) : (
<></> <></>
)} )}
<Button </div>
color='green' </div>
fluid </Layout.Content>
size='large' </Layout>
onClick={handleSubmit} </div>
loading={loading}
>
注册
</Button>
</Segment>
</Form>
<Message>
已有账户？
<Link to='/login' className='btn btn-link'>
点击登录
</Link>
</Message>
</Grid.Column>
</Grid>
); );
}; };