@omega.js/web 0.1.0

package/core/js/libs/auth/forms.js

@@ -0,0 +1,206 @@
+// Form wiring for the three auth pages: FormManager setup, shared validation,
+// the provider-aware submit handler, and the signup consent UI.
+
+// Libraries
+import { FormManager } from '@omega.js/client/modules/form-manager.js';
+import omega from '@omega.js/client';
+import { event } from '__main_assets__/js/libs/analytics.js';
+import { handleEmailSignin, handleEmailSignup, handlePasswordReset } from '__main_assets__/js/libs/auth/email.js';
+import { signInWithProvider } from '__main_assets__/js/libs/auth/oauth.js';
+import { clearOrphanMarkers } from '__main_assets__/js/libs/auth/orphan.js';
+
+function stateChangeHandler(ctx, { state }) {
+  // Hide initializing spinners and show hidden elements when state changes from initializing
+  if (state !== 'initializing') {
+    ctx.formManager.$form.querySelectorAll('.form-initializing-spinner').forEach(($el) => {
+      $el.classList.add('d-none');
+    });
+  }
+}
+
+// Shared validation for signin/signup forms - only validate when email provider is selected
+function validateEmailProvider({ data, setError, $submitButton }) {
+  const provider = $submitButton?.getAttribute('data-provider');
+
+  if (provider === 'email') {
+    if (!data.email?.trim()) {
+      setError('email', 'Email is required');
+    }
+    if (!data.password) {
+      setError('password', 'Password is required');
+    }
+  }
+}
+
+// Shared submit handler factory for signin/signup forms
+function createAuthSubmitHandler(ctx, action, emailHandler) {
+  return async ({ data, $submitButton }) => {
+    const provider = $submitButton?.getAttribute('data-provider');
+
+    // Capture consent BEFORE any Firebase call. On signup pages the checkbox state
+    // must survive any post-auth redirect so @omega.js/backend's /user/signup can write it to the doc.
+    // Read from FormManager-collected data on signup; ignored on signin (no checkboxes there).
+    if (action === 'signup') {
+      captureSignupConsent(data);
+    }
+
+    if (provider === 'email') {
+      await emailHandler(ctx, data);
+    } else if (provider) {
+      await signInWithProvider(ctx, provider, action);
+    }
+  };
+}
+
+// Validate that the user has agreed to the legal terms. Instead of highlighting the
+// single legal checkbox in red (which subtly frames it as "the one that matters"),
+// we surround BOTH checkboxes with a red outline and surface a top-level banner.
+// This frames consent as a unit the user is confirming, not a hurdle to clear.
+function validateConsent({ data, setError }) {
+  if (data?.consentLegal === true) {
+    return;
+  }
+
+  // Phantom field name — blocks submit (FormManager checks errorCount > 0) but
+  // skips rendering since no DOM field matches '__consent'. The visual treatment
+  // is the wrapper outline + inline error message below.
+  setError('__consent', 'Agreement to Terms required');
+
+  const $group = document.getElementById('consent-group');
+  if ($group) {
+    $group.classList.add('is-invalid');
+  }
+
+  const $err = document.getElementById('consent-error');
+  if ($err) {
+    $err.textContent = `Please select "I agree" to the Terms of Service and Privacy Policy.`;
+    $err.classList.remove('d-none');
+  }
+}
+
+// Clear the consent error styling once the user starts interacting with the boxes.
+// Runs on every change to either checkbox.
+function clearConsentError() {
+  const $group = document.getElementById('consent-group');
+  if ($group) {
+    $group.classList.remove('is-invalid');
+  }
+  const $err = document.getElementById('consent-error');
+  if ($err) {
+    $err.classList.add('d-none');
+  }
+}
+
+// Read the consent checkboxes and stash to storage. Survives the post-signup redirect
+// the same way attribution does. @omega.js/backend's /user/signup route picks it up via sendUserSignupMetadata.
+function captureSignupConsent(data) {
+  // A deliberate signup voids any orphan marker this browser holds
+  // ([#703](https://github.com/Omega-JS-Stack/omega/issues/703)): the failed-delete
+  // backstop deletes a marked account at auth-ready, and somebody agreeing to the
+  // terms for the account they are about to sign into must never meet it. Cleared
+  // BEFORE the Firebase call, like the stash below.
+  clearOrphanMarkers();
+
+  const legalLabel = document.querySelector('label[for="consent-legal"]')?.innerText?.trim() || null;
+  const marketingLabel = document.querySelector('label[for="consent-marketing"]')?.innerText?.trim() || null;
+
+  omega.storage().set('consent', {
+    legal: {
+      granted: data?.consentLegal === true || data?.consentLegal === 'on',
+      text: legalLabel,
+    },
+    marketing: {
+      granted: data?.consentMarketing === true || data?.consentMarketing === 'on',
+      text: marketingLabel,
+    },
+  });
+}
+
+function buildFormManager(ctx, { submittingText, submittedText }) {
+  const formManager = new FormManager('#auth-form', {
+    autoReady: false, // The boot sequence calls ready() after checking redirect result
+    allowResubmit: false,
+    warnOnUnsavedChanges: false,
+    submittingText,
+    submittedText,
+  });
+  ctx.formManager = formManager;
+  formManager.on('statechange', (event) => stateChangeHandler(ctx, event));
+  return formManager;
+}
+
+export function initializeSigninForm(ctx) {
+  const formManager = buildFormManager(ctx, {
+    submittingText: 'Signing in...',
+    submittedText: 'Signed In!',
+  });
+
+  formManager.on('validation', validateEmailProvider);
+  formManager.on('submit', createAuthSubmitHandler(ctx, 'signin', handleEmailSignin));
+}
+
+export function initializeSignupForm(ctx) {
+  const formManager = buildFormManager(ctx, {
+    submittingText: 'Creating account...',
+    submittedText: 'Account Created!',
+  });
+
+  formManager.on('validation', validateEmailProvider);
+  formManager.on('validation', validateConsent);
+  formManager.on('submit', createAuthSubmitHandler(ctx, 'signup', handleEmailSignup));
+
+  // Clear consent error styling when either checkbox is toggled
+  document.getElementById('consent-legal')?.addEventListener('change', clearConsentError);
+  document.getElementById('consent-marketing')?.addEventListener('change', clearConsentError);
+
+  trackSignupStarted(formManager);
+}
+
+/**
+ * The funnel ENTRY (#328 inventory gap 1: only completed signups fired, so the
+ * drop-off between reaching the form and finishing it was invisible).
+ *
+ * The honest entry is the first real ENGAGEMENT with the form — the first
+ * keystroke in a field, or the press of a provider button — not the page view
+ * (a bounce is not a started signup) and not every keystroke. One fire per page
+ * view: the flag is what makes it one, since two listeners each carrying
+ * `{ once: true }` would fire twice for a visitor who types and then clicks.
+ *
+ * @param {object} formManager - the signup form's FormManager
+ */
+function trackSignupStarted(formManager) {
+  const $form = formManager.$form;
+
+  if (!$form) {
+    return;
+  }
+
+  let started = false;
+
+  const start = (domEvent) => {
+    if (started) {
+      return;
+    }
+
+    started = true;
+
+    // The provider button carries the method; typing in the form is the email one.
+    const provider = domEvent?.target?.closest?.('[data-provider]')?.getAttribute('data-provider');
+
+    event('sign_up_started', {
+      method: provider || 'email',
+    });
+  };
+
+  $form.addEventListener('input', start);
+  $form.addEventListener('click', start);
+}
+
+export function initializeResetForm(ctx) {
+  const formManager = buildFormManager(ctx, {
+    submittingText: 'Sending...',
+    submittedText: 'Email Sent!',
+  });
+
+  formManager.on('submit', ({ data }) => handlePasswordReset(ctx, data));
+}

package/core/js/libs/auth/index.js

@@ -0,0 +1,181 @@
+// Auth pages orchestrator — required by /signin, /signup, and /reset (the
+// logic is mostly shared). Boot order matters and is the whole job of this
+// file; the flows live in focused modules:
+//
+//   forms.js           FormManager wiring, validation, consent UI
+//   email.js           email/password signin, signup, reset
+//   oauth.js           provider popup/redirect flows + accidental-signup reversal
+//   session-params.js  ?authSignout / ?authCustomToken / ?authPrivateKey / authReturnUrl / subdomain policy
+//   errors.js          Firebase error translation (pure)
+//   tracking.js        GA4/FB/TikTok auth events
+//
+// The password eye is NOT wired here any more: it is a click trigger on the
+// shared registry (#16), registered once by the global module.
+
+// Libraries
+import omega from '@omega.js/client';
+import { initializeSigninForm, initializeSignupForm, initializeResetForm } from '__main_assets__/js/libs/auth/forms.js';
+import { handleRedirectResult, shouldUseAuthPopup } from '__main_assets__/js/libs/auth/oauth.js';
+import { handleAuthSignout, handleCustomTokenSignin, handlePrivateKeySignin, updateAuthReturnUrl, checkSubdomainAuth } from '__main_assets__/js/libs/auth/session-params.js';
+import { createLogger } from '__main_assets__/js/libs/logger.js';
+
+/* @dev-only:start */
+// The auth pages' dev control lives in the dev palette (#234, #342). The import
+// is inside the block, so production strips it with the section.
+import { registerDevSection } from '__main_assets__/js/core/dev-sections.js';
+/* @dev-only:end */
+
+const logger = createLogger('auth:pages');
+
+// Module
+export default function () {
+  // Shared flow context: the active FormManager (set by forms.js) and the
+  // popup-vs-redirect choice, passed explicitly to every flow that needs it.
+  const ctx = {
+    formManager: null,
+    useAuthPopup: shouldUseAuthPopup(),
+  };
+
+  // Handle DOM ready
+  omega.dom().ready()
+  .then(async () => {
+    // Log
+    logger.log('Initialized. useAuthPopup:', ctx.useAuthPopup);
+
+    /* @dev-only:start */
+    // Registered FIRST: every path below can return early, and the palette must
+    // still offer the simulation on a page that bailed out.
+    if (omega.isDevelopment()) {
+      // Its own id, not the palette's built-in `auth` — that section is the
+      // "Signed in as" readout, and a redirect simulator does not belong under it.
+      registerDevSection('oauth', {
+        title: 'OAuth',
+        buildNode: buildOauthDevSection,
+      });
+    }
+    /* @dev-only:end */
+
+    // Check for authSignout parameter first
+    await handleAuthSignout();
+
+    // Check for authCustomToken parameter (admin impersonation / custom token sign-in)
+    const customTokenHandled = await handleCustomTokenSignin();
+    if (customTokenHandled) {
+      return;
+    }
+
+    // Check for authPrivateKey parameter (durable-url sign-in: OBS docks, kiosks)
+    const privateKeyHandled = await handlePrivateKeySignin();
+    if (privateKeyHandled) {
+      return;
+    }
+
+    // Initialize the appropriate form based on the page (with autoReady: false)
+    initializePageForm();
+
+    // No form matched (warned above) — bail instead of crashing on null
+    if (!ctx.formManager) {
+      return;
+    }
+
+    // Disable form fields while checking for OAuth redirect result.
+    // State stays 'initializing' so spinners remain visible during the check.
+    // formManager.ready() transitions to 'ready' and re-enables if no redirect is found.
+    ctx.formManager._setDisabled(true);
+
+    // Check for redirect result from OAuth providers BEFORE enabling form
+    // This prevents the form from appearing interactive while redirect is processing
+    const hasRedirectResult = await handleRedirectResult(ctx);
+
+    // Log
+    logger.log('hasRedirectResult:', hasRedirectResult);
+
+    // If redirect result was found, don't enable the form - user will be redirected
+    if (hasRedirectResult) {
+      return;
+    }
+
+    // Check subdomain auth restrictions and redirect if needed
+    if (checkSubdomainAuth()) {
+      return;
+    }
+
+    // No redirect pending - enable the form
+    ctx.formManager.ready();
+
+    // Update auth return URL in all auth-related links
+    updateAuthReturnUrl();
+  });
+
+  /* @dev-only:start */
+  /**
+   * The palette's OAuth section: rehearse a returning provider redirect without
+   * leaving for a provider. A URL param and a navigation to apply it, because
+   * handleRedirectResult reads it once, on page init — the same reason the
+   * checkout's controls navigate.
+   */
+  function buildOauthDevSection(doc) {
+    const SIMULATE_PARAM = '_dev_simulateRedirect';
+
+    const wrap = doc.createElement('div');
+    wrap.className = 'omega-devbar__fields';
+
+    const select = doc.createElement('select');
+    select.className = 'omega-devbar__select';
+    select.setAttribute('aria-label', 'Simulate an OAuth redirect');
+    [
+      ['', '(no simulation)'],
+      ['signin', 'Returning user'],
+      ['signup', 'New user'],
+      ['error', 'Credential conflict'],
+    ].forEach(([value, label]) => {
+      const option = doc.createElement('option');
+      option.value = value;
+      option.textContent = label;
+      select.appendChild(option);
+    });
+    select.value = new URLSearchParams(window.location.search).get(SIMULATE_PARAM) || '';
+
+    const apply = doc.createElement('button');
+    apply.type = 'button';
+    apply.className = 'omega-devbar__btn';
+    apply.textContent = 'Apply & reload';
+    apply.addEventListener('click', () => {
+      const next = new URLSearchParams(window.location.search);
+      if (select.value) {
+        next.set(SIMULATE_PARAM, select.value);
+      } else {
+        next.delete(SIMULATE_PARAM);
+      }
+      window.location.search = next.toString();
+    });
+
+    wrap.append(select, apply);
+
+    return wrap;
+  }
+  /* @dev-only:end */
+
+  // Initialize the form based on current page
+  function initializePageForm() {
+    // page.url carries a trailing slash ('/signin/') and may carry a locale
+    // prefix ('/es/signin/') — match on the final segment. Safe because this
+    // module is only ever imported by the auth pages themselves.
+    const pagePath = (document.documentElement.getAttribute('data-page-path') || '').replace(/\/+$/, '');
+
+    if (!pagePath) {
+      logger.warn('No data-page-path attribute found on HTML element');
+      return;
+    }
+
+    if (pagePath.endsWith('/signin')) {
+      initializeSigninForm(ctx);
+    } else if (pagePath.endsWith('/signup')) {
+      initializeSignupForm(ctx);
+    } else if (pagePath.endsWith('/reset')) {
+      initializeResetForm(ctx);
+    } else {
+      logger.warn(`Unrecognized auth page path: ${pagePath}`);
+    }
+  }
+}