s3db.js 13.4.0 → 13.6.0

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

@@ -0,0 +1,181 @@
+/**
+ * Admin Dashboard Page
+ */
+
+import { html } from 'hono/html';
+import { BaseLayout } from '../../layouts/base.js';
+
+/**
+ * Render admin dashboard page
+ * @param {Object} props - Page properties
+ * @param {Object} props.stats - Dashboard statistics
+ * @param {Object} props.user - Current user
+ * @param {Object} [props.config] - UI configuration
+ * @returns {string} HTML string
+ */
+export function AdminDashboardPage(props = {}) {
+  const { stats = {}, user = {}, config = {} } = props;
+
+  const formatNumber = value => Number(value || 0).toLocaleString();
+
+  const statCards = [
+    {
+      title: 'Total Users',
+      value: formatNumber(stats.totalUsers),
+      description: `${formatNumber(stats.activeUsers)} active · ${formatNumber(stats.pendingUsers)} pending`,
+      gradient: 'from-sky-500/90 via-blue-500/80 to-indigo-500/80'
+    },
+    {
+      title: 'OAuth2 Clients',
+      value: formatNumber(stats.totalClients),
+      description: `${formatNumber(stats.activeClients)} active`,
+      gradient: 'from-fuchsia-500/90 via-rose-500/80 to-orange-500/80'
+    },
+    {
+      title: 'Active Sessions',
+      value: formatNumber(stats.activeSessions),
+      description: `${formatNumber(stats.uniqueUsers)} unique users`,
+      gradient: 'from-cyan-400/90 via-blue-400/80 to-sky-400/80'
+    },
+    {
+      title: 'Auth Codes',
+      value: formatNumber(stats.totalAuthCodes),
+      description: `${formatNumber(stats.unusedAuthCodes)} unused`,
+      gradient: 'from-emerald-400/90 via-teal-400/80 to-green-400/80'
+    }
+  ];
+
+  const quickLinks = [
+    { href: '/admin/clients', label: '📱 Manage Clients' },
+    { href: '/admin/users', label: '👥 Manage Users' },
+    { href: '/admin/sessions', label: '🔐 View Sessions' },
+    { href: '/admin/auth-codes', label: '🎫 Auth Codes' }
+  ];
+
+  const recentUsers = Array.isArray(stats.recentUsers) ? stats.recentUsers : [];
+
+  const content = html`
+    <section class="mx-auto w-full max-w-6xl space-y-8 text-slate-100">
+      <header class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h1 class="text-3xl font-semibold text-white md:text-4xl">Admin Dashboard</h1>
+          <p class="mt-1 text-sm text-slate-300">
+            Overview of identity activity, clients, and health metrics.
+          </p>
+        </div>
+        <div class="rounded-2xl border border-white/15 bg-white/[0.06] px-4 py-3 text-xs text-slate-300">
+          <div class="text-sm font-semibold text-white">${user.email || 'admin@s3db.identity'}</div>
+          <div class="mt-1 flex flex-wrap items-center gap-2">
+            <span class="rounded-full bg-emerald-500/20 px-3 py-1 text-xs font-semibold text-emerald-200">
+              Administrator
+            </span>
+            ${stats.serverUptime ? html`
+              <span class="text-xs text-slate-400">
+                Uptime: ${stats.serverUptime}
+              </span>
+            ` : ''}
+          </div>
+        </div>
+      </header>
+
+      <div class="grid gap-6 sm:grid-cols-2 xl:grid-cols-4">
+        ${statCards.map(card => html`
+          <div class="rounded-3xl border border-white/10 bg-gradient-to-br ${card.gradient} p-6 shadow-xl shadow-black/30 backdrop-blur">
+            <div class="text-xs uppercase tracking-wide text-white/80">${card.title}</div>
+            <div class="mt-3 text-3xl font-semibold text-white">${card.value}</div>
+            <div class="mt-2 text-sm text-white/80">${card.description}</div>
+          </div>
+        `)}
+      </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">Quick Actions</h2>
+        <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          ${quickLinks.map(link => html`
+            <a
+              href="${link.href}"
+              class="flex items-center justify-center rounded-2xl border border-white/15 bg-white/[0.06] px-4 py-3 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-white/[0.12] focus:outline-none focus:ring-2 focus:ring-white/20"
+            >
+              ${link.label}
+            </a>
+          `)}
+        </div>
+      </div>
+
+      ${recentUsers.length > 0 ? html`
+        <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">Recent Users</h2>
+          <div class="mt-4 overflow-hidden rounded-2xl border border-white/10">
+            <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">Email</th>
+                  <th class="px-4 py-3 font-medium">Name</th>
+                  <th class="px-4 py-3 font-medium">Status</th>
+                  <th class="px-4 py-3 font-medium">Created</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-white/5">
+                ${recentUsers.map(recentUser => {
+                  const statusClass = recentUser.status === 'active'
+                    ? 'bg-emerald-500/20 text-emerald-200'
+                    : recentUser.status === 'suspended'
+                      ? 'bg-red-500/20 text-red-200'
+                      : 'bg-amber-500/20 text-amber-200';
+
+                  return html`
+                    <tr class="hover:bg-white/[0.04]">
+                      <td class="px-4 py-3">${recentUser.email}</td>
+                      <td class="px-4 py-3">${recentUser.name}</td>
+                      <td class="px-4 py-3">
+                        <span class="rounded-full px-3 py-1 text-xs font-semibold ${statusClass}">
+                          ${recentUser.status}
+                        </span>
+                      </td>
+                      <td class="px-4 py-3 text-slate-400">
+                        ${new Date(recentUser.createdAt).toLocaleDateString()}
+                      </td>
+                    </tr>
+                  `;
+                })}
+              </tbody>
+            </table>
+          </div>
+        </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">System Information</h2>
+        <dl class="mt-4 divide-y divide-white/10 text-sm text-slate-200">
+          <div class="flex flex-col gap-1 py-3 sm:flex-row sm:items-center sm:justify-between">
+            <dt class="text-slate-400">Identity Provider</dt>
+            <dd class="font-medium text-white">${config.title || 'S3DB Identity'}</dd>
+          </div>
+          <div class="flex flex-col gap-1 py-3 sm:flex-row sm:items-center sm:justify-between">
+            <dt class="text-slate-400">Your Role</dt>
+            <dd class="font-medium text-primary">Administrator</dd>
+          </div>
+          ${stats.serverUptime ? html`
+            <div class="flex flex-col gap-1 py-3 sm:flex-row sm:items-center sm:justify-between">
+              <dt class="text-slate-400">Server Uptime</dt>
+              <dd>${stats.serverUptime}</dd>
+            </div>
+          ` : ''}
+          <div class="flex flex-col gap-1 py-3 sm:flex-row sm:items-center sm:justify-between">
+            <dt class="text-slate-400">Database Type</dt>
+            <dd>S3DB (S3-based Document Database)</dd>
+          </div>
+        </dl>
+      </div>
+    </section>
+  `;
+
+  return BaseLayout({
+    title: 'Admin Dashboard',
+    content,
+    config,
+    user
+  });
+}
+
+export default AdminDashboardPage;

package/src/plugins/identity/ui/pages/admin/user-form.js

@@ -0,0 +1,283 @@
+/**
+ * Admin User Edit Form Page
+ */
+
+import { html } from 'hono/html';
+import { BaseLayout } from '../../layouts/base.js';
+
+/**
+ * Render user edit form page
+ * @param {Object} props - Page properties
+ * @param {Object} props.editUser - User being edited
+ * @param {Object} props.user - Current user
+ * @param {string} [props.error] - Error message
+ * @param {Object} [props.config] - UI configuration
+ * @returns {string} HTML string
+ */
+export function AdminUserFormPage(props = {}) {
+  const { editUser = {}, user = {}, error = null, config = {} } = props;
+
+  const isCurrentUser = editUser.id === user.id;
+
+  const inputClasses = [
+    'block w-full rounded-2xl border border-white/10 bg-white/[0.08]',
+    'px-4 py-2.5 text-sm text-white placeholder:text-slate-300/70',
+    'shadow-[0_1px_0_rgba(255,255,255,0.05)] transition focus:border-white/40 focus:outline-none focus:ring-2 focus:ring-white/30'
+  ].join(' ');
+
+  const checkboxClasses = [
+    'h-4 w-4 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 radioClasses = [
+    'h-4 w-4 border-white/30 text-primary focus:ring-2 focus:ring-primary/40 focus:ring-offset-0 focus:outline-none'
+  ].join(' ');
+
+  const primaryButtonClass = [
+    'inline-flex items-center justify-center rounded-2xl bg-gradient-to-r',
+    'from-primary via-primary to-secondary px-5 py-2.5 text-sm font-semibold text-white',
+    'transition hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-white/30'
+  ].join(' ');
+
+  const secondaryButtonClass = [
+    '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 dangerButtonClass = [
+    'inline-flex items-center justify-center rounded-2xl border border-red-400/40 bg-red-500/10',
+    'px-4 py-2.5 text-sm font-semibold text-red-100 transition hover:bg-red-500/15 focus:outline-none focus:ring-2 focus:ring-red-400/40'
+  ].join(' ');
+
+  const statusOptions = [
+    {
+      value: 'active',
+      title: 'Active',
+      description: 'User can log in and access services.'
+    },
+    {
+      value: 'suspended',
+      title: 'Suspended',
+      description: 'User cannot log in.'
+    },
+    {
+      value: 'pending_verification',
+      title: 'Pending Verification',
+      description: 'Awaiting email verification.'
+    }
+  ];
+
+  const roleOptions = [
+    {
+      value: 'user',
+      title: 'User',
+      description: 'Standard access to identity provider services.'
+    },
+    {
+      value: 'admin',
+      title: 'Administrator',
+      description: 'Full administrative access.'
+    }
+  ];
+
+  const content = html`
+    <section class="mx-auto w-full max-w-4xl space-y-8 text-slate-100">
+      <header>
+        <a href="/admin/users" class="text-sm font-semibold text-primary transition hover:text-white">
+          ← Back to Users
+        </a>
+        <h1 class="mt-3 text-3xl font-semibold text-white md:text-4xl">
+          Edit User: ${editUser.name}
+        </h1>
+        <p class="mt-2 text-sm text-slate-300">
+          Update profile details, status, and permissions for this user.
+        </p>
+      </header>
+
+      <div class="rounded-3xl border border-white/10 bg-white/[0.05] p-8 shadow-xl shadow-black/30 backdrop-blur">
+        <form method="POST" action="/admin/users/${editUser.id}/update" class="space-y-6">
+          <div class="space-y-2">
+            <label for="name" class="text-sm font-semibold text-slate-200">Full Name</label>
+            <input
+              type="text"
+              class="${inputClasses} ${error ? 'border-red-400/60 focus:border-red-400 focus:ring-red-400/40' : ''}"
+              id="name"
+              name="name"
+              value="${editUser.name}"
+              required
+              autofocus
+              placeholder="John Doe"
+            />
+            <p class="text-xs text-slate-400">User's display name.</p>
+            ${error ? html`<p class="text-xs text-red-200">${error}</p>` : ''}
+          </div>
+
+          <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="${editUser.email}"
+              required
+              placeholder="user@example.com"
+            />
+            <p class="text-xs text-slate-400">Email address used for login and notifications.</p>
+          </div>
+
+          <div class="space-y-3">
+            <span class="text-sm font-semibold text-slate-200">Account Status</span>
+            <div class="grid gap-3">
+              ${statusOptions.map(option => html`
+                <label class="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-200">
+                  <input
+                    type="radio"
+                    class="${radioClasses} mt-1"
+                    id="status_${option.value}"
+                    name="status"
+                    value="${option.value}"
+                    ${editUser.status === option.value ? 'checked' : ''}
+                    ${isCurrentUser ? 'disabled' : ''}
+                  />
+                  <span>
+                    <strong class="text-white">${option.title}</strong><br>
+                    <span class="text-xs text-slate-400">${option.description}</span>
+                  </span>
+                </label>
+              `)}
+            </div>
+            ${isCurrentUser ? html`
+              <p class="text-xs text-amber-300">You cannot change your own status.</p>
+            ` : ''}
+          </div>
+
+          <div class="space-y-3">
+            <span class="text-sm font-semibold text-slate-200">Role</span>
+            <div class="grid gap-3">
+              ${roleOptions.map(option => html`
+                <label class="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-200">
+                  <input
+                    type="radio"
+                    class="${radioClasses} mt-1"
+                    id="role_${option.value}"
+                    name="role"
+                    value="${option.value}"
+                    ${editUser.role === option.value ? 'checked' : ''}
+                    ${isCurrentUser ? 'disabled' : ''}
+                  />
+                  <span>
+                    <strong class="text-white">${option.title}</strong><br>
+                    <span class="text-xs text-slate-400">${option.description}</span>
+                  </span>
+                </label>
+              `)}
+            </div>
+            ${isCurrentUser ? html`
+              <p class="text-xs text-amber-300">You cannot change your own role.</p>
+            ` : ''}
+          </div>
+
+          <label class="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-200">
+            <input
+              type="checkbox"
+              class="${checkboxClasses} mt-1"
+              id="emailVerified"
+              name="emailVerified"
+              value="1"
+              ${editUser.emailVerified ? 'checked' : ''}
+            />
+            <span>
+              <strong class="text-white">Email Verified</strong><br>
+              <span class="text-xs text-slate-400">User has confirmed their email address.</span>
+            </span>
+          </label>
+
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-start">
+            <button type="submit" class="${primaryButtonClass} sm:w-auto" style="box-shadow: 0 18px 45px var(--color-primary-glow);">
+              Update User
+            </button>
+            <a href="/admin/users" class="${secondaryButtonClass}">
+              Cancel
+            </a>
+          </div>
+        </form>
+      </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">User Information</h2>
+        <dl class="mt-4 divide-y divide-white/10 text-sm text-slate-200">
+          <div class="flex flex-col gap-1 py-3 sm:flex-row sm:items-center sm:justify-between">
+            <dt class="text-slate-400">User ID</dt>
+            <dd>
+              <code class="rounded-xl border border-white/10 bg-white/[0.08] px-3 py-1 text-xs text-slate-200">
+                ${editUser.id}
+              </code>
+            </dd>
+          </div>
+          ${editUser.createdAt ? html`
+            <div class="flex flex-col gap-1 py-3 sm:flex-row sm:items-center sm:justify-between">
+              <dt class="text-slate-400">Joined</dt>
+              <dd>${new Date(editUser.createdAt).toLocaleString()}</dd>
+            </div>
+          ` : ''}
+          ${editUser.updatedAt ? html`
+            <div class="flex flex-col gap-1 py-3 sm:flex-row sm:items-center sm:justify-between">
+              <dt class="text-slate-400">Last Updated</dt>
+              <dd>${new Date(editUser.updatedAt).toLocaleString()}</dd>
+            </div>
+          ` : ''}
+          <div class="flex flex-col gap-1 py-3 sm:flex-row sm:items-center sm:justify-between">
+            <dt class="text-slate-400">Last Login</dt>
+            <dd>${editUser.lastLoginAt ? new Date(editUser.lastLoginAt).toLocaleString() : html`<span class="text-slate-400">Never</span>`}</dd>
+          </div>
+        </dl>
+      </div>
+
+      ${!isCurrentUser ? html`
+        <div class="rounded-3xl border border-red-500/40 bg-red-500/5 shadow-xl shadow-black/30 backdrop-blur">
+          <div class="rounded-t-3xl border-b border-red-500/40 bg-red-500/20 px-6 py-4 text-white">
+            <h2 class="text-lg font-semibold">Danger Zone</h2>
+          </div>
+          <div class="space-y-6 px-6 py-6 text-sm text-slate-100">
+            <div>
+              <h3 class="text-base font-semibold text-white">Send Password Reset Email</h3>
+              <p class="mt-2 text-xs text-red-100">
+                Send a password reset link to ${editUser.email}.
+              </p>
+              <form method="POST" action="/admin/users/${editUser.id}/reset-password" onsubmit="return confirm('Send password reset email to ${editUser.email}?')">
+                <button type="submit" class="${secondaryButtonClass} mt-3">
+                  🔑 Send Password Reset
+                </button>
+              </form>
+            </div>
+
+            <div class="border-t border-red-500/30 pt-6">
+              <h3 class="text-base font-semibold text-white">Delete User Account</h3>
+              <p class="mt-2 text-xs text-red-100">
+                Permanently delete this user account. This action cannot be undone.
+              </p>
+              <form method="POST" action="/admin/users/${editUser.id}/delete" onsubmit="return confirm('Are you sure you want to delete ${editUser.name}? This action cannot be undone.')">
+                <button type="submit" class="${dangerButtonClass} mt-3">
+                  🗑️ Delete User
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      ` : ''}
+    </section>
+  `;
+
+  return BaseLayout({
+    title: `Edit User: ${editUser.name} - Admin`,
+    content,
+    config,
+    user,
+    error: null // Error shown in form
+  });
+}
+
+export default AdminUserFormPage;