@jant/core 0.3.35 → 0.3.37

package/src/ui/dash/settings/AccountContent.tsx

@@ -1,162 +1,103 @@
 /**
- * Account settings: profile + password change forms
+ * Password settings: change sign-in password
  */
 
 import { useLingui } from "@lingui/react/macro";
-import { SettingsNav } from "./SettingsNav.js";
 
-export function AccountContent({ userName }: { userName: string }) {
+export function AccountContent() {
   const { t } = useLingui();
 
-  const profileSignals = JSON.stringify({ userName }).replace(/</g, "\\u003c");
-
   return (
-    <>
-      <SettingsNav currentTab="account" />
-
-      <div class="flex flex-col max-w-lg">
-        <form
-          data-signals={profileSignals}
-          data-on:submit__prevent="@post('/dash/settings/account')"
-          data-indicator="_profileLoading"
-        >
-          <h2 class="text-lg font-semibold mb-4">
-            {t({
-              message: "Profile",
-              comment: "@context: Account settings section heading",
-            })}
-          </h2>
-          <div class="flex flex-col gap-4">
-            <div class="field">
-              <label class="label">
-                {t({
-                  message: "Name",
-                  comment: "@context: Account settings form field",
-                })}
-              </label>
-              <input type="text" data-bind="userName" class="input" required />
-            </div>
+    <div class="flex flex-col max-w-lg">
+      <form
+        data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
+        data-on:submit__prevent="@post('/settings/account/password')"
+        data-indicator="_passwordLoading"
+      >
+        <h2 class="text-lg font-semibold mb-4">
+          {t({
+            message: "Change Password",
+            comment: "@context: Settings section heading",
+          })}
+        </h2>
+        <div class="flex flex-col gap-4">
+          <div class="field">
+            <label class="label">
+              {t({
+                message: "Current Password",
+                comment: "@context: Password form field",
+              })}
+            </label>
+            <input
+              type="password"
+              data-bind="currentPassword"
+              class="input"
+              required
+              autocomplete="current-password"
+            />
           </div>
 
-          <button
-            type="submit"
-            class="btn mt-4"
-            data-attr:disabled="$_profileLoading"
-          >
-            <svg
-              data-show="$_profileLoading"
-              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: "Save Profile",
-              comment: "@context: Button to save profile",
-            })}
-          </button>
-        </form>
-
-        <hr class="my-8" />
-
-        <form
-          data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
-          data-on:submit__prevent="@post('/dash/settings/password')"
-          data-indicator="_passwordLoading"
-        >
-          <h2 class="text-lg font-semibold mb-4">
-            {t({
-              message: "Change Password",
-              comment: "@context: Settings section heading",
-            })}
-          </h2>
-          <div class="flex flex-col gap-4">
-            <div class="field">
-              <label class="label">
-                {t({
-                  message: "Current Password",
-                  comment: "@context: Password form field",
-                })}
-              </label>
-              <input
-                type="password"
-                data-bind="currentPassword"
-                class="input"
-                required
-                autocomplete="current-password"
-              />
-            </div>
-
-            <div class="field">
-              <label class="label">
-                {t({
-                  message: "New Password",
-                  comment: "@context: Password form field",
-                })}
-              </label>
-              <input
-                type="password"
-                data-bind="newPassword"
-                class="input"
-                required
-                minlength={8}
-                autocomplete="new-password"
-              />
-            </div>
+          <div class="field">
+            <label class="label">
+              {t({
+                message: "New Password",
+                comment: "@context: Password form field",
+              })}
+            </label>
+            <input
+              type="password"
+              data-bind="newPassword"
+              class="input"
+              required
+              minlength={8}
+              autocomplete="new-password"
+            />
+          </div>
 
-            <div class="field">
-              <label class="label">
-                {t({
-                  message: "Confirm New Password",
-                  comment: "@context: Password form field",
-                })}
-              </label>
-              <input
-                type="password"
-                data-bind="confirmPassword"
-                class="input"
-                required
-                minlength={8}
-                autocomplete="new-password"
-              />
-            </div>
+          <div class="field">
+            <label class="label">
+              {t({
+                message: "Confirm New Password",
+                comment: "@context: Password form field",
+              })}
+            </label>
+            <input
+              type="password"
+              data-bind="confirmPassword"
+              class="input"
+              required
+              minlength={8}
+              autocomplete="new-password"
+            />
           </div>
+        </div>
 
-          <button
-            type="submit"
-            class="btn mt-4"
-            data-attr:disabled="$_passwordLoading"
+        <button
+          type="submit"
+          class="btn mt-4"
+          data-attr:disabled="$_passwordLoading"
+        >
+          <svg
+            data-show="$_passwordLoading"
+            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"
           >
-            <svg
-              data-show="$_passwordLoading"
-              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: "Change Password",
-              comment: "@context: Button to change password",
-            })}
-          </button>
-        </form>
-      </div>
-    </>
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+          {t({
+            message: "Change Password",
+            comment: "@context: Button to change password",
+          })}
+        </button>
+      </form>
+    </div>
   );
 }

package/src/ui/dash/settings/AccountMenuContent.tsx

@@ -0,0 +1,147 @@
+/**
+ * Account settings sub-menu — lists Sessions and Password options
+ */
+
+import { useLingui } from "@lingui/react/macro";
+
+/** Chevron right icon */
+function ChevronRight() {
+  return (
+    <svg
+      class="settings-item-chevron"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}
+
+function AccountMenuItem({
+  href,
+  icon,
+  color,
+  name,
+  description,
+}: {
+  href: string;
+  icon: string;
+  color: string;
+  name: string;
+  description: string;
+}) {
+  return (
+    <a href={href} class="settings-item">
+      <span class="settings-item-icon" style={`background-color:${color}`}>
+        <span dangerouslySetInnerHTML={{ __html: icon }} />
+      </span>
+      <span class="settings-item-text">
+        <span class="settings-item-name">{name}</span>
+        <span class="settings-item-desc">{description}</span>
+      </span>
+      <ChevronRight />
+    </a>
+  );
+}
+
+const ICONS = {
+  monitor: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>`,
+  lock: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`,
+  download: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>`,
+};
+
+const COLORS = {
+  teal: "oklch(0.55 0.15 185)",
+  gray: "oklch(0.55 0.01 250)",
+  green: "oklch(0.55 0.18 155)",
+};
+
+export function AccountMenuContent() {
+  const { t } = useLingui();
+
+  return (
+    <div class="settings-root">
+      <div>
+        <div class="settings-group">
+          <AccountMenuItem
+            href="/settings/account/sessions"
+            icon={ICONS.monitor}
+            color={COLORS.teal}
+            name={t({
+              message: "Sessions",
+              comment: "@context: Settings item — session management",
+            })}
+            description={t({
+              message: "Manage active sign-in sessions",
+              comment: "@context: Settings item description for sessions",
+            })}
+          />
+          <AccountMenuItem
+            href="/settings/account/password"
+            icon={ICONS.lock}
+            color={COLORS.gray}
+            name={t({
+              message: "Password",
+              comment: "@context: Settings item — password settings",
+            })}
+            description={t({
+              message: "Change your sign-in password",
+              comment:
+                "@context: Settings item description for password change",
+            })}
+          />
+        </div>
+      </div>
+
+      {/* Data */}
+      <div>
+        <div class="settings-group-label">
+          {t({
+            message: "Data",
+            comment: "@context: Settings group label for data export/import",
+          })}
+        </div>
+        <div class="settings-group">
+          <form
+            method="post"
+            action="/api/export/zola"
+            class="settings-export-form"
+          >
+            <button type="submit" class="settings-item">
+              <span
+                class="settings-item-icon"
+                style={`background-color:${COLORS.green}`}
+              >
+                <span dangerouslySetInnerHTML={{ __html: ICONS.download }} />
+              </span>
+              <span class="settings-item-text">
+                <span class="settings-item-name">
+                  {t({
+                    message: "Export Site",
+                    comment:
+                      "@context: Settings item — export site as Zola ZIP",
+                  })}
+                </span>
+                <span class="settings-item-desc">
+                  {t({
+                    message: "Download as a Zola static site (.zip)",
+                    comment:
+                      "@context: Settings item description for site export",
+                  })}
+                </span>
+              </span>
+              <ChevronRight />
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/dash/settings/ApiTokensContent.tsx

@@ -0,0 +1,232 @@
+/**
+ * API Tokens Settings Page
+ *
+ * Manage Bearer tokens for programmatic API access.
+ * Tokens are shown only once at creation — after that, only the prefix is visible.
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { ApiToken } from "../../../types/entities.js";
+import { formatDate } from "../../../lib/time.js";
+
+const API_DOCS_URL = "https://github.com/jant-me/jant/blob/main/docs/API.md";
+
+function TokenRow({ token }: { token: ApiToken }) {
+  const { t } = useLingui();
+
+  return (
+    <div class="py-4 flex items-start gap-4 border-b border-border last:border-b-0">
+      <div class="flex-1 min-w-0">
+        <div class="font-medium">{token.name}</div>
+        <div class="text-sm text-muted-foreground mt-0.5">
+          <code class="text-xs bg-muted px-1.5 py-0.5 rounded">
+            jnt_{token.prefix}...
+          </code>
+          <span class="mx-2">&middot;</span>
+          {t({
+            message: `Created ${formatDate(token.createdAt)}`,
+            comment: "@context: Token creation date",
+          })}
+          {token.lastUsedAt && (
+            <>
+              <span class="mx-2">&middot;</span>
+              {t({
+                message: `Last used ${formatDate(token.lastUsedAt)}`,
+                comment: "@context: Token last used date",
+              })}
+            </>
+          )}
+        </div>
+      </div>
+      <button
+        type="button"
+        class="btn-sm-ghost text-destructive"
+        data-on:click__prevent={`confirm('${t({ message: "Revoke this token? Any scripts using it will stop working.", comment: "@context: Confirm dialog for revoking API token" })}') && @post('/settings/api-tokens/${token.id}/delete')`}
+      >
+        {t({
+          message: "Revoke",
+          comment: "@context: Button to revoke API token",
+        })}
+      </button>
+    </div>
+  );
+}
+
+export function ApiTokensContent({
+  tokens,
+  siteUrl,
+}: {
+  tokens: ApiToken[];
+  siteUrl: string;
+}) {
+  const { t } = useLingui();
+
+  return (
+    <div
+      class="flex flex-col gap-8 max-w-2xl"
+      data-signals="{tokenName: '', _tokenLoading: false, _newPlaintext: '', _tokenCopied: false}"
+    >
+      {/* New token alert — shown after creation via signal patch */}
+      <div data-show="$_newPlaintext" style="display:none">
+        <div class="alert" role="alert">
+          <strong>
+            {t({
+              message: "Copy your token now — it won't be shown again.",
+              comment: "@context: Warning to copy newly created API token",
+            })}
+          </strong>
+          <section class="mt-2">
+            <div class="flex items-center gap-2">
+              <code
+                class="bg-muted px-3 py-2 rounded break-all select-all flex-1 text-sm"
+                data-text="$_newPlaintext"
+              >
+                {" "}
+              </code>
+              <button
+                type="button"
+                class="btn-sm-outline shrink-0"
+                data-on:click="navigator.clipboard.writeText($_newPlaintext); $_tokenCopied = true"
+                data-text={`$_tokenCopied ? '${t({ message: "Copied", comment: "@context: Feedback after copying API token" })}' : '${t({ message: "Copy Token", comment: "@context: Button to copy API token to clipboard" })}'`}
+              >
+                {t({
+                  message: "Copy Token",
+                  comment: "@context: Button to copy API token to clipboard",
+                })}
+              </button>
+            </div>
+          </section>
+        </div>
+      </div>
+
+      {/* Generate token form */}
+      <div>
+        <h2 class="text-lg font-medium mb-4">
+          {t({
+            message: "API Tokens",
+            comment: "@context: Settings section heading",
+          })}
+        </h2>
+        <p class="text-sm text-muted-foreground mb-4">
+          {t({
+            message:
+              "Tokens let you access the API from scripts, shortcuts, and other tools without signing in.",
+            comment: "@context: API tokens description",
+          })}
+        </p>
+        <form
+          data-on:submit__prevent="@post('/settings/api-tokens')"
+          data-indicator="_tokenLoading"
+          class="flex gap-2 items-end"
+        >
+          <div class="field flex-1">
+            <label class="label" for="tokenName">
+              {t({
+                message: "Token name",
+                comment: "@context: API token name field label",
+              })}
+            </label>
+            <input
+              type="text"
+              id="tokenName"
+              data-bind="tokenName"
+              class="input"
+              placeholder={t({
+                message: "e.g. iOS Shortcuts",
+                comment: "@context: Placeholder for API token name input",
+              })}
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            class="btn"
+            data-attr:disabled="$_tokenLoading || !$tokenName.trim()"
+          >
+            {t({
+              message: "Generate Token",
+              comment: "@context: Button to create new API token",
+            })}
+          </button>
+        </form>
+      </div>
+
+      {/* Token list */}
+      {tokens.length > 0 && (
+        <div>
+          <h3 class="text-sm font-medium text-muted-foreground uppercase tracking-wide mb-2">
+            {t({
+              message: "Active Tokens",
+              comment: "@context: Heading for list of active API tokens",
+            })}
+          </h3>
+          <div class="border border-border rounded-lg px-4">
+            {tokens.map((token) => (
+              <TokenRow key={token.id} token={token} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Usage examples */}
+      <div>
+        <h3 class="text-sm font-medium text-muted-foreground uppercase tracking-wide mb-2">
+          {t({
+            message: "Usage",
+            comment: "@context: Heading for API token usage examples",
+          })}
+        </h3>
+        <div class="flex flex-col gap-3 text-sm">
+          <div>
+            <div class="text-muted-foreground mb-1">
+              {t({
+                message: "Create a post with curl:",
+                comment: "@context: Label for curl example",
+              })}
+            </div>
+            <pre class="bg-muted px-3 py-2 rounded text-xs overflow-x-auto">
+              <code>
+                {`curl -X POST ${siteUrl}/api/posts \\
+  -H "Authorization: Bearer jnt_YOUR_TOKEN" \\
+  -H "Content-Type: application/json" \\
+  -d '{"format":"note","body":"Hello from the API"}'`}
+              </code>
+            </pre>
+          </div>
+          <div>
+            <div class="text-muted-foreground mb-1">
+              {t({
+                message: "List posts:",
+                comment: "@context: Label for list posts curl example",
+              })}
+            </div>
+            <pre class="bg-muted px-3 py-2 rounded text-xs overflow-x-auto">
+              <code>
+                {`curl ${siteUrl}/api/posts \\
+  -H "Authorization: Bearer jnt_YOUR_TOKEN"`}
+              </code>
+            </pre>
+          </div>
+          <p class="text-muted-foreground">
+            <a
+              href={API_DOCS_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="underline hover:text-foreground transition-colors"
+            >
+              {t({
+                message: "API reference",
+                comment: "@context: Link to API documentation",
+              })}
+            </a>
+            {" — "}
+            {t({
+              message: "all available endpoints and request formats.",
+              comment: "@context: Description after API reference link",
+            })}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}