UI overhault

app/page.tsx

@@ -6,44 +6,87 @@ import Link from 'next/link';
 export default function Home() {
   const [loggedIn, setLoggedIn] = useState(false);
   const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    if (localStorage.getItem('auth')) setLoggedIn(true);
+    if (localStorage.getItem('auth')) {
+      window.location.href = '/domains';
+    }
   }, []);
 
   const handleLogin = async () => {
-    const response = await fetch('/api/auth', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ password }),
-    });
-    if (response.ok) {
-      const auth = btoa(`admin:${password}`);
-      localStorage.setItem('auth', auth);
-      setLoggedIn(true);
-    } else {
-      alert('Wrong password');
+    setError('');
+    setLoading(true);
+
+    try {
+      const response = await fetch('/api/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password }),
+      });
+
+      if (response.ok) {
+        const auth = btoa(`admin:${password}`);
+        localStorage.setItem('auth', auth);
+        window.location.href = '/domains';
+      } else {
+        setError('Falsches Passwort');
+      }
+    } catch (err) {
+      setError('Verbindungsfehler. Bitte erneut versuchen.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !loading) {
+      handleLogin();
     }
   };
 
   if (!loggedIn) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-blue-50 to-gray-100">
-        <div className="bg-white p-10 rounded-xl shadow-xl w-96">
-          <h1 className="text-3xl font-bold mb-8 text-center text-gray-800">Login to Mail S3 Admin</h1>
-          <input 
-            type="password" 
-            value={password} 
-            onChange={e => setPassword(e.target.value)} 
-            className="border border-gray-300 p-4 mb-6 w-full rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" 
-            placeholder="Enter password"
-          />
-          <button 
-            onClick={handleLogin} 
-            className="bg-blue-600 text-white p-4 rounded-lg w-full hover:bg-blue-700 transition font-medium"
-          >
-            Login
-          </button>
+        <div className="bg-white p-10 rounded-xl shadow-lg w-96 fade-in">
+          <h1 id="login-heading" className="text-3xl font-bold mb-8 text-center text-gray-800">
+            Login to Mail S3 Admin
+          </h1>
+          <form onSubmit={(e) => { e.preventDefault(); handleLogin(); }} aria-labelledby="login-heading">
+            <div className="mb-6">
+              <label htmlFor="password" className="sr-only">
+                Password
+              </label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={e => { setPassword(e.target.value); setError(''); }}
+                onKeyPress={handleKeyPress}
+                className={`border ${error ? 'border-red-500' : 'border-gray-300'} p-4 w-full rounded-lg focus:outline-none focus:ring-2 ${error ? 'focus:ring-red-500' : 'focus:ring-blue-500'} transition-colors`}
+                placeholder="Enter password"
+                aria-invalid={!!error}
+                aria-describedby={error ? "password-error" : undefined}
+                disabled={loading}
+                autoFocus
+              />
+              {error && (
+                <p id="password-error" role="alert" className="text-red-600 text-sm mt-2 fade-in">
+                  {error}
+                </p>
+              )}
+            </div>
+            <button
+              type="submit"
+              onClick={handleLogin}
+              disabled={loading}
+              className="bg-blue-600 text-white px-6 py-4 rounded-lg w-full hover:bg-blue-700 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed button-hover-lift focus-ring"
+              aria-label="Log in to admin panel"
+            >
+              {loading ? 'Logging in...' : 'Login'}
+            </button>
+          </form>
         </div>
       </div>
     );
@@ -51,12 +94,17 @@ export default function Home() {
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-blue-50 to-gray-100 p-8">
-      <h1 className="text-4xl font-bold mb-8 text-center text-gray-800">Mail S3 Admin</h1>
-      <div className="flex justify-center">
-        <Link href="/domains" className="bg-blue-600 text-white px-8 py-4 rounded-lg hover:bg-blue-700 transition shadow-md font-medium">
-          Go to Domains
-        </Link>
-      </div>
+      <main id="main-content" className="fade-in">
+        <h1 className="text-4xl font-bold mb-8 text-center text-gray-800">Mail S3 Admin</h1>
+        <div className="flex justify-center">
+          <Link
+            href="/domains"
+            className="bg-blue-600 text-white px-8 py-4 rounded-lg hover:bg-blue-700 transition-all shadow-md font-medium button-hover-lift focus-ring"
+          >
+            Go to Domains
+          </Link>
+        </div>
+      </main>
     </div>
   );
 }