Basic Captcha eingebaut

src/pages/LoginPage.tsx

@@ -11,12 +11,22 @@ const LoginPage = () => {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const navigate = useNavigate();
+  const [loginAttempts, setLoginAttempts] = useState(0);
+
+  const [captcha, setCaptcha] = useState("");
+  const [showCaptcha, setShowCaptcha] = useState(false);
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
 
     try {
+
+      if(showCaptcha && captcha.toLowerCase() !== "laudenbach") {
+        setError("Captcha falsch. Bitte versuche es erneut.");
+        return;
+      }
+
       const res = await fetch(`${apiBase}/api/login`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -39,6 +49,12 @@ const LoginPage = () => {
         setError("Zu viele fehlgeschlagene Login-Versuche. Bitte versuch es später erneut.");
       } else {
         setError("Login fehlgeschlagen. Bitte prüfe Benutzername und Passwort.");
+        const newAttempts = loginAttempts + 1;
+        setLoginAttempts(newAttempts);
+
+        if(newAttempts >= 3) {
+          setShowCaptcha(true);
+        }
       }
     }
     
@@ -66,6 +82,17 @@ const LoginPage = () => {
               onChange={(e) => setPassword(e.target.value)}
               required
             />
+            {showCaptcha && (
+              <div>
+                <label className="text-sm text-gray-700">Was ist der beste Verein?</label>
+                <Input
+                  placeholder="Antwort (z. B. Laudenbach)"
+                  value={captcha}
+                  onChange={(e) => setCaptcha(e.target.value)}
+                  required
+                />
+              </div>
+            )}
             {error && <p className="text-red-500 text-sm">{error}</p>}
             <Button type="submit" className="w-full bg-frog-500 hover:bg-frog-600 text-white">
               Einloggen