central-auth-js-sdk 1.0.10

package/ui/screens/login/index.js

@@ -0,0 +1,103 @@
+/**
+ * Login screen factory — renders screen for current login step
+ */
+
+import { LOGIN_STEPS } from '../../../core/login-flow.js';
+import { LOGIN_METHODS } from '../../../core/login-config.js';
+import { getEnabledLoginMethods } from '../../../core/login-config.js';
+import { createLoginEntryScreen } from './entry.js';
+import { createLoginIdentifierEmailScreen } from './identifier-email.js';
+import { createLoginIdentifierMobileScreen } from './identifier-mobile.js';
+import { createLoginPasswordScreen } from './password.js';
+import { createLoginOtpScreen } from './otp.js';
+import { createLoginFrsScreen } from './frs.js';
+import { createLoginSuccessScreen } from './success.js';
+
+export function createLoginScreen(stepId, flow, state, config, handlers) {
+  const {
+    onIdentifierEmail,
+    onIdentifierMobile,
+    onPassword,
+    onOtp,
+    onFrs,
+    onSuccessContinue,
+    onBack,
+    onBackToApp,
+    onSelectMethod,
+    onSocialRedirect,
+    onSignUp,
+    onSwitchToOtp,
+  } = handlers;
+
+  const enabledMethods = getEnabledLoginMethods(config);
+  const isFirstScreenSingleMethod = enabledMethods.length === 1;
+
+  switch (stepId) {
+    case LOGIN_STEPS.METHOD_SELECT: {
+      const methods = enabledMethods;
+      return createLoginEntryScreen(
+        methods,
+        (methodId) => {
+          if (methodId === LOGIN_METHODS.SOCIAL_GOOGLE || methodId === LOGIN_METHODS.SOCIAL_MICROSOFT) {
+            onSocialRedirect(methodId === LOGIN_METHODS.SOCIAL_GOOGLE ? 'google' : 'microsoft');
+            return;
+          }
+          onSelectMethod(methodId);
+        },
+        onSignUp,
+        onBackToApp
+      );
+    }
+
+    case LOGIN_STEPS.IDENTIFIER_EMAIL:
+      return createLoginIdentifierEmailScreen(
+        (email) => { state.set('identifier', email); onIdentifierEmail(email); },
+        isFirstScreenSingleMethod ? onBackToApp : onBack,
+        onSignUp
+      );
+
+    case LOGIN_STEPS.IDENTIFIER_MOBILE:
+      return createLoginIdentifierMobileScreen(
+        (mobile) => { state.set('identifier', mobile); onIdentifierMobile(mobile); },
+        isFirstScreenSingleMethod ? onBackToApp : onBack,
+        onSignUp
+      );
+
+    case LOGIN_STEPS.PASSWORD: {
+      const identifier = state.get('identifier') || '';
+      return createLoginPasswordScreen(
+        identifier,
+        (password) => { state.set('password', password); onPassword(password); },
+        onBack
+      );
+    }
+
+    case LOGIN_STEPS.OTP: {
+      const identifier = state.get('identifier') || '';
+      const method = flow.currentMethod;
+      const otpLength = (method === LOGIN_METHODS.EMAIL_OTP) ? 6 : 4;
+      return createLoginOtpScreen(
+        identifier,
+        otpLength,
+        (otp) => { state.set('otp', otp); onOtp(otp); },
+        onBack
+      );
+    }
+
+    case LOGIN_STEPS.FRS:
+      return createLoginFrsScreen(
+        (dataUrl) => { state.set('faceCapture', dataUrl); onFrs(dataUrl); },
+        onBack,
+        {
+          onSwitchToOtp,
+          showOtpFallback: flow.currentMethod === LOGIN_METHODS.EMAIL_FRS,
+        }
+      );
+
+    case LOGIN_STEPS.SUCCESS:
+      return createLoginSuccessScreen(onSuccessContinue);
+
+    default:
+      return document.createElement('div');
+  }
+}

package/ui/screens/login/otp.js

@@ -0,0 +1,79 @@
+/**
+ * Login — OTP verification (email or mobile)
+ * v2.0 — warm, modern design
+ */
+
+const MAIL_ICON = 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z';
+const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
+const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+
+export function createLoginOtpScreen(identifier, otpLength = 4, onNext, onBack) {
+  const wrap = document.createElement('div');
+  wrap.className = 'wf-screen';
+
+  const otpInputs = Array(otpLength).fill(0).map((_, i) => `
+    <input type="text" inputmode="numeric" maxlength="1" class="wf-otp-input" id="wf-login-otp-${i}" data-idx="${i}" autocomplete="one-time-code" />
+  `).join('');
+
+  wrap.innerHTML = `
+    <div class="wf-screen-header">
+      <div class="wf-icon-box">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${MAIL_ICON}"/></svg>
+      </div>
+      <h2 class="wf-screen-title">Check your code</h2>
+      <p class="wf-screen-desc">We sent a ${otpLength}-digit code to <span class="wf-highlight">${identifier}</span></p>
+    </div>
+    <form class="wf-form" id="wf-login-otp-form">
+      <div class="wf-field">
+        <label class="wf-label">Verification code</label>
+        <div class="wf-otp-row">${otpInputs}</div>
+      </div>
+      <div class="wf-btn-row">
+        <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
+        </button>
+        <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex">
+          Verify
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
+        </button>
+      </div>
+    </form>
+    <p class="wf-footer-link">
+      Didn't receive the code? <button type="button" class="wf-link">Resend</button>
+    </p>
+  `;
+
+  const form = wrap.querySelector('#wf-login-otp-form');
+  const otpEls = wrap.querySelectorAll('.wf-otp-input');
+
+  function handleOtpPaste(e) {
+    e.preventDefault();
+    const pasted = (e.clipboardData || window.clipboardData).getData('text');
+    const digits = pasted.replace(/\D/g, '').slice(0, otpLength).split('');
+    digits.forEach((d, i) => { if (otpEls[i]) otpEls[i].value = d; });
+    const nextIdx = Math.min(digits.length, otpLength - 1);
+    if (otpEls[nextIdx]) otpEls[nextIdx].focus();
+  }
+
+  otpEls.forEach((el, i) => {
+    el.addEventListener('paste', handleOtpPaste);
+    el.addEventListener('input', (e) => {
+      const v = e.target.value.replace(/\D/g, '').slice(0, 1);
+      e.target.value = v;
+      if (v && i < otpLength - 1) otpEls[i + 1].focus();
+    });
+    el.addEventListener('keydown', (e) => {
+      if (e.key === 'Backspace' && !e.target.value && i > 0) otpEls[i - 1].focus();
+    });
+  });
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const code = [...otpEls].map((o) => o.value).join('');
+    if (code.length === otpLength) onNext(code);
+  });
+
+  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+
+  return wrap;
+}

package/ui/screens/login/password.js

@@ -0,0 +1,65 @@
+/**
+ * Login — Password input (for email+password, mobile+password)
+ * v2.0 — warm, modern design
+ */
+
+const LOCK_ICON = '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';
+const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
+const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+const EYE_ICON = 'M15 12a3 3 0 11-6 0 3 3 0 016 0z 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';
+const EYE_OFF_ICON = 'M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878a4.5 4.5 0 106.262 6.262M4.031 11.117A10.017 10.017 0 002.458 12c1.274 4.057 5.065 7 9.542 7 .532 0 1.054-.052 1.562-.151';
+
+export function createLoginPasswordScreen(identifierLabel, onNext, onBack) {
+  const wrap = document.createElement('div');
+  wrap.className = 'wf-screen';
+
+  wrap.innerHTML = `
+    <div class="wf-screen-header">
+      <div class="wf-icon-box">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${LOCK_ICON}"/></svg>
+      </div>
+      <h2 class="wf-screen-title">Enter your password</h2>
+      <p class="wf-screen-desc">Signing in as <span class="wf-highlight">${identifierLabel}</span></p>
+    </div>
+    <form class="wf-form" id="wf-login-password-form">
+      <div class="wf-field">
+        <label class="wf-label" for="wf-login-password">Password</label>
+        <div class="wf-input-wrap wf-input-password">
+          <svg class="wf-input-icon-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${LOCK_ICON}"/></svg>
+          <input type="password" id="wf-login-password" placeholder="Your password" class="wf-input" required autocomplete="current-password" />
+          <button type="button" class="wf-input-toggle" data-target="wf-login-password" aria-label="Toggle password">
+            <svg class="wf-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${EYE_ICON}"/></svg>
+            <svg class="wf-eye-off hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${EYE_OFF_ICON}"/></svg>
+          </button>
+        </div>
+      </div>
+      <div class="wf-btn-row">
+        <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
+        </button>
+        <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex">
+          Sign in
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
+        </button>
+      </div>
+    </form>
+  `;
+
+  wrap.querySelector('#wf-login-password-form').addEventListener('submit', (e) => {
+    e.preventDefault();
+    const p = wrap.querySelector('#wf-login-password').value;
+    if (p) onNext(p);
+  });
+
+  wrap.querySelector('.wf-input-toggle').addEventListener('click', () => {
+    const input = wrap.querySelector('#wf-login-password');
+    const isPass = input.type === 'password';
+    input.type = isPass ? 'text' : 'password';
+    wrap.querySelector('.wf-eye').classList.toggle('hidden', isPass);
+    wrap.querySelector('.wf-eye-off').classList.toggle('hidden', !isPass);
+  });
+
+  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+
+  return wrap;
+}

package/ui/screens/login/success.js

@@ -0,0 +1,32 @@
+/**
+ * Login success screen
+ * v2.0 — warm, modern design
+ */
+
+const CHECK_CIRCLE = 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z';
+const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+
+export function createLoginSuccessScreen(onContinue) {
+  const wrap = document.createElement('div');
+  wrap.className = 'wf-screen wf-screen-success';
+
+  wrap.innerHTML = `
+    <div class="wf-success-icon">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${CHECK_CIRCLE}"/></svg>
+    </div>
+    <div class="wf-screen-header">
+      <h2 class="wf-screen-title">You're signed in</h2>
+      <p class="wf-screen-desc">Welcome back. You can now continue to the application.</p>
+    </div>
+    <div class="wf-success-actions">
+      <button type="button" class="wf-btn wf-btn-success wf-btn-lg wf-btn-full" id="wf-login-success-continue">
+        Continue to application
+        <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
+      </button>
+    </div>
+  `;
+
+  wrap.querySelector('#wf-login-success-continue').addEventListener('click', () => onContinue && onContinue());
+
+  return wrap;
+}

package/ui/screens/mobile-entry.js

@@ -0,0 +1,79 @@
+/**
+ * Mobile Entry Screen — Add mobile number (country code + number)
+ * v2.0 — warm, modern design
+ */
+
+const PHONE_ICON = 'M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 0102.78 12.84 12.84 0 006 6 2 2 0 002.78 0 12.84 12.84 0 002.81-.7A2 2 0 0022 16.92z';
+const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
+const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+
+const COUNTRY_CODES = [
+  { code: '91', label: '+91' },
+  { code: '1', label: '+1' },
+  { code: '44', label: '+44' },
+  { code: '61', label: '+61' },
+  { code: '81', label: '+81' },
+  { code: '49', label: '+49' },
+  { code: '33', label: '+33' },
+  { code: '86', label: '+86' },
+  { code: '971', label: '+971' },
+  { code: '65', label: '+65' },
+  { code: '55', label: '+55' },
+  { code: '52', label: '+52' },
+];
+
+export function createMobileEntryScreen(onNext, onBack) {
+  const wrap = document.createElement('div');
+  wrap.className = 'wf-screen';
+
+  const countryOptions = COUNTRY_CODES.map((c) =>
+    `<option value="${c.code}"${c.code === '91' ? ' selected' : ''}>${c.label}</option>`
+  ).join('');
+
+  wrap.innerHTML = `
+    <div class="wf-screen-header">
+      <div class="wf-icon-box">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${PHONE_ICON}"/></svg>
+      </div>
+      <h2 class="wf-screen-title">Add your mobile number</h2>
+      <p class="wf-screen-desc">We'll send a verification code to confirm this number</p>
+    </div>
+    <form class="wf-form" id="wf-mobile-form">
+      <div class="wf-field">
+        <label class="wf-label" for="wf-mobile">Mobile number</label>
+        <div class="wf-mobile-row">
+          <select id="wf-mobile-country" class="wf-input wf-country-select" aria-label="Country code">
+            ${countryOptions}
+          </select>
+          <input type="tel" id="wf-mobile" placeholder="98765 43210" class="wf-input wf-mobile-input" inputmode="numeric" required autocomplete="tel" />
+        </div>
+      </div>
+      <div class="wf-btn-row">
+        <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
+        </button>
+        <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex">
+          Send Code
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
+        </button>
+      </div>
+    </form>
+  `;
+
+  const form = wrap.querySelector('#wf-mobile-form');
+  const countrySelect = wrap.querySelector('#wf-mobile-country');
+  const input = wrap.querySelector('#wf-mobile');
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const digits = input.value.trim().replace(/\D/g, '');
+    if (digits.length >= 10) {
+      const full = '+' + countrySelect.value + digits;
+      onNext(full);
+    }
+  });
+
+  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+
+  return wrap;
+}

package/ui/screens/mobile-verify.js

@@ -0,0 +1,79 @@
+/**
+ * Mobile Verification Screen — OTP entry
+ * v2.0 — warm, modern design
+ */
+
+const SMARTPHONE_ICON = 'M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z';
+const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
+const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+
+export function createMobileVerifyScreen(mobile, onNext, onBack) {
+  const wrap = document.createElement('div');
+  wrap.className = 'wf-screen';
+
+  const otpInputs = Array(4).fill(0).map((_, i) => `
+    <input type="text" inputmode="numeric" maxlength="1" class="wf-otp-input" id="wf-mobile-otp-${i}" data-idx="${i}" autocomplete="one-time-code" />
+  `).join('');
+
+  wrap.innerHTML = `
+    <div class="wf-screen-header">
+      <div class="wf-icon-box">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${SMARTPHONE_ICON}"/></svg>
+      </div>
+      <h2 class="wf-screen-title">Verify your mobile</h2>
+      <p class="wf-screen-desc">Enter the code sent to <span class="wf-highlight">${mobile}</span></p>
+    </div>
+    <form class="wf-form" id="wf-mobile-verify-form">
+      <div class="wf-field">
+        <label class="wf-label">Verification code</label>
+        <div class="wf-otp-row">${otpInputs}</div>
+      </div>
+      <div class="wf-btn-row">
+        <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
+        </button>
+        <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex">
+          Verify
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
+        </button>
+      </div>
+    </form>
+    <p class="wf-footer-link">
+      Didn't receive the code? <button type="button" class="wf-link">Resend</button>
+    </p>
+  `;
+
+  const form = wrap.querySelector('#wf-mobile-verify-form');
+  const otpEls = wrap.querySelectorAll('.wf-otp-input');
+
+  function handleOtpPaste(e) {
+    e.preventDefault();
+    const pasted = (e.clipboardData || window.clipboardData).getData('text');
+    const digits = pasted.replace(/\D/g, '').slice(0, 4).split('');
+    digits.forEach((d, i) => { if (otpEls[i]) otpEls[i].value = d; });
+    const nextIdx = Math.min(digits.length, 3);
+    if (otpEls[nextIdx]) otpEls[nextIdx].focus();
+  }
+
+  otpEls.forEach((el, i) => {
+    el.addEventListener('paste', handleOtpPaste);
+    el.addEventListener('input', (e) => {
+      const v = e.target.value.replace(/\D/g, '').slice(0, 1);
+      e.target.value = v;
+      if (v && i < 3) otpEls[i + 1].focus();
+    });
+    el.addEventListener('keydown', (e) => {
+      if (e.key === 'Backspace' && !e.target.value && i > 0) otpEls[i - 1].focus();
+    });
+  });
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const code = [...otpEls].map((o) => o.value).join('');
+    if (code.length === 4) onNext(code);
+  });
+
+  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+
+  return wrap;
+}

package/ui/screens/password-setup.js

@@ -0,0 +1,137 @@
+/**
+ * Password Setup Screen — Create password with validation rules
+ * v2.0 — warm, modern design
+ */
+
+const LOCK_ICON = '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';
+const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
+const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+const EYE_ICON = 'M15 12a3 3 0 11-6 0 3 3 0 016 0z 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';
+const EYE_OFF_ICON = 'M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878a4.5 4.5 0 106.262 6.262M4.031 11.117A10.017 10.017 0 002.458 12c1.274 4.057 5.065 7 9.542 7 .532 0 1.054-.052 1.562-.151m-1.436-2.436A10.05 10.05 0 0112 5c4.478 0 8.268 2.943 9.542 7a10.02 10.02 0 01-.166 1.044';
+const CHECK_ICON = 'M5 13l4 4L19 7';
+const X_ICON = 'M6 18L18 6M6 6l12 12';
+
+const RULES = [
+  { label: 'At least 8 characters', test: (p) => p.length >= 8 },
+  { label: 'One uppercase letter', test: (p) => /[A-Z]/.test(p) },
+  { label: 'One number', test: (p) => /\d/.test(p) },
+  { label: 'One special character', test: (p) => /[^A-Za-z0-9]/.test(p) },
+];
+
+export function createPasswordSetupScreen(onNext, onBack) {
+  const wrap = document.createElement('div');
+  wrap.className = 'wf-screen';
+
+  wrap.innerHTML = `
+    <div class="wf-screen-header">
+      <div class="wf-icon-box">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${LOCK_ICON}"/></svg>
+      </div>
+      <h2 class="wf-screen-title">Create your password</h2>
+      <p class="wf-screen-desc">Choose a strong password to keep your account secure</p>
+    </div>
+    <form class="wf-form" id="wf-password-form">
+      <div class="wf-field">
+        <label class="wf-label" for="wf-password">Password</label>
+        <div class="wf-input-wrap wf-input-password">
+          <svg class="wf-input-icon-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${LOCK_ICON}"/></svg>
+          <input type="password" id="wf-password" placeholder="Create a password" class="wf-input" required autocomplete="new-password" />
+          <button type="button" class="wf-input-toggle" data-target="wf-password" aria-label="Toggle password visibility">
+            <svg class="wf-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${EYE_ICON}"/></svg>
+            <svg class="wf-eye-off hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${EYE_OFF_ICON}"/></svg>
+          </button>
+        </div>
+      </div>
+      <div class="wf-password-rules" id="wf-password-rules">
+        ${RULES.map((r) => `
+          <div class="wf-rule" data-rule="${r.label}">
+            <svg class="wf-rule-icon wf-rule-unmet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${X_ICON}"/></svg>
+            <svg class="wf-rule-icon wf-rule-met hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${CHECK_ICON}"/></svg>
+            <span>${r.label}</span>
+          </div>
+        `).join('')}
+      </div>
+      <div class="wf-field">
+        <label class="wf-label" for="wf-confirm">Confirm password</label>
+        <div class="wf-input-wrap wf-input-password">
+          <svg class="wf-input-icon-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${LOCK_ICON}"/></svg>
+          <input type="password" id="wf-confirm" placeholder="Confirm your password" class="wf-input" required autocomplete="new-password" />
+          <button type="button" class="wf-input-toggle" data-target="wf-confirm" aria-label="Toggle password visibility">
+            <svg class="wf-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${EYE_ICON}"/></svg>
+            <svg class="wf-eye-off hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${EYE_OFF_ICON}"/></svg>
+          </button>
+        </div>
+        <p class="wf-error hidden" id="wf-confirm-error">Passwords do not match</p>
+      </div>
+      <div class="wf-btn-row">
+        <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
+        </button>
+        <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex" id="wf-password-submit" disabled>
+          Continue
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
+        </button>
+      </div>
+    </form>
+  `;
+
+  const form = wrap.querySelector('#wf-password-form');
+  const passwordInput = wrap.querySelector('#wf-password');
+  const confirmInput = wrap.querySelector('#wf-confirm');
+  const submitBtn = wrap.querySelector('#wf-password-submit');
+  const confirmError = wrap.querySelector('#wf-confirm-error');
+
+  function updateRules() {
+    const p = passwordInput.value;
+    RULES.forEach((r) => {
+      const ruleEl = wrap.querySelector(`[data-rule="${r.label}"]`);
+      const unmet = ruleEl.querySelector('.wf-rule-unmet');
+      const met = ruleEl.querySelector('.wf-rule-met');
+      if (r.test(p)) {
+        unmet.classList.add('hidden');
+        met.classList.remove('hidden');
+      } else {
+        unmet.classList.remove('hidden');
+        met.classList.add('hidden');
+      }
+    });
+  }
+
+  function updateSubmit() {
+    const p = passwordInput.value;
+    const c = confirmInput.value;
+    const allMet = RULES.every((r) => r.test(p));
+    const matching = p === c && c.length > 0;
+    submitBtn.disabled = !allMet || !matching;
+    confirmError.classList.toggle('hidden', !c || matching);
+  }
+
+  passwordInput.addEventListener('input', () => {
+    updateRules();
+    updateSubmit();
+  });
+
+  confirmInput.addEventListener('input', updateSubmit);
+
+  wrap.querySelectorAll('.wf-input-toggle').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const target = wrap.querySelector(`#${btn.dataset.target}`);
+      const isPass = target.type === 'password';
+      target.type = isPass ? 'text' : 'password';
+      btn.querySelector('.wf-eye').classList.toggle('hidden', isPass);
+      btn.querySelector('.wf-eye-off').classList.toggle('hidden', !isPass);
+    });
+  });
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const p = passwordInput.value;
+    const c = confirmInput.value;
+    const allMet = RULES.every((r) => r.test(p));
+    if (allMet && p === c) onNext(p);
+  });
+
+  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+
+  return wrap;
+}

package/ui/screens/success.js

@@ -0,0 +1,34 @@
+/**
+ * SignUp Success Screen — Completion state
+ * v2.0 — warm, modern design
+ */
+
+const CHECK_CIRCLE = 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z';
+const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+
+export function createSuccessScreen(onContinue) {
+  const wrap = document.createElement('div');
+  wrap.className = 'wf-screen wf-screen-success';
+
+  wrap.innerHTML = `
+    <div class="wf-success-icon">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${CHECK_CIRCLE}"/></svg>
+    </div>
+    <div class="wf-screen-header">
+      <h2 class="wf-screen-title">You're all set!</h2>
+      <p class="wf-screen-desc">Your account has been created and verified successfully.<br>You can now sign in and start using the application.</p>
+    </div>
+    <div class="wf-success-actions">
+      <button type="button" class="wf-btn wf-btn-success wf-btn-lg wf-btn-full" data-action="continue">
+        Continue to application
+        <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
+      </button>
+    </div>
+  `;
+
+  wrap.querySelectorAll('[data-action="continue"]').forEach((btn) => {
+    btn.addEventListener('click', () => { if (typeof onContinue === 'function') onContinue(); });
+  });
+
+  return wrap;
+}