fix/admin: remove turnstile UI from login page
This commit is contained in:
parent
c1463256d2
commit
c6b2d98454
|
|
@ -1,112 +1,39 @@
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useRef, useEffect, useCallback } from 'react';
|
import { useState, useRef, useCallback } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import { useAuth } from '@/lib/auth';
|
import { useAuth } from '@/lib/auth';
|
||||||
import Script from 'next/script';
|
|
||||||
|
|
||||||
const TURNSTILE_SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || '';
|
|
||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
const [email, setEmail] = useState('');
|
const [email, setEmail] = useState('');
|
||||||
const [password, setPassword] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [turnstileToken, setTurnstileToken] = useState('');
|
|
||||||
const [turnstileReady, setTurnstileReady] = useState(false);
|
|
||||||
const [turnstileWidgetRendered, setTurnstileWidgetRendered] = useState(false);
|
|
||||||
const turnstileRef = useRef<HTMLDivElement>(null);
|
|
||||||
const widgetIdRef = useRef<string | null>(null);
|
|
||||||
const tokenRef = useRef('');
|
|
||||||
const emailRef = useRef('');
|
const emailRef = useRef('');
|
||||||
const passwordRef = useRef('');
|
const passwordRef = useRef('');
|
||||||
const { login } = useAuth();
|
const { login } = useAuth();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
// Keep ref in sync with state so the submit handler always has the latest value
|
|
||||||
useEffect(() => { tokenRef.current = turnstileToken; }, [turnstileToken]);
|
|
||||||
|
|
||||||
const performLogin = useCallback(async () => {
|
const performLogin = useCallback(async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
await login(emailRef.current, passwordRef.current, tokenRef.current);
|
await login(emailRef.current, passwordRef.current, '');
|
||||||
router.push('/');
|
router.push('/');
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
setError(err.message || 'Login failed. Check your credentials.');
|
setError(err.message || 'Login failed. Check your credentials.');
|
||||||
refreshTurnstile();
|
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}, [login, router]);
|
}, [login, router]);
|
||||||
|
|
||||||
const renderTurnstile = useCallback(() => {
|
|
||||||
if (!TURNSTILE_SITE_KEY || !turnstileRef.current || !(window as any).turnstile) return;
|
|
||||||
if (widgetIdRef.current) {
|
|
||||||
try { (window as any).turnstile.remove(widgetIdRef.current); } catch {}
|
|
||||||
}
|
|
||||||
widgetIdRef.current = (window as any).turnstile.render(turnstileRef.current, {
|
|
||||||
sitekey: TURNSTILE_SITE_KEY,
|
|
||||||
size: 'normal',
|
|
||||||
theme: 'light',
|
|
||||||
callback: (token: string) => {
|
|
||||||
setTurnstileToken(token);
|
|
||||||
tokenRef.current = token;
|
|
||||||
setTurnstileReady(true);
|
|
||||||
},
|
|
||||||
'error-callback': () => { setTurnstileToken(''); tokenRef.current = ''; setTurnstileReady(false); },
|
|
||||||
'expired-callback': () => { setTurnstileToken(''); tokenRef.current = ''; setTurnstileReady(false); },
|
|
||||||
});
|
|
||||||
setTurnstileWidgetRendered(true);
|
|
||||||
}, [performLogin]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if ((window as any).turnstile && TURNSTILE_SITE_KEY) {
|
|
||||||
renderTurnstile();
|
|
||||||
}
|
|
||||||
}, [renderTurnstile]);
|
|
||||||
|
|
||||||
const refreshTurnstile = () => {
|
|
||||||
setTurnstileToken('');
|
|
||||||
tokenRef.current = '';
|
|
||||||
setTurnstileReady(false);
|
|
||||||
setTurnstileWidgetRendered(false);
|
|
||||||
setError('');
|
|
||||||
if (widgetIdRef.current && (window as any).turnstile) {
|
|
||||||
(window as any).turnstile.reset(widgetIdRef.current);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setError('');
|
setError('');
|
||||||
|
|
||||||
/*
|
|
||||||
// Invisible Turnstile flow:
|
|
||||||
// - If we don't have a token yet, execute Turnstile first.
|
|
||||||
// - If we already have a token, proceed with login.
|
|
||||||
if (TURNSTILE_SITE_KEY && !widgetIdRef.current) {
|
|
||||||
setError('Security check is still loading. Please wait a moment and try again.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Managed widget flow: require token before submitting.
|
|
||||||
if (TURNSTILE_SITE_KEY && !tokenRef.current) {
|
|
||||||
setError('Please complete the security check first.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
await performLogin();
|
await performLogin();
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-warm-100">
|
<div className="min-h-screen flex items-center justify-center bg-warm-100">
|
||||||
{TURNSTILE_SITE_KEY && (
|
|
||||||
<Script
|
|
||||||
src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
|
|
||||||
onReady={renderTurnstile}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div className="w-full max-w-md">
|
<div className="w-full max-w-md">
|
||||||
<div className="card p-8">
|
<div className="card p-8">
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
|
|
@ -156,19 +83,6 @@ export default function LoginPage() {
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/* Visible Turnstile widget */}
|
|
||||||
{TURNSTILE_SITE_KEY && (
|
|
||||||
<div className="flex flex-col items-center gap-2">
|
|
||||||
<div ref={turnstileRef} />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={refreshTurnstile}
|
|
||||||
className="text-xs text-gray-400 hover:text-gray-600 underline"
|
|
||||||
>
|
|
||||||
Refresh verification
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn-primary w-full"
|
className="btn-primary w-full"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue