s3db.js 13.4.0 → 13.6.0

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

@@ -0,0 +1,226 @@
+/**
+ * Registration Page
+ */
+
+import { html } from 'hono/html';
+import { BaseLayout } from '../layouts/base.js';
+
+/**
+ * Render registration page
+ * @param {Object} props - Page properties
+ * @param {string} [props.error] - Error message
+ * @param {string} [props.email] - Pre-filled email
+ * @param {string} [props.name] - Pre-filled name
+ * @param {Object} [props.passwordPolicy] - Password policy configuration
+ * @param {Object} [props.config] - UI configuration
+ * @returns {string} HTML string
+ */
+export function RegisterPage(props = {}) {
+  const { error = null, email = '', name = '', passwordPolicy = {}, config = {} } = props;
+
+  const companyName = config.companyName || 'S3DB';
+
+  // Extract password policy
+  const minLength = passwordPolicy.minLength || 8;
+  const maxLength = passwordPolicy.maxLength || 128;
+  const requireUppercase = passwordPolicy.requireUppercase !== false;
+  const requireLowercase = passwordPolicy.requireLowercase !== false;
+  const requireNumbers = passwordPolicy.requireNumbers !== false;
+  const requireSymbols = passwordPolicy.requireSymbols || false;
+
+  // Build password requirements text
+  const requirements = [];
+  requirements.push(`${minLength}-${maxLength} characters`);
+  if (requireUppercase) requirements.push('uppercase letter');
+  if (requireLowercase) requirements.push('lowercase letter');
+  if (requireNumbers) requirements.push('number');
+  if (requireSymbols) requirements.push('symbol');
+
+  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 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 content = html`
+    <section class="mx-auto flex w-full max-w-5xl flex-col items-center gap-12 text-slate-100 md:flex-row md:items-start md:justify-between">
+      <div class="order-2 w-full max-w-xl md:order-1">
+        <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-28 h-64 w-64 rounded-full bg-primary/25 blur-3xl"></div>
+          <div class="pointer-events-none absolute -bottom-28 -left-24 h-56 w-56 rounded-full bg-secondary/20 blur-[120px]"></div>
+
+          <div class="relative z-10 space-y-8">
+            <header class="space-y-2 text-center">
+              <h2 class="text-2xl font-semibold tracking-tight text-white">
+                Create Account
+              </h2>
+              <p class="text-sm text-slate-300">
+                Join ${companyName} Identity to access all secure services.
+              </p>
+            </header>
+
+            ${error ? html`
+              <div class="rounded-xl border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm leading-6 text-red-100 shadow-md shadow-red-900/30">
+                ${error}
+              </div>
+            ` : ''}
+
+            <form method="POST" action="/register" 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}"
+                  id="name"
+                  name="name"
+                  value="${name}"
+                  required
+                  autofocus
+                  autocomplete="name"
+                  minlength="2"
+                  maxlength="100"
+                />
+              </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="${email}"
+                  required
+                  autocomplete="email"
+                />
+                <p class="text-xs text-slate-400">
+                  We'll send you a verification email to confirm your account.
+                </p>
+              </div>
+
+              <div class="space-y-2">
+                <label for="password" class="text-sm font-semibold text-slate-200">
+                  Password
+                </label>
+                <input
+                  type="password"
+                  class="${inputClasses}"
+                  id="password"
+                  name="password"
+                  required
+                  autocomplete="new-password"
+                  minlength="${minLength}"
+                  maxlength="${maxLength}"
+                />
+                <div class="rounded-2xl border border-white/5 bg-white/[0.06] px-4 py-3 text-xs leading-5 text-slate-200">
+                  <span class="font-semibold text-white/80">Must include:</span>
+                  <ul class="mt-2 list-disc space-y-1 pl-5 text-slate-300">
+                    ${requirements.map(req => html`<li>${req}</li>`)}
+                  </ul>
+                </div>
+              </div>
+
+              <div class="space-y-2">
+                <label for="confirm_password" class="text-sm font-semibold text-slate-200">
+                  Confirm Password
+                </label>
+                <input
+                  type="password"
+                  class="${inputClasses}"
+                  id="confirm_password"
+                  name="confirm_password"
+                  required
+                  autocomplete="new-password"
+                />
+              </div>
+
+              <label class="flex items-start gap-3 text-sm text-slate-300">
+                <input
+                  type="checkbox"
+                  class="${checkboxClasses} mt-0.5"
+                  id="agree_terms"
+                  name="agree_terms"
+                  value="1"
+                  required
+                />
+                <span>
+                  I agree to the
+                  <a href="/terms" class="font-semibold text-primary transition hover:text-white" target="_blank">Terms of Service</a>
+                  and
+                  <a href="/privacy" class="font-semibold text-primary transition hover:text-white" target="_blank">Privacy Policy</a>.
+                </span>
+              </label>
+
+              <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);"
+              >
+                Create Account
+              </button>
+            </form>
+
+            <p class="text-center text-sm text-slate-300">
+              Already have an account?
+              <a href="/login" class="font-semibold text-primary transition hover:text-white">
+                Sign in
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="order-1 max-w-xl text-center md:order-2 md:text-left">
+        ${config.logoUrl ? html`
+          <div class="mb-6 flex justify-center md:justify-start">
+            <img src="${config.logoUrl}" alt="${config.title || 'Identity Logo'}" class="h-12 w-auto" />
+          </div>
+        ` : ''}
+        <h1 class="text-3xl font-semibold tracking-tight text-white md:text-4xl">
+          Welcome to ${config.title || 'S3DB Identity'}
+        </h1>
+        <p class="mt-4 text-base text-slate-300 md:text-lg">
+          ${config.tagline || 'Create a secure identity to access your workspace and applications.'}
+        </p>
+        <div class="mt-8 grid gap-4 text-left text-sm text-slate-300">
+          <div class="rounded-2xl border border-white/5 bg-white/[0.04] px-4 py-3">
+            <span class="font-semibold text-white">✅ Fast onboarding</span>
+            <p class="mt-1 text-slate-300">
+              Start collaborating in minutes with instant verification.
+            </p>
+          </div>
+          <div class="rounded-2xl border border-white/5 bg-white/[0.04] px-4 py-3">
+            <span class="font-semibold text-white">🔐 Enterprise-grade security</span>
+            <p class="mt-1 text-slate-300">
+              Backed by multi-layer encryption and continuous monitoring.
+            </p>
+          </div>
+          <div class="rounded-2xl border border-white/5 bg-white/[0.04] px-4 py-3">
+            <span class="font-semibold text-white">💬 Live support</span>
+            <p class="mt-1 text-slate-300">
+              Our team is ready to help you with any registration issues.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  `;
+
+  return BaseLayout({
+    title: 'Create Account',
+    content,
+    config,
+    error: null // Error shown in form
+  });
+}
+
+export default RegisterPage;

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

@@ -0,0 +1,128 @@
+/**
+ * Reset Password Page
+ */
+
+import { html } from 'hono/html';
+import { BaseLayout } from '../layouts/base.js';
+
+/**
+ * Render reset password page
+ * @param {Object} props - Page properties
+ * @param {string} [props.error] - Error message
+ * @param {string} [props.token] - Reset token from URL
+ * @param {Object} [props.passwordPolicy] - Password policy configuration
+ * @param {Object} [props.config] - UI configuration
+ * @returns {string} HTML string
+ */
+export function ResetPasswordPage(props = {}) {
+  const { error = null, token = '', passwordPolicy = {}, config = {} } = props;
+
+  // Extract password policy
+  const minLength = passwordPolicy.minLength || 8;
+  const maxLength = passwordPolicy.maxLength || 128;
+  const requireUppercase = passwordPolicy.requireUppercase !== false;
+  const requireLowercase = passwordPolicy.requireLowercase !== false;
+  const requireNumbers = passwordPolicy.requireNumbers !== false;
+  const requireSymbols = passwordPolicy.requireSymbols || false;
+
+  // Build password requirements text
+  const requirements = [];
+  requirements.push(`${minLength}-${maxLength} characters`);
+  if (requireUppercase) requirements.push('uppercase letter');
+  if (requireLowercase) requirements.push('lowercase letter');
+  if (requireNumbers) requirements.push('number');
+  if (requireSymbols) requirements.push('symbol');
+
+  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-20 -top-28 h-60 w-60 rounded-full bg-primary/25 blur-3xl"></div>
+        <div class="pointer-events-none absolute -bottom-24 -left-28 h-56 w-56 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">
+              Set New Password
+            </h2>
+            <p class="text-sm text-slate-300">
+              Choose a strong password to secure your account.
+            </p>
+          </header>
+
+          <form method="POST" action="/reset-password" class="space-y-6">
+            <input type="hidden" name="token" value="${token}" />
+
+            <div class="space-y-2">
+              <label for="password" class="text-sm font-semibold text-slate-200">
+                New Password
+              </label>
+              <input
+                type="password"
+                class="${inputClasses}"
+                id="password"
+                name="password"
+                required
+                autofocus
+                autocomplete="new-password"
+                minlength="${minLength}"
+                maxlength="${maxLength}"
+              />
+              <div class="rounded-2xl border border-white/5 bg-white/[0.06] px-4 py-3 text-xs leading-5 text-slate-200">
+                <span class="font-semibold text-white/80">Must include:</span>
+                <ul class="mt-2 list-disc space-y-1 pl-5 text-slate-300">
+                  ${requirements.map(req => html`<li>${req}</li>`)}
+                </ul>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <label for="confirm_password" class="text-sm font-semibold text-slate-200">
+                Confirm New Password
+              </label>
+              <input
+                type="password"
+                class="${inputClasses}"
+                id="confirm_password"
+                name="confirm_password"
+                required
+                autocomplete="new-password"
+              />
+              ${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);"
+            >
+              Reset Password
+            </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: 'Set New Password',
+    content,
+    config,
+    error: null, // Error shown in form
+    success: null
+  });
+}
+
+export default ResetPasswordPage;

package/src/plugins/identity/ui/pages/verify-email.js

@@ -0,0 +1,172 @@
+/**
+ * Email Verification Page
+ */
+
+import { html } from 'hono/html';
+import { BaseLayout } from '../layouts/base.js';
+
+/**
+ * Render email verification page
+ * @param {Object} props - Page properties
+ * @param {string} [props.status] - Verification status (success, error, expired, pending)
+ * @param {string} [props.email] - User email (for resend)
+ * @param {string} [props.message] - Status message
+ * @param {Object} [props.config] - UI configuration
+ * @returns {string} HTML string
+ */
+export function VerifyEmailPage(props = {}) {
+  const { status = 'pending', email = '', message = '', config = {} } = props;
+
+  const statusConfig = {
+    success: {
+      icon: '✅',
+      title: 'Email Verified!',
+      color: 'var(--color-success)',
+      defaultMessage: 'Your email address has been successfully verified.'
+    },
+    error: {
+      icon: '❌',
+      title: 'Verification Failed',
+      color: 'var(--color-danger)',
+      defaultMessage: 'The verification link is invalid or has already been used.'
+    },
+    expired: {
+      icon: '⏰',
+      title: 'Link Expired',
+      color: 'var(--color-warning)',
+      defaultMessage: 'This verification link has expired. Please request a new one.'
+    },
+    pending: {
+      icon: '📧',
+      title: 'Verify Your Email',
+      color: 'var(--color-primary)',
+      defaultMessage: 'Please check your email for a verification link.'
+    }
+  };
+
+  const currentStatus = statusConfig[status] || statusConfig.pending;
+  const displayMessage = message || currentStatus.defaultMessage;
+
+  const primaryButtonClasses = [
+    'inline-flex items-center justify-center rounded-2xl bg-gradient-to-r',
+    'from-primary via-primary to-secondary px-6 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 items-center justify-center rounded-2xl border border-white/15 bg-white/[0.06]',
+    'px-6 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-3xl text-slate-100">
+      <div class="flex flex-col items-center gap-4 pb-8 text-center">
+        ${config.logoUrl ? html`
+          <img src="${config.logoUrl}" alt="${config.title || 'Identity Logo'}" class="h-14 w-auto" />
+        ` : ''}
+        <h1 class="text-3xl font-semibold tracking-tight text-white md:text-4xl">
+          ${currentStatus.title}
+        </h1>
+      </div>
+
+      <div class="relative isolate overflow-hidden rounded-3xl border border-white/10 bg-slate-900/60 px-10 py-12 text-center shadow-2xl shadow-slate-900/60 backdrop-blur">
+        <div class="pointer-events-none absolute -left-24 top-10 h-64 w-64 rounded-full bg-primary/25 blur-3xl"></div>
+        <div class="pointer-events-none absolute -right-16 -top-20 h-56 w-56 rounded-full bg-secondary/25 blur-[120px]"></div>
+
+        <div class="relative z-10 space-y-8">
+          <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full border border-white/10 bg-white/[0.08] text-4xl">
+            ${currentStatus.icon}
+          </div>
+
+          <p class="text-base text-slate-200 md:text-lg" style="color: ${currentStatus.color};">
+            ${displayMessage}
+          </p>
+
+          ${status === 'success' ? html`
+            <div class="space-y-4">
+              <a href="/login" class="${primaryButtonClasses}" style="box-shadow: 0 18px 45px var(--color-primary-glow);">
+                Sign In
+              </a>
+              <div class="text-sm text-slate-300">
+                <a href="/profile" class="font-semibold text-primary transition hover:text-white">
+                  Go to your profile
+                </a>
+              </div>
+            </div>
+          ` : status === 'error' || status === 'expired' ? html`
+            <div class="space-y-6">
+              ${email ? html`
+                <form method="POST" action="/verify-email/resend">
+                  <input type="hidden" name="email" value="${email}" />
+                  <button type="submit" class="${primaryButtonClasses}" style="box-shadow: 0 18px 45px var(--color-primary-glow);">
+                    Send New Verification Email
+                  </button>
+                </form>
+              ` : html`
+                <a href="/login" class="${primaryButtonClasses}" style="box-shadow: 0 18px 45px var(--color-primary-glow);">
+                  Sign In to Resend
+                </a>
+              `}
+              <div class="text-sm text-slate-300">
+                <a href="/login" class="font-semibold text-primary transition hover:text-white">
+                  Sign in
+                </a>
+              </div>
+            </div>
+          ` : html`
+            <div class="space-y-6">
+              <div class="rounded-2xl border border-white/10 bg-white/[0.06] px-6 py-5 text-left text-sm text-slate-200">
+                <p class="mb-2 font-semibold text-white/90">
+                  Didn't receive the email?
+                </p>
+                <ul class="list-disc space-y-1 pl-5 text-slate-300">
+                  <li>Check your spam or junk folder</li>
+                  <li>Make sure the email address is correct</li>
+                  <li>Wait a few minutes and check again</li>
+                </ul>
+              </div>
+
+              ${email ? html`
+                <form method="POST" action="/verify-email/resend">
+                  <input type="hidden" name="email" value="${email}" />
+                  <button type="submit" class="${secondaryButtonClasses}">
+                    Resend Verification Email
+                  </button>
+                </form>
+              ` : html`
+                <a href="/login" class="${secondaryButtonClasses}">
+                  Sign In to Resend
+                </a>
+              `}
+
+              <div class="text-sm text-slate-300">
+                <a href="/login" class="font-semibold text-primary transition hover:text-white">
+                  Back to sign in
+                </a>
+              </div>
+            </div>
+          `}
+        </div>
+      </div>
+
+      ${status === 'success' ? html`
+        <div class="mt-6 rounded-2xl border border-emerald-400/40 bg-emerald-500/10 px-6 py-5 text-center text-sm leading-6 text-emerald-100 shadow-lg shadow-emerald-900/30">
+          <strong>Your account is now fully activated!</strong><br>
+          You can now access all features and services.
+        </div>
+      ` : ''}
+    </section>
+  `;
+
+  return BaseLayout({
+    title: currentStatus.title,
+    content,
+    config,
+    user: null,
+    error: null,
+    success: null
+  });
+}
+
+export default VerifyEmailPage;