Added /users/me route, and handling auth in frontend

frontend/components/login-form.tsx

@@ -1,14 +1,39 @@
+"use client";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import useLogin from "@/hooks/use-login";
+import { Loader2 } from "lucide-react";
 
 export function LoginForm({
 	className,
 	...props
 }: React.ComponentPropsWithoutRef<"form">) {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const { login, loading, isSuccess } = useLogin();
+	const router = useRouter();
+
+	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		try {
+			const res = await login({ email, password });
+			if (res.status === "Success") router.push("/dashboard");
+			console.log(res);
+		} catch (err: any) {
+			console.log(err.message);
+		}
+	};
+
 	return (
-		<form className={cn("flex flex-col gap-6", className)} {...props}>
+		<form
+			onSubmit={handleSubmit}
+			className={cn("flex flex-col gap-6", className)}
+			{...props}
+		>
 			<div className="flex flex-col items-center gap-2 text-center">
 				<h1 className="text-2xl font-bold">
 					Connectez-vous à votre compte.
@@ -23,6 +48,9 @@ export function LoginForm({
 					<Input
 						id="email"
 						type="email"
+						value={email}
+						disabled={loading}
+						onChange={(e) => setEmail(e.currentTarget.value)}
 						placeholder="m@example.com"
 						required
 					/>
@@ -37,9 +65,21 @@ export function LoginForm({
 							Forgot your password?
 						</a>
 					</div>
-					<Input id="password" type="password" required />
+					<Input
+						value={password}
+						onChange={(e) => setPassword(e.currentTarget.value)}
+						disabled={loading}
+						id="password"
+						type="password"
+						required
+					/>
 				</div>
-				<Button type="submit" className="w-full">
+				<Button
+					disabled={loading}
+					type="submit"
+					className="w-full transition-all ease-in-out"
+				>
+					{loading && <Loader2 className="animate-spin" />}
 					Se connecter
 				</Button>
 				<div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">