Reapply "Add Turnstile captcha to login"

This reverts commit a7c732e139.

src/dataService.ts

@@ -55,27 +55,30 @@ const buildDateRangeParams = (dateRange: DateRange) => new URLSearchParams({
     end: formatDateParam(dateRange.end)
 });
 
-export const login = async (email: string, password: string): Promise<boolean> => {
+export type LoginResult = 'success' | 'invalid_credentials' | 'captcha_failed' | 'server_error';
+
+export const login = async (email: string, password: string, captchaToken?: string): Promise<LoginResult> => {
   try {
     const response = await fetch(`${API_URL}/login`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ email, password }),
+      body: JSON.stringify({ email, password, captchaToken }),
     });
 
     if (response.ok) {
       const data = await response.json() as { token?: string; user?: AuthUser };
-      if (!data.token || !data.user) return false;
+      if (!data.token || !data.user) return 'server_error';
       localStorage.setItem('auth_token', data.token);
       localStorage.setItem('auth_user', JSON.stringify(data.user));
-      return true;
+      return 'success';
     }
-    return false;
+    if (response.status === 403) return 'captcha_failed';
+    return 'invalid_credentials';
   } catch (error) {
     console.error('Login failed', error);
-    return false;
+    return 'server_error';
   }
 };
 

src/pages/Login.tsx

@@ -1,29 +1,134 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Lock } from 'lucide-react';
 import { login } from '../dataService';
 
+declare global {
+  interface Window {
+    turnstile?: {
+      render: (
+        container: HTMLElement,
+        options: {
+          sitekey: string;
+          callback: (token: string) => void;
+          'expired-callback': () => void;
+          'error-callback': () => void;
+          theme: 'dark' | 'light' | 'auto';
+        }
+      ) => string;
+      reset: (widgetId?: string) => void;
+    };
+  }
+}
+
+const turnstileSiteKey = import.meta.env.VITE_TURNSTILE_SITE_KEY;
+const turnstileScriptId = 'turnstile-api-script';
+
 const Login = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [captchaToken, setCaptchaToken] = useState('');
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [captchaReady, setCaptchaReady] = useState(!turnstileSiteKey);
+  const captchaContainerRef = useRef<HTMLDivElement | null>(null);
+  const captchaWidgetIdRef = useRef<string | null>(null);
   const navigate = useNavigate();
+  const captchaEnabled = Boolean(turnstileSiteKey);
+
+  useEffect(() => {
+    if (!turnstileSiteKey || !captchaContainerRef.current || captchaWidgetIdRef.current) return;
+
+    const siteKey = turnstileSiteKey;
+
+    const renderCaptcha = () => {
+      if (!window.turnstile || !captchaContainerRef.current || captchaWidgetIdRef.current) return;
+
+      captchaWidgetIdRef.current = window.turnstile.render(captchaContainerRef.current, {
+        sitekey: siteKey,
+        theme: 'dark',
+        callback: (token) => {
+          setCaptchaToken(token);
+          setCaptchaReady(true);
+        },
+        'expired-callback': () => {
+          setCaptchaToken('');
+          setCaptchaReady(true);
+        },
+        'error-callback': () => {
+          setCaptchaToken('');
+          setCaptchaReady(false);
+          setError('Não foi possível carregar a verificação anti-bot.');
+        },
+      });
+      setCaptchaReady(true);
+    };
+
+    if (window.turnstile) {
+      renderCaptcha();
+      return;
+    }
+
+    const existingScript = document.getElementById(turnstileScriptId);
+    if (existingScript) {
+      existingScript.addEventListener('load', renderCaptcha, { once: true });
+      return () => existingScript.removeEventListener('load', renderCaptcha);
+    }
+
+    const script = document.createElement('script');
+    script.id = turnstileScriptId;
+    script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+    script.async = true;
+    script.defer = true;
+    script.addEventListener('load', renderCaptcha, { once: true });
+    script.addEventListener('error', () => {
+      setCaptchaReady(false);
+      setError('Não foi possível carregar a verificação anti-bot.');
+    }, { once: true });
+    document.head.appendChild(script);
+
+    return () => script.removeEventListener('load', renderCaptcha);
+  }, [captchaEnabled]);
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (captchaEnabled && !captchaToken) {
+      setError('Confirme a verificação anti-bot antes de entrar.');
+      return;
+    }
+
     setIsLoading(true);
     setError('');
 
     try {
-      const success = await login(email, password);
-      if (success) {
+      const result = await login(email, password, captchaToken);
+      if (result === 'success') {
         navigate('/graph');
-      } else {
+      } else if (result === 'captcha_failed') {
+        setError('A verificação anti-bot falhou. Tente novamente.');
+        if (captchaEnabled) {
+          setCaptchaToken('');
+          window.turnstile?.reset(captchaWidgetIdRef.current ?? undefined);
+        }
+      } else if (result === 'invalid_credentials') {
         setError('E-mail ou senha incorretos.');
+        if (captchaEnabled) {
+          setCaptchaToken('');
+          window.turnstile?.reset(captchaWidgetIdRef.current ?? undefined);
+        }
+      } else {
+        setError('Erro ao conectar ao servidor.');
+        if (captchaEnabled) {
+          setCaptchaToken('');
+          window.turnstile?.reset(captchaWidgetIdRef.current ?? undefined);
+        }
       }
     } catch {
       setError('Erro ao conectar ao servidor.');
+      if (captchaEnabled) {
+        setCaptchaToken('');
+        window.turnstile?.reset(captchaWidgetIdRef.current ?? undefined);
+      }
     } finally {
       setIsLoading(false);
     }
@@ -64,11 +169,20 @@ const Login = () => {
             />
           </div>
 
+          {captchaEnabled && (
+            <div className="min-h-[70px] rounded-xl border border-dark-border bg-dark-input/60 p-3">
+              <div ref={captchaContainerRef} className="flex justify-center" />
+              {!captchaReady && (
+                <p className="mt-2 text-center text-xs font-medium text-red-400">Verificação anti-bot indisponível.</p>
+              )}
+            </div>
+          )}
+
           {error && <p className="text-red-500 text-sm font-medium">{error}</p>}
 
           <button
             type="submit"
-            disabled={isLoading}
+            disabled={isLoading || !captchaReady || (captchaEnabled && !captchaToken)}
             className="w-full bg-brand-primary hover:bg-opacity-90 hover:scale-[1.02] active:scale-[0.98] text-zinc-900 font-bold py-3 rounded-xl transition-all duration-200 disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 mt-4 cursor-pointer"
           >
             {isLoading ? 'Entrando...' : 'Entrar'}

src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL?: string;
+  readonly VITE_TURNSTILE_SITE_KEY?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}