67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { useState, type FormEvent } from 'react';
|
||
import { useAuth } from '../context/AuthContext';
|
||
|
||
export function LoginPage() {
|
||
const { login, error } = useAuth();
|
||
const [username, setUsername] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [submitting, setSubmitting] = useState(false);
|
||
|
||
const handleSubmit = async (e: FormEvent) => {
|
||
e.preventDefault();
|
||
setSubmitting(true);
|
||
try {
|
||
await login(username, password);
|
||
} catch {
|
||
// error state managed by AuthContext
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="login-page">
|
||
<div className="login-card">
|
||
<div className="login-header">
|
||
<span className="login-icon">₽</span>
|
||
<h1>Семейный бюджет</h1>
|
||
<p>Войдите для продолжения</p>
|
||
</div>
|
||
<form onSubmit={handleSubmit} className="login-form">
|
||
{error && <div className="alert alert-error">{error}</div>}
|
||
<div className="form-group">
|
||
<label htmlFor="login">Логин</label>
|
||
<input
|
||
id="login"
|
||
type="text"
|
||
value={username}
|
||
onChange={(e) => setUsername(e.target.value)}
|
||
autoComplete="username"
|
||
required
|
||
autoFocus
|
||
/>
|
||
</div>
|
||
<div className="form-group">
|
||
<label htmlFor="password">Пароль</label>
|
||
<input
|
||
id="password"
|
||
type="password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
autoComplete="current-password"
|
||
required
|
||
/>
|
||
</div>
|
||
<button
|
||
type="submit"
|
||
className="btn btn-primary btn-block"
|
||
disabled={submitting}
|
||
>
|
||
{submitting ? 'Вход...' : 'Войти'}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|