94 lines
3.4 KiB
TypeScript
94 lines
3.4 KiB
TypeScript
import React, { useRef, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Form, MessagePlugin, Input, Checkbox, Button, FormInstanceFunctions, SubmitContext } from 'tdesign-react';
|
|
import { LockOnIcon, MailIcon, BrowseOffIcon, BrowseIcon, UserIcon } from 'tdesign-icons-react';
|
|
import classnames from 'classnames';
|
|
import { useAppDispatch } from 'modules/store';
|
|
import { register } from 'modules/user';
|
|
import { connectWS } from 'utils/ws';
|
|
|
|
import Style from './index.module.less';
|
|
|
|
const { FormItem } = Form;
|
|
|
|
export default function Register() {
|
|
const [showPsw, toggleShowPsw] = useState(false);
|
|
const formRef = useRef<FormInstanceFunctions>();
|
|
const navigate = useNavigate();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const onSubmit = async (e: SubmitContext) => {
|
|
if (e.validateResult === true) {
|
|
const formValue = (formRef.current?.getFieldsValue?.(true) || {}) as {
|
|
email: string;
|
|
password: string;
|
|
nickname: string;
|
|
checked: boolean;
|
|
};
|
|
if (!formValue.checked) {
|
|
MessagePlugin.error('请同意服务协议与隐私声明');
|
|
return;
|
|
}
|
|
try {
|
|
const nickname = formValue.nickname || formValue.email.split('@')[0];
|
|
await dispatch(register({ email: formValue.email, password: formValue.password, nickname })).unwrap();
|
|
connectWS();
|
|
MessagePlugin.success('注册成功，已自动登录');
|
|
navigate('/dashboard/base');
|
|
} catch (err: any) {
|
|
MessagePlugin.error(err?.response?.data?.message || '注册失败，请稍后重试');
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Form ref={formRef} className={classnames(Style.itemContainer, 'register-email')} labelWidth={0} onSubmit={onSubmit}>
|
|
<FormItem name='nickname'>
|
|
<Input size='large' placeholder='请输入昵称（选填）' prefixIcon={<UserIcon />} />
|
|
</FormItem>
|
|
<FormItem
|
|
name='email'
|
|
rules={[
|
|
{ required: true, message: '邮箱必填', type: 'error' },
|
|
{ email: true, message: '请输入正确的邮箱', type: 'warning' },
|
|
]}
|
|
>
|
|
<Input type='text' size='large' placeholder='请输入邮箱' prefixIcon={<MailIcon />} />
|
|
</FormItem>
|
|
<FormItem
|
|
name='password'
|
|
rules={[
|
|
{ required: true, message: '密码必填', type: 'error' },
|
|
{ min: 8, message: '密码至少 8 位', type: 'warning' },
|
|
]}
|
|
>
|
|
<Input
|
|
size='large'
|
|
type={showPsw ? 'text' : 'password'}
|
|
clearable
|
|
placeholder='请输入密码（至少 8 位）'
|
|
prefixIcon={<LockOnIcon />}
|
|
suffixIcon={
|
|
showPsw ? (
|
|
<BrowseIcon onClick={() => toggleShowPsw((current) => !current)} />
|
|
) : (
|
|
<BrowseOffIcon onClick={() => toggleShowPsw((current) => !current)} />
|
|
)
|
|
}
|
|
/>
|
|
</FormItem>
|
|
<FormItem className={Style.checkContainer} name='checked' initialData={false}>
|
|
<Checkbox>我已阅读并同意</Checkbox> <span className='tip'>EveryPublish 服务协议</span> 和
|
|
<span className='tip'>隐私声明</span>
|
|
</FormItem>
|
|
<FormItem>
|
|
<Button block size='large' type='submit'>
|
|
注册
|
|
</Button>
|
|
</FormItem>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|