feat: update dependencies and refactor layout and homepage components
- Added new dependencies: @daveyplate/better-auth-ui, next-themes, and sonner. - Refactored layout component to use Providers and Toaster for better state management and notifications. - Updated homepage to utilize authClient for session management and improved user experience with navigation links for sign-in and sign-up.
This commit is contained in:
Matthias
22
app/auth/[path]/page.tsx
Normal file
22
app/auth/[path]/page.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import { AuthView } from "@daveyplate/better-auth-ui";
|
||||||
|
import { authViewPaths } from "@daveyplate/better-auth-ui/server";
|
||||||
|
|
||||||
|
export const dynamicParams = false;
|
||||||
|
|
||||||
|
export function generateStaticParams() {
|
||||||
|
return Object.values(authViewPaths).map((path) => ({ path }));
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function AuthPage({
|
||||||
|
params,
|
||||||
|
}: {
|
||||||
|
params: Promise<{ path: string }>;
|
||||||
|
}) {
|
||||||
|
const { path } = await params;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="flex min-h-screen flex-col items-center justify-center p-4">
|
||||||
|
<AuthView path={path} />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,20 +1,12 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono, Manrope } from "next/font/google";
|
import { Manrope } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { ConvexClientProvider } from "@/components/ui/convex-prover";
|
import { Providers } from "@/components/providers";
|
||||||
|
import { Toaster } from "@/components/ui/sonner";
|
||||||
|
import { InitUser } from "@/components/init-user";
|
||||||
|
|
||||||
const manrope = Manrope({subsets:['latin'],variable:'--font-sans'});
|
const manrope = Manrope({ subsets: ["latin"], variable: "--font-sans" });
|
||||||
|
|
||||||
const geistSans = Geist({
|
|
||||||
variable: "--font-geist-sans",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const geistMono = Geist_Mono({
|
|
||||||
variable: "--font-geist-mono",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: "Create Next App",
|
||||||
@@ -28,11 +20,15 @@ export default function RootLayout({
|
|||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html
|
<html
|
||||||
lang="en"
|
lang="de"
|
||||||
className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", manrope.variable)}
|
className={cn("h-full", "antialiased", "font-sans", manrope.variable)}
|
||||||
>
|
>
|
||||||
<body className="min-h-full flex flex-col">
|
<body className="min-h-full flex flex-col">
|
||||||
<ConvexClientProvider>{children}</ConvexClientProvider>
|
<Providers>
|
||||||
|
<InitUser />
|
||||||
|
{children}
|
||||||
|
<Toaster />
|
||||||
|
</Providers>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
61
app/page.tsx
61
app/page.tsx
@@ -1,38 +1,51 @@
|
|||||||
// src/app/page.tsx — minimaler Test
|
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { authClient } from "@/lib/auth-client";
|
import { authClient } from "@/lib/auth-client";
|
||||||
import { useQuery } from "convex/react";
|
import Link from "next/link";
|
||||||
import { api } from "@/convex/_generated/api";
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const user = useQuery(api.auth.getCurrentUser);
|
const { data: session, isPending } = authClient.useSession();
|
||||||
|
|
||||||
// user === undefined → Query lädt noch
|
if (isPending) {
|
||||||
// user === null → Nicht eingeloggt
|
return (
|
||||||
// user === { id, name, email, ... } → Eingeloggt
|
<main className="flex min-h-screen items-center justify-center">
|
||||||
|
<p className="text-muted-foreground">Laden...</p>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<main className="flex min-h-screen flex-col items-center justify-center gap-6 p-4">
|
||||||
<h1>LemonSpace</h1>
|
<h1 className="text-4xl font-bold">🍋 LemonSpace</h1>
|
||||||
{user ? (
|
|
||||||
<div>
|
{session?.user ? (
|
||||||
<p>Eingeloggt als: {user.name}</p>
|
<div className="flex flex-col items-center gap-4">
|
||||||
<button onClick={() => authClient.signOut()}>Logout</button>
|
<p className="text-lg">
|
||||||
|
Willkommen, <span className="font-semibold">{session.user.name}</span>
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/dashboard"
|
||||||
|
className="rounded-lg bg-primary px-6 py-3 text-primary-foreground hover:bg-primary/90"
|
||||||
|
>
|
||||||
|
Zum Dashboard
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<button
|
<div className="flex gap-4">
|
||||||
onClick={() =>
|
<Link
|
||||||
authClient.signUp.email({
|
href="/auth/sign-in"
|
||||||
email: "test@lemonspace.io",
|
className="rounded-lg bg-primary px-6 py-3 text-primary-foreground hover:bg-primary/90"
|
||||||
password: "test1234",
|
|
||||||
name: "Test User",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
Test Signup
|
Anmelden
|
||||||
</button>
|
</Link>
|
||||||
)}
|
<Link
|
||||||
|
href="/auth/sign-up"
|
||||||
|
className="rounded-lg border border-border px-6 py-3 hover:bg-accent"
|
||||||
|
>
|
||||||
|
Registrieren
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
33
components/init-user.tsx
Normal file
33
components/init-user.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { authClient } from "@/lib/auth-client";
|
||||||
|
import { useMutation, useQuery } from "convex/react";
|
||||||
|
import { api } from "@/convex/_generated/api";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialisiert die Credit-Balance für neue User.
|
||||||
|
* Wird einmal im Layout eingebunden und sorgt dafür,
|
||||||
|
* dass jeder eingeloggte User eine Balance + Free-Subscription hat.
|
||||||
|
*/
|
||||||
|
export function InitUser() {
|
||||||
|
const { data: session } = authClient.useSession();
|
||||||
|
const balance = useQuery(
|
||||||
|
api.credits.getBalance,
|
||||||
|
session?.user ? {} : "skip"
|
||||||
|
);
|
||||||
|
const initBalance = useMutation(api.credits.initBalance);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (
|
||||||
|
session?.user &&
|
||||||
|
balance &&
|
||||||
|
balance.balance === 0 &&
|
||||||
|
balance.monthlyAllocation === 0
|
||||||
|
) {
|
||||||
|
initBalance();
|
||||||
|
}
|
||||||
|
}, [session?.user, balance, initBalance]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
40
components/providers.tsx
Normal file
40
components/providers.tsx
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ReactNode } from "react";
|
||||||
|
import { ConvexReactClient } from "convex/react";
|
||||||
|
import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
|
||||||
|
import { AuthUIProvider } from "@daveyplate/better-auth-ui";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
import { authClient } from "@/lib/auth-client";
|
||||||
|
|
||||||
|
const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
|
||||||
|
|
||||||
|
export function Providers({
|
||||||
|
children,
|
||||||
|
initialToken,
|
||||||
|
}: {
|
||||||
|
children: ReactNode;
|
||||||
|
initialToken?: string | null;
|
||||||
|
}) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ConvexBetterAuthProvider
|
||||||
|
client={convex}
|
||||||
|
authClient={authClient}
|
||||||
|
initialToken={initialToken}
|
||||||
|
>
|
||||||
|
<AuthUIProvider
|
||||||
|
authClient={authClient}
|
||||||
|
navigate={router.push}
|
||||||
|
replace={router.replace}
|
||||||
|
onSessionChange={() => router.refresh()}
|
||||||
|
Link={Link}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</AuthUIProvider>
|
||||||
|
</ConvexBetterAuthProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
components/ui/label.tsx
Normal file
24
components/ui/label.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { Label as LabelPrimitive } from "radix-ui"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Label({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
data-slot="label"
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Label }
|
||||||
49
components/ui/sonner.tsx
Normal file
49
components/ui/sonner.tsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useTheme } from "next-themes"
|
||||||
|
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||||
|
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
|
||||||
|
|
||||||
|
const Toaster = ({ ...props }: ToasterProps) => {
|
||||||
|
const { theme = "system" } = useTheme()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sonner
|
||||||
|
theme={theme as ToasterProps["theme"]}
|
||||||
|
className="toaster group"
|
||||||
|
icons={{
|
||||||
|
success: (
|
||||||
|
<CircleCheckIcon className="size-4" />
|
||||||
|
),
|
||||||
|
info: (
|
||||||
|
<InfoIcon className="size-4" />
|
||||||
|
),
|
||||||
|
warning: (
|
||||||
|
<TriangleAlertIcon className="size-4" />
|
||||||
|
),
|
||||||
|
error: (
|
||||||
|
<OctagonXIcon className="size-4" />
|
||||||
|
),
|
||||||
|
loading: (
|
||||||
|
<Loader2Icon className="size-4 animate-spin" />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--normal-bg": "var(--popover)",
|
||||||
|
"--normal-text": "var(--popover-foreground)",
|
||||||
|
"--normal-border": "var(--border)",
|
||||||
|
"--border-radius": "var(--radius)",
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
toastOptions={{
|
||||||
|
classNames: {
|
||||||
|
toast: "cn-toast",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Toaster }
|
||||||
@@ -10,16 +10,19 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@convex-dev/better-auth": "^0.11.3",
|
"@convex-dev/better-auth": "^0.11.3",
|
||||||
|
"@daveyplate/better-auth-ui": "^3.4.0",
|
||||||
"better-auth": "^1.5.6",
|
"better-auth": "^1.5.6",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"convex": "^1.34.0",
|
"convex": "^1.34.0",
|
||||||
"lucide-react": "^1.6.0",
|
"lucide-react": "^1.6.0",
|
||||||
"next": "16.2.1",
|
"next": "16.2.1",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
"radix-ui": "^1.4.3",
|
"radix-ui": "^1.4.3",
|
||||||
"react": "19.2.4",
|
"react": "19.2.4",
|
||||||
"react-dom": "19.2.4",
|
"react-dom": "19.2.4",
|
||||||
"shadcn": "^4.1.0",
|
"shadcn": "^4.1.0",
|
||||||
|
"sonner": "^2.0.7",
|
||||||
"tailwind-merge": "^3.5.0",
|
"tailwind-merge": "^3.5.0",
|
||||||
"tw-animate-css": "^1.4.0",
|
"tw-animate-css": "^1.4.0",
|
||||||
"zod": "^4.3.6"
|
"zod": "^4.3.6"
|
||||||
|
|||||||
1147
pnpm-lock.yaml
generated
1147
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user