@zerotal/admin 1.0.0

package/src/auth/pages/ForgotPasswordPage.tsx

@@ -0,0 +1,87 @@
+/** @jsxImportSource @zerotal/flow */
+// "Forgot password" — collects an email and asks the app's broker to send a
+// reset link. Mounted only when `auth.passwordReset` is configured.
+
+import { Component, expose } from "@zerotal/flow";
+import type { HtmlNode } from "@zerotal/flow";
+import { Panel } from "../../Panel.ts";
+import { AuthLayout } from "../AuthLayout.tsx";
+import { Icon } from "../../ui/icons.tsx";
+
+const INPUT =
+  "mt-1.5 block w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition placeholder:text-muted-foreground focus:ring-2 focus:ring-ring";
+
+export class ForgotPasswordPage extends Component {
+  static layout = AuthLayout;
+
+  @expose email = "";
+  @expose sent = false;
+  @expose error = "";
+
+  @expose async send(): Promise<void> {
+    this.error = "";
+    const cfg = Panel.authConfig() ?? {};
+    if (!cfg.passwordReset) return;
+    const ok = await cfg.passwordReset.sendResetLink(this.email);
+    if (ok) this.sent = true;
+    else this.error = "We couldn't find an account with that email address.";
+  }
+
+  override async render(): Promise<HtmlNode> {
+    const base = Panel.config().path.replace(/\/$/, "");
+    const loginPath = Panel.authConfig()?.loginPath ?? "/login";
+
+    if (this.sent) {
+      return (
+        <div class="space-y-4 text-center">
+          <div class="mx-auto flex h-11 w-11 items-center justify-center rounded-full bg-success/10 text-success">
+            <Icon name="mail" class="h-5 w-5" />
+          </div>
+          <div>
+            <h1 class="text-base font-semibold">Check your inbox</h1>
+            <p class="mt-1 text-sm text-muted-foreground">
+              If an account exists for {this.email}, a reset link is on its way.
+            </p>
+          </div>
+          <a
+            href={`${base}${loginPath}`}
+            navigate
+            class="inline-block text-sm font-medium text-primary hover:underline"
+          >
+            ← Back to sign in
+          </a>
+        </div>
+      );
+    }
+
+    return (
+      <form onSubmit={this.send} class="space-y-4">
+        <div>
+          <h1 class="text-base font-semibold">Reset your password</h1>
+          <p class="mt-0.5 text-sm text-muted-foreground">
+            We'll email you a link to set a new one.
+          </p>
+        </div>
+        {this.error ? <p class="text-sm text-destructive">{this.error}</p> : null}
+        <div>
+          <label class="block text-sm font-medium">Email</label>
+          <input type="email" value={this.email} placeholder="you@example.com" class={INPUT} />
+        </div>
+        <button
+          type="submit"
+          loadingAttr="disabled"
+          class="inline-flex h-10 w-full items-center justify-center rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground shadow-sm transition hover:bg-primary/90 disabled:opacity-60"
+        >
+          Email reset link
+        </button>
+        <a
+          href={`${base}${loginPath}`}
+          navigate
+          class="block text-center text-sm font-medium text-primary hover:underline"
+        >
+          ← Back to sign in
+        </a>
+      </form>
+    );
+  }
+}

package/src/auth/pages/LoginPage.tsx

@@ -0,0 +1,121 @@
+/** @jsxImportSource @zerotal/flow */
+// Login screen — authenticates via `@zerotal/auth`'s `Auth.attempt`, then
+// redirects into the panel. Mounted only when `Panel.auth({ enabled: true })`.
+
+import { Component, expose } from "@zerotal/flow";
+import type { HtmlNode } from "@zerotal/flow";
+import { Auth } from "@zerotal/auth";
+import { Panel } from "../../Panel.ts";
+import { AuthLayout } from "../AuthLayout.tsx";
+import { Icon } from "../../ui/icons.tsx";
+
+const INPUT =
+  "mt-1.5 block w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition placeholder:text-muted-foreground focus:ring-2 focus:ring-ring";
+
+export class LoginPage extends Component {
+  static layout = AuthLayout;
+
+  @expose email = "";
+  @expose password = "";
+  @expose remember = false;
+  @expose error = "";
+
+  @expose async login(): Promise<void> {
+    this.error = "";
+    const cfg = Panel.authConfig() ?? {};
+    const id = cfg.identifier ?? "email";
+    const creds: Record<string, unknown> = { [id]: this.email, password: this.password };
+    let ok: boolean;
+    if (cfg.authenticateWhen) {
+      ok = await Auth.attemptWhen(
+        creds,
+        cfg.authenticateWhen as (u: unknown) => boolean | Promise<boolean>,
+        !!this.remember,
+      );
+    } else {
+      ok = await Auth.attempt(creds, !!this.remember);
+    }
+    if (ok) {
+      const base = Panel.config().path.replace(/\/$/, "");
+      this.redirect(cfg.redirectTo ?? (base || "/")).withSuccess("Welcome back.");
+    } else {
+      this.error = "These credentials do not match our records.";
+    }
+  }
+
+  override async render(): Promise<HtmlNode> {
+    const cfg = Panel.authConfig() ?? {};
+    const base = Panel.config().path.replace(/\/$/, "");
+    const id = cfg.identifier ?? "email";
+    const idLabel = id === "email" ? "Email" : id.charAt(0).toUpperCase() + id.slice(1);
+    const showRemember = cfg.remember ?? true;
+    const showForgot = !!cfg.passwordReset;
+
+    return (
+      <form onSubmit={this.login} class="space-y-4">
+        <div>
+          <h1 class="text-base font-semibold">Sign in</h1>
+          <p class="mt-0.5 text-sm text-muted-foreground">Enter your credentials to continue.</p>
+        </div>
+
+        {this.error ? (
+          <div class="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+            <Icon name="x-circle" class="mt-0.5 h-4 w-4 shrink-0" />
+            <span>{this.error}</span>
+          </div>
+        ) : null}
+
+        <div>
+          <label class="block text-sm font-medium">{idLabel}</label>
+          <input
+            type={id === "email" ? "email" : "text"}
+            value={this.email}
+            autocomplete="username"
+            placeholder={id === "email" ? "you@example.com" : idLabel}
+            class={INPUT}
+          />
+        </div>
+
+        <div>
+          <div class="flex items-center justify-between">
+            <label class="block text-sm font-medium">Password</label>
+            {showForgot ? (
+              <a
+                href={`${base}/forgot-password`}
+                navigate
+                class="text-xs font-medium text-primary hover:underline"
+              >
+                Forgot?
+              </a>
+            ) : null}
+          </div>
+          <input
+            type="password"
+            value={this.password}
+            autocomplete="current-password"
+            class={INPUT}
+          />
+        </div>
+
+        {showRemember ? (
+          <label class="flex items-center gap-2 text-sm text-muted-foreground">
+            <input
+              type="checkbox"
+              checked={this.remember}
+              class="h-4 w-4 rounded border-input text-primary focus:ring-2 focus:ring-ring"
+            />
+            Remember me
+          </label>
+        ) : null}
+
+        <button
+          type="submit"
+          loadingAttr="disabled"
+          class="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground shadow-sm transition hover:bg-primary/90 disabled:opacity-60"
+        >
+          Sign in
+        </button>
+      </form>
+    );
+  }
+}

package/src/auth/pages/ProfilePage.tsx

@@ -0,0 +1,216 @@
+/** @jsxImportSource @zerotal/flow */
+// In-panel profile page — update details, change password, and sign out. Uses
+// `@zerotal/auth`'s `Auth` + `Hash`. Mounted behind the panel guard.
+
+import { Component, expose } from "@zerotal/flow";
+import type { HtmlNode } from "@zerotal/flow";
+import type { HttpContext } from "@zerotal/core";
+import { Auth, Hash } from "@zerotal/auth";
+import { Panel } from "../../Panel.ts";
+import { AdminLayout } from "../../ui/AdminLayout.tsx";
+import { Icon } from "../../ui/icons.tsx";
+
+const INPUT =
+  "mt-1.5 block w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition placeholder:text-muted-foreground focus:ring-2 focus:ring-ring";
+const PRIMARY_BTN =
+  "inline-flex h-9 items-center gap-1.5 rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground shadow-sm transition hover:bg-primary/90 disabled:opacity-60";
+
+export class ProfilePage extends Component {
+  static layout = AdminLayout;
+
+  @expose name = "";
+  @expose email = "";
+  @expose currentPassword = "";
+  @expose newPassword = "";
+  @expose newPasswordConfirm = "";
+  @expose profileError = "";
+  @expose passwordError = "";
+
+  private _user(): Record<string, unknown> | undefined {
+    return Auth.userOrNull() as unknown as Record<string, unknown> | undefined;
+  }
+
+  override async onMount(_ctx?: HttpContext): Promise<void> {
+    const u = this._user();
+    if (u) {
+      this.name = String(u["name"] ?? "");
+      this.email = String(u["email"] ?? "");
+    }
+  }
+
+  @expose async saveProfile(): Promise<void> {
+    this.profileError = "";
+    const u = this._user();
+    if (!u) return;
+    const cfg = Panel.authConfig() ?? {};
+    const data = { name: this.name, email: this.email };
+    try {
+      if (cfg.updateProfile) {
+        await cfg.updateProfile(u, data);
+      } else {
+        const m = u as {
+          fill?: (d: Record<string, unknown>) => void;
+          save?: () => Promise<unknown>;
+        };
+        if (typeof m.fill === "function") m.fill(data);
+        else for (const [k, v] of Object.entries(data)) u[k] = v;
+        await m.save?.();
+      }
+      this.flash("Profile updated.");
+    } catch {
+      this.profileError = "Could not update your profile.";
+    }
+  }
+
+  @expose async changePassword(): Promise<void> {
+    this.passwordError = "";
+    const u = this._user();
+    if (!u) return;
+    if (this.newPassword.length < 8) {
+      this.passwordError = "New password must be at least 8 characters.";
+      return;
+    }
+    if (this.newPassword !== this.newPasswordConfirm) {
+      this.passwordError = "The new passwords do not match.";
+      return;
+    }
+    const getHash = u["getAuthPassword"];
+    const hashed =
+      typeof getHash === "function" ? (getHash as () => string).call(u) : u["password"];
+    const ok = hashed ? await Hash.check(this.currentPassword, String(hashed)) : false;
+    if (!ok) {
+      this.passwordError = "Your current password is incorrect.";
+      return;
+    }
+    u["password"] = await Hash.make(this.newPassword);
+    await (u as { save?: () => Promise<unknown> }).save?.();
+    this.currentPassword = "";
+    this.newPassword = "";
+    this.newPasswordConfirm = "";
+    this.flash("Password changed.");
+  }
+
+  @expose async signOut(): Promise<void> {
+    await Auth.logout();
+    const cfg = Panel.authConfig() ?? {};
+    const base = Panel.config().path.replace(/\/$/, "");
+    this.redirect(`${base}${cfg.loginPath ?? "/login"}`).withSuccess("Signed out.");
+  }
+
+  override async render(): Promise<HtmlNode> {
+    const base = Panel.config().path.replace(/\/$/, "");
+    const cfg = Panel.authConfig() ?? {};
+    const u = this._user();
+    const verify = cfg.emailVerification;
+    const unverified = !!verify && !!u && !verify.isVerified(u);
+    const card =
+      "rounded-xl border border-border bg-card p-5 text-card-foreground shadow-sm sm:p-6";
+
+    return (
+      <div class="mx-auto w-full max-w-2xl space-y-6">
+        <div class="flex flex-wrap items-end justify-between gap-4">
+          <div>
+            <nav class="mb-1 text-xs text-muted-foreground">
+              <a href={base} navigate class="hover:text-foreground">
+                Dashboard
+              </a>
+              <span class="px-1.5">/</span>
+              <span>Profile</span>
+            </nav>
+            <h1 class="text-2xl font-semibold tracking-tight">Your profile</h1>
+          </div>
+          <button
+            type="button"
+            onClick={this.signOut}
+            class="inline-flex h-9 items-center gap-1.5 rounded-lg border border-input bg-background px-3 text-sm font-medium transition hover:bg-accent hover:text-accent-foreground"
+          >
+            <Icon name="logout" class="h-4 w-4" /> Sign out
+          </button>
+        </div>
+
+        {unverified ? (
+          <div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm">
+            <span class="flex items-center gap-2">
+              <Icon name="mail" class="h-4 w-4 text-amber-500" /> Your email address is not
+              verified.
+            </span>
+            <a
+              href={`${base}/verify-email`}
+              navigate
+              class="font-medium text-primary hover:underline"
+            >
+              Verify now →
+            </a>
+          </div>
+        ) : null}
+
+        {/* Profile details */}
+        <form onSubmit={this.saveProfile} class={card}>
+          <h2 class="text-sm font-semibold">Account details</h2>
+          {this.profileError ? (
+            <p class="mt-2 text-sm text-destructive">{this.profileError}</p>
+          ) : null}
+          <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div>
+              <label class="block text-sm font-medium">Name</label>
+              <input value={this.name} class={INPUT} />
+            </div>
+            <div>
+              <label class="block text-sm font-medium">Email</label>
+              <input type="email" value={this.email} class={INPUT} />
+            </div>
+          </div>
+          <div class="mt-4 flex justify-end">
+            <button type="submit" loadingAttr="disabled" class={PRIMARY_BTN}>
+              Save changes
+            </button>
+          </div>
+        </form>
+
+        {/* Change password */}
+        <form onSubmit={this.changePassword} class={card}>
+          <h2 class="text-sm font-semibold">Change password</h2>
+          {this.passwordError ? (
+            <p class="mt-2 text-sm text-destructive">{this.passwordError}</p>
+          ) : null}
+          <div class="mt-4 space-y-4">
+            <div>
+              <label class="block text-sm font-medium">Current password</label>
+              <input
+                type="password"
+                value={this.currentPassword}
+                autocomplete="current-password"
+                class={INPUT}
+              />
+            </div>
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div>
+                <label class="block text-sm font-medium">New password</label>
+                <input
+                  type="password"
+                  value={this.newPassword}
+                  autocomplete="new-password"
+                  class={INPUT}
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium">Confirm new password</label>
+                <input
+                  type="password"
+                  value={this.newPasswordConfirm}
+                  autocomplete="new-password"
+                  class={INPUT}
+                />
+              </div>
+            </div>
+          </div>
+          <div class="mt-4 flex justify-end">
+            <button type="submit" loadingAttr="disabled" class={PRIMARY_BTN}>
+              Update password
+            </button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}

package/src/auth/pages/ResetPasswordPage.tsx

@@ -0,0 +1,103 @@
+/** @jsxImportSource @zerotal/flow */
+// "Reset password" — consumes the token+email from the reset link query and asks
+// the app's broker to set the new password.
+
+import { Component, expose, url } from "@zerotal/flow";
+import type { HtmlNode } from "@zerotal/flow";
+import { Panel } from "../../Panel.ts";
+import { AuthLayout } from "../AuthLayout.tsx";
+import { Icon } from "../../ui/icons.tsx";
+
+const INPUT =
+  "mt-1.5 block w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition placeholder:text-muted-foreground focus:ring-2 focus:ring-ring";
+
+export class ResetPasswordPage extends Component {
+  static layout = AuthLayout;
+
+  /** Seeded from the reset link query (`?token=…&email=…`). */
+  @url token = "";
+  @url email = "";
+  @expose password = "";
+  @expose confirm = "";
+  @expose error = "";
+  @expose done = false;
+
+  @expose async reset(): Promise<void> {
+    this.error = "";
+    const cfg = Panel.authConfig() ?? {};
+    if (!cfg.passwordReset) return;
+    if (this.password.length < 8) {
+      this.error = "Password must be at least 8 characters.";
+      return;
+    }
+    if (this.password !== this.confirm) {
+      this.error = "The passwords do not match.";
+      return;
+    }
+    const ok = await cfg.passwordReset.reset({
+      email: this.email,
+      token: this.token,
+      password: this.password,
+    });
+    if (ok) this.done = true;
+    else this.error = "This reset link is invalid or has expired.";
+  }
+
+  override async render(): Promise<HtmlNode> {
+    const base = Panel.config().path.replace(/\/$/, "");
+    const loginPath = Panel.authConfig()?.loginPath ?? "/login";
+
+    if (this.done) {
+      return (
+        <div class="space-y-4 text-center">
+          <div class="mx-auto flex h-11 w-11 items-center justify-center rounded-full bg-success/10 text-success">
+            <Icon name="check-circle" class="h-5 w-5" />
+          </div>
+          <div>
+            <h1 class="text-base font-semibold">Password updated</h1>
+            <p class="mt-1 text-sm text-muted-foreground">
+              You can now sign in with your new password.
+            </p>
+          </div>
+          <a
+            href={`${base}${loginPath}`}
+            navigate
+            class="inline-flex h-10 w-full items-center justify-center rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground shadow-sm transition hover:bg-primary/90"
+          >
+            Go to sign in
+          </a>
+        </div>
+      );
+    }
+
+    return (
+      <form onSubmit={this.reset} class="space-y-4">
+        <div>
+          <h1 class="text-base font-semibold">Choose a new password</h1>
+          {this.email ? <p class="mt-0.5 text-sm text-muted-foreground">for {this.email}</p> : null}
+        </div>
+        {this.error ? (
+          <div class="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+            <Icon name="x-circle" class="mt-0.5 h-4 w-4 shrink-0" />
+            <span>{this.error}</span>
+          </div>
+        ) : null}
+        <div>
+          <label class="block text-sm font-medium">New password</label>
+          <input type="password" value={this.password} autocomplete="new-password" class={INPUT} />
+        </div>
+        <div>
+          <label class="block text-sm font-medium">Confirm password</label>
+          <input type="password" value={this.confirm} autocomplete="new-password" class={INPUT} />
+        </div>
+        <button
+          type="submit"
+          loadingAttr="disabled"
+          class="inline-flex h-10 w-full items-center justify-center rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground shadow-sm transition hover:bg-primary/90 disabled:opacity-60"
+        >
+          Reset password
+        </button>
+      </form>
+    );
+  }
+}

package/src/auth/pages/VerifyEmailPage.tsx

@@ -0,0 +1,68 @@
+/** @jsxImportSource @zerotal/flow */
+// Email-verification notice — for a signed-in but unverified user. Re-sends the
+// verification link via the app's hook. Mounted when `auth.emailVerification` is set.
+
+import { Component, expose } from "@zerotal/flow";
+import type { HtmlNode } from "@zerotal/flow";
+import { Auth } from "@zerotal/auth";
+import { Panel } from "../../Panel.ts";
+import { AuthLayout } from "../AuthLayout.tsx";
+import { Icon } from "../../ui/icons.tsx";
+
+export class VerifyEmailPage extends Component {
+  static layout = AuthLayout;
+
+  @expose resent = false;
+
+  @expose async resend(): Promise<void> {
+    const cfg = Panel.authConfig() ?? {};
+    const u = Auth.userOrNull() as unknown;
+    if (cfg.emailVerification && u) {
+      await cfg.emailVerification.resend(u);
+      this.resent = true;
+    }
+  }
+
+  @expose async signOut(): Promise<void> {
+    await Auth.logout();
+    const cfg = Panel.authConfig() ?? {};
+    const base = Panel.config().path.replace(/\/$/, "");
+    this.redirect(`${base}${cfg.loginPath ?? "/login"}`);
+  }
+
+  override async render(): Promise<HtmlNode> {
+    return (
+      <div class="space-y-4 text-center">
+        <div class="mx-auto flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
+          <Icon name="mail" class="h-5 w-5" />
+        </div>
+        <div>
+          <h1 class="text-base font-semibold">Verify your email</h1>
+          <p class="mt-1 text-sm text-muted-foreground">
+            We've sent a verification link to your inbox. Click it to activate your account.
+          </p>
+        </div>
+        {this.resent ? (
+          <p class="flex items-center justify-center gap-1.5 text-sm text-success">
+            <Icon name="check-circle" class="h-4 w-4" /> A fresh link is on its way.
+          </p>
+        ) : null}
+        <button
+          type="button"
+          onClick={this.resend}
+          loadingAttr="disabled"
+          class="inline-flex h-10 w-full items-center justify-center rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground shadow-sm transition hover:bg-primary/90 disabled:opacity-60"
+        >
+          Resend verification email
+        </button>
+        <button
+          type="button"
+          onClick={this.signOut}
+          class="text-sm font-medium text-muted-foreground hover:text-foreground"
+        >
+          Sign out
+        </button>
+      </div>
+    );
+  }
+}

package/src/auth/register.ts

@@ -0,0 +1,44 @@
+/**
+ * Auth-route registrar. Dynamically imported by `AdminProvider` only when
+ * `Panel.auth({ enabled: true })` is set, so the hard `@zerotal/auth` dependency
+ * (pulled in by the page modules) stays out of the always-loaded path.
+ *
+ * Guest screens (login + optional password reset) mount OUTSIDE the panel guard
+ * so unauthenticated users can reach them; profile + verify mount behind the
+ * auth guard (defaults to the panel's middleware).
+ */
+import { Router } from "@zerotal/core";
+import type { MiddlewareClass } from "@zerotal/core";
+import { Panel } from "../Panel.ts";
+import { LoginPage } from "./pages/LoginPage.tsx";
+import { ProfilePage } from "./pages/ProfilePage.tsx";
+import { ForgotPasswordPage } from "./pages/ForgotPasswordPage.tsx";
+import { ResetPasswordPage } from "./pages/ResetPasswordPage.tsx";
+import { VerifyEmailPage } from "./pages/VerifyEmailPage.tsx";
+
+type FlowFn = (p: string, page: unknown, mw?: MiddlewareClass[]) => unknown;
+
+export function registerAuthRoutes(path: string, panelGuard: MiddlewareClass[]): void {
+  const cfg = Panel.authConfig();
+  if (!cfg) return;
+  const flow = (Router as unknown as { flow?: FlowFn }).flow;
+  if (typeof flow !== "function") return;
+
+  const loginPath = cfg.loginPath ?? "/login";
+  const profilePath = cfg.profilePath ?? "/profile";
+  const guestGuard = cfg.guestMiddleware ?? [];
+  const authGuard = cfg.authMiddleware ?? panelGuard;
+
+  Router.group({ prefix: path, middleware: guestGuard }, () => {
+    flow(loginPath, LoginPage);
+    if (cfg.passwordReset) {
+      flow("/forgot-password", ForgotPasswordPage);
+      flow("/reset-password", ResetPasswordPage);
+    }
+  });
+
+  Router.group({ prefix: path, middleware: authGuard }, () => {
+    flow(profilePath, ProfilePage);
+    if (cfg.emailVerification) flow("/verify-email", VerifyEmailPage);
+  });
+}