create-nevela 0.2.1 → 0.4.1

package/template/web/app/dashboard/layout.tsx

@@ -5,6 +5,7 @@ import { DashboardHeader, type Theme } from "@/components/dashboard/dashboard-he
 import { DashboardSidebar } from "@/components/dashboard/dashboard-sidebar";
 import { dashboardLinks } from "@/lib/dashboard-nav";
 import { ADMIN_ROLES, visibleResources } from "@/lib/dashboard";
+import { fileUrl } from "@/lib/files";
 import { requireSession } from "@/lib/session";
 import { site } from "@/lib/site";
 import { listViews } from "@/lib/views";
@@ -29,7 +30,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
     views: views.filter((view) => view.resource === resource.name).map(({ id, name, query }) => ({ id, name, query })),
   }));
 
-  const account = { name: user.name, email: user.email };
+  const account = { name: user.name, email: user.email, image: user.avatar ? fileUrl(user.avatar, "thumb") : null };
 
   return (
     <SidebarProvider defaultOpen={!collapsed}>

package/template/web/app/forgot-password/page.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { ForgotPasswordForm } from "@/components/auth/password-forms";
+
+export const metadata = { title: "Reset your password" };
+
+export default async function ForgotPasswordPage({ searchParams }: { searchParams: Promise<{ email?: string }> }) {
+  const { email } = await searchParams;
+  return (
+    <AuthShell
+      title="Reset your password"
+      subtitle="We'll email you a link to choose a new one."
+      footer={
+        <Link href="/sign-in" className="font-medium text-link hover:underline">
+          Back to sign in
+        </Link>
+      }
+    >
+      <ForgotPasswordForm initialEmail={email ?? ""} />
+    </AuthShell>
+  );
+}

package/template/web/app/reset-password/page.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { ResetPasswordForm } from "@/components/auth/password-forms";
+import { FormMessage } from "@/components/auth/ui";
+
+export const metadata = { title: "Choose a new password" };
+
+export default async function ResetPasswordPage({ searchParams }: { searchParams: Promise<{ token?: string; error?: string }> }) {
+  const { token, error } = await searchParams;
+  return (
+    <AuthShell
+      title="Choose a new password"
+      footer={
+        <Link href="/sign-in" className="font-medium text-link hover:underline">
+          Back to sign in
+        </Link>
+      }
+    >
+      {token && !error ? (
+        <ResetPasswordForm token={token} />
+      ) : (
+        <div className="flex flex-col gap-4">
+          <FormMessage>This reset link has expired or was already used.</FormMessage>
+          <Link href="/forgot-password" className="text-center text-sm font-medium text-link hover:underline">
+            Ask for a new link
+          </Link>
+        </div>
+      )}
+    </AuthShell>
+  );
+}

package/template/web/app/sign-in/page.tsx

@@ -1,21 +1,51 @@
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { AuthShell } from "@/components/auth/auth-shell";
-import { SignInForm } from "@/components/auth/sign-in-form";
+import { SignInFlow } from "@/components/auth/sign-in-flow";
+import { authConfig, enabledSocialProviders } from "@/lib/auth-config";
 import { getSession, safeRedirectPath } from "@/lib/session";
 import { site } from "@/lib/site";
 import { theme } from "@/lib/theme";
 
 export const metadata = { title: "Sign in" };
 
-export default async function SignInPage({ searchParams }: { searchParams: Promise<{ next?: string }> }) {
+const ERRORS: Record<string, string> = {
+  oauth: "Sign-in with that provider didn't finish. Try again.",
+  link: "That sign-in link has expired or was already used. Ask for a new one.",
+};
+
+export default async function SignInPage({ searchParams }: { searchParams: Promise<{ next?: string; error?: string; reset?: string }> }) {
   const params = await searchParams;
   const next = safeRedirectPath(params.next);
   if (await getSession()) redirect(next);
 
   const copy = theme.signIn(site.name);
   return (
-    <AuthShell page="sign-in" title={copy.title} subtitle={(copy as { subtitle?: string }).subtitle}>
-      <SignInForm next={next} />
+    <AuthShell
+      page="sign-in"
+      title={copy.title}
+      subtitle={(copy as { subtitle?: string }).subtitle}
+      footer={
+        // Only where people may create their own account (config/nevela.php: auth.registration).
+        authConfig.registration ? (
+          <>
+            Don&apos;t have an account?{" "}
+            <Link href={`/sign-up?next=${encodeURIComponent(next)}`} className="font-medium text-link hover:underline">
+              Sign up
+            </Link>
+          </>
+        ) : undefined
+      }
+    >
+      <SignInFlow
+        providers={enabledSocialProviders()}
+        socialPlacement={theme.social}
+        socialStyle={theme.socialStyle}
+        methods={{ magicLink: authConfig.magicLink, emailOtp: authConfig.emailOtp, passkeys: authConfig.passkeys }}
+        next={next}
+        initialError={params.error ? (ERRORS[params.error] ?? "Sign-in didn't finish. Try again.") : null}
+        initialNotice={params.reset ? "Your password is changed. Sign in with the new one." : null}
+      />
     </AuthShell>
   );
 }

package/template/web/app/sign-up/page.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { SignUpForm } from "@/components/auth/sign-up-form";
+import { authConfig, enabledSocialProviders } from "@/lib/auth-config";
+import { getSession, safeRedirectPath } from "@/lib/session";
+import { site } from "@/lib/site";
+import { theme } from "@/lib/theme";
+
+export const metadata = { title: "Create an account" };
+
+export default async function SignUpPage({ searchParams }: { searchParams: Promise<{ next?: string }> }) {
+  const params = await searchParams;
+  const next = safeRedirectPath(params.next);
+  if (await getSession()) redirect(next);
+  // Accounts are created by an administrator when registration is off.
+  if (!authConfig.registration) redirect(`/sign-in?next=${encodeURIComponent(next)}`);
+
+  const copy = theme.signUp(site.name);
+  return (
+    <AuthShell
+      page="sign-up"
+      title={copy.title}
+      subtitle={(copy as { subtitle?: string }).subtitle}
+      footer={
+        <>
+          Already have an account?{" "}
+          <Link href={`/sign-in?next=${encodeURIComponent(next)}`} className="font-medium text-link hover:underline">
+            Sign in
+          </Link>
+        </>
+      }
+    >
+      <SignUpForm
+        providers={enabledSocialProviders()}
+        socialPlacement={theme.social}
+        socialStyle={theme.socialStyle}
+        next={next}
+        verifyFirst={authConfig.requireEmailVerification}
+      />
+    </AuthShell>
+  );
+}

package/template/web/app/two-factor/page.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { TwoFactorForm } from "@/components/auth/two-factor-form";
+import { redirect } from "next/navigation";
+import { pendingSecondStep } from "@/lib/second-step";
+import { safeRedirectPath } from "@/lib/session";
+
+export const metadata = { title: "Verify it's you" };
+
+/** Reached after a correct password on an account with two-factor on (lib/auth-client.ts sends people here). */
+export default async function TwoFactorPage({ searchParams }: { searchParams: Promise<{ next?: string }> }) {
+  const { next } = await searchParams;
+  // Nothing is waiting: they came here directly, or took more than ten minutes.
+  const waiting = await pendingSecondStep();
+  if (!waiting) redirect(`/sign-in?next=${encodeURIComponent(safeRedirectPath(next))}`);
+  return (
+    <AuthShell
+      title="Verify it's you"
+      subtitle="Your account uses two-factor authentication."
+      footer={
+        <Link href="/sign-in" className="font-medium text-link hover:underline">
+          Use a different account
+        </Link>
+      }
+    >
+      {/* What Laravel said this sign-in can be finished with: after an emailed link, not another email. */}
+      <TwoFactorForm
+        methods={{ authenticator: waiting.methods.includes("totp"), email: waiting.methods.includes("email") }}
+        backup={waiting.methods.includes("backup")}
+        next={safeRedirectPath(next)}
+      />
+    </AuthShell>
+  );
+}

package/template/web/app/verify-email/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { VerifyEmailForm } from "@/components/auth/verify-email-form";
+import { getSession, safeRedirectPath } from "@/lib/session";
+
+export const metadata = { title: "Verify your email" };
+
+/**
+ * Confirm an email address: by the code in the message, or by asking for a fresh link
+ * when the one they have has expired.
+ */
+export default async function VerifyEmailPage({ searchParams }: { searchParams: Promise<{ email?: string; next?: string; code?: string }> }) {
+  const { email, next, code } = await searchParams;
+  const session = await getSession();
+  const to = safeRedirectPath(next, "/dashboard/account");
+  if (session?.user.emailVerified) redirect(to);
+
+  return (
+    <AuthShell
+      title="Verify your email"
+      subtitle="One step, so we know we can reach you."
+      footer={
+        <Link href={session ? "/dashboard" : "/sign-in"} className="font-medium text-link hover:underline">
+          {session ? "Back to the dashboard" : "Back to sign in"}
+        </Link>
+      }
+    >
+      {/* Codes are always used here: the email carries one, and its link brings it along. */}
+      <VerifyEmailForm initialEmail={email ?? session?.user.email ?? ""} initialCode={/^\d{6}$/.test(code ?? "") ? code : undefined} codes next={to} />
+    </AuthShell>
+  );
+}

package/template/web/components/account/account-nav.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+export interface AccountLink {
+  href: string;
+  label: string;
+}
+
+/**
+ * The account's own navigation. Each part of an account is its own page: a single page
+ * of everything means scrolling past two-factor to reach your devices, and no way to
+ * send someone straight to the part that needs their attention.
+ */
+export function AccountNav({ links }: { links: AccountLink[] }) {
+  const pathname = usePathname();
+  return (
+    <nav aria-label="Account" className="-mb-px flex gap-1 overflow-x-auto border-b">
+      {links.map((link) => {
+        const current = pathname === link.href;
+        return (
+          <Link
+            key={link.href}
+            href={link.href}
+            aria-current={current ? "page" : undefined}
+            className={cn(
+              "border-b-2 px-3 py-2.5 text-sm font-medium whitespace-nowrap transition-colors",
+              current ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {link.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}