20 lines
1.5 KiB
TypeScript
20 lines
1.5 KiB
TypeScript
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('');
|
|
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); }
|
|
};
|
|
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>;
|
|
}
|