feat(frontend): sidebar migration started

frontend/src/routes/(auth)/-components/LoginForm.tsx

@@ -1,20 +1,43 @@
-import { useRouter, useSearch } from "@tanstack/react-router";
-import { getSession, signin, useAuth } from "../../../lib/authClient";
+import { Link, useRouter, useSearch } from "@tanstack/react-router";
+import {
+    getSession,
+    signin,
+    useAuth,
+    useUserRoles,
+} from "../../../lib/authClient";
 import { useAppForm } from "../../../lib/formStuff";
 import { LstCard } from "../../../components/ui/lstCard";
 import { toast } from "sonner";
+import {
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "../../../components/ui/card";
 
 export default function LoginForm() {
     const router = useRouter();
     const search = useSearch({ from: "/(auth)/login" });
+    const username = localStorage.getItem("username") || "";
+    const rememeberMe = localStorage.getItem("rememberMe") === "true";
     const { setSession } = useAuth();
+    const { fetchRoles } = useUserRoles();
 
     const form = useAppForm({
         defaultValues: {
-            username: "",
+            username: username,
             password: "",
+            rememberMe: rememeberMe,
         },
         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 signin({
                     username: value.username,
@@ -23,6 +46,7 @@ export default function LoginForm() {
 
                 const session = await getSession();
                 setSession(session);
+                fetchRoles();
 
                 toast.success(
                     `Welcome back ${session?.user.name ? session?.user.name : session?.user.username} `
@@ -37,38 +61,68 @@ export default function LoginForm() {
     return (
         <div className="ml-[25%]">
             <LstCard className="p-3 w-96">
-                <form
-                    onSubmit={(e) => {
-                        e.preventDefault();
-                        form.handleSubmit();
-                    }}
-                >
-                    <form.AppField
-                        name="username"
-                        children={(field) => (
-                            <field.InputField
-                                label="Username"
-                                inputType="string"
-                                required={true}
+                <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.InputField
+                                    label="Password"
+                                    inputType="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" />
+                                )}
                             />
-                        )}
-                    />
-                    <form.AppField
-                        name="password"
-                        children={(field) => (
-                            <field.InputField
-                                label="Password"
-                                inputType="password"
-                                required={true}
-                            />
-                        )}
-                    />
-                    <div className="flex justify-end mt-2">
-                        <form.AppForm>
-                            <form.SubmitButton>Login</form.SubmitButton>
-                        </form.AppForm>
+                            <Link
+                                to="/"
+                                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&apos;t have an account?{" "}
+                        <a href="#" className="underline underline-offset-4">
+                            Sign up
+                        </a>
                     </div>
-                </form>
+                </CardContent>
             </LstCard>
         </div>
     );

frontend/src/routes/(auth)/login.tsx

@@ -23,7 +23,7 @@ export const Route = createFileRoute("/(auth)/login")({
 
 function RouteComponent() {
     return (
-        <div>
+        <div className="m-[25%]">
             <LoginForm />
         </div>
     );

frontend/src/routes/__root.tsx

@@ -2,8 +2,12 @@ import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import type { QueryClient } from "@tanstack/react-query";
 import { Toaster } from "sonner";
+import Cookies from "js-cookie";
 import { SessionGuard } from "../lib/providers/SessionProvider";
 import Nav from "../components/navBar/Nav";
+import { ThemeProvider } from "../lib/providers/theme-provider";
+import { SidebarProvider } from "../components/ui/sidebar";
+import SideBarNav from "../components/navBar/SideBarNav";
 
 interface RootRouteContext {
     queryClient: QueryClient;
@@ -15,13 +19,25 @@ interface RootRouteContext {
 const RootLayout = () => {
     //const { logout, login } = Route.useRouteContext();
 
+    const defaultOpen = Cookies.get("sidebar_state") === "true";
     return (
         <div>
             <SessionGuard>
-                <Nav />
-                <Outlet />
-                <Toaster expand={true} richColors closeButton />
-                <TanStackRouterDevtools />
+                <ThemeProvider>
+                    <div className="flex flex-col h-screen overflow-hidden">
+                        <Nav />
+                        <div className="flex flex-1 overflow-hidden">
+                            <SidebarProvider defaultOpen={defaultOpen}>
+                                <SideBarNav />
+                                <div className="flex-1 overflow-y-auto">
+                                    <Outlet />
+                                </div>
+                            </SidebarProvider>
+                        </div>
+                        <Toaster expand richColors closeButton />
+                        <TanStackRouterDevtools />
+                    </div>
+                </ThemeProvider>
             </SessionGuard>
         </div>
     );

frontend/src/routes/_adminLayout/admin/servers.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_adminLayout/admin/servers')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_adminLayout/admin/servers"!</div>
+}

frontend/src/routes/_adminLayout/admin/settings.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_adminLayout/admin/settings')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_adminLayout/admin/settings"!</div>
+}

frontend/src/routes/_adminLayout/admin/users.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_adminLayout/admin/users')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_admin/admin/users"!</div>
+}

frontend/src/routes/_adminLayout/route.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { checkUserAccess } from "../../lib/authClient";
+
+export const Route = createFileRoute("/_adminLayout")({
+    beforeLoad: async () =>
+        checkUserAccess({
+            allowedRoles: ["admin", "systemAdmin"],
+            moduleName: "admin", // optional
+        }),
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    return (
+        <div>
+            <Outlet />
+        </div>
+    );
+}