✨ feat: Authentication verification code

apps/user/src/sections/auth/email/reset-form.tsx

@@ -10,7 +10,7 @@ import {
 import { Input } from "@workspace/ui/components/input";
 import { Icon } from "@workspace/ui/composed/icon";
 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";
@@ -18,6 +18,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 ResetForm({
   loading,
@@ -36,6 +37,11 @@ export default function ResetForm({
 
   const { common } = useGlobalStore();
   const { verify, auth } = common;
+  const [captchaId, setCaptchaId] = useState("");
+
+  const isTurnstile = verify.captcha_type === "turnstile";
+  const isLocal = verify.captcha_type === "local";
+  const captchaEnabled = verify.enable_user_reset_password_captcha;
 
   const formSchema = z.object({
     email: z
@@ -44,9 +50,13 @@ export default function ResetForm({
     password: z.string(),
     code: auth?.email?.enable_verify ? z.string() : 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(),
   });
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -54,11 +64,17 @@ export default function ResetForm({
   });
 
   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();
     }
   });
 
@@ -73,7 +89,7 @@ export default function ResetForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder="Enter your email..."
+                    placeholder={t("reset.emailPlaceholder", "Enter your email...")}
                     type="email"
                     {...field}
                   />
@@ -91,7 +107,7 @@ export default function ResetForm({
                   <div className="flex items-center gap-2">
                     <Input
                       disabled={loading}
-                      placeholder="Enter code..."
+                      placeholder={t("reset.codePlaceholder", "Enter code...")}
                       type="text"
                       {...field}
                       value={field.value as string}
@@ -116,7 +132,7 @@ export default function ResetForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder="Enter your new password..."
+                    placeholder={t("reset.passwordPlaceholder", "Enter your new password...")}
                     type="password"
                     {...field}
                   />
@@ -125,7 +141,7 @@ export default function ResetForm({
               </FormItem>
             )}
           />
-          {verify.enable_reset_password_verify && (
+          {captchaEnabled && isTurnstile && (
             <FormField
               control={form.control}
               name="cf_token"
@@ -143,6 +159,24 @@ export default function ResetForm({
               )}
             />
           )}
+          {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("reset.title", "Reset Password")}