npm - @owox/idp-better-auth - Versions diffs - 0.5.0 - Mend

@owox/idp-better-auth 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/README.md +183 -0
package/dist/adapters/database.d.ts +29 -0
package/dist/adapters/database.d.ts.map +1 -0
package/dist/adapters/database.js +85 -0
package/dist/auth/auth-config.d.ts +4 -0
package/dist/auth/auth-config.d.ts.map +1 -0
package/dist/auth/auth-config.js +72 -0
package/dist/index.d.ts +15 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +16 -0
package/dist/providers/better-auth-provider.d.ts +34 -0
package/dist/providers/better-auth-provider.d.ts.map +1 -0
package/dist/providers/better-auth-provider.js +99 -0
package/dist/services/authentication-service.d.ts +23 -0
package/dist/services/authentication-service.d.ts.map +1 -0
package/dist/services/authentication-service.js +199 -0
package/dist/services/crypto-service.d.ts +18 -0
package/dist/services/crypto-service.d.ts.map +1 -0
package/dist/services/crypto-service.js +100 -0
package/dist/services/database-service.d.ts +14 -0
package/dist/services/database-service.d.ts.map +1 -0
package/dist/services/database-service.js +142 -0
package/dist/services/magic-link-service.d.ts +10 -0
package/dist/services/magic-link-service.d.ts.map +1 -0
package/dist/services/magic-link-service.js +42 -0
package/dist/services/middleware-service.d.ts +15 -0
package/dist/services/middleware-service.d.ts.map +1 -0
package/dist/services/middleware-service.js +38 -0
package/dist/services/page-service.d.ts +23 -0
package/dist/services/page-service.d.ts.map +1 -0
package/dist/services/page-service.js +331 -0
package/dist/services/request-handler-service.d.ts +10 -0
package/dist/services/request-handler-service.d.ts.map +1 -0
package/dist/services/request-handler-service.js +50 -0
package/dist/services/template-service.d.ts +28 -0
package/dist/services/template-service.d.ts.map +1 -0
package/dist/services/template-service.js +198 -0
package/dist/services/token-service.d.ts +15 -0
package/dist/services/token-service.d.ts.map +1 -0
package/dist/services/token-service.js +108 -0
package/dist/services/user-management-service.d.ts +74 -0
package/dist/services/user-management-service.d.ts.map +1 -0
package/dist/services/user-management-service.js +396 -0
package/dist/templates/admin-add-user.html +298 -0
package/dist/templates/admin-dashboard.html +214 -0
package/dist/templates/admin-user-details.html +278 -0
package/dist/templates/password-setup.html +267 -0
package/dist/templates/password-success.html +197 -0
package/dist/templates/sign-in.html +201 -0
package/dist/types/auth-session.d.ts +25 -0
package/dist/types/auth-session.d.ts.map +1 -0
package/dist/types/auth-session.js +1 -0
package/dist/types/database-models.d.ts +54 -0
package/dist/types/database-models.d.ts.map +1 -0
package/dist/types/database-models.js +1 -0
package/dist/types/index.d.ts +45 -0
package/dist/types/index.d.ts.map +1 -0
package/dist/types/index.js +2 -0
package/package.json +69 -0

package/dist/templates/admin-user-details.html ADDED Viewed

@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>User Details - IDP Better Auth</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            // OWOX Design System Colors
+            background: "oklch(1 0 0)",
+            foreground: "oklch(0.3346 0.0123 279.25)",
+            card: "oklch(1 0 0)",
+            'card-foreground': "oklch(0.3346 0.0123 279.25)",
+            popover: "oklch(1 0 0)",
+            'popover-foreground': "oklch(0.3346 0.0123 279.25)",
+            primary: {
+              DEFAULT: "oklch(0.6179 0.2295 250.87)",
+              hover: "oklch(0.54 0.23 250.87)",
+              foreground: "oklch(0.985 0 0)",
+            },
+            secondary: {
+              DEFAULT: "oklch(0.97 0 0)",
+              foreground: "oklch(0.205 0 0)",
+            },
+            muted: {
+              DEFAULT: "oklch(0.97 0 0)",
+              foreground: "oklch(0.5148 0.0128 274.72)",
+            },
+            accent: {
+              DEFAULT: "oklch(0.97 0 0)",
+              foreground: "oklch(0.205 0 0)",
+            },
+            destructive: {
+              DEFAULT: "oklch(0.577 0.245 27.325)",
+              foreground: "oklch(0.985 0 0)",
+            },
+            border: "oklch(0.922 0 0)",
+            input: "oklch(0.922 0 0)",
+            ring: "oklch(0.708 0 0)",
+            success: {
+              DEFAULT: "oklch(0.647 0.165 142.495)",
+              foreground: "oklch(0.985 0 0)",
+            },
+            'brand-blue': {
+              50: "oklch(0.985 0.03 250.87)",
+              100: "oklch(0.955 0.05 250.87)",
+              200: "oklch(0.9 0.08 250.87)",
+              300: "oklch(0.8 0.14 250.87)",
+              400: "oklch(0.7 0.19 250.87)",
+              500: "oklch(0.6179 0.2295 250.87)",
+              600: "oklch(0.54 0.23 250.87)",
+              700: "oklch(0.44 0.2 250.87)",
+              800: "oklch(0.36 0.17 250.87)",
+              900: "oklch(0.28 0.14 250.87)",
+            },
+          },
+        },
+      },
+    }
+  </script>
+</head>
+<body class="bg-white min-h-screen">
+  <!-- Header -->
+  <header class="bg-white shadow-sm border-b border-border">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex justify-between items-center h-16">
+        <div class="flex items-center space-x-4">
+          <a href="/auth/dashboard" class="text-muted-foreground hover:text-card-foreground">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+            </svg>
+          </a>
+          <h1 class="text-xl font-semibold text-foreground">User Details</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+          <a href="/" class="text-sm text-primary hover:text-primary/80 transition-colors">
+            <svg class="inline w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+            </svg>
+            Back to Site
+          </a>
+          <a href="/auth/sign-out" class="text-sm text-destructive hover:text-destructive/80 transition-colors">Sign Out</a>
+        </div>
+      </div>
+    </div>
+  </header>
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <!-- User Profile Card -->
+    <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-8 border border-border">
+      <div class="px-4 py-5 sm:px-6 flex justify-between items-center">
+        <div>
+          <h3 class="text-lg leading-6 font-medium text-foreground">User Information</h3>
+          <p class="mt-1 max-w-2xl text-sm text-muted-foreground">Personal details and account information</p>
+        </div>
+        <div class="flex space-x-3">
+          <button onclick="generateMagicLink()" class="inline-flex items-center px-3 py-2 border border-input shadow-sm text-sm leading-4 font-medium rounded-md text-foreground bg-white hover:bg-muted/30 transition-colors">
+            <svg class="-ml-0.5 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
+            </svg>
+            Generate Magic Link
+          </button>
+          <button onclick="confirmDelete()" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-primary-foreground bg-destructive hover:bg-destructive/90 transition-colors" {{DELETE_BUTTON_STYLE}}>
+            <svg class="-ml-0.5 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+            </svg>
+            Delete User
+          </button>
+        </div>
+      </div>
+      <div class="border-t border-border">
+        <dl>
+          <div class="bg-muted/20 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-muted-foreground">Full name</dt>
+            <dd class="mt-1 text-sm text-foreground sm:mt-0 sm:col-span-2">{{USER_NAME}}</dd>
+          </div>
+          <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-muted-foreground">Email address</dt>
+            <dd class="mt-1 text-sm text-foreground sm:mt-0 sm:col-span-2">{{USER_EMAIL}}</dd>
+          </div>
+          <div class="bg-muted/20 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-muted-foreground">Role</dt>
+            <dd class="mt-1 text-sm text-foreground sm:mt-0 sm:col-span-2">
+              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ROLE_BADGE_CLASSES}}">
+                {{USER_ROLE}}
+              </span>
+            </dd>
+          </div>
+          <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-muted-foreground">User ID</dt>
+            <dd class="mt-1 text-sm text-foreground sm:mt-0 sm:col-span-2 font-mono">{{USER_ID}}</dd>
+          </div>
+          <div class="bg-muted/20 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-muted-foreground">Organization</dt>
+            <dd class="mt-1 text-sm text-foreground sm:mt-0 sm:col-span-2">{{ORGANIZATION_ID}}</dd>
+          </div>
+          <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-muted-foreground">Created</dt>
+            <dd class="mt-1 text-sm text-foreground sm:mt-0 sm:col-span-2">{{CREATED_AT}}</dd>
+          </div>
+          <div class="bg-muted/20 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+            <dt class="text-sm font-medium text-muted-foreground">Last updated</dt>
+            <dd class="mt-1 text-sm text-foreground sm:mt-0 sm:col-span-2">{{UPDATED_AT}}</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+    <!-- Magic Link Result (hidden by default) -->
+    <div id="magic-link-result" class="bg-success/10 border border-success/20 rounded-md p-4 mb-4 hidden">
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <svg class="h-5 w-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+        </div>
+        <div class="ml-3 flex-1">
+          <h3 class="text-sm font-medium text-success-foreground">Magic Link Generated</h3>
+          <div class="mt-2">
+            <p class="text-sm text-success">The magic link has been generated successfully:</p>
+            <div class="mt-2 flex items-center space-x-2">
+              <input id="magic-link-url" type="text" readonly class="flex-1 min-w-0 px-3 py-2 border border-success/30 rounded-md text-sm bg-white font-mono">
+              <button onclick="copyMagicLink()" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-success-foreground bg-success hover:bg-success/90 transition-colors">
+                Copy
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Delete Confirmation Modal -->
+  <div id="delete-modal" class="fixed inset-0 bg-black/50 overflow-y-auto h-full w-full hidden">
+    <div class="relative top-20 mx-auto p-5 border border-border w-96 shadow-lg rounded-md bg-white">
+      <div class="mt-3 text-center">
+        <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-destructive/10">
+          <svg class="h-6 w-6 text-destructive" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16c-.77.833.192 2.5 1.732 2.5z"></path>
+          </svg>
+        </div>
+        <h3 class="text-lg font-medium text-foreground mt-5">Delete User</h3>
+        <div class="mt-2 px-7 py-3">
+          <p class="text-sm text-muted-foreground">Are you sure you want to delete this user? This action cannot be undone.</p>
+        </div>
+        <div class="items-center px-4 py-3">
+          <button id="delete-confirm" onclick="deleteUser()" class="px-4 py-2 bg-destructive text-primary-foreground text-base font-medium rounded-md w-24 mr-2 hover:bg-destructive/90 transition-colors">
+            Delete
+          </button>
+          <button onclick="closeDeleteModal()" class="px-4 py-2 bg-white border border-input text-foreground text-base font-medium rounded-md w-24 hover:bg-muted/30 transition-colors">
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    function confirmDelete() {
+      document.getElementById('delete-modal').classList.remove('hidden');
+    }
+    function closeDeleteModal() {
+      document.getElementById('delete-modal').classList.add('hidden');
+    }
+    async function deleteUser() {
+      try {
+        const response = await fetch('/auth/delete-user/{{USER_ID}}', {
+          method: 'POST',
+          credentials: 'include'
+        });
+        if (response.ok) {
+          window.location.href = '/auth/dashboard';
+        } else {
+          alert('Failed to delete user');
+        }
+      } catch (error) {
+        alert('Error deleting user: ' + error.message);
+      }
+    }
+    async function generateMagicLink() {
+      try {
+        const response = await fetch('/auth/generate-magic-link', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+          body: JSON.stringify({
+            userId: '{{USER_ID}}',
+            email: '{{USER_EMAIL}}',
+            role: '{{USER_ROLE}}'
+          })
+        });
+        if (response.ok) {
+          const result = await response.json();
+          document.getElementById('magic-link-url').value = result.magicLink;
+          document.getElementById('magic-link-result').classList.remove('hidden');
+        } else {
+          alert('Failed to generate magic link');
+        }
+      } catch (error) {
+        alert('Error generating magic link: ' + error.message);
+      }
+    }
+    function copyMagicLink() {
+      const input = document.getElementById('magic-link-url');
+      input.select();
+      document.execCommand('copy');
+      // Show feedback
+      const button = event.target;
+      const originalText = button.textContent;
+      button.textContent = 'Copied!';
+      setTimeout(() => {
+        button.textContent = originalText;
+      }, 2000);
+    }
+    // Close modal when clicking outside
+    document.getElementById('delete-modal').addEventListener('click', function(e) {
+      if (e.target === this) {
+        closeDeleteModal();
+      }
+    });
+  </script>
+</body>
+</html>

package/dist/templates/password-setup.html ADDED Viewed

@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Setup Password - IDP Better Auth</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            // OWOX Design System Colors
+            background: "oklch(1 0 0)",
+            foreground: "oklch(0.3346 0.0123 279.25)",
+            card: "oklch(1 0 0)",
+            'card-foreground': "oklch(0.3346 0.0123 279.25)",
+            primary: {
+              DEFAULT: "oklch(0.6179 0.2295 250.87)",
+              hover: "oklch(0.54 0.23 250.87)",
+              foreground: "oklch(0.985 0 0)",
+            },
+            secondary: {
+              DEFAULT: "oklch(0.97 0 0)",
+              foreground: "oklch(0.205 0 0)",
+            },
+            muted: {
+              DEFAULT: "oklch(0.97 0 0)",
+              foreground: "oklch(0.5148 0.0128 274.72)",
+            },
+            destructive: {
+              DEFAULT: "oklch(0.577 0.245 27.325)",
+              foreground: "oklch(0.985 0 0)",
+            },
+            border: "oklch(0.922 0 0)",
+            input: "oklch(0.922 0 0)",
+            ring: "oklch(0.708 0 0)",
+            success: {
+              DEFAULT: "oklch(0.647 0.165 142.495)",
+              foreground: "oklch(0.985 0 0)",
+            },
+          },
+        },
+      },
+    }
+  </script>
+</head>
+<body class="min-h-screen bg-background flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+  <!-- Header -->
+  <div class="sm:mx-auto sm:w-full sm:max-w-md">
+    <div class="flex justify-center">
+      <div class="w-12 h-12 bg-success rounded-lg flex items-center justify-center">
+        <svg class="w-8 h-8 text-success-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
+        </svg>
+      </div>
+    </div>
+    <!-- Success Message -->
+    <div class="mt-4 mx-auto max-w-md">
+      <div class="bg-green-50 border border-green-200 rounded-md p-4">
+        <div class="flex items-center">
+          <svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          <p class="text-sm font-medium text-green-800">Magic link verified successfully!</p>
+        </div>
+      </div>
+    </div>
+    <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+      Setup your password
+    </h2>
+    <p class="mt-2 text-center text-sm text-gray-600">
+      Create a secure password to complete your account setup
+    </p>
+  </div>
+  <!-- Setup Form -->
+  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+    <div class="bg-white py-8 px-4 shadow-sm rounded-lg sm:px-10 border border-gray-200">
+      <form class="space-y-6" action="/auth/set-password" method="post" id="passwordForm">
+        <div>
+          <label for="password" class="block text-sm font-medium text-gray-700">
+            New Password
+          </label>
+          <div class="mt-1 relative">
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
+              </svg>
+            </div>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              required
+              minlength="6"
+              class="appearance-none block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary sm:text-sm transition-colors"
+              placeholder="Enter at least 6 characters"
+              onkeyup="validatePassword()"
+            >
+            <button
+              type="button"
+              onclick="togglePassword('password')"
+              class="absolute inset-y-0 right-0 pr-3 flex items-center"
+            >
+              <svg id="eye-password" class="h-4 w-4 text-gray-400 hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div>
+          <label for="confirmPassword" class="block text-sm font-medium text-gray-700">
+            Confirm Password
+          </label>
+          <div class="mt-1 relative">
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+            </div>
+            <input
+              id="confirmPassword"
+              name="confirmPassword"
+              type="password"
+              required
+              minlength="8"
+              class="appearance-none block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary sm:text-sm transition-colors"
+              placeholder="Confirm your password"
+              onkeyup="validatePassword()"
+            >
+            <button
+              type="button"
+              onclick="togglePassword('confirmPassword')"
+              class="absolute inset-y-0 right-0 pr-3 flex items-center"
+            >
+              <svg id="eye-confirm" class="h-4 w-4 text-gray-400 hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <!-- Password Requirements -->
+        <div class="bg-blue-50 border border-blue-200 rounded-md p-4">
+          <div class="flex">
+            <svg class="w-4 h-4 text-blue-400 mt-0.5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            <div>
+              <h3 class="text-sm font-medium text-blue-800">Password requirements:</h3>
+              <ul class="mt-1 text-sm text-blue-700 space-y-1">
+                <li id="req-length" class="flex items-center">
+                  <svg class="w-3 h-3 mr-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="10"></circle>
+                  </svg>
+                  At least 6 characters
+                </li>
+                <li id="req-match" class="flex items-center">
+                  <svg class="w-3 h-3 mr-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="10"></circle>
+                  </svg>
+                  Passwords must match
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div>
+          <button
+            type="submit"
+            id="submitBtn"
+            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            disabled
+          >
+            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
+              <svg id="submit-icon" class="h-4 w-4 text-primary-foreground group-hover:text-primary-foreground/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1721 9z"></path>
+              </svg>
+              <svg id="loading-spinner" class="h-4 w-4 text-primary-foreground animate-spin hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            </span>
+            <span id="submit-text">Set Password</span>
+          </button>
+        </div>
+      </form>
+      <div class="mt-6 text-center">
+        <a href="/" class="text-sm text-primary hover:text-primary/80">
+          ← Back to main site
+        </a>
+      </div>
+    </div>
+  </div>
+  <!-- Footer -->
+  <div class="mt-8 text-center">
+    <p class="text-xs text-gray-500">
+      Powered by <strong>OWOX Data Marts</strong>
+    </p>
+  </div>
+  <script>
+    function togglePassword(inputId) {
+      const input = document.getElementById(inputId);
+      input.type = input.type === 'password' ? 'text' : 'password';
+    }
+    function validatePassword() {
+      const password = document.getElementById('password').value;
+      const confirmPassword = document.getElementById('confirmPassword').value;
+      const submitBtn = document.getElementById('submitBtn');
+      const reqLength = document.getElementById('req-length');
+      const reqMatch = document.getElementById('req-match');
+      // Check length requirement
+      const isLengthValid = password.length >= 6;
+      updateRequirement(reqLength, isLengthValid);
+      // Check match requirement
+      const isMatchValid = password === confirmPassword && password.length > 0;
+      updateRequirement(reqMatch, isMatchValid);
+      // Enable/disable submit button
+      submitBtn.disabled = !(isLengthValid && isMatchValid);
+    }
+    function updateRequirement(element, isValid) {
+      const icon = element.querySelector('svg');
+      if (isValid) {
+        element.classList.add('text-green-700');
+        element.classList.remove('text-blue-700');
+        icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>';
+        icon.classList.add('text-green-400');
+        icon.classList.remove('text-gray-400');
+      } else {
+        element.classList.remove('text-green-700');
+        element.classList.add('text-blue-700');
+        icon.innerHTML = '<circle cx="12" cy="12" r="10"></circle>';
+        icon.classList.remove('text-green-400');
+        icon.classList.add('text-gray-400');
+      }
+    }
+    // Form submission with loading state
+    document.getElementById('passwordForm').addEventListener('submit', function() {
+      const submitBtn = document.getElementById('submitBtn');
+      const submitText = document.getElementById('submit-text');
+      const submitIcon = document.getElementById('submit-icon');
+      const loadingSpinner = document.getElementById('loading-spinner');
+      submitBtn.disabled = true;
+      submitText.textContent = 'Setting password...';
+      submitIcon.classList.add('hidden');
+      loadingSpinner.classList.remove('hidden');
+    });
+  </script>
+</body>
+</html>