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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
import { useEffect, useState, type ChangeEvent, type FormEvent } from "react";
import { useNavigate } from "react-router-dom";
import { FadeLoader } from "react-spinners";
import Logo from "../components/Logo";
import API_URL from "../config";
import "../styles/Button.css";
import "../styles/Login.css";
import type {
ErrorResponse,
LoginFormData,
LoginResponse,
} from "../types/login";
const EMPTY_FORM_DATA: LoginFormData = {
email: "",
password: "",
};
function Login() {
const navigate = useNavigate();
const [errorMessage, setErrorMessage] = useState<string>("");
const [formData, setFormData] = useState<LoginFormData>(EMPTY_FORM_DATA);
const [isLoading, setIsLoading] = useState<boolean>(false);
function handleUserInput(event: ChangeEvent<HTMLInputElement>) {
if (errorMessage) {
setErrorMessage("");
}
setFormData((oldFormData) => ({
...oldFormData,
[event.target.name]: event.target.value,
}));
}
async function handleLogin(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
setErrorMessage("");
if (!formData.email || !formData.password) {
setErrorMessage("E-mail address and password are required.");
return;
}
setIsLoading(true);
try {
const response = await fetch(`${API_URL}/auth/login`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
});
if (!response.ok) {
const errorData: ErrorResponse = await response.json();
throw new Error(
errorData.message ||
`Login failed, status: ${response.status}`
);
}
const data: LoginResponse = await response.json();
localStorage.setItem("token-robot-tracker", data.token);
localStorage.setItem("user", JSON.stringify(data.user));
setFormData(EMPTY_FORM_DATA);
navigate("/dashboard", { replace: true });
} catch (error) {
console.error(error);
if (error instanceof Error) {
setErrorMessage(error.message);
} else {
setErrorMessage("An unexpected error occurred.");
}
} finally {
setIsLoading(false);
}
}
// Clear local storage on component mounting
useEffect(() => {
localStorage.removeItem("token-robot-tracker");
localStorage.removeItem("user");
}, []);
return (
<div className="login-page">
<div className="login-card">
<Logo />
<p className="subtitle">🤖 Please log in to use the app 🤖</p>
{/* "noValidate" to enable manual errorMessage in handleLogin; alternatively omit "required" */}
<form className="login-form" onSubmit={handleLogin} noValidate>
<div className="form-group">
<label htmlFor="email">E-Mail</label>
<input
type="email"
id="email"
name="email"
value={formData?.email || ""}
onChange={handleUserInput}
required
placeholder="Your e-mail..."
disabled={isLoading}
/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
id="password"
name="password"
value={formData?.password || ""}
onChange={handleUserInput}
required
placeholder="Your password..."
disabled={isLoading}
/>
</div>
{errorMessage && (
<div className="error-message">{errorMessage}</div>
)}
<button
className="btn btn-start"
disabled={isLoading}
type="submit"
>
{isLoading ? (
<div className="loading-spinner-container">
<FadeLoader />
</div>
) : (
"Login"
)}
</button>
</form>
</div>
</div>
);
}
export default Login;
|
