6f70a19b73
* Add admin users management page with pagination, search, and inline username editing https://claude.ai/code/session_01E4UUQqQedhFP2F5YcBRArs * Fix five issues from admin users page code review - admin.users: use useEffect to close inline edit on success so validation errors are not silently discarded when the save button fires onClick - root: add /admin to ONBOARDING_EXEMPT so admin users without a username are not redirect-looped away from admin pages - settings: skip username validation when the username field is empty so updating timezone alone does not break for accounts without a username - models/user: exclude soft-deleted users from findUsersPaginated - admin.users: remove unused hasMore from loader return; simplify header div https://claude.ai/code/session_01E4UUQqQedhFP2F5YcBRArs * Fix lint: rename shadowed variables in user model - findUserByUsername: use imported sql directly instead of destructuring it from the callback (shadowed the top-level import) - findUsersPaginated: rename orderBy callback param from users to t (shadowed the outer users result variable) https://claude.ai/code/session_01E4UUQqQedhFP2F5YcBRArs --------- Co-authored-by: Claude <noreply@anthropic.com>
209 lines
7 KiB
TypeScript
209 lines
7 KiB
TypeScript
import {
|
|
isRouteErrorResponse,
|
|
Links,
|
|
Meta,
|
|
Outlet,
|
|
Scripts,
|
|
ScrollRestoration,
|
|
useLocation,
|
|
redirect,
|
|
} from "react-router";
|
|
|
|
import type { Route } from "./+types/root";
|
|
import "./app.css";
|
|
import { auth } from "~/lib/auth.server";
|
|
import { Navbar } from "~/components/navbar";
|
|
import { NavigationProgress } from "~/components/NavigationProgress";
|
|
import { Toaster } from "~/components/ui/sonner";
|
|
import { BracktGradients } from "~/components/ui/BracktGradients";
|
|
import { Footer } from "~/components/marketing/Footer";
|
|
import { findUserById } from "~/models/user";
|
|
import { AlertCircle, FileQuestion, Lock, ShieldOff, ServerCrash } from "lucide-react";
|
|
import logoUrl from "../public/logo.svg?url";
|
|
|
|
// Paths that should never trigger the onboarding redirect.
|
|
// Trailing-slash entries are matched as prefixes; others require exact match or sub-path.
|
|
const ONBOARDING_EXEMPT = ["/onboarding", "/api/", "/admin", "/login", "/register", "/check-email", "/forgot-password", "/reset-password"];
|
|
|
|
export function isOnboardingExempt(pathname: string): boolean {
|
|
return ONBOARDING_EXEMPT.some((p) =>
|
|
p.endsWith("/")
|
|
? pathname.startsWith(p)
|
|
: pathname === p || pathname.startsWith(p + "/")
|
|
);
|
|
}
|
|
|
|
export async function loader({ request }: Route.LoaderArgs) {
|
|
const session = await auth.api.getSession({ headers: request.headers });
|
|
const currentUser = session ? await findUserById(session.user.id) : null;
|
|
const isAdmin = currentUser?.isAdmin ?? false;
|
|
|
|
if (currentUser && !currentUser.username) {
|
|
const { pathname } = new URL(request.url);
|
|
if (!isOnboardingExempt(pathname)) {
|
|
const redirectTo = pathname === "/" ? "" : `?redirectTo=${encodeURIComponent(pathname)}`;
|
|
return redirect(`/onboarding${redirectTo}`);
|
|
}
|
|
}
|
|
|
|
return { isAdmin, currentUser };
|
|
}
|
|
|
|
export const links: Route.LinksFunction = () => [
|
|
{ rel: "icon", href: "/favicon.ico?v=20260402", sizes: "48x48" },
|
|
{ rel: "icon", href: "/favicon.svg?v=20260402", type: "image/svg+xml" },
|
|
{ rel: "icon", href: "/favicon-96x96.png?v=20260402", type: "image/png", sizes: "96x96" },
|
|
{ rel: "apple-touch-icon", href: "/apple-touch-icon.png?v=20260402" },
|
|
{ rel: "manifest", href: "/site.webmanifest?v=20260402" },
|
|
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
|
|
{
|
|
rel: "preconnect",
|
|
href: "https://fonts.gstatic.com",
|
|
crossOrigin: "anonymous",
|
|
},
|
|
{
|
|
rel: "stylesheet",
|
|
href: "https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap",
|
|
},
|
|
];
|
|
|
|
export function Layout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html lang="en" className="dark">
|
|
<head>
|
|
<meta charSet="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<Meta />
|
|
<Links />
|
|
</head>
|
|
<body>
|
|
<BracktGradients />
|
|
{children}
|
|
<ScrollRestoration />
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
export default function App({ loaderData }: Route.ComponentProps) {
|
|
const location = useLocation();
|
|
const isDraftRoute = location.pathname.includes('/draft');
|
|
|
|
return (
|
|
<>
|
|
<NavigationProgress />
|
|
{!isDraftRoute && (
|
|
<Navbar
|
|
isAdmin={loaderData?.isAdmin ?? false}
|
|
currentUser={loaderData?.currentUser ?? null}
|
|
/>
|
|
)}
|
|
{isDraftRoute ? (
|
|
<Outlet />
|
|
) : (
|
|
<>
|
|
<main>
|
|
<Outlet />
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
)}
|
|
<Toaster />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
|
|
let status = 500;
|
|
let title = "Something Went Wrong";
|
|
let message = "An unexpected error occurred. Please try again later.";
|
|
let stack: string | undefined;
|
|
let showSignInHint = false;
|
|
if (isRouteErrorResponse(error)) {
|
|
status = error.status;
|
|
switch (error.status) {
|
|
case 401:
|
|
title = "Sign In Required";
|
|
message = "You need to be signed in to access this page.";
|
|
showSignInHint = true;
|
|
break;
|
|
case 403:
|
|
title = "Access Denied";
|
|
message = "You don't have permission to view this page.";
|
|
break;
|
|
case 404:
|
|
title = "Page Not Found";
|
|
message = "The page you're looking for doesn't exist or has been moved.";
|
|
break;
|
|
default:
|
|
title = `Error ${error.status}`;
|
|
message =
|
|
typeof error.data === "string" && error.data
|
|
? error.data
|
|
: error.statusText || "Something went wrong.";
|
|
}
|
|
} else if (error instanceof Error) {
|
|
title = "Unexpected Error";
|
|
message = import.meta.env.DEV ? error.message : "An unexpected error occurred. Please try again later.";
|
|
stack = import.meta.env.DEV ? error.stack : undefined;
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground flex flex-col">
|
|
<header className="border-b border-border/40 bg-background/95 backdrop-blur">
|
|
<div className="flex h-16 items-center px-4 md:px-6 lg:px-8">
|
|
<a href="/">
|
|
<img src={logoUrl} alt="Brackt" className="h-6" />
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 flex items-center justify-center p-6">
|
|
<div className="max-w-md w-full text-center space-y-6">
|
|
<div className="text-8xl font-bold text-muted-foreground/40 select-none">
|
|
{status}
|
|
</div>
|
|
|
|
<div className="flex justify-center">
|
|
{statusIcon(status)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
|
|
<p className="text-muted-foreground">{message}</p>
|
|
</div>
|
|
|
|
<div className="flex justify-center pt-2">
|
|
<a
|
|
href="/"
|
|
className="inline-flex items-center justify-center rounded-md text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 transition-colors"
|
|
>
|
|
{showSignInHint ? "Go to Home Page to Sign In" : "Go Home"}
|
|
</a>
|
|
</div>
|
|
|
|
{stack && (
|
|
<details className="text-left mt-8 border border-border rounded-md overflow-hidden">
|
|
<summary className="cursor-pointer text-sm text-muted-foreground px-4 py-3 hover:bg-muted/50">
|
|
Stack trace (development only)
|
|
</summary>
|
|
<pre className="p-4 overflow-x-auto text-xs text-muted-foreground border-t border-border">
|
|
<code>{stack}</code>
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function statusIcon(status: number) {
|
|
const cls = "h-14 w-14 text-muted-foreground";
|
|
if (status === 401) return <Lock className={cls} />;
|
|
if (status === 403) return <ShieldOff className={cls} />;
|
|
if (status === 404) return <FileQuestion className={cls} />;
|
|
if (status >= 500) return <ServerCrash className={cls} />;
|
|
return <AlertCircle className={cls} />;
|
|
}
|