HI-VPN/hi-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

✨ feat: Authentication verification code

Browse Source
This commit is contained in:
EUForest
2026-03-10 19:03:39 +08:00
parent 4b4edd48e3
commit eac7b27f60
30 changed files with 805 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/src/sections/auth/email/login-form.tsx
+39 -5
View File
@@ -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")}
apps/user/src/sections/auth/email/register-form.tsx
+41 -7
View File
@@ -11,7 +11,7 @@ import { Input } from "@workspace/ui/components/input";
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";
@@ -19,6 +19,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 { t } = useTranslation("auth");
const { common } = useGlobalStore();
const { verify, auth, invite } = common;
const [captchaId, setCaptchaId] = useState("");
const isTurnstile = verify.captcha_type === "turnstile";
const isLocal = verify.captcha_type === "local";
const captchaEnabled = verify.enable_user_register_captcha;
const handleCheckUser = async (email: string) => {
try {
@@ -67,9 +73,13 @@ export default function RegisterForm({
code: auth.email.enable_verify ? z.string() : z.string().nullish(),
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) {
@@ -90,11 +100,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();
}
});
@@ -114,7 +130,7 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<Input
placeholder="Enter your email..."
placeholder={t("register.emailPlaceholder", "Enter your email...")}
type="email"
{...field}
/>
@@ -130,7 +146,7 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<Input
placeholder="Enter your password..."
placeholder={t("register.passwordPlaceholder", "Enter your password...")}
type="password"
{...field}
/>
@@ -147,7 +163,7 @@ export default function RegisterForm({
<FormControl>
<Input
disabled={loading}
placeholder="Enter password again..."
placeholder={t("register.repeatPasswordPlaceholder", "Enter password again...")}
type="password"
{...field}
/>
@@ -166,7 +182,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}
@@ -205,7 +221,7 @@ export default function RegisterForm({
</FormItem>
)}
/>
{verify.enable_register_verify && (
{captchaEnabled && isTurnstile && (
<FormField
control={form.control}
name="cf_token"
@@ -223,6 +239,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")}
apps/user/src/sections/auth/email/reset-form.tsx
+40 -6
View File
@@ -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")}