✨ feat: Authentication verification code

2026-03-10 19:03:39 +08:00
parent 4b4edd48e3
commit eac7b27f60
30 changed files with 805 additions and 130 deletions
@@ -10,12 +10,13 @@ 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 CloudFlareTurnstile, { type TurnstileRef } from "../turnstile";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";

 export default function LoginForm({
  loading,
@@ -33,14 +34,25 @@ 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_admin_login_captcha;

  const formSchema = z.object({
-    email: z.email(t("login.email", "Email")),
+    email: z
+      .string()
+      .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),
@@ -48,11 +60,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();
    }
  });

@@ -98,7 +116,7 @@ export default function LoginForm({
              </FormItem>
            )}
          />
-          {verify.enable_login_verify && (
+          {captchaEnabled && isTurnstile && (
            <FormField
              control={form.control}
              name="cf_token"
@@ -116,6 +134,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")}
@@ -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 SendCode from "../send-code";
 import CloudFlareTurnstile, { type TurnstileRef } from "../turnstile";
+import LocalCaptcha, { type LocalCaptchaRef } from "../local-captcha";

 export default function ResetForm({
  loading,
@@ -35,15 +36,26 @@ 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.email(t("reset.email", "Email")),
+    email: z
+      .string()
+      .email(t("reset.email", "Please enter a valid email address")),
    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),
@@ -51,11 +63,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();
    }
  });

@@ -128,7 +146,7 @@ export default function ResetForm({
              </FormItem>
            )}
          />
-          {verify.enable_reset_password_verify && (
+          {captchaEnabled && isTurnstile && (
            <FormField
              control={form.control}
              name="cf_token"
@@ -146,6 +164,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")}
@@ -0,0 +1,95 @@
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { Icon } from "@workspace/ui/composed/icon";
+import { adminGenerateCaptcha } from "@workspace/ui/services/admin/auth";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export interface LocalCaptchaRef {
+  reset: () => void;
+}
+
+interface LocalCaptchaProps {
+  value?: string | null;
+  onChange?: (value: string) => void;
+  onCaptchaIdChange?: (id: string) => void;
+}
+
+const LocalCaptcha = forwardRef<LocalCaptchaRef, LocalCaptchaProps>(
+  ({ value, onChange, onCaptchaIdChange }, ref) => {
+    const { t } = useTranslation("auth");
+    const [captchaImage, setCaptchaImage] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    const fetchCaptcha = async () => {
+      setLoading(true);
+      try {
+        const res = await adminGenerateCaptcha();
+        const captchaData = res.data?.data;
+        if (captchaData) {
+          setCaptchaImage(captchaData.image);
+          onCaptchaIdChange?.(captchaData.id);
+        }
+      } catch (error) {
+        console.error("Failed to generate captcha:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    useEffect(() => {
+      fetchCaptcha();
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      reset: () => {
+        onChange?.("");
+        fetchCaptcha();
+      },
+    }));
+
+    return (
+      <div className="flex gap-2">
+        <Input
+          placeholder={t("captcha.placeholder", "Enter captcha code...")}
+          value={value || ""}
+          onChange={(e) => onChange?.(e.target.value)}
+          className="flex-1"
+        />
+        <div className="relative h-10 w-32 flex-shrink-0">
+          {loading ? (
+            <div className="flex h-full items-center justify-center bg-muted">
+              <Icon className="animate-spin" icon="mdi:loading" />
+            </div>
+          ) : captchaImage ? (
+            <img
+              src={captchaImage}
+              alt="captcha"
+              className="h-full w-full cursor-pointer object-contain"
+              onClick={fetchCaptcha}
+              title={t("captcha.clickToRefresh", "Click to refresh")}
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center bg-muted text-xs text-muted-foreground">
+              {t("captcha.noImage", "No Image")}
+            </div>
+          )}
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          onClick={fetchCaptcha}
+          disabled={loading}
+          title={t("captcha.refresh", "Refresh captcha")}
+        >
+          <Icon icon="mdi:refresh" />
+        </Button>
+      </div>
+    );
+  }
+);
+
+LocalCaptcha.displayName = "LocalCaptcha";
+
+export default LocalCaptcha;