Terakoda/dm-companion
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Login/logout

Browse Source
This commit is contained in:
Drew Haven
2025-05-27 17:22:21 -07:00
parent 4f44d5edca
commit c42eb650b5
3 changed files with 311 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/routes/__root.tsx
View File

@@ -1,52 +1,87 @@
import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import { AuthProvider } from "@/context/auth/AuthContext";
import { AuthProvider, useAuth } from "@/context/auth/AuthContext";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();
/** Root of the application */
/**
* Root header with navigation and user authentication controls.
*/
function RootHeader() {
const { user, logout, isLoading } = useAuth();
return (
<header className="flex items-center justify-between px-8 py-4 border-b border-slate-700 bg-slate-900">
<h1 className="text-2xl font-bold text-slate-100 m-0">
DM's Table Companion
</h1>
<nav aria-label="Main navigation" className="flex gap-6">
<Link
to="/campaigns"
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
activeProps={{
className:
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
}}
>
Campaigns
</Link>
<Link
to="/sessions"
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
activeProps={{
className:
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
}}
>
Sessions
</Link>
<Link
to="/about"
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
activeProps={{
className:
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
}}
>
About
</Link>
</nav>
<div className="flex items-center gap-4">
{user ? (
<>
<span className="text-slate-200 text-sm" aria-label="User email">
{user.email}
</span>
<button
onClick={logout}
disabled={isLoading}
className="bg-red-600 hover:bg-red-700 text-white text-sm font-semibold px-3 py-1 rounded transition-colors disabled:opacity-60"
aria-label="Log out"
type="button"
>
Log out
</button>
</>
) : (
<Link
to="/login"
className="bg-violet-600 hover:bg-violet-700 text-white text-sm font-semibold px-3 py-1 rounded transition-colors"
aria-label="Log in"
>
Log in
</Link>
)}
</div>
</header>
);
}
export const Route = createRootRoute({
component: () => (
<QueryClientProvider client={queryClient}>
<AuthProvider>
<header className="flex items-center justify-between px-8 py-4 border-b border-slate-700 bg-slate-900">
<h1 className="text-2xl font-bold text-slate-100 m-0">
DM's Table Companion
</h1>
<nav aria-label="Main navigation" className="flex gap-6">
<Link
to="/campaigns"
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
activeProps={{
className:
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
}}
>
Campaigns
</Link>
<Link
to="/sessions"
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
activeProps={{
className:
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
}}
>
Sessions
</Link>
<Link
to="/about"
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
activeProps={{
className:
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
}}
>
About
</Link>
</nav>
</header>
<RootHeader />
<Outlet />
<TanStackRouterDevtools />
</AuthProvider>