66 lines
1.3 KiB
TypeScript
66 lines
1.3 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 { Navigate, useNavigate } from "react-router";
|
|
|
|
|
|
export default function LoginPage(){
|
|
const { jwt, setJwt } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
|
|
const login = async (formData: FormData) => {
|
|
const username = formData.get("username") as string;
|
|
const password = formData.get("password") as string;
|
|
|
|
|
|
const response = await fetch(`${import.meta.env.VITE_API_URL}/auth/token`, {
|
|
method: "GET",
|
|
headers: {
|
|
Authorization: "Basic " + btoa(`${username}:${password}`)
|
|
},
|
|
credentials: "include"
|
|
});
|
|
|
|
if(response.status === 200){
|
|
const json = await response.json();
|
|
setJwt(json.token);
|
|
navigate("/raidGroup");
|
|
}
|
|
else{
|
|
//TODO: Handle error
|
|
}
|
|
}
|
|
|
|
|
|
if(jwt){
|
|
return <Navigate to="/"/>;
|
|
}
|
|
|
|
|
|
return (
|
|
<form
|
|
action={login}
|
|
className="flex flex-col justify-center space-y-8"
|
|
>
|
|
<TextInput
|
|
id="username"
|
|
name="username"
|
|
placeholder="Username"
|
|
/>
|
|
<PasswordInput
|
|
id="password"
|
|
name="password"
|
|
placeholder="Password"
|
|
/>
|
|
<PrimaryButton
|
|
className="mx-auto"
|
|
type="submit"
|
|
>
|
|
Login
|
|
</PrimaryButton>
|
|
</form>
|
|
);
|
|
}
|