59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate } from "react-router";
|
|
import client from "~/api/client";
|
|
import { useUserStore } from "~/hooks/user";
|
|
|
|
export default function LoginPage() {
|
|
const user = useUserStore((state) => state.user);
|
|
const setUser = useUserStore((state) => state.setUser);
|
|
const [error, setError] = useState(false);
|
|
const navigator = useNavigate();
|
|
|
|
async function login(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
const formData = new FormData(event.currentTarget);
|
|
let username = formData.get("username");
|
|
let password = formData.get("password");
|
|
let [newUser, status] = await client.POST("/login", {
|
|
body: {
|
|
username: username as string,
|
|
password: password as string,
|
|
},
|
|
});
|
|
if (status === 200) {
|
|
setUser(newUser);
|
|
navigator("/");
|
|
} else {
|
|
setError(true);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{user !== null ? (
|
|
<h1>You are already logged in.</h1>
|
|
) : (
|
|
<>
|
|
<h1>Login</h1>
|
|
{error && (
|
|
<h2 style={{ color: "red" }}>
|
|
An error occurred. Please try again.
|
|
</h2>
|
|
)}
|
|
<form onSubmit={login}>
|
|
<label>
|
|
Username:
|
|
<input type="text" name="username" />
|
|
</label>
|
|
<label>
|
|
Password:
|
|
<input type="password" name="password" />
|
|
</label>
|
|
<button type="submit">Login</button>
|
|
</form>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|