Graceful error message while logging in or registering through our system.

frontend/app/login/page.tsx

@@ -12,6 +12,7 @@ export default function LoginPage() {
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
     const [verificationCode, setVerificationCode] = useState("");
+    const [otp, setOtp] = useState(['', '', '', '', '', '']);
     const [error, setError] = useState("");
     const [successMessage, setSuccessMessage] = useState("");
     const [loading, setLoading] = useState(false);
@@ -67,6 +68,40 @@ export default function LoginPage() {
 
     // Global Cursor is managed by components/shared/CustomCursor.tsx
 
+    const handleOtpChange = (index: number, value: string) => {
+        // Handle pasting multiple characters
+        if (value.length > 1) {
+            const pasted = value.slice(0, 6).split('');
+            const newOtp = [...otp];
+            pasted.forEach((char, i) => {
+                if (index + i < 6) newOtp[index + i] = char;
+            });
+            setOtp(newOtp);
+            setVerificationCode(newOtp.join(''));
+            
+            // Focus the correct input after paste
+            const nextIndex = Math.min(index + pasted.length, 5);
+            document.getElementById(`otp-${nextIndex}`)?.focus();
+            return;
+        }
+
+        const newOtp = [...otp];
+        newOtp[index] = value;
+        setOtp(newOtp);
+        setVerificationCode(newOtp.join(''));
+
+        // Move to next input if typing a character
+        if (value && index < 5) {
+            document.getElementById(`otp-${index + 1}`)?.focus();
+        }
+    };
+
+    const handleOtpKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Backspace' && !otp[index] && index > 0) {
+            document.getElementById(`otp-${index - 1}`)?.focus();
+        }
+    };
+
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
         setError("");
@@ -109,6 +144,9 @@ export default function LoginPage() {
                     setError(detail[0]?.msg || "Validation error. Please check your inputs.");
                 } else if (typeof detail === 'string') {
                     setError(detail);
+                } else if (typeof err.response?.data === 'string') {
+                    // This happens if the proxy (Vercel/HuggingFace) returns a 500/502 HTML error page
+                    setError(`Server Error (${err.response.status}): The backend may be restarting or unavailable. Please wait a minute and try again.`);
                 } else {
                     setError("Server returned an unexpected error. Please try again.");
                 }
@@ -178,16 +216,19 @@ export default function LoginPage() {
 
                     <form onSubmit={handleSubmit} className="space-y-4">
                         {mode === 'verify' ? (
-                            <div className="relative group">
-                                <KeyRound className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#d0c4bb]/40 group-focus-within:text-[var(--theme-text)] transition-colors" />
-                                <input 
-                                    type="text" 
-                                    required={mode === 'verify'}
-                                    value={verificationCode}
-                                    onChange={(e) => setVerificationCode(e.target.value)}
-                                    placeholder="6-Digit Verification Code"
-                                    className="w-full bg-theme-text/5 border border-theme-border rounded-xl py-4 pl-12 pr-4 text-[var(--theme-text)] placeholder-[#d0c4bb]/60 focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono text-sm tracking-widest"
-                                />
+                            <div className="flex justify-between gap-2 max-w-xs mx-auto mb-4">
+                                {otp.map((digit, index) => (
+                                    <input
+                                        key={index}
+                                        id={`otp-${index}`}
+                                        type="text"
+                                        maxLength={6} // allow paste
+                                        value={digit}
+                                        onChange={(e) => handleOtpChange(index, e.target.value)}
+                                        onKeyDown={(e) => handleOtpKeyDown(index, e)}
+                                        className="w-12 h-14 bg-theme-text/5 border border-theme-border rounded-xl text-center text-xl text-[var(--theme-text)] focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono"
+                                    />
+                                ))}
                             </div>
                         ) : (
                             <>