fix: #231

Author: FutabaRio

src/apis/auth.ts

@@ -70,19 +70,35 @@ export interface RegisterResponse {}
 
 export const requestRegister = (
   email: string,
+  registerToken: string,
   username: string,
   password: string,
 ) => {
   return jsonRequest<Response<RegisterResponse>>('/user/register', {
     method: 'POST',
     json: {
       email,
+      register_token: registerToken,
       user_name: username,
       password,
     },
   })
 }
 
+export interface EmailToenResponse {}
+
+export const reqeustRegistrationToken = (email: string) => {
+  return jsonRequest<Response<EmailToenResponse>>(
+    '/user/sendRegistrationToken',
+    {
+      method: 'POST',
+      json: {
+        email,
+      },
+    },
+  )
+}
+
 export interface UpdateInfoResponse {}
 
 export const requestUpdateInfo = ({

src/components/account/AuthFormShared.tsx

@@ -9,7 +9,7 @@ import {
 import { FormField, FormFieldProps } from 'components/FormField'
 import { REGEX_EMAIL } from 'utils/regexes'
 
-export type RuleKeys = 'email' | 'password' | 'username'
+export type RuleKeys = 'email' | 'password' | 'username' | 'registertoken'
 
 export const rule: Record<RuleKeys, UseControllerProps['rules']> = {
   email: {
@@ -26,6 +26,11 @@ export const rule: Record<RuleKeys, UseControllerProps['rules']> = {
     minLength: { value: 4, message: '用户名长度不能小于 4 位' },
     maxLength: { value: 24, message: '用户名长度不能大于 24 位' },
   },
+  registertoken: {
+    required: '邮箱验证码为必填项',
+    minLength: { value: 6, message: '邮箱验证码长度为 6 位' },
+    maxLength: { value: 6, message: '邮箱验证码长度为 6 位' },
+  },
 }
 
 // --- **Opinioned** AuthForm Field Components ---
@@ -73,7 +78,41 @@ export const AuthFormEmailField = <T extends FieldValues>({
         ),
       }}
       FormGroupProps={{
-        helperText: register && '邮箱将需要链接确认',
+        helperText: register && '将通过发送邮件输入验证码确认',
+      }}
+    />
+  )
+}
+export const AuthRegistrationTokenField = <T extends FieldValues>({
+  label = '邮箱验证码',
+  control,
+  error,
+  field,
+  register,
+  autoComplete = '',
+  inputGroupProps,
+}: AuthFormFieldProps<T>) => {
+  return (
+    <FormField
+      label={label}
+      field={field}
+      control={control}
+      error={error}
+      ControllerProps={{
+        rules: rule.registertoken,
+        render: (renderProps) => (
+          <InputGroup
+            id={field}
+            placeholder="123456"
+            autoComplete={autoComplete}
+            {...renderProps.field}
+            value={renderProps.field.value || ''}
+            {...inputGroupProps?.(renderProps)}
+          />
+        ),
+      }}
+      FormGroupProps={{
+        helperText: register && '请输入邮件中的验证码',
       }}
     />
   )

src/components/account/RegisterPanel.tsx

@@ -1,23 +1,26 @@
 import { Button } from '@blueprintjs/core'
 
-import { requestRegister } from 'apis/auth'
-import { FC } from 'react'
+import { reqeustRegistrationToken, requestRegister } from 'apis/auth'
+import { FC, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { AppToaster } from 'components/Toaster'
 import { NetworkError } from 'utils/fetcher'
+import { REGEX_EMAIL } from 'utils/regexes'
 import { wrapErrorMessage } from 'utils/wrapErrorMessage'
 
 import {
   AuthFormEmailField,
   AuthFormPasswordField,
   AuthFormUsernameField,
+  AuthRegistrationTokenField,
 } from './AuthFormShared'
 
 export interface RegisterFormValues {
   email: string
   password: string
   username: string
+  registrationToken: string
 }
 
 export const RegisterPanel: FC<{
@@ -27,20 +30,60 @@ export const RegisterPanel: FC<{
     control,
     handleSubmit,
     formState: { errors, isValid, isDirty, isSubmitting },
+    getValues,
   } = useForm<RegisterFormValues>()
-
+  const [isSendEmailButtonDisabled, setSendEmailButtonDisabled] =
+    useState(false)
+  const [countdown, setCountdown] = useState(60)
   const onSubmit = async (val: RegisterFormValues) => {
     await wrapErrorMessage(
       (e: NetworkError) => `注册失败：${e.message}`,
-      requestRegister(val.email, val.username, val.password),
+      requestRegister(
+        val.email,
+        val.registrationToken,
+        val.username,
+        val.password,
+      ),
     )
     AppToaster.show({
       intent: 'success',
-      message: `已向注册邮箱发送验证邮件，请使用邮件内的验证链接进行验证`,
+      message: `注册成功`,
     })
     onComplete()
   }
+  const handleCountdownTick = () => {
+    setCountdown((prevCountdown) => prevCountdown - 1)
+  }
+  useEffect(() => {
+    let countdownInterval
+    if (countdown <= 0) {
+      setCountdown(60)
+      setSendEmailButtonDisabled(false)
+    } else if (isSendEmailButtonDisabled) {
+      countdownInterval = setInterval(handleCountdownTick, 1000)
+    }
+    return () => clearInterval(countdownInterval)
+  }, [isSendEmailButtonDisabled, countdown])
 
+  const onEmailSubmit = async () => {
+    const val = getValues()
+    if (!REGEX_EMAIL.test(val.email)) {
+      AppToaster.show({
+        intent: 'danger',
+        message: `邮箱输入为空或格式错误,请重新输入`,
+      })
+      return
+    }
+    await wrapErrorMessage(
+      (e: NetworkError) => `发送失败：${e.message}`,
+      reqeustRegistrationToken(val.email),
+    )
+    AppToaster.show({
+      intent: 'success',
+      message: `邮件发送成功`,
+    })
+    setSendEmailButtonDisabled(true)
+  }
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <AuthFormEmailField
@@ -49,6 +92,26 @@ export const RegisterPanel: FC<{
         error={errors.email}
         field="email"
       />
+      <div className="mt-6 flex justify-end">
+        <Button
+          disabled={
+            (!isValid && !isDirty) || isSubmitting || isSendEmailButtonDisabled
+          }
+          intent="primary"
+          type="button"
+          icon="envelope"
+          className="self-stretch"
+          onClick={onEmailSubmit}
+        >
+          {isSendEmailButtonDisabled ? `${countdown} 秒再试` : '发送验证码'}
+        </Button>
+      </div>
+      <AuthRegistrationTokenField
+        register
+        control={control}
+        error={errors.registrationToken}
+        field="registrationToken"
+      />
 
       <AuthFormUsernameField
         control={control}