central-auth-js-sdk 1.0.10

package/ui/screens/email-verify.js

@@ -0,0 +1,96 @@
+/**
+ * Email Verification Screen — OTP + First/Last name
+ * v2.0 — warm, modern design
+ */
+
+const MAIL_CHECK = '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 createEmailVerifyScreen(email, onNext, onBack, prefill = {}) {
+  const wrap = document.createElement('div');
+  wrap.className = 'wf-screen';
+
+  const otpInputs = Array(6).fill(0).map((_, i) => `
+    <input type="text" inputmode="numeric" maxlength="1" class="wf-otp-input" id="wf-email-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_CHECK}"/></svg>
+      </div>
+      <h2 class="wf-screen-title">Verify your email</h2>
+      <p class="wf-screen-desc">We sent a 6-digit code to <span class="wf-highlight">${email}</span></p>
+    </div>
+    <form class="wf-form" id="wf-email-verify-form">
+      <div class="wf-field">
+        <label class="wf-label">Verification code</label>
+        <div class="wf-otp-row">${otpInputs}</div>
+      </div>
+      <div class="wf-row-2">
+        <div class="wf-field">
+          <label class="wf-label" for="wf-first-name">First name</label>
+          <input type="text" id="wf-first-name" placeholder="John" class="wf-input" required autocomplete="given-name" />
+        </div>
+        <div class="wf-field">
+          <label class="wf-label" for="wf-last-name">Last name</label>
+          <input type="text" id="wf-last-name" placeholder="Doe" class="wf-input" required autocomplete="family-name" />
+        </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 &amp; 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>
+    <p class="wf-footer-link">
+      Didn't receive the code? <button type="button" class="wf-link">Resend</button>
+    </p>
+  `;
+
+  const form = wrap.querySelector('#wf-email-verify-form');
+  const otpEls = wrap.querySelectorAll('.wf-otp-input');
+  const firstName = wrap.querySelector('#wf-first-name');
+  const lastName = wrap.querySelector('#wf-last-name');
+
+  if (prefill.firstName) firstName.value = prefill.firstName;
+  if (prefill.lastName) lastName.value = prefill.lastName;
+
+  function handleOtpPaste(e) {
+    e.preventDefault();
+    const pasted = (e.clipboardData || window.clipboardData).getData('text');
+    const digits = pasted.replace(/\D/g, '').slice(0, 6).split('');
+    digits.forEach((d, i) => { if (otpEls[i]) otpEls[i].value = d; });
+    const nextIdx = Math.min(digits.length, 5);
+    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 < 5) 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 === 6 && firstName.value.trim() && lastName.value.trim()) {
+      onNext({ otp: code, firstName: firstName.value.trim(), lastName: lastName.value.trim() });
+    }
+  });
+
+  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+
+  return wrap;
+}

package/ui/screens/face-registration.js

@@ -0,0 +1,125 @@
+/**
+ * Face Registration Screen — Camera capture for biometric verification
+ * v2.0 — warm, modern design
+ */
+
+const SCAN_FACE = 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z';
+const CAMERA_ICON = 'M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z M15 13a3 3 0 11-6 0 3 3 0 016 0z M19 10v1a1 1 0 01-1 1H6a1 1 0 01-1-1v-1';
+const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
+const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+const ROTATE_ICON = 'M1 4v6h6M23 20v-6h-6';
+
+export function createFaceRegistrationScreen(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="${SCAN_FACE}"/></svg>
+      </div>
+      <h2 class="wf-screen-title">Face registration</h2>
+      <p class="wf-screen-desc">Capture your face for biometric verification</p>
+    </div>
+    <div class="wf-face-area">
+      <div class="wf-camera-view" id="wf-camera-view">
+        <div class="wf-camera-placeholder" id="wf-camera-placeholder">
+          <div class="wf-camera-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${CAMERA_ICON}"/></svg>
+          </div>
+          <p>Position your face within the frame</p>
+          <button type="button" class="wf-btn wf-btn-primary wf-btn-lg" id="wf-enable-camera">Enable Camera</button>
+        </div>
+        <video id="wf-video" class="wf-video hidden" autoplay playsinline muted></video>
+        <img id="wf-captured" class="wf-captured hidden" alt="Captured face" />
+        <div class="wf-face-overlay hidden" id="wf-face-overlay"></div>
+      </div>
+      <canvas id="wf-canvas" class="hidden"></canvas>
+      <p class="wf-error hidden" id="wf-camera-error"></p>
+      <div class="wf-face-actions">
+        <button type="button" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-full hidden" id="wf-capture-btn">
+          <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="${CAMERA_ICON}"/></svg>
+          Capture Photo
+        </button>
+        <div class="wf-btn-row hidden" id="wf-captured-actions">
+          <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" id="wf-retake-btn">
+            <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="${ROTATE_ICON}"/></svg>
+            Retake
+          </button>
+          <button type="button" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex" id="wf-face-continue">
+            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>
+        <div class="wf-btn-row" id="wf-back-only">
+          <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>
+        </div>
+      </div>
+    </div>
+  `;
+
+  const placeholder = wrap.querySelector('#wf-camera-placeholder');
+  const video = wrap.querySelector('#wf-video');
+  const captured = wrap.querySelector('#wf-captured');
+  const overlay = wrap.querySelector('#wf-face-overlay');
+  const canvas = wrap.querySelector('#wf-canvas');
+  const errorEl = wrap.querySelector('#wf-camera-error');
+  const enableBtn = wrap.querySelector('#wf-enable-camera');
+  const captureBtn = wrap.querySelector('#wf-capture-btn');
+  const capturedActions = wrap.querySelector('#wf-captured-actions');
+  const backOnly = wrap.querySelector('#wf-back-only');
+
+  let stream = null;
+
+  async function startCamera() {
+    try {
+      errorEl.classList.add('hidden');
+      errorEl.textContent = '';
+      stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
+      video.srcObject = stream;
+      video.classList.remove('hidden');
+      placeholder.classList.add('hidden');
+      overlay.classList.remove('hidden');
+      captureBtn.classList.remove('hidden');
+      backOnly.classList.add('hidden');
+    } catch {
+      errorEl.textContent = 'Camera access denied. Please enable camera permissions.';
+      errorEl.classList.remove('hidden');
+    }
+  }
+
+  function captureImage() {
+    const ctx = canvas.getContext('2d');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    ctx.drawImage(video, 0, 0);
+    const dataUrl = canvas.toDataURL('image/jpeg');
+    stream?.getTracks().forEach((t) => t.stop());
+    stream = null;
+    video.classList.add('hidden');
+    overlay.classList.add('hidden');
+    captureBtn.classList.add('hidden');
+    captured.src = dataUrl;
+    captured.classList.remove('hidden');
+    capturedActions.classList.remove('hidden');
+  }
+
+  function retake() {
+    captured.classList.add('hidden');
+    capturedActions.classList.add('hidden');
+    captured.src = '';
+    startCamera();
+  }
+
+  enableBtn.addEventListener('click', startCamera);
+  captureBtn.addEventListener('click', captureImage);
+  wrap.querySelector('#wf-retake-btn').addEventListener('click', retake);
+  wrap.querySelector('#wf-face-continue').addEventListener('click', () => {
+    onNext(captured.src || null);
+  });
+  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+
+  return wrap;
+}

package/ui/screens/index.js

@@ -0,0 +1,67 @@
+/**
+ * Screen factory - Renders the appropriate screen for current step
+ * Callbacks are async API handlers (called from index.js)
+ */
+
+import { STEPS } from '../../core/flow.js';
+import { createEmailEntryScreen } from './email-entry.js';
+import { createEmailVerifyScreen } from './email-verify.js';
+import { createMobileEntryScreen } from './mobile-entry.js';
+import { createMobileVerifyScreen } from './mobile-verify.js';
+import { createPasswordSetupScreen } from './password-setup.js';
+import { createFaceRegistrationScreen } from './face-registration.js';
+import { createSuccessScreen } from './success.js';
+
+export function createScreen(step, state, flow, callbacks) {
+  const {
+    onEmailSubmit,
+    onEmailVerify,
+    onMobileSubmit,
+    onMobileVerify,
+    onPasswordSubmit,
+    onFaceSubmit,
+    onBack,
+    onSocialSignUp,
+    onContinue,
+    onSwitchToLogin,
+    onBackToApp,
+  } = callbacks;
+
+  switch (step) {
+    case STEPS.EMAIL:
+      return createEmailEntryScreen(onEmailSubmit, onSocialSignUp, onSwitchToLogin, onBackToApp);
+
+    case STEPS.EMAIL_VERIFY:
+      return createEmailVerifyScreen(
+        state.get('email'),
+        (data) => onEmailVerify(data),
+        onBack,
+        { firstName: state.get('firstName') || '', lastName: state.get('lastName') || '' }
+      );
+
+    case STEPS.MOBILE:
+      return createMobileEntryScreen(onMobileSubmit, onBack);
+
+    case STEPS.MOBILE_VERIFY:
+      return createMobileVerifyScreen(
+        state.get('mobile'),
+        (otp) => onMobileVerify(otp),
+        onBack
+      );
+
+    case STEPS.PASSWORD:
+      return createPasswordSetupScreen(onPasswordSubmit, onBack);
+
+    case STEPS.FACE:
+      return createFaceRegistrationScreen(
+        (capture) => onFaceSubmit(capture),
+        onBack
+      );
+
+    case STEPS.SUCCESS:
+      return createSuccessScreen(typeof onContinue === 'function' ? onContinue : () => {});
+
+    default:
+      return document.createElement('div');
+  }
+}

package/ui/screens/login/entry.js

@@ -0,0 +1,63 @@
+/**
+ * Login entry — method picker (only enabled methods from config)
+ * v2.0 — warm, modern design
+ */
+
+const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
+const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+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 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.72c.127.96.361 1.903.7 2.81a2 2 0 010 2.78 12.84 12.84 0 00.7 2.81 2 2 0 010 2.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 FACE_ICON = 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z';
+
+function methodIcon(type) {
+  const attrs = 'viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
+  if (type === 'mail') return `<svg class="wf-login-method-icon" ${attrs}><path d="${MAIL_ICON}"/></svg>`;
+  if (type === 'phone') return `<svg class="wf-login-method-icon" ${attrs}><path d="${PHONE_ICON}"/></svg>`;
+  if (type === 'face') return `<svg class="wf-login-method-icon" ${attrs}><path d="${FACE_ICON}"/></svg>`;
+  if (type === 'google') return `<svg class="wf-login-method-icon" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>`;
+  if (type === 'microsoft') return `<svg class="wf-login-method-icon" viewBox="0 0 23 23"><rect x="1" y="1" width="10" height="10" fill="#F25022"/><rect x="12" y="1" width="10" height="10" fill="#7FBA00"/><rect x="1" y="12" width="10" height="10" fill="#00A4EF"/><rect x="12" y="12" width="10" height="10" fill="#FFB900"/></svg>`;
+  return '';
+}
+
+export function createLoginEntryScreen(methods, onSelectMethod, onSignUp, onBackToApp) {
+  const wrap = document.createElement('div');
+  wrap.className = 'wf-screen';
+
+  const methodButtons = methods.map((m) => `
+    <button type="button" class="wf-btn wf-btn-social wf-btn-lg wf-btn-full wf-login-method" data-method="${m.id}">
+      ${methodIcon(m.icon)}
+      <span>${m.label}</span>
+      <svg class="wf-icon-sm" style="margin-left:auto;opacity:0.4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
+    </button>
+  `).join('');
+
+  wrap.innerHTML = `
+    <div class="wf-screen-back"><button type="button" class="wf-btn wf-btn-ghost wf-btn-lg" id="wf-login-entry-back" aria-label="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> Back</button></div>
+    <div class="wf-screen-header">
+      <h2 class="wf-screen-title">Welcome back</h2>
+      <p class="wf-screen-desc">Choose how you'd like to sign in</p>
+    </div>
+    <div class="wf-login-methods">
+      ${methodButtons}
+    </div>
+    <p class="wf-footer-link">
+      Don't have an account? <button type="button" class="wf-link" data-action="signup">Sign up</button>
+    </p>
+  `;
+
+  wrap.querySelectorAll('[data-method]').forEach((btn) => {
+    btn.addEventListener('click', () => onSelectMethod(btn.dataset.method));
+  });
+
+  const signUpBtn = wrap.querySelector('[data-action="signup"]');
+  if (signUpBtn && typeof onSignUp === 'function') {
+    signUpBtn.addEventListener('click', () => onSignUp());
+  }
+
+  const backBtn = wrap.querySelector('#wf-login-entry-back');
+  if (backBtn && typeof onBackToApp === 'function') {
+    backBtn.addEventListener('click', () => onBackToApp());
+  }
+
+  return wrap;
+}

package/ui/screens/login/frs.js

@@ -0,0 +1,134 @@
+/**
+ * Login — Face verification (FRS) as second factor or email+face only
+ * v2.0 — warm, modern design
+ */
+
+const SCAN_FACE = 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z';
+const CAMERA_ICON = 'M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z M15 13a3 3 0 11-6 0 3 3 0 016 0z M19 10v1a1 1 0 01-1 1H6a1 1 0 01-1-1v-1';
+const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
+const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+const ROTATE_ICON = 'M1 4v6h6M23 20v-6h-6';
+
+export function createLoginFrsScreen(onNext, onBack, opts = {}) {
+  const { onSwitchToOtp, showOtpFallback } = opts;
+  const wrap = document.createElement('div');
+  wrap.className = 'wf-screen';
+
+  const otpFallbackHtml = showOtpFallback && typeof onSwitchToOtp === 'function'
+    ? `<p class="wf-footer-link" style="margin-top:0.5rem;">
+        No webcam? <button type="button" class="wf-link" data-action="switch-to-otp">Sign in with OTP instead</button>
+      </p>`
+    : '';
+
+  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="${SCAN_FACE}"/></svg>
+      </div>
+      <h2 class="wf-screen-title">Verify your face</h2>
+      <p class="wf-screen-desc">Capture your face to complete sign in</p>
+    </div>
+    <div class="wf-face-area">
+      <div class="wf-camera-view" id="wf-login-camera-view">
+        <div class="wf-camera-placeholder" id="wf-login-camera-placeholder">
+          <div class="wf-camera-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${CAMERA_ICON}"/></svg>
+          </div>
+          <p>Position your face within the frame</p>
+          <button type="button" class="wf-btn wf-btn-primary wf-btn-lg" id="wf-login-enable-camera">Enable Camera</button>
+        </div>
+        <video id="wf-login-video" class="wf-video hidden" autoplay playsinline muted></video>
+        <img id="wf-login-captured" class="wf-captured hidden" alt="Captured face" />
+        <div class="wf-face-overlay hidden" id="wf-login-face-overlay"></div>
+      </div>
+      <canvas id="wf-login-canvas" class="hidden"></canvas>
+      <p class="wf-error hidden" id="wf-login-camera-error"></p>
+      <div class="wf-face-actions">
+        <button type="button" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-full hidden" id="wf-login-capture-btn">
+          <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="${CAMERA_ICON}"/></svg>
+          Capture Photo
+        </button>
+        <div class="wf-btn-row hidden" id="wf-login-captured-actions">
+          <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" id="wf-login-retake-btn">
+            <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="${ROTATE_ICON}"/></svg>
+            Retake
+          </button>
+          <button type="button" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex" id="wf-login-face-continue">
+            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>
+        <div class="wf-btn-row" id="wf-login-back-only">
+          <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>
+        </div>
+      </div>
+      ${otpFallbackHtml}
+    </div>
+  `;
+
+  const placeholder = wrap.querySelector('#wf-login-camera-placeholder');
+  const video = wrap.querySelector('#wf-login-video');
+  const captured = wrap.querySelector('#wf-login-captured');
+  const overlay = wrap.querySelector('#wf-login-face-overlay');
+  const canvas = wrap.querySelector('#wf-login-canvas');
+  const errorEl = wrap.querySelector('#wf-login-camera-error');
+
+  let stream = null;
+
+  function startCamera() {
+    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
+      .then((s) => {
+        stream = s;
+        video.srcObject = s;
+        video.classList.remove('hidden');
+        placeholder.classList.add('hidden');
+        overlay.classList.remove('hidden');
+        wrap.querySelector('#wf-login-capture-btn').classList.remove('hidden');
+        errorEl.classList.add('hidden');
+      })
+      .catch(() => {
+        errorEl.textContent = 'Camera access denied. Please enable camera permissions.';
+        errorEl.classList.remove('hidden');
+      });
+  }
+
+  function captureImage() {
+    const ctx = canvas.getContext('2d');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    ctx.drawImage(video, 0, 0);
+    const dataUrl = canvas.toDataURL('image/jpeg');
+    stream?.getTracks().forEach((t) => t.stop());
+    stream = null;
+    video.classList.add('hidden');
+    overlay.classList.add('hidden');
+    wrap.querySelector('#wf-login-capture-btn').classList.add('hidden');
+    captured.src = dataUrl;
+    captured.classList.remove('hidden');
+    wrap.querySelector('#wf-login-captured-actions').classList.remove('hidden');
+  }
+
+  function retake() {
+    captured.classList.add('hidden');
+    captured.src = '';
+    wrap.querySelector('#wf-login-captured-actions').classList.add('hidden');
+    startCamera();
+  }
+
+  wrap.querySelector('#wf-login-enable-camera').addEventListener('click', startCamera);
+  wrap.querySelector('#wf-login-capture-btn').addEventListener('click', captureImage);
+  wrap.querySelector('#wf-login-retake-btn').addEventListener('click', retake);
+  wrap.querySelector('#wf-login-face-continue').addEventListener('click', () => {
+    onNext(captured.src || null);
+  });
+  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+
+  const switchToOtpBtn = wrap.querySelector('[data-action="switch-to-otp"]');
+  if (switchToOtpBtn && typeof onSwitchToOtp === 'function') {
+    switchToOtpBtn.addEventListener('click', () => onSwitchToOtp());
+  }
+
+  return wrap;
+}

package/ui/screens/login/identifier-email.js

@@ -0,0 +1,57 @@
+/**
+ * Login — Email identifier input (for email+password, email+otp, email+frs)
+ * 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 createLoginIdentifierEmailScreen(onNext, onBack, onSignUp) {
+  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="${MAIL_ICON}"/></svg>
+      </div>
+      <h2 class="wf-screen-title">Enter your email</h2>
+      <p class="wf-screen-desc">We'll use this to sign you in</p>
+    </div>
+    <form class="wf-form" id="wf-login-email-form">
+      <div class="wf-field">
+        <label class="wf-label" for="wf-login-email">Email address</label>
+        <div class="wf-input-wrap">
+          <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="${MAIL_ICON}"/></svg>
+          <input type="email" id="wf-login-email" placeholder="you@example.com" class="wf-input" required autocomplete="email" />
+        </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">
+          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>
+    <p class="wf-footer-link">
+      Don't have an account? <button type="button" class="wf-link" data-action="signup">Sign up</button>
+    </p>
+  `;
+
+  wrap.querySelector('#wf-login-email-form').addEventListener('submit', (e) => {
+    e.preventDefault();
+    const val = wrap.querySelector('#wf-login-email').value.trim();
+    if (val && val.includes('@')) onNext(val);
+  });
+  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+  const signUpBtn = wrap.querySelector('[data-action="signup"]');
+  if (signUpBtn && typeof onSignUp === 'function') {
+    signUpBtn.addEventListener('click', () => onSignUp());
+  }
+
+  return wrap;
+}

package/ui/screens/login/identifier-mobile.js

@@ -0,0 +1,85 @@
+/**
+ * Login — Mobile identifier input (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 010 2.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: 'India +91' },
+  { code: '1', label: 'United States +1' },
+  { code: '44', label: 'United Kingdom +44' },
+  { code: '61', label: 'Australia +61' },
+  { code: '81', label: 'Japan +81' },
+  { code: '49', label: 'Germany +49' },
+  { code: '33', label: 'France +33' },
+  { code: '86', label: 'China +86' },
+  { code: '971', label: 'UAE +971' },
+  { code: '65', label: 'Singapore +65' },
+  { code: '55', label: 'Brazil +55' },
+  { code: '52', label: 'Mexico +52' },
+];
+
+export function createLoginIdentifierMobileScreen(onNext, onBack, onSignUp) {
+  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">Enter your mobile number</h2>
+      <p class="wf-screen-desc">We'll use this to sign you in</p>
+    </div>
+    <form class="wf-form" id="wf-login-mobile-form">
+      <div class="wf-field">
+        <label class="wf-label" for="wf-login-mobile">Mobile number</label>
+        <div class="wf-mobile-row">
+          <select id="wf-login-mobile-country" class="wf-input wf-country-select" aria-label="Country code">
+            ${countryOptions}
+          </select>
+          <input type="tel" id="wf-login-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">
+          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>
+    <p class="wf-footer-link">
+      Don't have an account? <button type="button" class="wf-link" data-action="signup">Sign up</button>
+    </p>
+  `;
+
+  const form = wrap.querySelector('#wf-login-mobile-form');
+  const countrySelect = wrap.querySelector('#wf-login-mobile-country');
+  const input = wrap.querySelector('#wf-login-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);
+  const signUpBtn = wrap.querySelector('[data-action="signup"]');
+  if (signUpBtn && typeof onSignUp === 'function') {
+    signUpBtn.addEventListener('click', () => onSignUp());
+  }
+
+  return wrap;
+}