✨ feat: Authentication verification code

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

@@ -10,13 +10,14 @@ 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";
 import { useGlobalStore } from "@/stores/global";
 import type { TurnstileRef } from "../turnstile";
 import CloudFlareTurnstile from "../turnstile";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";
 
 export default function LoginForm({
   loading,
@@ -34,14 +35,23 @@ export default function LoginForm({
   const { t } = useTranslation("auth");
   const { common } = useGlobalStore();
   const { verify } = common;
+  const [captchaId, setCaptchaId] = useState("");
+
+  const isTurnstile = verify.captcha_type === "turnstile";
+  const isLocal = verify.captcha_type === "local";
+  const captchaEnabled = verify.enable_user_login_captcha;
 
   const formSchema = z.object({
     email: z.email(t("login.email", "Please enter a valid email address")),
     password: z.string(),
     cf_token:
-      verify.enable_login_verify && verify.turnstile_site_key
+      captchaEnabled && isTurnstile && verify.turnstile_site_key
         ? z.string()
         : z.string().optional(),
+    captcha_code:
+      captchaEnabled && isLocal
+        ? z.string().min(1, t("captcha.required", "Please enter captcha code"))
+        : z.string().optional(),
   });
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -49,11 +59,17 @@ export default function LoginForm({
   });
 
   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();
     }
   });
 
@@ -68,7 +84,7 @@ export default function LoginForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder="Enter your email..."
+                    placeholder={t("login.emailPlaceholder", "Enter your email...")}
                     type="email"
                     {...field}
                   />
@@ -84,7 +100,7 @@ export default function LoginForm({
               <FormItem>
                 <FormControl>
                   <Input
-                    placeholder="Enter your password..."
+                    placeholder={t("login.passwordPlaceholder", "Enter your password...")}
                     type="password"
                     {...field}
                   />
@@ -93,7 +109,7 @@ export default function LoginForm({
               </FormItem>
             )}
           />
-          {verify.enable_login_verify && (
+          {captchaEnabled && isTurnstile && (
             <FormField
               control={form.control}
               name="cf_token"
@@ -111,6 +127,24 @@ export default function LoginForm({
               )}
             />
           )}
+          {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("login.title", "Login")}