cowch/lstV2
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(frontend): finished login form with validation

Browse Source
This commit is contained in:
Blake Matthes
2025-02-21 09:16:07 -06:00
parent d939332499
commit 9719451580
25 changed files with 551 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/src/routes/__root.tsx
View File

@@ -1,4 +1,4 @@
import {createRootRoute, Outlet} from "@tanstack/react-router";
import {createRootRoute, Link, Outlet} from "@tanstack/react-router";
import {TanStackRouterDevtools} from "@tanstack/router-devtools";
import Cookies from "js-cookie";
import {SidebarProvider} from "../components/ui/sidebar";
@@ -14,48 +14,74 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../components/ui/dropdown-menu";
import {SessionProvider} from "../components/providers/Providers";
import {Toaster} from "sonner";
import {Button} from "../components/ui/button";
import {useLogout} from "../lib/hooks/useLogout";
import {useSession} from "../lib/hooks/useSession";
import {useSessionStore} from "../lib/store/sessionStore";
// same as the layout
export const Route = createRootRoute({
component: () => {
const sidebarState = Cookies.get("sidebar_state") === "true";
const {session} = useSession();
const {user} = useSessionStore();
const logout = useLogout();
return (
<>
<ThemeProvider>
<nav className="flex justify-end">
<div className="m-2 flex flex-row">
<div className="m-auto pr-2">
<p>Add Card</p>
<SessionProvider>
<ThemeProvider>
<nav className="flex justify-end">
<div className="m-2 flex flex-row">
<div className="m-auto pr-2">
<p>Add Card</p>
</div>
<div className="m-1">
<ModeToggle />
</div>
{session ? (
<div className="m-1">
<DropdownMenu>
<DropdownMenuTrigger>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Hello {user?.username}</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
<hr className="solid"></hr>
<DropdownMenuItem>
<div className="m-auto mt-3">
<Button onClick={() => logout()} variant="ghost">
Logout
</Button>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
) : (
<>
<Link to="/login">Login</Link>
</>
)}
</div>
<div className="m-1">
<ModeToggle />
</div>
<div className="m-1">
<DropdownMenu>
<DropdownMenuTrigger>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</nav>
<SidebarProvider defaultOpen={sidebarState}>
<AppSidebar />
<Outlet />
</SidebarProvider>
</ThemeProvider>
</nav>
<SidebarProvider defaultOpen={sidebarState}>
<AppSidebar />
<Toaster expand={true} richColors closeButton />
<Outlet />
</SidebarProvider>
</ThemeProvider>
</SessionProvider>
<TanStackRouterDevtools position="bottom-right" />
</>