s3db.js 13.5.1 → 13.6.0

package/src/plugins/identity/ui/pages/admin/users.js

@@ -0,0 +1,263 @@
+/**
+ * Admin Users Management Page
+ */
+
+import { html } from 'hono/html';
+import { BaseLayout } from '../../layouts/base.js';
+
+const STATUS_STYLES = {
+  active: 'bg-emerald-500/20 text-emerald-200',
+  suspended: 'bg-red-500/20 text-red-200',
+  pending_verification: 'bg-amber-500/20 text-amber-200'
+};
+
+/**
+ * Render users list page
+ * @param {Object} props - Page properties
+ * @param {Array} props.users - List of users
+ * @param {Object} props.user - Current user
+ * @param {string} [props.error] - Error message
+ * @param {string} [props.success] - Success message
+ * @param {Object} [props.config] - UI configuration
+ * @returns {string} HTML string
+ */
+export function AdminUsersPage(props = {}) {
+  const { users = [], user = {}, error = null, success = null, config = {} } = props;
+
+  const secondaryButtonClass = [
+    'inline-flex items-center justify-center rounded-2xl border border-white/15 bg-white/[0.06]',
+    'px-4 py-2 text-xs font-semibold text-white transition hover:bg-white/[0.12]',
+    'focus:outline-none focus:ring-2 focus:ring-white/20'
+  ].join(' ');
+
+  const dangerButtonClass = [
+    'inline-flex items-center justify-center rounded-2xl border border-red-400/40 bg-red-500/10',
+    'px-4 py-2 text-xs font-semibold text-red-100 transition hover:bg-red-500/15 focus:outline-none focus:ring-2 focus:ring-red-400/40'
+  ].join(' ');
+
+  const successButtonClass = [
+    'inline-flex items-center justify-center rounded-2xl border border-emerald-400/40 bg-emerald-500/10',
+    'px-4 py-2 text-xs font-semibold text-emerald-100 transition hover:bg-emerald-500/15 focus:outline-none focus:ring-2 focus:ring-emerald-400/40'
+  ].join(' ');
+
+  const primaryButtonClass = [
+    'inline-flex items-center justify-center rounded-2xl bg-gradient-to-r',
+    'from-primary via-primary to-secondary px-4 py-2 text-xs font-semibold text-white',
+    'transition hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-white/30'
+  ].join(' ');
+
+  const headerSecondaryButtonClass = [
+    'inline-flex items-center justify-center rounded-2xl border border-white/15 bg-white/[0.06]',
+    'px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-white/[0.12]',
+    'focus:outline-none focus:ring-2 focus:ring-white/20'
+  ].join(' ');
+
+  const summaryCards = [
+    {
+      label: 'Total Users',
+      value: users.length,
+      gradient: 'from-sky-500/90 via-blue-500/80 to-indigo-500/80'
+    },
+    {
+      label: 'Active',
+      value: users.filter(u => u.status === 'active').length,
+      gradient: 'from-emerald-400/90 via-green-400/80 to-teal-400/80'
+    },
+    {
+      label: 'Pending',
+      value: users.filter(u => u.status === 'pending_verification').length,
+      gradient: 'from-amber-400/90 via-orange-400/80 to-yellow-400/80'
+    },
+    {
+      label: 'Verified Emails',
+      value: users.filter(u => u.emailVerified).length,
+      gradient: 'from-fuchsia-500/90 via-rose-500/80 to-purple-500/80'
+    }
+  ];
+
+  const tableRows = users.map(current => {
+    const statusClass = STATUS_STYLES[current.status] || 'bg-white/10 text-slate-200';
+    const isCurrentUser = current.id === user.id;
+
+    const actions = [];
+
+    actions.push(html`
+      <a href="/admin/users/${current.id}/edit" class="${secondaryButtonClass}">
+        Edit
+      </a>
+    `);
+
+    if (!isCurrentUser) {
+      actions.push(html`
+        <form method="POST" action="/admin/users/${current.id}/delete" onsubmit="return confirm('Delete user ${current.email}? This cannot be undone.')">
+          <button type="submit" class="${dangerButtonClass}">
+            Delete
+          </button>
+        </form>
+      `);
+
+      actions.push(html`
+        <form method="POST" action="/admin/users/${current.id}/toggle-status">
+          <button type="submit" class="${current.status === 'active' ? dangerButtonClass : successButtonClass}">
+            ${current.status === 'active' ? '🔴 Suspend' : '🟢 Activate'}
+          </button>
+        </form>
+      `);
+
+      if (!current.emailVerified) {
+        actions.push(html`
+          <form method="POST" action="/admin/users/${current.id}/verify-email">
+            <button type="submit" class="${secondaryButtonClass}">
+              ✓ Mark Verified
+            </button>
+          </form>
+        `);
+      }
+
+      if (current.lockedUntil || current.failedLoginAttempts > 0) {
+        const isLocked = current.lockedUntil && new Date(current.lockedUntil) > new Date();
+        const lockInfo = isLocked
+          ? `Locked until ${new Date(current.lockedUntil).toLocaleString()}`
+          : `${current.failedLoginAttempts} failed attempts`;
+
+        actions.push(html`
+          <form method="POST" action="/admin/users/${current.id}/unlock-account" onsubmit="return confirm('Unlock account for ${current.email}?\\n\\n${lockInfo}')">
+            <button type="submit" class="${successButtonClass}">
+              🔓 Unlock Account
+            </button>
+          </form>
+        `);
+      }
+
+      actions.push(html`
+        <form method="POST" action="/admin/users/${current.id}/reset-password" onsubmit="return confirm('Send password reset email to ${current.email}?')">
+          <button type="submit" class="${secondaryButtonClass}">
+            🔑 Send Reset
+          </button>
+        </form>
+      `);
+
+      actions.push(html`
+        <form method="POST" action="/admin/users/${current.id}/toggle-admin" onsubmit="return confirm('${current.role === 'admin' ? 'Remove admin privileges from' : 'Grant admin privileges to'} ${current.name}?')">
+          <button type="submit" class="${current.role === 'admin' ? dangerButtonClass : primaryButtonClass}">
+            ${current.role === 'admin' ? '👤 Remove Admin' : '⚡ Make Admin'}
+          </button>
+        </form>
+      `);
+    }
+
+    return html`
+      <tr class="border-b border-white/10 hover:bg-white/[0.04]">
+        <td class="px-4 py-3 align-top">
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="font-semibold text-white">${current.name}</span>
+            ${isCurrentUser ? html`
+              <span class="rounded-full bg-primary/20 px-3 py-1 text-xs font-semibold text-primary">
+                You
+              </span>
+            ` : ''}
+          </div>
+        </td>
+        <td class="px-4 py-3 align-top">
+          <code class="rounded-xl border border-white/10 bg-white/[0.08] px-3 py-1 text-xs text-slate-200">
+            ${current.email}
+          </code>
+        </td>
+        <td class="px-4 py-3 align-top">
+          <span class="inline-flex rounded-full px-3 py-1 text-xs font-semibold ${statusClass}">
+            ${current.status.replace('_', ' ')}
+          </span>
+        </td>
+        <td class="px-4 py-3 align-top">
+          ${current.role === 'admin' ? html`
+            <span class="rounded-full bg-red-500/20 px-3 py-1 text-xs font-semibold text-red-200">
+              Admin
+            </span>
+          ` : html`
+            <span class="text-xs text-slate-300">User</span>
+          `}
+        </td>
+        <td class="px-4 py-3 align-top">
+          ${current.emailVerified ? html`
+            <span class="text-emerald-300">✓</span>
+          ` : html`
+            <span class="text-slate-400">✗</span>
+          `}
+        </td>
+        <td class="px-4 py-3 align-top text-xs text-slate-400">
+          ${current.createdAt ? new Date(current.createdAt).toLocaleDateString() : 'Unknown'}
+        </td>
+        <td class="px-4 py-3 align-top">
+          <div class="flex flex-wrap justify-end gap-2">
+            ${actions}
+          </div>
+        </td>
+      </tr>
+    `;
+  });
+
+  const content = html`
+    <section class="mx-auto w-full max-w-7xl space-y-8 text-slate-100">
+      <header class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 class="text-3xl font-semibold text-white md:text-4xl">User Management</h1>
+          <p class="mt-1 text-sm text-slate-300">
+            Audit user accounts, toggle access, and elevate permissions.
+          </p>
+        </div>
+        <a href="/admin" class="${headerSecondaryButtonClass}">
+          ← Back to Dashboard
+        </a>
+      </header>
+
+      ${users.length === 0 ? html`
+        <div class="rounded-3xl border border-white/10 bg-white/[0.05] p-10 text-center shadow-xl shadow-black/30 backdrop-blur">
+          <p class="text-sm text-slate-300">
+            No users found.
+          </p>
+        </div>
+      ` : html`
+        <div class="rounded-3xl border border-white/10 bg-white/[0.05] shadow-xl shadow-black/30 backdrop-blur">
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-white/10 text-left text-sm text-slate-200">
+              <thead class="bg-white/[0.04] text-xs uppercase tracking-wide text-slate-400">
+                <tr>
+                  <th class="px-4 py-3 font-medium">Name</th>
+                  <th class="px-4 py-3 font-medium">Email</th>
+                  <th class="px-4 py-3 font-medium">Status</th>
+                  <th class="px-4 py-3 font-medium">Role</th>
+                  <th class="px-4 py-3 font-medium">Verified</th>
+                  <th class="px-4 py-3 font-medium">Joined</th>
+                  <th class="px-4 py-3 text-right font-medium">Actions</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-white/10">
+                ${tableRows}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      `}
+
+      <div class="grid gap-6 sm:grid-cols-2 xl:grid-cols-4">
+        ${summaryCards.map(card => html`
+          <div class="rounded-3xl border border-white/10 bg-gradient-to-br ${card.gradient} p-6 text-center shadow-xl shadow-black/30 backdrop-blur">
+            <div class="text-xs uppercase tracking-wide text-white/80">${card.label}</div>
+            <div class="mt-3 text-3xl font-semibold text-white">${card.value}</div>
+          </div>
+        `)}
+      </div>
+    </section>
+  `;
+
+  return BaseLayout({
+    title: 'User Management - Admin',
+    content,
+    config,
+    user,
+    error,
+    success
+  });
+}
+
+export default AdminUsersPage;

package/src/plugins/identity/ui/pages/consent.js

@@ -0,0 +1,262 @@
+/**
+ * OAuth2 Consent Screen Page
+ */
+
+import { html } from 'hono/html';
+import { BaseLayout } from '../layouts/base.js';
+
+/**
+ * Scope descriptions for display
+ */
+const SCOPE_DESCRIPTIONS = {
+  openid: {
+    name: 'OpenID Connect',
+    description: 'Sign in using your identity',
+    icon: '🔐'
+  },
+  profile: {
+    name: 'Profile Information',
+    description: 'Access your basic profile information (name, picture)',
+    icon: '👤'
+  },
+  email: {
+    name: 'Email Address',
+    description: 'Access your email address',
+    icon: '📧'
+  },
+  offline_access: {
+    name: 'Offline Access',
+    description: 'Maintain access when you are not using the app',
+    icon: '🔄'
+  },
+  phone: {
+    name: 'Phone Number',
+    description: 'Access your phone number',
+    icon: '📱'
+  },
+  address: {
+    name: 'Address',
+    description: 'Access your address information',
+    icon: '🏠'
+  }
+};
+
+/**
+ * Render OAuth2 consent page
+ * @param {Object} props - Page properties
+ * @param {Object} props.client - OAuth2 client requesting access
+ * @param {Array} props.scopes - Requested scopes
+ * @param {Object} props.user - Current user
+ * @param {string} props.responseType - OAuth2 response_type
+ * @param {string} props.redirectUri - Redirect URI
+ * @param {string} [props.state] - OAuth2 state parameter
+ * @param {string} [props.codeChallenge] - PKCE code challenge
+ * @param {string} [props.codeChallengeMethod] - PKCE challenge method
+ * @param {string} [props.error] - Error message
+ * @param {Object} [props.config] - UI configuration
+ * @returns {string} HTML string
+ */
+export function ConsentPage(props = {}) {
+  const {
+    client = {},
+    scopes = [],
+    user = {},
+    responseType,
+    redirectUri,
+    state = '',
+    codeChallenge = '',
+    codeChallengeMethod = 'plain',
+    error = null,
+    config = {}
+  } = props;
+
+  // Filter out unknown scopes and add descriptions
+  const scopeDetails = scopes
+    .map(scope => ({
+      scope,
+      ...SCOPE_DESCRIPTIONS[scope],
+      unknown: !SCOPE_DESCRIPTIONS[scope]
+    }))
+    .filter(s => !s.unknown);
+
+  const checkboxClasses = [
+    'h-5 w-5 rounded border-white/30 bg-slate-900/70 text-primary',
+    'focus:ring-2 focus:ring-primary/40 focus:ring-offset-0 focus:outline-none'
+  ].join(' ');
+
+  const primaryButtonClasses = [
+    'inline-flex w-full items-center justify-center rounded-2xl bg-gradient-to-r',
+    'from-primary via-primary to-secondary px-5 py-3 text-sm font-semibold text-white',
+    'transition duration-200 hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-white/30'
+  ].join(' ');
+
+  const secondaryButtonClasses = [
+    'inline-flex w-full items-center justify-center rounded-2xl border border-white/15 bg-white/[0.06]',
+    'px-5 py-3 text-sm font-semibold text-white transition duration-200 hover:bg-white/[0.12]',
+    'focus:outline-none focus:ring-2 focus:ring-white/20'
+  ].join(' ');
+
+  const content = html`
+    <section class="mx-auto w-full max-w-5xl space-y-8 text-slate-100">
+      <header class="space-y-4 text-center">
+        ${config.logoUrl ? html`
+          <div class="flex justify-center">
+            <img src="${config.logoUrl}" alt="${config.title || 'Identity Logo'}" class="h-14 w-auto" />
+          </div>
+        ` : ''}
+        <div>
+          <h1 class="text-3xl font-semibold text-white md:text-4xl">Authorize Application</h1>
+          <p class="mt-2 text-sm text-slate-300 md:text-base">
+            <span class="font-semibold text-white">${client.name || 'Application'}</span>
+            is requesting access to your account.
+          </p>
+        </div>
+      </header>
+
+      ${error ? html`
+        <div class="rounded-2xl border border-red-400/40 bg-red-500/10 px-4 py-3 text-sm leading-6 text-red-100 shadow-md shadow-red-900/30">
+          ${error}
+        </div>
+      ` : ''}
+
+      <div class="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
+        <div class="space-y-6">
+          <div class="rounded-3xl border border-white/10 bg-white/[0.05] p-6 shadow-xl shadow-black/30 backdrop-blur">
+            <h2 class="text-lg font-semibold text-white">Application Information</h2>
+            <dl class="mt-4 space-y-4 text-sm text-slate-200">
+              <div class="flex flex-col gap-1">
+                <dt class="text-xs uppercase tracking-wide text-slate-400">Application Name</dt>
+                <dd class="text-base font-semibold text-white">${client.name || 'Unknown Application'}</dd>
+              </div>
+
+              ${client.description ? html`
+                <div class="flex flex-col gap-1">
+                  <dt class="text-xs uppercase tracking-wide text-slate-400">Description</dt>
+                  <dd>${client.description}</dd>
+                </div>
+              ` : ''}
+
+              <div class="flex flex-col gap-1">
+                <dt class="text-xs uppercase tracking-wide text-slate-400">Client ID</dt>
+                <dd>
+                  <code class="rounded-xl border border-white/10 bg-white/[0.08] px-3 py-2 text-xs text-slate-200">
+                    ${client.clientId}
+                  </code>
+                </dd>
+              </div>
+
+              <div class="flex flex-col gap-1">
+                <dt class="text-xs uppercase tracking-wide text-slate-400">Will Redirect To</dt>
+                <dd>
+                  <code class="rounded-xl border border-white/10 bg-white/[0.08] px-3 py-2 text-xs text-slate-200">
+                    ${redirectUri}
+                  </code>
+                </dd>
+              </div>
+            </dl>
+          </div>
+
+          <div class="rounded-3xl border border-white/10 bg-white/[0.05] p-6 shadow-xl shadow-black/30 backdrop-blur">
+            <h2 class="text-lg font-semibold text-white">Requested Permissions</h2>
+            <div class="mt-4 space-y-4">
+              ${scopeDetails.length === 0 ? html`
+                <p class="text-sm italic text-slate-300">
+                  This application is not requesting any specific permissions.
+                </p>
+              ` : scopeDetails.map(s => html`
+                <div class="flex gap-4 rounded-2xl border border-white/5 bg-white/[0.03] p-4">
+                  <div class="text-3xl leading-none">${s.icon}</div>
+                  <div class="space-y-1">
+                    <div class="text-sm font-semibold text-white">${s.name}</div>
+                    <p class="text-xs text-slate-300">${s.description}</p>
+                  </div>
+                </div>
+              `)}
+            </div>
+          </div>
+        </div>
+
+        <div class="space-y-6">
+          <div class="rounded-3xl border border-white/10 bg-white/[0.05] p-6 shadow-xl shadow-black/30 backdrop-blur">
+            <div class="flex gap-4">
+              <div class="text-2xl">ℹ️</div>
+              <div class="space-y-3 text-sm text-slate-200">
+                <p class="text-base font-semibold text-white">
+                  Signed in as ${user.name}
+                </p>
+                <p>
+                  By clicking <strong>Allow</strong>, you authorize
+                  <strong>${client.name || 'this application'}</strong> to access your information as described above.
+                </p>
+                <p>
+                  You can revoke this access at any time from your
+                  <a href="/profile" class="font-semibold text-primary transition hover:text-white">profile settings</a>.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <form method="POST" action="/oauth/consent" class="space-y-6 rounded-3xl border border-white/10 bg-white/[0.05] p-6 shadow-xl shadow-black/30 backdrop-blur">
+        <input type="hidden" name="response_type" value="${responseType}" />
+        <input type="hidden" name="client_id" value="${client.clientId}" />
+        <input type="hidden" name="redirect_uri" value="${redirectUri}" />
+        <input type="hidden" name="scope" value="${scopes.join(' ')}" />
+        ${state ? html`<input type="hidden" name="state" value="${state}" />` : ''}
+        ${codeChallenge ? html`<input type="hidden" name="code_challenge" value="${codeChallenge}" />` : ''}
+        ${codeChallengeMethod ? html`<input type="hidden" name="code_challenge_method" value="${codeChallengeMethod}" />` : ''}
+
+        <label class="flex items-start gap-3 text-sm text-slate-300">
+          <input
+            type="checkbox"
+            class="${checkboxClasses} mt-0.5"
+            id="trust_application"
+            name="trust_application"
+            value="1"
+          />
+          <span>
+            Trust this application (don't ask again)<br>
+            <span class="text-xs text-slate-400">
+              You won't be asked for permission next time this application requests access with the same permissions.
+            </span>
+          </span>
+        </label>
+
+        <div class="grid gap-3 sm:grid-cols-2">
+          <button
+            type="submit"
+            name="decision"
+            value="deny"
+            class="${secondaryButtonClasses}"
+          >
+            Deny
+          </button>
+          <button
+            type="submit"
+            name="decision"
+            value="allow"
+            class="${primaryButtonClasses}"
+            style="box-shadow: 0 18px 45px var(--color-primary-glow);"
+          >
+            Allow
+          </button>
+        </div>
+      </form>
+
+      <p class="text-center text-sm text-slate-300">
+        Not ${user.name}? <a href="/logout" class="font-semibold text-primary transition hover:text-white">Sign out</a>
+      </p>
+    </section>
+  `;
+
+  return BaseLayout({
+    title: `Authorize ${client.name || 'Application'}`,
+    content,
+    config,
+    user,
+    error: null // Error shown in page
+  });
+}
+
+export default ConsentPage;

package/src/plugins/identity/ui/pages/forgot-password.js

@@ -0,0 +1,104 @@
+/**
+ * Forgot Password Page
+ */
+
+import { html } from 'hono/html';
+import { BaseLayout } from '../layouts/base.js';
+
+/**
+ * Render forgot password page
+ * @param {Object} props - Page properties
+ * @param {string} [props.error] - Error message
+ * @param {string} [props.success] - Success message
+ * @param {string} [props.email] - Pre-filled email
+ * @param {Object} [props.config] - UI configuration
+ * @returns {string} HTML string
+ */
+export function ForgotPasswordPage(props = {}) {
+  const { error = null, success = null, email = '', config = {} } = props;
+
+  const inputClasses = [
+    'block w-full rounded-2xl border bg-white/[0.08] px-4 py-3 text-base text-white',
+    'shadow-[0_1px_0_rgba(255,255,255,0.06)] transition placeholder:text-slate-300/70 focus:outline-none focus:ring-2',
+    error ? 'border-red-400/70 focus:border-red-400 focus:ring-red-400/40' : 'border-white/10 focus:border-white/40 focus:ring-white/30'
+  ].join(' ');
+
+  const content = html`
+    <section class="mx-auto w-full max-w-lg text-slate-100">
+      <div class="relative isolate overflow-hidden rounded-3xl border border-white/10 bg-slate-900/60 p-10 shadow-2xl shadow-slate-900/60 backdrop-blur">
+        <div class="pointer-events-none absolute -right-24 -top-24 h-56 w-56 rounded-full bg-primary/25 blur-3xl"></div>
+        <div class="pointer-events-none absolute -bottom-20 -left-28 h-52 w-52 rounded-full bg-secondary/20 blur-[120px]"></div>
+
+        <div class="relative z-10 space-y-6">
+          <header class="space-y-2 text-center">
+            <h2 class="text-2xl font-semibold tracking-tight text-white">
+              Reset Password
+            </h2>
+            <p class="text-sm text-slate-300">
+              Enter your email and we'll send instructions to reset your password.
+            </p>
+          </header>
+
+          ${success ? html`
+            <div class="space-y-6">
+              <div class="rounded-2xl border border-emerald-400/40 bg-emerald-500/10 px-4 py-4 text-sm leading-6 text-emerald-100 shadow-lg shadow-emerald-900/30">
+                ${success}
+              </div>
+              <div class="text-center text-sm text-slate-300">
+                <a href="/login" class="font-semibold text-primary transition hover:text-white">
+                  Back to Sign In
+                </a>
+              </div>
+            </div>
+          ` : html`
+            <form method="POST" action="/forgot-password" class="space-y-6">
+              <div class="space-y-2">
+                <label for="email" class="text-sm font-semibold text-slate-200">
+                  Email address
+                </label>
+                <input
+                  type="email"
+                  class="${inputClasses}"
+                  id="email"
+                  name="email"
+                  value="${email}"
+                  required
+                  autofocus
+                  autocomplete="email"
+                />
+                ${error ? html`
+                  <p class="text-xs text-red-200">${error}</p>
+                ` : ''}
+              </div>
+
+              <button
+                type="submit"
+                class="inline-flex w-full items-center justify-center rounded-2xl bg-gradient-to-r from-primary via-primary to-secondary px-4 py-3 text-base font-semibold text-white transition duration-200 hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-white/30"
+                style="box-shadow: 0 18px 45px var(--color-primary-glow);"
+              >
+                Send Reset Link
+              </button>
+            </form>
+
+            <p class="text-center text-sm text-slate-300">
+              Remember your password?
+              <a href="/login" class="font-semibold text-primary transition hover:text-white">
+                Sign in
+              </a>
+            </p>
+          `}
+        </div>
+      </div>
+    </section>
+  `;
+
+  return BaseLayout({
+    title: 'Reset Password',
+    content,
+    config,
+    error: null, // Error shown in form
+    success: null // Success shown in form
+  });
+}
+
+export default ForgotPasswordPage;