File size: 1,382 Bytes
cce8120 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | import React, { useState } from 'react';
import api, { setAuthToken } from '../api';
interface LoginProps {
onLogin: (token: string) => void;
}
const Login: React.FC<LoginProps> = ({ onLogin }) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState<string | null>(null);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
const response = await api.post('/auth/login', { email, password });
const token = response.data.access_token;
setAuthToken(token);
onLogin(token);
} catch (err: any) {
setError(err.response?.data?.detail || 'Login failed');
}
};
return (
<div style={{ maxWidth: 400, margin: 'auto', paddingTop: '2rem' }}>
<h2>Login</h2>
{error && <p style={{ color: 'red' }}>{error}</p>}
<form onSubmit={handleSubmit}>
<div>
<label>Email:</label><br />
<input type="email" value={email} onChange={e => setEmail(e.target.value)} required />
</div>
<div>
<label>Password:</label><br />
<input type="password" value={password} onChange={e => setPassword(e.target.value)} required />
</div>
<button type="submit" style={{ marginTop: '1rem' }}>Login</button>
</form>
</div>
);
};
export default Login;
|