ui redesign, markdown fix + metadata and auth header

frontend/src/components/react/admin/Login.tsx

@@ -1,15 +1,30 @@
 import { useState } from 'react';
+import { login, ApiError } from '../../../lib/api';
 import { useAuth } from '../../../stores/auth';
 
 export default function Login() {
   const [value, setValue] = useState('');
-  const setToken = useAuth(s => s.setToken);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const setLoggedIn = useAuth(s => s.setLoggedIn);
 
-  function handleSubmit(e: React.FormEvent) {
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
-    if (value.trim()) {
-      setToken(value.trim());
+    const token = value.trim();
+    if (!token) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await login(token);
+      setLoggedIn(true);
       window.location.href = '/admin';
+    } catch (e) {
+      if (e instanceof ApiError && e.status === 401) {
+        setError('Invalid token.');
+      } else {
+        setError('Login failed. Try again.');
+      }
+      setBusy(false);
     }
   }
 
@@ -27,12 +42,22 @@ export default function Login() {
               required
               value={value}
               onChange={e => setValue(e.target.value)}
+              autoComplete="current-password"
               className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
               placeholder="••••••••••••"
             />
           </div>
-          <button type="submit" className="w-full bg-mauve text-crust font-bold py-3 rounded-lg hover:bg-pink transition-colors">
-            Login
+          {error && (
+            <p className="text-sm text-red bg-red/10 border border-red/20 rounded-lg px-3 py-2">
+              {error}
+            </p>
+          )}
+          <button
+            type="submit"
+            disabled={busy}
+            className="w-full bg-mauve text-crust font-bold py-3 rounded-lg hover:bg-pink transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            {busy ? 'Logging in...' : 'Login'}
           </button>
         </form>
       </div>