@webjsdev/cli 0.10.37 → 0.10.38

package/lib/saas-template.js

@@ -118,6 +118,10 @@ export async function writeSaasFiles(appDir, opts = {}) {
     "    ...(process.env.AUTH_GOOGLE_ID ? [Google({ clientId: process.env.AUTH_GOOGLE_ID, clientSecret: process.env.AUTH_GOOGLE_SECRET })] : []),",
     "  ],",
     "  secret: authSecret,",
+    "  // A failed credentials sign-in 302s to `${pages.error}?error=CredentialsSignin`.",
+    "  // Point it at /login so app/login/page.ts reads searchParams.error and shows a",
+    "  // message, instead of the createAuth default (the home page) swallowing the error.",
+    "  pages: { error: '/login' },",
     "});",
     "",
   ].join('\n'));
@@ -339,7 +343,17 @@ export async function writeSaasFiles(appDir, opts = {}) {
     "",
     "export const metadata = { title: 'Login' };",
     "",
-    "export default function LoginPage() {",
+    "// A failed sign-in 302s back here with ?error=... (createAuth is configured",
+    "// with pages.error: '/login' in lib/auth.server.ts). Map the code to a plain",
+    "// message so a bad password gets visible feedback instead of a silent bounce.",
+    "function errorMessage(code: string | undefined): string | null {",
+    "  if (!code) return null;",
+    "  if (code === 'CredentialsSignin') return 'Invalid email or password.';",
+    "  return 'Could not sign you in. Please try again.';",
+    "}",
+    "",
+    "export default function LoginPage({ searchParams }: { searchParams: { error?: string } }) {",
+    "  const error = errorMessage(searchParams.error);",
     "  return html`",
     "    <div class=\"max-w-sm mx-auto mt-12\">",
     "      <div class=${cardClass()}>",
@@ -348,6 +362,7 @@ export async function writeSaasFiles(appDir, opts = {}) {
     "          <p class=${cardDescriptionClass()}>Welcome back: log in to continue.</p>",
     "        </div>",
     "        <div class=${cardContentClass()}>",
+    "          ${error ? html`<p role=\"alert\" class=\"mb-4 text-sm text-destructive\">${error}</p>` : ''}",
     "          <form method=\"POST\" action=\"/api/auth/signin/credentials\" class=\"flex flex-col gap-4\">",
     "            <!-- createAuth reads redirectTo from the posted form and 302s there after a successful signin. -->",
     "            <input type=\"hidden\" name=\"redirectTo\" value=\"/dashboard\">",
@@ -461,12 +476,39 @@ export async function writeSaasFiles(appDir, opts = {}) {
     "",
   ].join('\n'));
 
+  // app/dashboard/layout.ts: a thin sub-nav shared by every /dashboard page
+  // (page.ts and settings/page.ts). It carries the logout control so a signed-in
+  // user can end the session from anywhere under /dashboard.
+  await writeFile(join(appDir, 'app', 'dashboard', 'layout.ts'), [
+    "import { html } from '@webjsdev/core';",
+    "import { buttonClass } from '#components/ui/button.ts';",
+    "",
+    "// Nested layout for the protected /dashboard subtree. Logout is a plain",
+    "// <form method=\"POST\"> posting to the createAuth signout route: it clears the",
+    "// session cookie and 302s home, and works with JS off (progressive-enhancement",
+    "// default). signOut is server-only (lib/auth.server.ts), so we POST to its route",
+    "// rather than import it into a browser-shipping page. After signout the dashboard",
+    "// middleware bounces any later /dashboard visit to /login.",
+    "export default function DashboardLayout({ children }: { children: unknown }) {",
+    "  return html`",
+    "    <nav class=\"flex items-center gap-4 mb-6 pb-4 border-b border-border\">",
+    "      <a href=\"/dashboard\" class=\"text-sm font-medium hover:underline\">Dashboard</a>",
+    "      <a href=\"/dashboard/settings\" class=\"text-sm font-medium hover:underline\">Settings</a>",
+    "      <form method=\"POST\" action=\"/api/auth/signout\" class=\"ml-auto\">",
+    "        <button class=${buttonClass({ variant: 'outline', size: 'sm' })} type=\"submit\">Log out</button>",
+    "      </form>",
+    "    </nav>",
+    "    ${children}",
+    "  `;",
+    "}",
+    "",
+  ].join('\n'));
+
   // app/dashboard/page.ts
   await writeFile(join(appDir, 'app', 'dashboard', 'page.ts'), [
     "import { html } from '@webjsdev/core';",
     "import { currentUser } from '#modules/auth/queries/current-user.server.ts';",
-    "import { cardClass, cardHeaderClass, cardTitleClass, cardDescriptionClass, cardContentClass } from '#components/ui/card.ts';",
-    "import { buttonClass } from '#components/ui/button.ts';",
+    "import { cardClass, cardHeaderClass, cardTitleClass, cardDescriptionClass } from '#components/ui/card.ts';",
     "import { badgeClass } from '#components/ui/badge.ts';",
     "",
     "export const metadata = { title: 'Dashboard' };",
@@ -483,9 +525,6 @@ export async function writeSaasFiles(appDir, opts = {}) {
     "        <h2 class=${cardTitleClass()}>Welcome, ${user?.name || user?.email}!</h2>",
     "        <p class=${cardDescriptionClass()}>You're authenticated. Replace this scaffold with your real app.</p>",
     "      </div>",
-    "      <div class=${cardContentClass()}>",
-    "        <a class=${buttonClass({ variant: 'outline' })} href=\"/dashboard/settings\">Settings</a>",
-    "      </div>",
     "    </div>",
     "  `;",
     "}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/cli",
-  "version": "0.10.37",
+  "version": "0.10.38",
   "type": "module",
   "description": "webjs CLI - dev, start, create, db",
   "bin": {