blob: cc3a5bd1c86b1f329b0cb23d80f1edc7267ef084 (
plain)
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
89
90
91
92
93
|
import { useState, FormEvent } from 'react';
import styles from '../styles/Auth.module.css';
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import Navbar from './Navbar';
function Login() {
document.title = 'LinkLogger | Login';
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const navigate = useNavigate();
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
try {
const res = await axios.post(
'/api/auth/token',
new URLSearchParams({
username: username,
password: password,
}),
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
}
);
if (res.status === 200) {
navigate('/dashboard');
}
} catch (error: unknown) {
if (axios.isAxiosError(error)) {
const customErrorMessage = error.response?.data?.detail || null;
setPassword('');
setError(customErrorMessage || 'An error occurred. Please try again.');
} else {
setPassword('');
setError('Unknown error. Please try again.');
}
} finally {
setIsSubmitting(false);
}
};
return (
<>
<Navbar />
<div className={styles.container}>
<h1>Log In</h1>
<p className={error ? styles.errorVisible : styles.errorHidden}>
{error}
</p>
<hr></hr>
<form onSubmit={handleSubmit}>
<input
className={styles.authInput}
type="text"
placeholder="username"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
<input
className={styles.authInput}
type="password"
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</form>
<hr></hr>
<p className={styles.footnote}>
Don't have an account?{' '}
<Link to="/signup" className={styles.footnoteLink}>
Create one now
</Link>
</p>
</div>
</>
);
}
export default Login;
|
