66 lines
1.6 KiB
JavaScript
66 lines
1.6 KiB
JavaScript
import { useNavigate } from "react-router-dom";
|
|
import { useState } from "react";
|
|
|
|
function Login(props) {
|
|
let navigate = useNavigate();
|
|
let [username, setUsername] = useState("");
|
|
let [password, setPassword] = useState("");
|
|
return (
|
|
<div>
|
|
<h2>Login</h2>
|
|
<label htmlFor="username">Username</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
<label htmlFor="password">Password</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
<span>
|
|
<button
|
|
onClick={() => {
|
|
if (!username || !password) {
|
|
alert("Please enter username and password");
|
|
return;
|
|
}
|
|
fetch("/api/v1/login", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
username,
|
|
password,
|
|
}),
|
|
})
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
if (data.error) {
|
|
alert(data.error);
|
|
return;
|
|
}
|
|
props.setUser(data.user);
|
|
navigate("/");
|
|
});
|
|
}}
|
|
>
|
|
Login
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
navigate("/manage/register");
|
|
}}
|
|
>Register</button>
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Login;
|