File size: 1,877 Bytes
7781557 902845d 7781557 902845d 7781557 |
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 |
import React, { useState } from 'react';
import PasswordInput from './ui/password';
import { useNavigate, Link } from 'react-router-dom';
import { useAuth } from '../services/AuthContext';
import loginBg from '../../public/images/salesbuddy_logo.jpg';
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const navigate = useNavigate();
const { login } = useAuth();
const handleSubmit = async (e) => {
e.preventDefault();
setError('');
const formData = new FormData();
formData.append('username', username);
formData.append('password', password);
try {
const response = await fetch('http://localhost:8000/token', {
method: 'POST',
body: formData,
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.detail || 'Login failed');
}
login(data.access_token);
navigate('/');
} catch (err) {
setError(err.message);
}
};
return (
<>
<div className="grid-container">
<div className="column-a" style={{ backgroundImage: `url(${loginBg})` }}>
</div>
<div className="column-b">
<div className="login-panel">
<h6>Please provide your credentials:</h6>
<input className="textbox" type="text" placeholder="User" onChange={(e) => setUsername(e.target.value)} />
<PasswordInput onChange={(e) => setPassword(e.target.value)} />
<button onClick={handleSubmit}>Sign In</button>
<div style={{margin:"auto"}}>
<Link to="/register" className="text-blue-600 hover:text-blue-500">
Register?
</Link>
</div>
</div>
</div>
</div>
</>
);
};
export default Login; |