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

frontend/components/app-sidebar.tsx

@@ -10,6 +10,7 @@ import {
 	GalleryVerticalEnd,
 	Settings2,
 	Calendar,
+	Loader2,
 } from "lucide-react";
 
 import { NavMain } from "@/components/nav-main";
@@ -23,6 +24,8 @@ import {
 	SidebarHeader,
 	SidebarRail,
 } from "@/components/ui/sidebar";
+import useMe from "@/hooks/use-me";
+import { useEffect } from "react";
 
 // This is sample data.
 const data = {
@@ -93,6 +96,8 @@ const data = {
 };
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+	const { user, isLoading, success, error } = useMe();
+
 	return (
 		<Sidebar collapsible="icon" {...props}>
 			<SidebarHeader>
@@ -102,7 +107,11 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
 				<NavMain items={data.navMain} />
 			</SidebarContent>
 			<SidebarFooter>
-				<NavUser user={data.user} />
+				{isLoading ? (
+					<Loader2 className="flex w-full min-w-0 flex-col gap-1 justify-center animate-spin" />
+				) : (
+					<NavUser user={user!} />
+				)}
 			</SidebarFooter>
 			<SidebarRail />
 		</Sidebar>

frontend/components/layouts/swr-layout.tsx

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Hammed Abass. <3 All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+"use client";
+
+import { SWRConfig } from "swr";
+
+interface SWRLayoutProps {
+	children: React.ReactNode;
+}
+
+const SWRLayout: React.FC<SWRLayoutProps> = ({ children }) => (
+	<SWRConfig
+		value={{
+			fetcher: (url: string) =>
+				fetch(url, { credentials: "include" }).then((res) =>
+					res.json(),
+				),
+			revalidateOnFocus: false,
+		}}
+	>
+		{children}
+	</SWRConfig>
+);
+
+export default SWRLayout;

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">

frontend/components/nav-bar.tsx

@@ -68,7 +68,7 @@ const subMenuItemsTwo = [
 
 const Navbar = () => {
 	return (
-		<section className="p-4 bg-white top-0 sticky z-[100]">
+		<section className="p-4 bg-white top-0 sticky z-50">
 			<div>
 				<nav className="hidden justify-between lg:flex">
 					<div className="flex items-center gap-6">
@@ -103,8 +103,9 @@ const Navbar = () => {
 										variant: "ghost",
 									}),
 								)}
-								href="/">
-								Planning	
+								href="/"
+							>
+								Planning
 							</a>
 							<a
 								className={cn(

frontend/components/nav-user.tsx

@@ -25,17 +25,16 @@ import {
 	SidebarMenuItem,
 	useSidebar,
 } from "@/components/ui/sidebar";
+import { deleteCookie } from "cookies-next";
+import { useRouter } from "next/navigation";
+import IUser from "@/interfaces/IUser";
 
-export function NavUser({
-	user,
-}: {
-	user: {
-		name: string;
-		email: string;
-		avatar: string;
-	};
-}) {
+export const NavUser: React.FC<{ user: IUser }> = ({ user }) => {
 	const { isMobile } = useSidebar();
+	const router = useRouter();
+
+	const name = `${user.firstname} ${user.lastname}`;
+	const image = `https://avatar.vercel.sh/${name}`;
 
 	return (
 		<SidebarMenu>
@@ -47,17 +46,14 @@ export function NavUser({
 							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
 						>
 							<Avatar className="h-8 w-8 rounded-lg">
-								<AvatarImage
-									src={user.avatar}
-									alt={user.name}
-								/>
+								<AvatarImage src={image} alt={name} />
 								<AvatarFallback className="rounded-lg">
 									CN
 								</AvatarFallback>
 							</Avatar>
 							<div className="grid flex-1 text-left text-sm leading-tight">
 								<span className="truncate font-semibold">
-									{user.name}
+									{name}
 								</span>
 								<span className="truncate text-xs">
 									{user.email}
@@ -75,17 +71,14 @@ export function NavUser({
 						<DropdownMenuLabel className="p-0 font-normal">
 							<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
 								<Avatar className="h-8 w-8 rounded-lg">
-									<AvatarImage
-										src={user.avatar}
-										alt={user.name}
-									/>
+									<AvatarImage src={image} alt={name} />
 									<AvatarFallback className="rounded-lg">
 										CN
 									</AvatarFallback>
 								</Avatar>
 								<div className="grid flex-1 text-left text-sm leading-tight">
 									<span className="truncate font-semibold">
-										{user.name}
+										{name}
 									</span>
 									<span className="truncate text-xs">
 										{user.email}
@@ -116,7 +109,12 @@ export function NavUser({
 							</DropdownMenuItem>
 						</DropdownMenuGroup>
 						<DropdownMenuSeparator />
-						<DropdownMenuItem>
+						<DropdownMenuItem
+							onClick={async () => {
+								await deleteCookie("auth_token");
+								router.push("/");
+							}}
+						>
 							<LogOut />
 							Log out
 						</DropdownMenuItem>
@@ -125,4 +123,4 @@ export function NavUser({
 			</SidebarMenuItem>
 		</SidebarMenu>
 	);
-}
+};