central-auth-js-sdk 1.0.10

package/signup.js

@@ -0,0 +1,315 @@
+/**
+ * Central Auth Sign-Up Flow — mount implementation
+ * Vanilla JavaScript; used by index.js and auth.js
+ */
+
+import { FlowController, STEPS } from './core/flow.js';
+import { StateManager } from './core/state.js';
+import { createApi, dataUrlToFile } from './core/api.js';
+import { resolveApiBaseUrl } from './core/env-config.js';
+import { createLayout } from './ui/layout.js';
+import { createScreen } from './ui/screens/index.js';
+import { applyTheme } from './theme.js';
+
+/** Parse URL query for OAuth callback params (login_token, provider) */
+function parseOAuthCallback() {
+  if (typeof window === 'undefined' || !window.location) return null;
+  const params = new URLSearchParams(window.location.search);
+  const loginToken = params.get('login_token');
+  const provider = (params.get('provider') || '').toLowerCase();
+  if (!loginToken) return null;
+  if (provider !== 'google' && provider !== 'microsoft') return { loginToken, provider: 'google' };
+  return { loginToken, provider };
+}
+
+/** Remove OAuth params from URL without reload */
+function clearOAuthParams() {
+  if (typeof window === 'undefined' || !window.history) return;
+  const params = new URLSearchParams(window.location.search);
+  params.delete('login_token');
+  params.delete('provider');
+  const clean = params.toString();
+  const url = window.location.pathname + (clean ? '?' + clean : '') + window.location.hash;
+  window.history.replaceState({}, '', url);
+}
+
+/** Map API next_step from POST /signup/start to our flow step */
+function mapNextStep(apiNextStep) {
+  if (!apiNextStep) return null;
+  const s = String(apiNextStep).toLowerCase().replace(/-/g, '_');
+  const map = {
+    email_verification: STEPS.EMAIL_VERIFY,
+    mobile_verification: STEPS.MOBILE,
+    mobile: STEPS.MOBILE,
+    mobile_verify: STEPS.MOBILE_VERIFY,
+    password: STEPS.PASSWORD,
+    password_set: STEPS.PASSWORD,
+    face: STEPS.FACE,
+    face_registration: STEPS.FACE,
+    fr_enrollment: STEPS.FACE,
+    complete: STEPS.SUCCESS,
+    completed: STEPS.SUCCESS,
+    success: STEPS.SUCCESS,
+  };
+  return map[s] || null;
+}
+
+/**
+ * Mount the signup flow into a container element
+ * @param {string|HTMLElement} container - CSS selector or DOM element
+ * @param {Object} options - env, appIdentifier (for social), enableFaceRegistration, onSignupComplete, onContinue
+ * @param {Function} [options.onSignupComplete] - Called when signup completes with (payload). Payload includes email, mobile, userId, and any token/fields from the final API response.
+ * @param {Function} [options.onContinue] - Called when user clicks Continue on the success screen (e.g. to unmount and redirect).
+ * @param {Function} [options.onSwitchToLogin] - Called when user clicks "Sign in" (e.g. unmount signup and start login + FRS).
+ * @returns {Object} - SDK instance with unmount, getState, etc.
+ */
+export function mount(container, options = {}) {
+  const el = typeof container === 'string' ? document.querySelector(container) : container;
+  if (!el) {
+    console.error('[Central Auth SDK] Container not found:', container);
+    return null;
+  }
+
+  const apiBaseUrl = options.apiBaseUrl ?? resolveApiBaseUrl(options);
+  const {
+    appIdentifier,
+    enableFaceRegistration = true,
+    theme,
+    onSignupComplete = null,
+    onContinue = null,
+    onSwitchToLogin = null,
+    onBack = null,
+  } = options;
+
+  const flow = new FlowController();
+  const state = new StateManager();
+  const api = createApi(apiBaseUrl);
+
+  const layout = createLayout(el, () => {});
+  const cleanupTheme = applyTheme(layout.root, theme);
+  const showError = (msg) => layout.showError(msg);
+
+  // SDK handles OAuth callback: if URL has login_token, resume social flow
+  const oauth = parseOAuthCallback();
+  if (oauth) {
+    state.set('loginToken', oauth.loginToken);
+    state.set('socialProvider', oauth.provider);
+    clearOAuthParams();
+    flow.setSocialFlow();
+  }
+
+  const isSocial = () => !!state.get('loginToken');
+
+  function buildSignupCompletePayload(apiResult) {
+    const all = state.getAll();
+    const payload = {
+      email: all.email,
+      mobile: all.mobile,
+      userId: all.userId,
+    };
+    if (apiResult && typeof apiResult === 'object' && apiResult !== null) {
+      Object.assign(payload, apiResult);
+    }
+    return payload;
+  }
+
+  async function handleEmailSubmit(data) {
+    state.clearError();
+    const email = typeof data === 'string' ? data : data.email;
+    if (typeof data === 'object') {
+      if (data.firstName) state.set('firstName', data.firstName);
+      if (data.lastName) state.set('lastName', data.lastName);
+    }
+    state.set('email', email);
+    try {
+      const res = await api.signupStart(email);
+      const apiStep = mapNextStep(res?.next_step);
+      if (res?.user_id) state.set('userId', res.user_id);
+      if (res?.mobile) state.set('mobile', res.mobile);
+      if (apiStep && apiStep !== STEPS.EMAIL && apiStep !== STEPS.EMAIL_VERIFY) {
+        flow.setStep(apiStep);
+        return;
+      }
+      if (apiStep === STEPS.EMAIL_VERIFY) {
+        flow.goNext();
+        return;
+      }
+      flow.goNext();
+    } catch (err) {
+      const msg = err?.data?.error || err?.message || 'Request failed';
+      state.set('error', msg);
+      showError(msg);
+    }
+  }
+
+  async function handleEmailVerify(data) {
+    state.clearError();
+    state.setMultiple({ emailOtp: data.otp, firstName: data.firstName, lastName: data.lastName });
+    try {
+      const res = await api.signupEmailVerify({
+        email: state.get('email'),
+        otp: data.otp,
+        first_name: data.firstName,
+        last_name: data.lastName,
+      });
+      const userId = res?.user_id ?? res?.data?.user_id;
+      if (userId) state.set('userId', userId);
+      flow.goNext();
+    } catch (err) {
+      const msg = err?.data?.error || err?.message || 'Verification failed';
+      state.set('error', msg);
+      showError(msg);
+    }
+  }
+
+  async function handleMobileSubmit(mobile) {
+    state.clearError();
+    state.set('mobile', mobile);
+    try {
+      if (isSocial()) {
+        const token = state.get('loginToken');
+        const provider = state.get('socialProvider');
+        if (provider === 'microsoft') await api.microsoftMobileSend(token, mobile, appIdentifier);
+        else await api.googleMobileSend(token, mobile, appIdentifier);
+      } else {
+        await api.signupMobileSendOtp(state.get('email'), mobile);
+      }
+      flow.goNext();
+    } catch (err) {
+      const msg = err?.data?.error || err?.message || 'Failed to send code';
+      state.set('error', msg);
+      showError(msg);
+    }
+  }
+
+  async function handleMobileVerify(otp) {
+    state.clearError();
+    state.set('mobileOtp', otp);
+    try {
+      if (isSocial()) {
+        const token = state.get('loginToken');
+        const provider = state.get('socialProvider');
+        const mobile = state.get('mobile');
+        if (provider === 'microsoft') await api.microsoftMobileVerify(token, mobile, otp, appIdentifier);
+        else await api.googleMobileVerify(token, mobile, otp, appIdentifier);
+      } else {
+        await api.signupMobileVerify(state.get('email'), state.get('mobile'), otp);
+      }
+      flow.goNext();
+    } catch (err) {
+      const msg = err?.data?.error || err?.message || 'Verification failed';
+      state.set('error', msg);
+      showError(msg);
+    }
+  }
+
+  async function handlePasswordSubmit(password) {
+    state.clearError();
+    state.set('password', password);
+    const email = state.get('email');
+    if (!email) {
+      showError('Session error. Please start over.');
+      return;
+    }
+    try {
+      await api.signupPasswordSet(email, password);
+      flow.goNext();
+    } catch (err) {
+      const msg = err?.data?.error || err?.message || 'Failed to set password';
+      state.set('error', msg);
+      showError(msg);
+    }
+  }
+
+  async function handleFaceSubmit(captureDataUrl) {
+    state.clearError();
+    state.set('faceCapture', captureDataUrl);
+    const file = dataUrlToFile(captureDataUrl);
+    if (!file) {
+      showError('Please capture your face first.');
+      return;
+    }
+    try {
+      let apiResult = null;
+      if (isSocial()) {
+        const token = state.get('loginToken');
+        const provider = state.get('socialProvider');
+        if (provider === 'microsoft') apiResult = await api.microsoftFrEnroll(token, file, null, appIdentifier);
+        else apiResult = await api.googleFrEnroll(token, file, null, appIdentifier);
+      } else {
+        const email = state.get('email');
+        if (!email) {
+          showError('Session error. Please start over.');
+          return;
+        }
+        apiResult = await api.signupFrEnroll(email, file);
+      }
+      state.set('signupResult', apiResult);
+      flow.goNext();
+      if (typeof onSignupComplete === 'function') {
+        onSignupComplete(buildSignupCompletePayload(apiResult));
+      }
+    } catch (err) {
+      const msg = err?.data?.error || err?.message || 'Face registration failed';
+      state.set('error', msg);
+      showError(msg);
+    }
+  }
+
+  function handleSocialSignUp(provider) {
+    state.clearError();
+    const origin = typeof window !== 'undefined' && window.location ? window.location.origin : '';
+    const path = typeof window !== 'undefined' && window.location ? (window.location.pathname || '/') : '/';
+    const redirectUri = origin + path;
+    const url = provider === 'google'
+      ? api.getGoogleStartUrl(redirectUri, appIdentifier)
+      : api.getMicrosoftStartUrl(redirectUri, appIdentifier);
+    window.location.href = url;
+  }
+
+  const handlers = {
+    onEmailSubmit: handleEmailSubmit,
+    onEmailVerify: handleEmailVerify,
+    onMobileSubmit: handleMobileSubmit,
+    onMobileVerify: handleMobileVerify,
+    onPasswordSubmit: handlePasswordSubmit,
+    onFaceSubmit: handleFaceSubmit,
+    onBack: () => {
+      state.clearError();
+      showError('');
+      flow.goBack();
+    },
+    onSocialSignUp: handleSocialSignUp,
+    onContinue: typeof onContinue === 'function' ? onContinue : () => {},
+    onSwitchToLogin: typeof onSwitchToLogin === 'function' ? onSwitchToLogin : () => {},
+    onBackToApp: typeof onBack === 'function' ? onBack : () => { cleanupTheme(); layout.root.remove(); },
+  };
+
+  function render() {
+    state.clearError();
+    showError('');
+    const { current, total } = flow.getProgress();
+    layout.updateProgress(current, total);
+    const screen = createScreen(flow.getCurrentStep(), state, flow, handlers);
+    layout.setContent(screen);
+  }
+
+  flow.subscribe(render);
+  render();
+
+  return {
+    unmount() {
+      cleanupTheme();
+      layout.root.remove();
+    },
+    getState() {
+      return state.getAll();
+    },
+    getFlow() {
+      return flow;
+    },
+    getCurrentStep() {
+      return flow.getCurrentStep();
+    },
+  };
+}