File size: 2,379 Bytes
e2eff86 | 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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | import React, { useState } from 'react';
import Link from '@docusaurus/Link';
import { useHistory } from '@docusaurus/router';
import apiService from '../../utils/apiService';
import './Auth.css';
const Login = () => {
const [formData, setFormData] = useState({
email: '',
password: ''
});
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const history = useHistory();
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setError('');
try {
// Call the backend API using apiService
const response = await apiService.auth.login(formData);
// Store token and redirect
localStorage.setItem('access_token', response.access_token);
history.push('/');
} catch (err) {
setError(err.message || 'Login failed. Please check your credentials and try again.');
} finally {
setLoading(false);
}
};
return (
<div className="auth-container">
<div className="auth-form">
<h2>Login to Your Account</h2>
{error && <div className="error-message">{error}</div>}
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
id="password"
name="password"
value={formData.password}
onChange={handleChange}
required
/>
</div>
<button type="submit" disabled={loading} className="auth-button">
{loading ? 'Logging in...' : 'Login'}
</button>
</form>
<div className="auth-footer">
<p>
Don't have an account? <Link to="/signup">Sign up</Link>
</p>
<p>
<Link to="/">Back to home</Link>
</p>
</div>
</div>
</div>
);
};
export default Login; |