Feat: Build frontend login page with captcha

2026-03-16 21:41:02 +00:00 · 2026-03-14 00:03:35 -07:00
parent cf50d0e38d
commit 4fd6456e28
1 changed files with 104 additions and 0 deletions
--- a/app/page.js
+++ b/app/page.js
@@ -0,0 +1,104 @@
+'use client';
+import { useState, useRef } from 'react';
+
+export default function LoginPage() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [captcha, setCaptcha] = useState('');
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState('');
+    const captchaImgRef = useRef(null);
+
+    const refreshCaptcha = () => {
+        if (captchaImgRef.current) {
+            captchaImgRef.current.src = `/api/captcha?${new Date().getTime()}`;
+        }
+    };
+
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        setError('');
+        setSuccess('');
+
+        const res = await fetch('/api/login', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ email, password, captcha })
+        });
+
+        const data = await res.json();
+        if (!res.ok) {
+            setError(data.error);
+            refreshCaptcha();
+            setCaptcha('');
+        } else {
+            setSuccess(data.message);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-900 text-white font-sans">
+            <div className="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
+                <h1 className="text-2xl font-bold mb-6 text-center text-indigo-400">Kalbot Access</h1>
+                
+                {error && <div className="bg-red-500/20 border border-red-500 text-red-300 p-3 rounded mb-4 text-sm">{error}</div>}
+                {success && <div className="bg-green-500/20 border border-green-500 text-green-300 p-3 rounded mb-4 text-sm">{success}</div>}
+
+                <form onSubmit={handleLogin} className="space-y-4">
+                    <div>
+                        <label className="block text-sm text-gray-400 mb-1">Email</label>
+                        <input 
+                            type="email" 
+                            required
+                            className="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-indigo-500"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                        />
+                    </div>
+                    <div>
+                        <label className="block text-sm text-gray-400 mb-1">Password</label>
+                        <input 
+                            type="password" 
+                            required
+                            className="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-indigo-500"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                        />
+                    </div>
+                    
+                    <div>
+                        <label className="block text-sm text-gray-400 mb-1">Captcha Verification</label>
+                        <div className="flex items-center space-x-3 mb-2">
+                            <img 
+                                ref={captchaImgRef} 
+                                src="/api/captcha" 
+                                alt="captcha" 
+                                className="h-12 rounded cursor-pointer border border-gray-600"
+                                onClick={refreshCaptcha}
+                                title="Click to refresh"
+                            />
+                            <button type="button" onClick={refreshCaptcha} className="text-sm text-indigo-400 hover:text-indigo-300">
+                                Refresh
+                            </button>
+                        </div>
+                        <input 
+                            type="text" 
+                            required
+                            placeholder="Enter the text above"
+                            className="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-indigo-500"
+                            value={captcha}
+                            onChange={(e) => setCaptcha(e.target.value)}
+                        />
+                    </div>
+
+                    <button 
+                        type="submit" 
+                        className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded transition-colors mt-6"
+                    >
+                        Login
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+}