mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-10-06 18:06:36 +08:00
fix(frontend): update turnstile implementation for login page
This commit is contained in:
@@ -56,7 +56,7 @@
|
|||||||
"react-hot-toast": "^2.5.2",
|
"react-hot-toast": "^2.5.2",
|
||||||
"react-is": "^19.2.4",
|
"react-is": "^19.2.4",
|
||||||
"react-router-dom": "6.30.3",
|
"react-router-dom": "6.30.3",
|
||||||
"react-turnstile": "^1.1.5",
|
"@marsidev/react-turnstile": "^1.1.0",
|
||||||
"recharts": "^3.1.1",
|
"recharts": "^3.1.1",
|
||||||
"sonner": "^2.0.6",
|
"sonner": "^2.0.6",
|
||||||
"tailwind-variants": "1.0.0",
|
"tailwind-variants": "1.0.0",
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { Card, CardBody, CardHeader } from "@heroui/card";
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import toast from "react-hot-toast";
|
import toast from "react-hot-toast";
|
||||||
import Turnstile from "react-turnstile";
|
import { Turnstile } from "@marsidev/react-turnstile";
|
||||||
|
|
||||||
import { isWebViewFunc } from "@/utils/panel";
|
import { isWebViewFunc } from "@/utils/panel";
|
||||||
import { siteConfig } from "@/config/site";
|
import { siteConfig } from "@/config/site";
|
||||||
@@ -243,8 +243,6 @@ export default function IndexPage() {
|
|||||||
{/* 背景遮罩层 - 模糊效果,暗黑模式下更深 */}
|
{/* 背景遮罩层 - 模糊效果,暗黑模式下更深 */}
|
||||||
<div
|
<div
|
||||||
className="absolute inset-0 bg-black/60 dark:bg-black/80 backdrop-blur-sm captcha-backdrop-enter"
|
className="absolute inset-0 bg-black/60 dark:bg-black/80 backdrop-blur-sm captcha-backdrop-enter"
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setShowCaptcha(false);
|
setShowCaptcha(false);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
@@ -255,14 +253,16 @@ export default function IndexPage() {
|
|||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
/>
|
/>
|
||||||
{/* 验证码容器 */}
|
{/* 验证码容器 */}
|
||||||
<div className="mb-4 relative z-50 bg-white dark:bg-zinc-900 p-6 rounded-lg shadow-xl">
|
<div className="mb-4 relative z-50 bg-white dark:bg-zinc-900 p-6 rounded-lg shadow-xl">
|
||||||
<div className="mb-4 text-center text-sm font-medium text-gray-700 dark:text-gray-200">请完成安全验证</div>
|
<div className="mb-4 text-center text-sm font-medium text-gray-700 dark:text-gray-200">请完成安全验证</div>
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<Turnstile
|
<Turnstile
|
||||||
sitekey={siteKey}
|
siteKey={siteKey}
|
||||||
onVerify={(token) => {
|
onSuccess={(token) => {
|
||||||
setForm((prev) => ({ ...prev, captchaId: token }));
|
setForm((prev) => ({ ...prev, captchaId: token }));
|
||||||
void performLogin(token);
|
void performLogin(token);
|
||||||
}}
|
}}
|
||||||
@@ -273,13 +273,13 @@ export default function IndexPage() {
|
|||||||
onExpire={() => {
|
onExpire={() => {
|
||||||
setForm((prev) => ({ ...prev, captchaId: "" }));
|
setForm((prev) => ({ ...prev, captchaId: "" }));
|
||||||
}}
|
}}
|
||||||
theme={
|
options={{
|
||||||
document.documentElement.classList.contains("dark") ||
|
theme: (document.documentElement.classList.contains("dark") ||
|
||||||
document.documentElement.getAttribute("data-theme") === "dark" ||
|
document.documentElement.getAttribute("data-theme") === "dark" ||
|
||||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
? "dark"
|
? "dark"
|
||||||
: "light"
|
: "light") as "light" | "dark" | "auto"
|
||||||
}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user