Fix demo login credentials and form encoding

frontend/src/pages/LoginPage.tsx

@@ -1,19 +1,59 @@
 import { useState } from 'react';
 
 type Props = { onLogin: (token: string) => void };
+
 export function LoginPage({ onLogin }: Props) {
   const [username, setUsername] = useState('admin');
   const [password, setPassword] = useState('admin123');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+
   const submit = async (e: React.FormEvent) => {
-    e.preventDefault(); setLoading(true); setError('');
+    e.preventDefault();
+    setLoading(true);
+    setError('');
     try {
-      const body = new URLSearchParams(); body.set('username', username); body.set('password', password);
-      const res = await fetch('/auth/token', { method: 'POST', body });
-      if (!res.ok) throw new Error('Login fallito');
-      const data = await res.json(); onLogin(data.access_token);
-    } catch (err) { setError(err instanceof Error ? err.message : 'Login fallito'); } finally { setLoading(false); }
+      const body = new URLSearchParams();
+      body.set('username', username);
+      body.set('password', password);
+      const res = await fetch('/auth/token', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: body.toString(),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => null);
+        throw new Error(data?.detail ?? 'Login fallito');
+      }
+      const data = await res.json();
+      onLogin(data.access_token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login fallito');
+    } finally {
+      setLoading(false);
+    }
   };
-  return <main className="login-page"><section className="login-card"><p className="login-eyebrow">NetMapper auth</p><h1>Accedi al book of truth</h1><p className="login-copy">L'accesso è protetto per impedire lettura e modifica dei dati da terzi.</p><form onSubmit={submit} className="login-form"><label>Username<input value={username} onChange={(e) => setUsername(e.target.value)} /></label><label>Password<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /></label>{error && <p className="login-error">{error}</p>}<button type="submit" disabled={loading}>{loading ? 'Accesso...' : 'Entra'}</button></form></section></main>;
+
+  return (
+    <main className="login-page">
+      <section className="login-card">
+        <p className="login-eyebrow">NetMapper auth</p>
+        <h1>Accedi al book of truth</h1>
+        <p className="login-copy">L'accesso è protetto per impedire lettura e modifica dei dati da terzi.</p>
+        <form onSubmit={submit} className="login-form">
+          <label>
+            Username
+            <input value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" />
+          </label>
+          <label>
+            Password
+            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
+          </label>
+          <p className="login-hint">Credenziali demo: admin / admin123 oppure viewer / viewer123</p>
+          {error && <p className="login-error">{error}</p>}
+          <button type="submit" disabled={loading}>{loading ? 'Accesso...' : 'Entra'}</button>
+        </form>
+      </section>
+    </main>
+  );
 }