feat: 邮箱验证码

Sioncovy · May 28, 2024 · 2f2d37e · 2f2d37e
1 parent 60e9a16
commit 2f2d37e
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 24 deletions.
diff --git a/src/apis/user.ts b/src/apis/user.ts
@@ -31,3 +31,7 @@ export async function register(
 export async function getAuthSvg(timestamp: number): Promise<string> {
  return request.get(`/users/authCode?timestamp=${timestamp}`)
 }
+
+export async function sendEmailCode(data: { email: string }) {
+ return request.post('/email/sendCode', data)
+}
diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx
@@ -1,17 +1,18 @@
-import { LockOutlined, UserOutlined } from '@ant-design/icons'
+import { LockOutlined, MailOutlined, UserOutlined } from '@ant-design/icons'
 import { Button, Card, Flex, Form, Input, Space, message } from 'antd'
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styles from './index.module.less'
 import type { User } from '@/typings'
 import { useThemeToken } from '@/hooks'
-import { register } from '@/apis'
+import { register, sendEmailCode } from '@/apis'
 
 function Register() {
  const [loading, setLoading] = useState(false)
  const [messageApi, messageContext] = message.useMessage()
  const { token } = useThemeToken()
  const navigate = useNavigate()
+ const [form] = Form.useForm()
 
  return (
  <Flex vertical justify="center" align="center" style={{ height: '100vh' }}>
@@ -21,27 +22,31 @@ function Register() {
  styles={{
  body: {
  padding: `${token.padding}px ${token.paddingXL}px`,
- paddingBottom: 0,
- },
+ paddingBottom: 0
+ }
  }}
  >
  <Space size={8} style={{ margin: '20px 0' }}>
  <div className={styles.bar} />
- <div style={{ fontSize: 22 }}>
- 注册 Mailpen
- </div>
+ <div style={{ fontSize: 22 }}>注册 Mailpen</div>
  </Space>
- <Form<Pick<User, 'username' | 'password'>> onFinish={(values) => {
- setLoading(true)
- register(values).then(() => {
- messageApi.success('注册成功')
- navigate('/login')
- setLoading(false)
- }).catch((err) => {
- messageApi.error(err.message)
- setLoading(false)
- })
- }}
+ <Form<Pick<User, 'username' | 'password'> & { code: string }>
+ form={form}
+ onFinish={(values) => {
+ setLoading(true)
+ register(values)
+ .then(() => {
+ messageApi.success('注册成功，3秒后跳转到登录页')
+ setTimeout(() => {
+ navigate('/login')
+ }, 3000)
+ setLoading(false)
+ })
+ .catch((err) => {
+ messageApi.error(err.message)
+ setLoading(false)
+ })
+ }}
  >
  <Form.Item
  name="username"
@@ -55,14 +60,39 @@ function Register() {
  >
  <Input.Password prefix={<LockOutlined />} placeholder="密码" />
  </Form.Item>
- <Form.Item>
- <Flex vertical justify="center">
+ <Form.Item
+ name="email"
+ rules={[{ required: true, message: '邮箱不能为空' }]}
+ >
+ <Input prefix={<MailOutlined />} placeholder="邮箱" />
+ </Form.Item>
+ <Form.Item
+ name="code"
+ rules={[{ required: true, message: '验证码不能为空' }]}
+ >
+ <Flex gap={8} align="center">
+ <Input placeholder="验证码" />
  <Button
- block
- type="primary"
- htmlType="submit"
- loading={loading}
+ type="link"
+ onClick={() => {
+ form.validateFields(['email']).then(({ email }) => {
+ sendEmailCode({ email })
+ .then(() => {
+ messageApi.success('验证码已发送')
+ })
+ .catch((err) => {
+ messageApi.error(err.message)
+ })
+ })
+ }}
  >
+ 获取验证码
+ </Button>
+ </Flex>
+ </Form.Item>
+ <Form.Item>
+ <Flex vertical justify="center">
+ <Button block type="primary" htmlType="submit" loading={loading}>
  注册
  </Button>
  <Button type="link" href="/login">