✨ feat: Authentication verification code

apps/user/src/sections/auth/phone/register-form.tsx

@@ -12,7 +12,7 @@ import { AreaCodeSelect } from "@workspace/ui/composed/area-code-select";
 import { Icon } from "@workspace/ui/composed/icon";
 import { Markdown } from "@workspace/ui/composed/markdown";
 import type { Dispatch, SetStateAction } from "react";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
@@ -20,6 +20,7 @@ import { useGlobalStore } from "@/stores/global";
 import SendCode from "../send-code";
 import type { TurnstileRef } from "../turnstile";
 import CloudFlareTurnstile from "../turnstile";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 
 export default function RegisterForm({
   loading,
@@ -36,6 +37,11 @@ export default function RegisterForm({
   const { common } = useGlobalStore();
   const { verify, auth, invite } = common;
   const { enable_whitelist, whitelist } = auth.mobile;
+  const [captchaId, setCaptchaId] = useState("");
+
+  const isTurnstile = verify.captcha_type === "turnstile";
+  const isLocal = verify.captcha_type === "local";
+  const captchaEnabled = verify.enable_user_register_captcha;
 
   const formSchema = z
     .object({
@@ -46,9 +52,13 @@ export default function RegisterForm({
       code: z.string(),
       invite: invite.forced_invite ? z.string().min(1) : z.string().nullish(),
       cf_token:
-        verify.enable_register_verify && verify.turnstile_site_key
+        captchaEnabled && isTurnstile && verify.turnstile_site_key
           ? z.string()
           : z.string().nullish(),
+      captcha_code:
+        captchaEnabled && isLocal
+          ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
+          : z.string().nullish(),
     })
     .superRefine(({ password, repeat_password }, ctx) => {
       if (password !== repeat_password) {
@@ -70,11 +80,17 @@ export default function RegisterForm({
   });
 
   const turnstile = useRef<TurnstileRef>(null);
+  const localCaptcha = useRef<LocalCaptchaRef>(null);
   const handleSubmit = form.handleSubmit((data) => {
     try {
+      // Add captcha_id for local captcha
+      if (isLocal && captchaEnabled) {
+        (data as any).captcha_id = captchaId;
+      }
       onSubmit(data);
     } catch (_error) {
       turnstile.current?.reset();
+      localCaptcha.current?.reset();
     }
   });
 
@@ -110,7 +126,7 @@ export default function RegisterForm({
                                     );
                                   }
                                 }}
-                                placeholder="Area code..."
+                                placeholder={t("register.areaCodePlaceholder", "Area code...")}
                                 simple
                                 value={field.value}
                                 whitelist={enable_whitelist ? whitelist : []}
@@ -122,7 +138,7 @@ export default function RegisterForm({
                       />
                       <Input
                         className="rounded-l-none"
-                        placeholder="Enter your telephone..."
+                        placeholder={t("register.telephonePlaceholder", "Enter your telephone...")}
                         type="tel"
                         {...field}
                       />
@@ -139,7 +155,7 @@ export default function RegisterForm({
                 <FormItem>
                   <FormControl>
                     <Input
-                      placeholder="Enter your password..."
+                      placeholder={t("register.passwordPlaceholder", "Enter your password...")}
                       type="password"
                       {...field}
                     />
@@ -156,7 +172,7 @@ export default function RegisterForm({
                   <FormControl>
                     <Input
                       disabled={loading}
-                      placeholder="Enter password again..."
+                      placeholder={t("register.repeatPasswordPlaceholder", "Enter password again...")}
                       type="password"
                       {...field}
                     />
@@ -174,7 +190,7 @@ export default function RegisterForm({
                     <div className="flex items-center gap-2">
                       <Input
                         disabled={loading}
-                        placeholder="Enter code..."
+                        placeholder={t("register.codePlaceholder", "Enter code...")}
                         type="text"
                         {...field}
                         value={field.value as string}
@@ -216,7 +232,7 @@ export default function RegisterForm({
                 </FormItem>
               )}
             />
-            {verify.enable_register_verify && (
+            {captchaEnabled && isTurnstile && (
               <FormField
                 control={form.control}
                 name="cf_token"
@@ -234,6 +250,24 @@ export default function RegisterForm({
                 )}
               />
             )}
+            {captchaEnabled && isLocal && (
+              <FormField
+                control={form.control}
+                name="captcha_code"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <LocalCaptcha
+                        {...field}
+                        ref={localCaptcha}
+                        onCaptchaIdChange={setCaptchaId}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
             <Button disabled={loading} type="submit">
               {loading && <Icon className="animate-spin" icon="mdi:loading" />}
               {t("register.title", "Register")}