refactor(frontend): moved the login to its own componet
This commit is contained in:
@@ -1,76 +1,129 @@
|
|||||||
import {useState} from "react";
|
|
||||||
import {useSessionStore} from "../../lib/store/sessionStore";
|
import {useSessionStore} from "../../lib/store/sessionStore";
|
||||||
import {useQueryClient} from "@tanstack/react-query";
|
import {LstCard} from "../extendedUI/LstCard";
|
||||||
|
import {CardHeader} from "../ui/card";
|
||||||
|
import {toast} from "sonner";
|
||||||
|
import {z} from "zod";
|
||||||
|
import {useRouter} from "@tanstack/react-router";
|
||||||
|
import {Controller, useForm} from "react-hook-form";
|
||||||
|
import {zodResolver} from "@hookform/resolvers/zod";
|
||||||
|
import {Label} from "../ui/label";
|
||||||
|
import {Input} from "../ui/input";
|
||||||
|
import {Checkbox} from "../ui/checkbox";
|
||||||
|
import {Button} from "../ui/button";
|
||||||
|
|
||||||
|
const FormSchema = z.object({
|
||||||
|
username: z.string().min(1, "You must enter a valid username"),
|
||||||
|
password: z.string().min(4, "You must enter a valid password"),
|
||||||
|
rememberMe: z.boolean(),
|
||||||
|
});
|
||||||
|
|
||||||
const LoginForm = () => {
|
const LoginForm = () => {
|
||||||
const [username, setUsername] = useState("");
|
|
||||||
const [password, setPassword] = useState("");
|
|
||||||
const [error, setError] = useState("");
|
|
||||||
const {setSession} = useSessionStore();
|
const {setSession} = useSessionStore();
|
||||||
const queryClient = useQueryClient();
|
const rememeberMe = localStorage.getItem("rememberMe") === "true";
|
||||||
|
const username = localStorage.getItem("username") || "";
|
||||||
|
const router = useRouter();
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
control,
|
||||||
|
formState: {errors},
|
||||||
|
} = useForm<z.infer<typeof FormSchema>>({
|
||||||
|
resolver: zodResolver(FormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
username: username || "",
|
||||||
|
password: "",
|
||||||
|
rememberMe: rememeberMe,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmitLogin = async (value: z.infer<typeof FormSchema>) => {
|
||||||
|
// Do something with form data
|
||||||
|
|
||||||
|
// first update the rememberMe incase it was selected
|
||||||
|
if (value.rememberMe) {
|
||||||
|
localStorage.setItem("rememberMe", value.rememberMe.toString());
|
||||||
|
localStorage.setItem("username", value.username);
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem("rememberMe");
|
||||||
|
localStorage.removeItem("username");
|
||||||
|
}
|
||||||
|
|
||||||
const handleLogin = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
// console.log("Form data", {username, password});
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch("/api/auth/login", {
|
const response = await fetch("/api/auth/login", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
},
|
},
|
||||||
body: JSON.stringify({username, password}),
|
body: JSON.stringify({username: value.username, password: value.password}),
|
||||||
});
|
});
|
||||||
|
|
||||||
// if (!response.ok) {
|
|
||||||
// throw new Error("Invalid credentials");
|
|
||||||
// }
|
|
||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
// console.log("Response", data.data);
|
|
||||||
// Store token in localStorage
|
// Store token in localStorage
|
||||||
localStorage.setItem("auth_token", data.data.token);
|
// localStorage.setItem("auth_token", data.data.token);
|
||||||
|
|
||||||
// Optionally store user info
|
setSession(data.user, data.token);
|
||||||
// localStorage.setItem("user", JSON.stringify(user));
|
toast.success(`You are logged in as ${data.user.username}`);
|
||||||
|
router.navigate({to: "/"});
|
||||||
setSession(data.data.user, data.data.token);
|
|
||||||
|
|
||||||
// Refetch the session data to reflect the logged-in state
|
|
||||||
queryClient.invalidateQueries();
|
|
||||||
|
|
||||||
setUsername("");
|
|
||||||
setPassword("");
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
toast.error("Invalid credentials");
|
||||||
setError("Invalid credentials");
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleLogin}>
|
<div className="ml-[25%]">
|
||||||
<div>
|
<LstCard className="p-3 w-96">
|
||||||
<label htmlFor="username">Username</label>
|
<CardHeader>
|
||||||
<input
|
<div>
|
||||||
id="username"
|
<p className="text-2xl">Login to LST</p>
|
||||||
type="text"
|
</div>
|
||||||
value={username}
|
</CardHeader>
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
<hr className="rounded"></hr>
|
||||||
required
|
<form onSubmit={handleSubmit(onSubmitLogin)}>
|
||||||
/>
|
<div>
|
||||||
</div>
|
<Label>Username</Label>
|
||||||
<div>
|
<Input
|
||||||
<label htmlFor="password">Password</label>
|
placeholder="smith001"
|
||||||
<input
|
{...register("username")}
|
||||||
id="password"
|
className={errors.username ? "border-red-500" : ""}
|
||||||
type="password"
|
aria-invalid={!!errors.username}
|
||||||
value={password}
|
/>
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
{errors.username && <p className="text-red-500 text-sm mt-1">{errors.username.message}</p>}
|
||||||
required
|
</div>
|
||||||
/>
|
<div>
|
||||||
</div>
|
<>
|
||||||
{error && <p>{error}</p>}
|
<Label htmlFor={"password"}>Password</Label>
|
||||||
<button type="submit">Login</button>
|
<Input
|
||||||
</form>
|
type="password"
|
||||||
|
{...register("password")}
|
||||||
|
className={errors.password ? "border-red-500" : ""}
|
||||||
|
aria-invalid={!!errors.password}
|
||||||
|
/>
|
||||||
|
{errors.password && <p className="text-red-500 text-sm mt-1">{errors.password.message}</p>}
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between pt-2">
|
||||||
|
<div className="flex">
|
||||||
|
<Controller
|
||||||
|
render={({field}) => (
|
||||||
|
<Checkbox id="remember" checked={field.value} onCheckedChange={field.onChange} />
|
||||||
|
)}
|
||||||
|
control={control}
|
||||||
|
name="rememberMe"
|
||||||
|
defaultValue={rememeberMe}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="remember" className="pl-2">
|
||||||
|
remember me
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button type="submit">Submit</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</LstCard>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,15 +1,6 @@
|
|||||||
import {createFileRoute, redirect, useRouter} from "@tanstack/react-router";
|
import {createFileRoute, redirect} from "@tanstack/react-router";
|
||||||
import {useForm, Controller} from "react-hook-form";
|
|
||||||
import {zodResolver} from "@hookform/resolvers/zod";
|
import LoginForm from "@/components/auth/LoginForm";
|
||||||
import {LstCard} from "../components/extendedUI/LstCard";
|
|
||||||
import {Button} from "../components/ui/button";
|
|
||||||
import {Input} from "../components/ui/input";
|
|
||||||
import {CardHeader} from "../components/ui/card";
|
|
||||||
import {Label} from "../components/ui/label";
|
|
||||||
import {toast} from "sonner";
|
|
||||||
import {useSessionStore} from "../lib/store/sessionStore";
|
|
||||||
import {Checkbox} from "../components/ui/checkbox";
|
|
||||||
import {z} from "zod";
|
|
||||||
|
|
||||||
export const Route = createFileRoute("/login")({
|
export const Route = createFileRoute("/login")({
|
||||||
component: RouteComponent,
|
component: RouteComponent,
|
||||||
@@ -23,117 +14,10 @@ export const Route = createFileRoute("/login")({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const FormSchema = z.object({
|
|
||||||
username: z.string().min(1, "You must enter a valid username"),
|
|
||||||
password: z.string().min(4, "You must enter a valid password"),
|
|
||||||
rememberMe: z.boolean(),
|
|
||||||
});
|
|
||||||
|
|
||||||
function RouteComponent() {
|
function RouteComponent() {
|
||||||
const {setSession} = useSessionStore();
|
|
||||||
const rememeberMe = localStorage.getItem("rememberMe") === "true";
|
|
||||||
const username = localStorage.getItem("username") || "";
|
|
||||||
const router = useRouter();
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
control,
|
|
||||||
formState: {errors},
|
|
||||||
} = useForm<z.infer<typeof FormSchema>>({
|
|
||||||
resolver: zodResolver(FormSchema),
|
|
||||||
defaultValues: {
|
|
||||||
username: username || "",
|
|
||||||
password: "",
|
|
||||||
rememberMe: rememeberMe,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmitLogin = async (value: z.infer<typeof FormSchema>) => {
|
|
||||||
// Do something with form data
|
|
||||||
console.log(value);
|
|
||||||
// first update the rememberMe incase it was selected
|
|
||||||
if (value.rememberMe) {
|
|
||||||
localStorage.setItem("rememberMe", value.rememberMe.toString());
|
|
||||||
localStorage.setItem("username", value.username);
|
|
||||||
} else {
|
|
||||||
localStorage.removeItem("rememberMe");
|
|
||||||
localStorage.removeItem("username");
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/auth/login", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify({username: value.username, password: value.password}),
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
// Store token in localStorage
|
|
||||||
// localStorage.setItem("auth_token", data.data.token);
|
|
||||||
|
|
||||||
setSession(data.user, data.token);
|
|
||||||
toast.success(`You are logged in as ${data.user.username}`);
|
|
||||||
router.navigate({to: "/"});
|
|
||||||
} catch (err) {
|
|
||||||
toast.error("Invalid credentials");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<div className="ml-[25%]">
|
<div className="ml-[25%]">
|
||||||
<LstCard className="p-3 w-96">
|
<LoginForm />
|
||||||
<CardHeader>
|
|
||||||
<div>
|
|
||||||
<p className="text-2xl">Login to LST</p>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<hr className="rounded"></hr>
|
|
||||||
<form onSubmit={handleSubmit(onSubmitLogin)}>
|
|
||||||
<div>
|
|
||||||
<Label>Username</Label>
|
|
||||||
<Input
|
|
||||||
placeholder="smith001"
|
|
||||||
{...register("username")}
|
|
||||||
className={errors.username ? "border-red-500" : ""}
|
|
||||||
aria-invalid={!!errors.username}
|
|
||||||
/>
|
|
||||||
{errors.username && <p className="text-red-500 text-sm mt-1">{errors.username.message}</p>}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<>
|
|
||||||
<Label htmlFor={"password"}>Password</Label>
|
|
||||||
<Input
|
|
||||||
type="password"
|
|
||||||
{...register("password")}
|
|
||||||
className={errors.password ? "border-red-500" : ""}
|
|
||||||
aria-invalid={!!errors.password}
|
|
||||||
/>
|
|
||||||
{errors.password && <p className="text-red-500 text-sm mt-1">{errors.password.message}</p>}
|
|
||||||
</>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between pt-2">
|
|
||||||
<div className="flex">
|
|
||||||
<Controller
|
|
||||||
render={({field}) => (
|
|
||||||
<Checkbox id="remember" checked={field.value} onCheckedChange={field.onChange} />
|
|
||||||
)}
|
|
||||||
control={control}
|
|
||||||
name="rememberMe"
|
|
||||||
defaultValue={rememeberMe}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="remember" className="pl-2">
|
|
||||||
remember me
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button type="submit">Submit</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</LstCard>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user