admin/NetMapper2026
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix demo login credentials and form encoding
CI / basic-check (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Perplexity Bot
2026-08-04 20:25:33 +00:00
parent 8aae681706
commit a6d0dd6c68
3 changed files with 95 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app-shell.css
+3 -6
View File
@@ -24,16 +24,13 @@ body { margin: 0; background: linear-gradient(180deg, #0b1020 0%, #111827 100%);
.shell-card.warning { border-color: rgba(251, 191, 36, 0.35); }
.shell-card-body { margin-top: 12px; }
.shell-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: #cbd5e1; }
.options-roadmap { display: grid; gap: 12px; }
.options-roadmap-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.options-roadmap-item p { margin: 6px 0 0; color: #94a3b8; }
.options-step { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: rgba(37, 99, 235, 0.18); color: #bfdbfe; font-weight: 700; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 420px); background: rgba(17,24,39,0.92); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 24px; }
.login-eyebrow { color: #93c5fd; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; }
.login-copy, .login-error { color: #94a3b8; }
.login-copy, .login-hint { color: #94a3b8; }
.login-error { color: #fca5a5; }
.login-form { display: grid; gap: 12px; margin-top: 16px; }
.login-form label { display: grid; gap: 6px; }
.login-form input { border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); border-radius: 12px; padding: 12px 14px; }
.login-form input { border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); border-radius: 12px; padding: 12px 14px; color: #e5e7eb; }
.login-form button { border: 0; border-radius: 12px; padding: 12px 14px; background: #2563eb; color: white; font-weight: 600; }
@media (max-width: 1100px) { .app-shell { grid-template-columns: 1fr; } .app-sidebar { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .shell-grid, .shell-grid.two-columns { grid-template-columns: 1fr; } }
frontend/src/pages/LoginPage.tsx
+47 -7
View File
@@ -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>
);
}