@jant/core 0.3.25 → 0.3.27

package/src/routes/auth/setup.tsx

@@ -0,0 +1,189 @@
+/**
+ * Setup Routes
+ *
+ * Initial admin account creation during first-time setup.
+ */
+
+import { Hono } from "hono";
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { Bindings } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { BaseLayout } from "../../ui/layouts/BaseLayout.js";
+import { dsRedirect, dsToast } from "../../lib/sse.js";
+import { SetupSchema } from "../../lib/schemas.js";
+import { mapIanaToTimezone } from "../../lib/timezones.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+const SetupContent: FC = () => {
+  const { t } = useLingui();
+
+  return (
+    <div class="min-h-screen flex items-center justify-center">
+      <div class="card max-w-md w-full">
+        <header>
+          <h2>
+            {t({
+              message: "Welcome to Jant",
+              comment: "@context: Setup page welcome heading",
+            })}
+          </h2>
+          <p>
+            {t({
+              message: "Create your admin account.",
+              comment: "@context: Setup page description",
+            })}
+          </p>
+        </header>
+        <section>
+          <form
+            data-signals="{name: '', email: '', password: '', _timezone: ''}"
+            data-init="$_timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || ''"
+            data-on:submit__prevent="@post('/setup')"
+            data-indicator="_loading"
+            class="flex flex-col gap-4"
+          >
+            <div class="field">
+              <label class="label">
+                {t({
+                  message: "Your Name",
+                  comment: "@context: Setup form field - user name",
+                })}
+              </label>
+              <input
+                type="text"
+                data-bind="name"
+                class="input"
+                required
+                placeholder="John Doe"
+              />
+            </div>
+            <div class="field">
+              <label class="label">
+                {t({
+                  message: "Email",
+                  comment: "@context: Setup/signin form field - email",
+                })}
+              </label>
+              <input
+                type="email"
+                data-bind="email"
+                class="input"
+                required
+                placeholder="you@example.com"
+              />
+            </div>
+            <div class="field">
+              <label class="label">
+                {t({
+                  message: "Password",
+                  comment: "@context: Setup/signin form field - password",
+                })}
+              </label>
+              <input
+                type="password"
+                data-bind="password"
+                class="input"
+                required
+                minLength={8}
+              />
+            </div>
+            <button type="submit" class="btn" data-attr:disabled="$_loading">
+              <svg
+                data-show="$_loading"
+                style="display:none"
+                class="animate-spin size-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                role="status"
+              >
+                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+              </svg>
+              {t({
+                message: "Complete Setup",
+                comment: "@context: Setup form submit button",
+              })}
+            </button>
+          </form>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export const setupRoutes = new Hono<Env>();
+
+setupRoutes.get("/setup", async (c) => {
+  const isComplete = await c.var.services.settings.isOnboardingComplete();
+  if (isComplete) return c.redirect("/");
+
+  return c.html(
+    <BaseLayout title="Setup - Jant" c={c}>
+      <SetupContent />
+    </BaseLayout>,
+  );
+});
+
+setupRoutes.post("/setup", async (c) => {
+  const isComplete = await c.var.services.settings.isOnboardingComplete();
+  if (isComplete) return c.redirect("/");
+
+  const body = await c.req.json<Record<string, string>>();
+  const parsed = SetupSchema.safeParse(body);
+  const browserTimezone = body._timezone;
+
+  if (!parsed.success) {
+    const msg = parsed.error.errors[0]?.message ?? "Invalid input";
+    return dsToast(msg, "error");
+  }
+
+  const { name, email, password } = parsed.data;
+
+  if (!c.var.auth) {
+    return dsToast("AUTH_SECRET not configured", "error");
+  }
+
+  try {
+    const signUpResponse = await c.var.auth.api.signUpEmail({
+      body: { name, email, password },
+    });
+
+    if (!signUpResponse || "error" in signUpResponse) {
+      return dsToast("Failed to create account", "error");
+    }
+
+    await c.var.services.settings.completeOnboarding();
+
+    // Save auto-detected timezone
+    if (browserTimezone) {
+      const tz = mapIanaToTimezone(browserTimezone);
+      if (tz !== "UTC") {
+        await c.var.services.settings.set("TIME_ZONE", tz);
+      }
+    }
+
+    // Seed default navigation items
+    await c.var.services.navItems.create({
+      type: "link",
+      label: "Featured",
+      url: "/featured",
+    });
+    await c.var.services.navItems.create({
+      type: "link",
+      label: "Collections",
+      url: "/collections",
+    });
+
+    return dsRedirect("/signin?setup");
+  } catch (err) {
+    // eslint-disable-next-line no-console -- Error logging is intentional
+    console.error("Setup error:", err);
+    return dsToast("Failed to create account", "error");
+  }
+});

package/src/routes/auth/signin.tsx

@@ -0,0 +1,163 @@
+/**
+ * Sign-in / Sign-out Routes
+ */
+
+import { Hono } from "hono";
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { Bindings } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { BaseLayout } from "../../ui/layouts/BaseLayout.js";
+import { dsRedirect, dsToast } from "../../lib/sse.js";
+import { SigninSchema } from "../../lib/schemas.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+const SigninContent: FC<{
+  demoEmail?: string;
+  demoPassword?: string;
+}> = ({ demoEmail, demoPassword }) => {
+  const { t } = useLingui();
+  const signals = JSON.stringify({
+    email: demoEmail || "",
+    password: demoPassword || "",
+  }).replace(/</g, "\\u003c");
+
+  return (
+    <div class="min-h-screen flex items-center justify-center">
+      <div class="card max-w-md w-full">
+        <header>
+          <h2>
+            {t({
+              message: "Sign In",
+              comment: "@context: Sign in page heading",
+            })}
+          </h2>
+        </header>
+        <section>
+          {demoEmail && demoPassword && (
+            <p class="text-muted-foreground text-sm mb-4">
+              {t({
+                message: "Demo account pre-filled. Just click Sign In.",
+                comment:
+                  "@context: Hint shown on signin page when demo credentials are pre-filled",
+              })}
+            </p>
+          )}
+          <form
+            data-signals={signals}
+            data-on:submit__prevent="@post('/signin')"
+            data-indicator="_loading"
+            class="flex flex-col gap-4"
+          >
+            <div class="field">
+              <label class="label">
+                {t({
+                  message: "Email",
+                  comment: "@context: Setup/signin form field - email",
+                })}
+              </label>
+              <input type="email" data-bind="email" class="input" required />
+            </div>
+            <div class="field">
+              <label class="label">
+                {t({
+                  message: "Password",
+                  comment: "@context: Setup/signin form field - password",
+                })}
+              </label>
+              <input
+                type="password"
+                data-bind="password"
+                class="input"
+                required
+              />
+            </div>
+            <button type="submit" class="btn" data-attr:disabled="$_loading">
+              <svg
+                data-show="$_loading"
+                style="display:none"
+                class="animate-spin size-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                role="status"
+              >
+                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+              </svg>
+              {t({
+                message: "Sign In",
+                comment: "@context: Sign in form submit button",
+              })}
+            </button>
+          </form>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export const signinRoutes = new Hono<Env>();
+
+signinRoutes.get("/signin", async (c) => {
+  const isSetup = c.req.query("setup") !== undefined;
+  const isReset = c.req.query("reset") !== undefined;
+  let toast: { message: string } | undefined;
+  if (isSetup) {
+    toast = { message: "Account created successfully. Please sign in." };
+  } else if (isReset) {
+    toast = { message: "Password reset successfully. Please sign in." };
+  }
+
+  return c.html(
+    <BaseLayout title="Sign In - Jant" c={c} toast={toast}>
+      <SigninContent
+        demoEmail={c.env.DEMO_EMAIL}
+        demoPassword={c.env.DEMO_PASSWORD}
+      />
+    </BaseLayout>,
+  );
+});
+
+signinRoutes.post("/signin", async (c) => {
+  if (!c.var.auth) {
+    return dsToast("Auth not configured", "error");
+  }
+
+  const body = await c.req.json();
+  const parsed = SigninSchema.safeParse(body);
+
+  if (!parsed.success) {
+    const msg = parsed.error.errors[0]?.message ?? "Invalid input";
+    return dsToast(msg, "error");
+  }
+
+  const { email, password } = parsed.data;
+
+  try {
+    const { headers } = await c.var.auth.api.signInEmail({
+      returnHeaders: true,
+      body: { email, password },
+      headers: c.req.raw.headers,
+    });
+
+    return dsRedirect("/dash", { headers });
+  } catch {
+    return dsToast("Invalid email or password", "error");
+  }
+});
+
+signinRoutes.get("/signout", async (c) => {
+  if (c.var.auth) {
+    try {
+      await c.var.auth.api.signOut({ headers: c.req.raw.headers });
+    } catch {
+      // Ignore signout errors
+    }
+  }
+  return c.redirect("/");
+});

package/src/routes/dash/__tests__/settings-avatar.test.ts

@@ -0,0 +1,89 @@
+/**
+ * Tests for avatar upload with favicon variant storage in DB settings.
+ *
+ * Note: Route handlers that import JSX components with @lingui/react/macro
+ * cannot run in vitest (requires SWC plugin). These tests verify the
+ * service-layer and storage operations that the routes orchestrate.
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { createTestDatabase } from "../../../__tests__/helpers/db.js";
+import { createSettingsService } from "../../../services/settings.js";
+import { createMediaService } from "../../../services/media.js";
+import {
+  arrayBufferToBase64,
+  base64ToUint8Array,
+} from "../../../lib/favicon.js";
+import type { Database } from "../../../db/index.js";
+
+describe("Dashboard Settings - Avatar Upload Logic", () => {
+  let db: Database;
+  let settingsService: ReturnType<typeof createSettingsService>;
+  let mediaService: ReturnType<typeof createMediaService>;
+
+  beforeEach(() => {
+    const testDb = createTestDatabase();
+    db = testDb.db as unknown as Database;
+    settingsService = createSettingsService(db);
+    mediaService = createMediaService(db);
+  });
+
+  describe("avatar upload with favicon variants in DB", () => {
+    it("stores avatar media and sets SITE_AVATAR to storageKey", async () => {
+      const storageKey = "media/2026/02/test-avatar-id.png";
+      await mediaService.create({
+        id: "test-avatar-id",
+        filename: "test-avatar-id.png",
+        originalName: "logo.png",
+        mimeType: "image/png",
+        size: 5000,
+        storageKey,
+        provider: "r2",
+      });
+
+      await settingsService.set("SITE_AVATAR", storageKey);
+
+      const avatarKey = await settingsService.get("SITE_AVATAR");
+      expect(avatarKey).toBe(storageKey);
+    });
+
+    it("stores favicon ICO as base64 in settings", async () => {
+      const fakeIcoData = new Uint8Array([0, 0, 1, 0, 1, 0, 32, 32]);
+      const b64 = arrayBufferToBase64(fakeIcoData.buffer);
+      await settingsService.set("SITE_FAVICON_ICO", b64);
+
+      const stored = await settingsService.get("SITE_FAVICON_ICO");
+      expect(stored).not.toBeNull();
+      const decoded = base64ToUint8Array(stored!);
+      expect(Array.from(decoded)).toEqual(Array.from(fakeIcoData));
+    });
+
+    it("stores apple-touch-icon as base64 in settings", async () => {
+      const fakePng = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a]);
+      const b64 = arrayBufferToBase64(fakePng.buffer);
+      await settingsService.set("SITE_FAVICON_APPLE_TOUCH", b64);
+
+      const stored = await settingsService.get("SITE_FAVICON_APPLE_TOUCH");
+      expect(stored).not.toBeNull();
+      const decoded = base64ToUint8Array(stored!);
+      expect(Array.from(decoded)).toEqual(Array.from(fakePng));
+    });
+  });
+
+  describe("avatar removal cleans up favicon settings", () => {
+    it("removes all favicon-related settings", async () => {
+      await settingsService.set("SITE_AVATAR", "media/2026/02/some-id.png");
+      await settingsService.set("SITE_FAVICON_ICO", "base64data");
+      await settingsService.set("SITE_FAVICON_APPLE_TOUCH", "base64data");
+
+      // Simulate avatar removal
+      await settingsService.remove("SITE_AVATAR");
+      await settingsService.remove("SITE_FAVICON_ICO");
+      await settingsService.remove("SITE_FAVICON_APPLE_TOUCH");
+
+      expect(await settingsService.get("SITE_AVATAR")).toBeNull();
+      expect(await settingsService.get("SITE_FAVICON_ICO")).toBeNull();
+      expect(await settingsService.get("SITE_FAVICON_APPLE_TOUCH")).toBeNull();
+    });
+  });
+});