134 lines
3.4 KiB
TypeScript
134 lines
3.4 KiB
TypeScript
import { Link, useNavigate } from "@tanstack/react-router";
|
|
import axios from "axios";
|
|
import { toast } from "sonner";
|
|
import {
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../../../../components/ui/card";
|
|
import { LstCard } from "../../../../components/ui/lstCard";
|
|
import { getSession, useAuth, useUserRoles } from "../../../../lib/authClient";
|
|
import { useAppForm } from "../../../../lib/formStuff";
|
|
|
|
export default function LoginForm({ redirectPath }: { redirectPath: string }) {
|
|
//const search = useSearch({ from: "/_app/(auth)/login" });
|
|
const username = localStorage.getItem("username") || "";
|
|
const rememberMe = localStorage.getItem("rememberMe") === "true";
|
|
const { setSession } = useAuth();
|
|
const { fetchRoles } = useUserRoles();
|
|
const navigate = useNavigate();
|
|
|
|
const form = useAppForm({
|
|
defaultValues: {
|
|
username: username,
|
|
password: "",
|
|
rememberMe: rememberMe,
|
|
},
|
|
onSubmit: async ({ value }) => {
|
|
if (value.rememberMe) {
|
|
localStorage.setItem("rememberMe", value.rememberMe.toString());
|
|
localStorage.setItem("username", value.username);
|
|
} else {
|
|
localStorage.removeItem("rememberMe");
|
|
localStorage.removeItem("username");
|
|
}
|
|
|
|
try {
|
|
await axios.post("/lst/api/user/login", {
|
|
username: value.username.toLowerCase(),
|
|
password: value.password,
|
|
});
|
|
|
|
const session = await getSession();
|
|
setSession(session);
|
|
form.reset();
|
|
fetchRoles();
|
|
|
|
toast.success(
|
|
`Welcome back ${session?.user.name ? session?.user.name : session?.user.username} `,
|
|
);
|
|
//router.invalidate();
|
|
if (redirectPath.includes("profile")) {
|
|
navigate({ to: "/" });
|
|
} else {
|
|
navigate({ to: redirectPath });
|
|
}
|
|
} catch (error) {
|
|
// @ts-ignore
|
|
if (!error.response.data.success) {
|
|
// @ts-ignore
|
|
toast.error(error?.response?.data.message);
|
|
} else {
|
|
// @ts-ignore
|
|
toast.error(error?.message);
|
|
}
|
|
}
|
|
},
|
|
});
|
|
return (
|
|
<div className="">
|
|
<LstCard className="p-3 w-96">
|
|
<CardHeader>
|
|
<CardTitle>Login to your account</CardTitle>
|
|
<CardDescription>
|
|
Enter your username and password below
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
form.handleSubmit();
|
|
}}
|
|
>
|
|
<form.AppField
|
|
name="username"
|
|
children={(field) => (
|
|
<field.InputField
|
|
label="Username"
|
|
inputType="string"
|
|
required={true}
|
|
/>
|
|
)}
|
|
/>
|
|
<form.AppField
|
|
name="password"
|
|
children={(field) => (
|
|
<field.InputPasswordField label="Password" required={true} />
|
|
)}
|
|
/>
|
|
<div className="flex flex-row justify-between mt-3 mb-3">
|
|
<form.AppField
|
|
name="rememberMe"
|
|
children={(field) => (
|
|
<field.CheckboxField label="Remember me" />
|
|
)}
|
|
/>
|
|
<Link
|
|
to="/user/resetpassword"
|
|
className="inline-block text-sm underline-offset-4 hover:underline"
|
|
>
|
|
Forgot your password?
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex justify-end mt-2">
|
|
<form.AppForm>
|
|
<form.SubmitButton>Login</form.SubmitButton>
|
|
</form.AppForm>
|
|
</div>
|
|
</form>
|
|
|
|
<div className="mt-4 text-center text-sm">
|
|
Don't have an account?{" "}
|
|
<Link to={"/user/signup"} className="underline underline-offset-4">
|
|
Sign up
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</LstCard>
|
|
</div>
|
|
);
|
|
}
|