95 lines
2.1 KiB
TypeScript
95 lines
2.1 KiB
TypeScript
import PrimaryButton from "@/components/button/PrimaryButton";
|
|
import PasswordInput from "@/components/input/PasswordInput";
|
|
import TextInput from "@/components/input/TextInput";
|
|
import { useAuth } from "@/providers/AuthProvider";
|
|
import { useTimedModal } from "@/providers/TimedModalProvider";
|
|
import { Link, Navigate, useNavigate } from "react-router";
|
|
|
|
|
|
export default function LoginPage(){
|
|
const { jwt, setTokenData } = useAuth();
|
|
const navigate = useNavigate();
|
|
const { addSuccessMessage, addErrorMessage } = useTimedModal();
|
|
|
|
|
|
const login = async (formData: FormData) => {
|
|
const username = formData.get("username") as string;
|
|
const password = formData.get("password") as string;
|
|
|
|
|
|
await fetch(`${import.meta.env.VITE_API_URL}/auth/token`, {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: "Basic " + btoa(`${username}:${password}`)
|
|
},
|
|
credentials: "include"
|
|
})
|
|
.then(async (response) => {
|
|
if(response.status === 200){
|
|
addSuccessMessage("Logged in successfully");
|
|
const json = await response.json();
|
|
setTokenData(json);
|
|
navigate("/raidGroup");
|
|
}
|
|
else{
|
|
addErrorMessage("Failed to log in: " + ((await response.json()).errors as string[]).join(",\n"));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
addErrorMessage("Failed to log in: " + error);
|
|
});
|
|
}
|
|
|
|
|
|
if(jwt){
|
|
return <Navigate to="/"/>;
|
|
}
|
|
|
|
|
|
return (
|
|
<main>
|
|
<form
|
|
action={login}
|
|
className="flex flex-col items-center justify-center space-y-8"
|
|
>
|
|
<div
|
|
className="mx-auto"
|
|
>
|
|
<TextInput
|
|
id="username"
|
|
name="username"
|
|
placeholder="Username"
|
|
/>
|
|
</div>
|
|
<div
|
|
className="mx-auto"
|
|
>
|
|
<PasswordInput
|
|
id="password"
|
|
name="password"
|
|
placeholder="Password"
|
|
/>
|
|
</div>
|
|
<div
|
|
className="flex flex-row justify-center items-center"
|
|
>
|
|
<PrimaryButton
|
|
type="submit"
|
|
>
|
|
Login
|
|
</PrimaryButton>
|
|
</div>
|
|
<div
|
|
className="flex flex-row justify-center items-center"
|
|
>
|
|
<Link
|
|
to="/forgotPassword"
|
|
>
|
|
Forgot Password?
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
);
|
|
}
|