s3db.js 13.4.0 → 13.6.0

package/src/plugins/identity/ui/middleware.js

@@ -0,0 +1,135 @@
+/**
+ * Identity Provider Middleware
+ * Session validation and authentication middleware
+ */
+
+/**
+ * Session authentication middleware
+ * Validates session and attaches user data to context
+ * @param {Object} sessionManager - SessionManager instance
+ * @param {Object} options - Middleware options
+ * @param {boolean} options.required - Require authentication (redirect if not logged in)
+ * @param {boolean} options.requireAdmin - Require admin role
+ * @param {string} options.redirectTo - Redirect URL if not authenticated
+ * @returns {Function} Hono middleware function
+ */
+export function sessionAuth(sessionManager, options = {}) {
+  const {
+    required = false,
+    requireAdmin = false,
+    redirectTo = '/login'
+  } = options;
+
+  return async (c, next) => {
+    const sessionId = sessionManager.getSessionIdFromRequest(c.req);
+
+    let user = null;
+    let session = null;
+
+    if (sessionId) {
+      const { valid, session: validSession, reason } = await sessionManager.validateSession(sessionId);
+
+      if (valid) {
+        session = validSession;
+        user = validSession.metadata || null;
+      } else {
+        // Clear invalid session cookie
+        sessionManager.clearSessionCookie(c);
+
+        if (required) {
+          const currentUrl = c.req.url;
+          return c.redirect(`${redirectTo}?redirect=${encodeURIComponent(currentUrl)}&error=${encodeURIComponent('Your session has expired. Please log in again.')}`);
+        }
+      }
+    }
+
+    // Check if authentication is required
+    if (required && !user) {
+      const currentUrl = c.req.url;
+      return c.redirect(`${redirectTo}?redirect=${encodeURIComponent(currentUrl)}`);
+    }
+
+    // Check if admin is required
+    if (requireAdmin && (!user || !user.isAdmin)) {
+      return c.html('<h1>403 Forbidden</h1><p>You do not have permission to access this page.</p>', 403);
+    }
+
+    // Attach user and session to context
+    c.set('user', user);
+    c.set('session', session);
+    c.set('isAuthenticated', !!user);
+    c.set('isAdmin', user?.isAdmin || false);
+
+    await next();
+  };
+}
+
+/**
+ * Admin-only middleware (shorthand)
+ * @param {Object} sessionManager - SessionManager instance
+ * @returns {Function} Hono middleware function
+ */
+export function adminOnly(sessionManager) {
+  return sessionAuth(sessionManager, {
+    required: true,
+    requireAdmin: true
+  });
+}
+
+/**
+ * Optional authentication middleware
+ * Attaches user if logged in, but doesn't require it
+ * @param {Object} sessionManager - SessionManager instance
+ * @returns {Function} Hono middleware function
+ */
+export function optionalAuth(sessionManager) {
+  return sessionAuth(sessionManager, {
+    required: false,
+    requireAdmin: false
+  });
+}
+
+/**
+ * CSRF protection middleware
+ * Validates CSRF token for POST/PUT/PATCH/DELETE requests
+ * @param {Object} options - CSRF options
+ * @param {string[]} options.excludePaths - Paths to exclude from CSRF check
+ * @returns {Function} Hono middleware function
+ */
+export function csrfProtection(options = {}) {
+  const {
+    excludePaths = []
+  } = options;
+
+  return async (c, next) => {
+    const method = c.req.method;
+    const path = c.req.path;
+
+    // Skip CSRF check for safe methods
+    if (['GET', 'HEAD', 'OPTIONS'].includes(method)) {
+      await next();
+      return;
+    }
+
+    // Skip CSRF check for excluded paths
+    if (excludePaths.some(p => path.startsWith(p))) {
+      await next();
+      return;
+    }
+
+    // For now, skip CSRF validation - will be implemented in polish phase
+    // TODO: Implement proper CSRF token generation and validation
+    // - Generate token on GET requests, store in session
+    // - Include token in forms as hidden field
+    // - Validate token on POST/PUT/PATCH/DELETE
+
+    await next();
+  };
+}
+
+export default {
+  sessionAuth,
+  adminOnly,
+  optionalAuth,
+  csrfProtection
+};

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

@@ -0,0 +1,247 @@
+/**
+ * Admin OAuth2 Client Form Page (Create/Edit)
+ */
+
+import { html } from 'hono/html';
+import { BaseLayout } from '../../layouts/base.js';
+
+/**
+ * Render OAuth2 client form page
+ * @param {Object} props - Page properties
+ * @param {Object} [props.client] - Client data (for edit mode)
+ * @param {Object} props.user - Current user
+ * @param {string} [props.error] - Error message
+ * @param {Array} [props.availableScopes] - Available OAuth2 scopes
+ * @param {Array} [props.availableGrantTypes] - Available grant types
+ * @param {Object} [props.config] - UI configuration
+ * @returns {string} HTML string
+ */
+export function AdminClientFormPage(props = {}) {
+  const {
+    client = null,
+    user = {},
+    error = null,
+    availableScopes = [],
+    availableGrantTypes = [],
+    config = {}
+  } = props;
+
+  const isEditMode = !!client;
+  const clientData = client || {
+    name: '',
+    redirectUris: [''],
+    grantTypes: ['authorization_code', 'refresh_token'],
+    allowedScopes: ['openid', 'profile', 'email'],
+    active: true
+  };
+
+  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 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 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 content = html`
+    <section class="mx-auto w-full max-w-4xl space-y-8 text-slate-100">
+      <header>
+        <a href="/admin/clients" class="text-sm font-semibold text-primary transition hover:text-white">
+          ← Back to Clients
+        </a>
+        <h1 class="mt-3 text-3xl font-semibold text-white md:text-4xl">
+          ${isEditMode ? 'Edit' : 'Create'} OAuth2 Client
+        </h1>
+        <p class="mt-2 text-sm text-slate-300">
+          Configure redirect URIs, grant types, and scopes available for this client.
+        </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="${isEditMode ? `/admin/clients/${client.id}/update` : '/admin/clients/create'}" class="space-y-6">
+          <div class="space-y-2">
+            <label for="name" class="text-sm font-semibold text-slate-200">Client 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="${clientData.name}"
+              required
+              autofocus
+              placeholder="My Application"
+            />
+            <p class="text-xs text-slate-400">A friendly name for this OAuth2 client</p>
+            ${error ? html`<p class="text-xs text-red-200">${error}</p>` : ''}
+          </div>
+
+          <div class="space-y-3">
+            <label class="text-sm font-semibold text-slate-200">Redirect URIs</label>
+            <div id="redirect-uris-container" class="space-y-2">
+              ${(Array.isArray(clientData.redirectUris) ? clientData.redirectUris : ['']).map((uri, index) => html`
+                <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:gap-3">
+                  <input
+                    type="url"
+                    class="${inputClasses}"
+                    name="redirectUris[]"
+                    value="${uri}"
+                    required
+                    placeholder="https://example.com/callback"
+                  />
+                  ${index > 0 ? html`
+                    <button type="button" class="${dangerButtonClass} shrink-0" onclick="this.parentElement.remove()">
+                      ✕
+                    </button>
+                  ` : ''}
+                </div>
+              `)}
+            </div>
+            <button type="button" class="${secondaryButtonClass}" onclick="addRedirectUri()">
+              + Add Another URI
+            </button>
+            <p class="text-xs text-slate-400">
+              Where users will be redirected after authorization.
+            </p>
+          </div>
+
+          <div class="space-y-2">
+            <label class="text-sm font-semibold text-slate-200">Grant Types</label>
+            <div class="grid gap-2 sm:grid-cols-2">
+              ${(availableGrantTypes.length > 0 ? availableGrantTypes : ['authorization_code', 'refresh_token', 'client_credentials']).map(type => {
+                const isChecked = Array.isArray(clientData.grantTypes) && clientData.grantTypes.includes(type);
+                return html`
+                  <label class="flex items-center 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}"
+                      id="grant_${type}"
+                      name="grantTypes[]"
+                      value="${type}"
+                      ${isChecked ? 'checked' : ''}
+                    />
+                    <span><code>${type}</code></span>
+                  </label>
+                `;
+              })}
+            </div>
+            <p class="text-xs text-slate-400">OAuth2 grant types this client can use.</p>
+          </div>
+
+          <div class="space-y-2">
+            <label class="text-sm font-semibold text-slate-200">Allowed Scopes</label>
+            <div class="grid gap-2 sm:grid-cols-2">
+              ${(availableScopes.length > 0 ? availableScopes : ['openid', 'profile', 'email', 'offline_access']).map(scope => {
+                const isChecked = Array.isArray(clientData.allowedScopes) && clientData.allowedScopes.includes(scope);
+                return html`
+                  <label class="flex items-center 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}"
+                      id="scope_${scope}"
+                      name="allowedScopes[]"
+                      value="${scope}"
+                      ${isChecked ? 'checked' : ''}
+                    />
+                    <span><code>${scope}</code></span>
+                  </label>
+                `;
+              })}
+            </div>
+            <p class="text-xs text-slate-400">Scopes this client is allowed to request.</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="active"
+              name="active"
+              value="1"
+              ${clientData.active !== false ? 'checked' : ''}
+            />
+            <span>
+              <strong class="text-white">Active</strong>
+              <br>
+              Client can authenticate and receive tokens.
+            </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);">
+              ${isEditMode ? 'Update Client' : 'Create Client'}
+            </button>
+            <a href="/admin/clients" class="${secondaryButtonClass}">
+              Cancel
+            </a>
+          </div>
+        </form>
+      </div>
+
+      ${isEditMode ? html`
+        <div class="rounded-3xl border border-white/15 bg-white/[0.06] px-6 py-4 text-sm text-slate-200 shadow-inner shadow-black/20">
+          <strong class="text-white">Note:</strong>
+          The client secret cannot be displayed again after creation. If you need a new secret, use the "Rotate Secret"
+          action on the clients list page.
+        </div>
+      ` : ''}
+    </section>
+
+    <script>
+      const redirectInputClasses = ${JSON.stringify(inputClasses)};
+      const dangerButtonClasses = ${JSON.stringify(dangerButtonClass)};
+
+      function addRedirectUri() {
+        const container = document.getElementById('redirect-uris-container');
+        const wrapper = document.createElement('div');
+        wrapper.className = 'flex flex-col gap-2 sm:flex-row sm:items-start sm:gap-3';
+
+        const input = document.createElement('input');
+        input.type = 'url';
+        input.name = 'redirectUris[]';
+        input.required = true;
+        input.placeholder = 'https://example.com/callback';
+        input.className = redirectInputClasses;
+
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = dangerButtonClasses + ' shrink-0';
+        button.textContent = '✕';
+        button.addEventListener('click', () => wrapper.remove());
+
+        wrapper.appendChild(input);
+        wrapper.appendChild(button);
+        container.appendChild(wrapper);
+      }
+    </script>
+  `;
+
+  return BaseLayout({
+    title: `${isEditMode ? 'Edit' : 'Create'} OAuth2 Client - Admin`,
+    content,
+    config,
+    user,
+    error: null // Error shown in form
+  });
+}
+
+export default AdminClientFormPage;

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

@@ -0,0 +1,179 @@
+/**
+ * Admin OAuth2 Clients Management Page
+ */
+
+import { html } from 'hono/html';
+import { BaseLayout } from '../../layouts/base.js';
+
+/**
+ * Render OAuth2 clients list page
+ * @param {Object} props - Page properties
+ * @param {Array} props.clients - List of OAuth2 clients
+ * @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 AdminClientsPage(props = {}) {
+  const { clients = [], user = {}, error = null, success = null, config = {} } = props;
+
+  const primaryButtonClass = [
+    'inline-flex items-center justify-center rounded-2xl bg-gradient-to-r',
+    'from-primary via-primary to-secondary px-4 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 successButtonClass = [
+    'inline-flex items-center justify-center rounded-2xl border border-emerald-400/40 bg-emerald-500/10',
+    'px-4 py-2.5 text-sm font-semibold text-emerald-100 transition hover:bg-emerald-500/15 focus:outline-none focus:ring-2 focus:ring-emerald-400/40'
+  ].join(' ');
+
+  const codeChipClass = 'rounded-xl border border-white/10 bg-white/[0.08] px-3 py-1 text-xs text-slate-200';
+  const badgeClass = 'rounded-full bg-primary/20 px-3 py-1 text-xs font-semibold text-primary';
+
+  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-center sm:justify-between">
+        <div>
+          <h1 class="text-3xl font-semibold text-white md:text-4xl">OAuth2 Clients</h1>
+          <p class="mt-1 text-sm text-slate-300">
+            Manage client credentials, redirect URIs, and allowed scopes.
+          </p>
+        </div>
+        <a href="/admin/clients/new" class="${primaryButtonClass}">
+          + New Client
+        </a>
+      </header>
+
+      ${clients.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 OAuth2 clients registered yet. Create your first client to start integrating applications.
+          </p>
+          <a href="/admin/clients/new" class="${primaryButtonClass} mt-6 inline-flex" style="box-shadow: 0 18px 45px var(--color-primary-glow);">
+            Create Your First Client
+          </a>
+        </div>
+      ` : html`
+        <div class="grid gap-6">
+          ${clients.map(client => {
+            const grantTypes = Array.isArray(client.grantTypes) ? client.grantTypes : [];
+            const allowedScopes = Array.isArray(client.allowedScopes) ? client.allowedScopes : [];
+            const redirectUris = Array.isArray(client.redirectUris) ? client.redirectUris : [];
+
+            return html`
+              <article class="rounded-3xl border border-white/10 bg-white/[0.05] p-6 shadow-xl shadow-black/30 backdrop-blur">
+                <div class="flex flex-col gap-4 border-b border-white/10 pb-4 sm:flex-row sm:items-center sm:justify-between">
+                  <div class="flex flex-wrap items-center gap-3">
+                    <h2 class="text-lg font-semibold text-white">${client.name}</h2>
+                    ${client.active ? '' : html`
+                      <span class="rounded-full bg-red-500/20 px-3 py-1 text-xs font-semibold text-red-200">
+                        Inactive
+                      </span>
+                    `}
+                  </div>
+                  <div class="flex flex-wrap items-center gap-2">
+                    <a href="/admin/clients/${client.id}/edit" class="${secondaryButtonClass}">
+                      Edit
+                    </a>
+                    <form method="POST" action="/admin/clients/${client.id}/delete" class="inline-flex" onsubmit="return confirm('Are you sure you want to delete this client? This action cannot be undone.')">
+                      <button type="submit" class="${dangerButtonClass}">
+                        Delete
+                      </button>
+                    </form>
+                  </div>
+                </div>
+
+                <div class="mt-4 space-y-6 text-sm text-slate-200">
+                  <div>
+                    <div class="text-xs uppercase tracking-wide text-slate-400">Client ID</div>
+                    <code class="${codeChipClass} mt-2 block">${client.clientId}</code>
+                  </div>
+
+                  ${redirectUris.length > 0 ? html`
+                    <div>
+                      <div class="text-xs uppercase tracking-wide text-slate-400">
+                        Redirect URIs (${redirectUris.length})
+                      </div>
+                      <div class="mt-2 flex flex-wrap gap-2">
+                        ${redirectUris.map(uri => html`<code class="${codeChipClass}">${uri}</code>`)}
+                      </div>
+                    </div>
+                  ` : ''}
+
+                  ${grantTypes.length > 0 ? html`
+                    <div>
+                      <div class="text-xs uppercase tracking-wide text-slate-400">Grant Types</div>
+                      <div class="mt-2 flex flex-wrap gap-2">
+                        ${grantTypes.map(type => html`
+                          <span class="${badgeClass}">
+                            ${type}
+                          </span>
+                        `)}
+                      </div>
+                    </div>
+                  ` : ''}
+
+                  ${allowedScopes.length > 0 ? html`
+                    <div>
+                      <div class="text-xs uppercase tracking-wide text-slate-400">Allowed Scopes</div>
+                      <div class="mt-2 flex flex-wrap gap-2">
+                        ${allowedScopes.map(scope => html`
+                          <span class="rounded-full bg-emerald-500/20 px-3 py-1 text-xs font-semibold text-emerald-200">
+                            ${scope}
+                          </span>
+                        `)}
+                      </div>
+                    </div>
+                  ` : ''}
+
+                  ${client.createdAt ? html`
+                    <div class="text-xs text-slate-400">
+                      Created ${new Date(client.createdAt).toLocaleString()}
+                    </div>
+                  ` : ''}
+                </div>
+
+                <div class="mt-6 flex flex-wrap gap-3 border-t border-white/10 pt-4">
+                  <form method="POST" action="/admin/clients/${client.id}/rotate-secret" class="inline-flex">
+                    <button type="submit" class="${secondaryButtonClass}">
+                      🔄 Rotate Secret
+                    </button>
+                  </form>
+                  <form method="POST" action="/admin/clients/${client.id}/toggle-active" class="inline-flex">
+                    <button type="submit" class="${client.active ? dangerButtonClass : successButtonClass}">
+                      ${client.active ? '🔴 Deactivate' : '🟢 Activate'}
+                    </button>
+                  </form>
+                </div>
+              </article>
+            `;
+          })}
+        </div>
+      `}
+    </section>
+  `;
+
+  return BaseLayout({
+    title: 'OAuth2 Clients - Admin',
+    content,
+    config,
+    user,
+    error,
+    success
+  });
+}
+
+export default AdminClientsPage;