ros/Design-Buddy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui/ disable buttons if health checks not working

Browse Source
This commit is contained in:
Leon van Zyl
2025-08-13 12:37:48 +02:00
parent 9dcb5aa9e3
commit 5741fcc486
7 changed files with 174 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/dashboard/page.tsx
View File

@@ -3,10 +3,13 @@
import { useSession } from "@/lib/auth-client";
import { UserProfile } from "@/components/auth/user-profile";
import { Button } from "@/components/ui/button";
import { Lock } from "lucide-react";
import { useDiagnostics } from "@/hooks/use-diagnostics";
import Link from "next/link";
export default function DashboardPage() {
const { data: session, isPending } = useSession();
const { isAiReady, loading: diagnosticsLoading } = useDiagnostics();
if (isPending) {
return (
@@ -19,7 +22,14 @@ export default function DashboardPage() {
if (!session) {
return (
<div className="container mx-auto px-4 py-12">
<div className="max-w-3xl mx-auto">
<div className="max-w-3xl mx-auto text-center">
<div className="mb-8">
<Lock className="w-16 h-16 mx-auto mb-4 text-muted-foreground" />
<h1 className="text-2xl font-bold mb-2">Protected Page</h1>
<p className="text-muted-foreground mb-6">
You need to sign in to access the dashboard
</p>
</div>
<UserProfile />
</div>
</div>
@@ -38,9 +48,15 @@ export default function DashboardPage() {
<p className="text-muted-foreground mb-4">
Start a conversation with AI using the Vercel AI SDK
</p>
<Button asChild>
<Link href="/chat">Go to Chat</Link>
</Button>
{(diagnosticsLoading || !isAiReady) ? (
<Button disabled={true}>
Go to Chat
</Button>
) : (
<Button asChild>
<Link href="/chat">Go to Chat</Link>
</Button>
)}
</div>
<div className="p-6 border border-border rounded-lg">

4
src/app/layout.tsx
View File

@@ -14,8 +14,8 @@ const geistMono = Geist_Mono({
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "Next.js Full-Stack Boilerplate",
description: "Complete Next.js starter template with authentication, database, AI integration, and modern tooling by Leon van Zyl",
};
export default function RootLayout({

67
src/app/page.tsx
View File

@@ -1,8 +1,12 @@
"use client";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { SetupChecklist } from "@/components/setup-checklist";
import { useDiagnostics } from "@/hooks/use-diagnostics";
export default function Home() {
const { isAuthReady, isAiReady, loading } = useDiagnostics();
return (
<div className="min-h-screen flex flex-col grain">
<main className="flex-1 container mx-auto px-4 py-12">
@@ -76,17 +80,42 @@ export default function Home() {
<div className="p-4 border rounded-lg">
<h4 className="font-medium mb-2">3. Try the features</h4>
<div className="space-y-2">
<Button asChild size="sm" className="w-full glow">
<Link href="/dashboard">View Dashboard</Link>
</Button>
<Button
asChild
variant="outline"
size="sm"
className="w-full"
>
<Link href="/chat">Try AI Chat</Link>
</Button>
{(loading || !isAuthReady) ? (
<Button
size="sm"
className="w-full glow"
disabled={true}
>
View Dashboard
</Button>
) : (
<Button asChild size="sm" className="w-full glow">
<Link href="/dashboard">
View Dashboard
</Link>
</Button>
)}
{(loading || !isAiReady) ? (
<Button
variant="outline"
size="sm"
className="w-full"
disabled={true}
>
Try AI Chat
</Button>
) : (
<Button
asChild
variant="outline"
size="sm"
className="w-full"
>
<Link href="/chat">
Try AI Chat
</Link>
</Button>
)}
</div>
</div>
<div className="p-4 border rounded-lg">
@@ -103,7 +132,21 @@ export default function Home() {
<footer className="border-t py-8 text-center text-sm text-muted-foreground">
<div className="container mx-auto px-4">
Built with Next.js, Better Auth, Drizzle ORM, and Vercel AI SDK
<p className="mb-2">
Boilerplate template by Leon van Zyl
</p>
<p>
Visit{" "}
<a
href="https://youtube.com/@leonvanzyl"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline"
>
@leonvanzyl on YouTube
</a>
{" "}for tutorials on using this template
</p>
</div>
</footer>
</div>

26
src/components/auth/sign-out-button.tsx
View File

@@ -1,33 +1,31 @@
"use client"
"use client";
import { signOut, useSession } from "@/lib/auth-client"
import { Button } from "@/components/ui/button"
import { signOut, useSession } from "@/lib/auth-client";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
export function SignOutButton() {
const { data: session, isPending } = useSession()
const { data: session, isPending } = useSession();
const router = useRouter();
if (isPending) {
return <Button disabled>Loading...</Button>
return <Button disabled>Loading...</Button>;
}
if (!session) {
return null
return null;
}
return (
<Button
variant="outline"
onClick={async () => {
await signOut({
fetchOptions: {
onSuccess: () => {
window.location.href = "/"
},
},
})
await signOut();
router.replace("/");
router.refresh();
}}
>
Sign out
</Button>
)
);
}

37
src/components/auth/user-profile.tsx
View File

@@ -21,25 +21,24 @@ export function UserProfile() {
}
return (
<div className="flex flex-col items-center gap-4 p-6">
<div className="text-center">
<Avatar className="size-16 mx-auto mb-4">
<AvatarImage
src={session.user?.image || ""}
alt={session.user?.name || "User"}
referrerPolicy="no-referrer"
/>
<AvatarFallback>
{(
session.user?.name?.[0] ||
session.user?.email?.[0] ||
"U"
).toUpperCase()}
</AvatarFallback>
</Avatar>
<h2 className="text-xl font-semibold">{session.user?.name}</h2>
<p className="text-muted-foreground">{session.user?.email}</p>
</div>
<div className="flex items-center gap-3">
<span className="text-sm text-muted-foreground">
Welcome {session.user?.name}
</span>
<Avatar className="size-8">
<AvatarImage
src={session.user?.image || ""}
alt={session.user?.name || "User"}
referrerPolicy="no-referrer"
/>
<AvatarFallback>
{(
session.user?.name?.[0] ||
session.user?.email?.[0] ||
"U"
).toUpperCase()}
</AvatarFallback>
</Avatar>
<SignOutButton />
</div>
);

2
src/components/site-header.tsx
View File

@@ -10,7 +10,7 @@ export function SiteHeader() {
href="/"
className="bg-clip-text text-transparent [background-image:linear-gradient(90deg,color-mix(in_oklab,var(--primary)_85%,white_0%),color-mix(in_oklab,var(--primary)_50%,white_0%))] hover:opacity-90"
>
Next.js Starter Kit
Next.js Boilerplate
</Link>
</h1>
<UserProfile />

65
src/hooks/use-diagnostics.ts Normal file
View File

@@ -0,0 +1,65 @@
"use client";
import { useEffect, useState } from "react";
type DiagnosticsResponse = {
timestamp: string;
env: {
DATABASE_URL: boolean;
BETTER_AUTH_SECRET: boolean;
GOOGLE_CLIENT_ID: boolean;
GOOGLE_CLIENT_SECRET: boolean;
OPENAI_API_KEY: boolean;
NEXT_PUBLIC_APP_URL: boolean;
};
database: {
connected: boolean;
schemaApplied: boolean;
error?: string;
};
auth: {
configured: boolean;
routeResponding: boolean | null;
};
ai: {
configured: boolean;
};
overallStatus: "ok" | "warn" | "error";
};
export function useDiagnostics() {
const [data, setData] = useState<DiagnosticsResponse | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
async function fetchDiagnostics() {
setLoading(true);
setError(null);
try {
const res = await fetch("/api/diagnostics", { cache: "no-store" });
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const json = (await res.json()) as DiagnosticsResponse;
setData(json);
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to load diagnostics");
} finally {
setLoading(false);
}
}
useEffect(() => {
fetchDiagnostics();
}, []);
const isAuthReady = data?.auth.configured && data?.database.connected && data?.database.schemaApplied;
const isAiReady = data?.ai.configured;
return {
data,
loading,
error,
refetch: fetchDiagnostics,
isAuthReady: Boolean(isAuthReady),
isAiReady: Boolean(isAiReady),
};
}