central-auth-js-sdk 1.2.9 → 1.2.10

package/core/api.js

@@ -82,6 +82,18 @@ export function createApi(baseUrl = DEFAULT_BASE, options = {}) {
       return request('POST', '/signup/mobile/save', { email, mobile });
     },
 
+    /** POST /signup/org/details — Save team, sub-team, designation for user (including social login) */
+    async signupSaveOrgDetails({ loginToken, email, userId, team, sub_team, designation }) {
+      const payload = {};
+      if (loginToken) payload.login_token = loginToken;
+      if (email) payload.email = email;
+      if (userId) payload.user_id = userId;
+      if (team !== undefined) payload.team = team;
+      if (sub_team !== undefined) payload.sub_team = sub_team;
+      if (designation !== undefined) payload.designation = designation;
+      return request('POST', '/signup/org/details', payload);
+    },
+
     /** POST /signup/password/set — Password step */
     async signupPasswordSet(email, password) {
       return request('POST', '/signup/password/set', { email, password });

package/core/flow.js

@@ -8,6 +8,7 @@ export const STEPS = {
   EMAIL_VERIFY: 'emailVerify',
   MOBILE: 'mobile',
   MOBILE_VERIFY: 'mobileVerify',
+  ORG_DETAILS: 'orgDetails',
   PASSWORD: 'password',
   FACE: 'face',
   SUCCESS: 'success',
@@ -32,6 +33,7 @@ const STEP_ORDER = {
     STEPS.EMAIL,
     STEPS.MOBILE,
     STEPS.MOBILE_VERIFY,
+    STEPS.ORG_DETAILS,
     STEPS.FACE,
     STEPS.SUCCESS,
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "central-auth-js-sdk",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "description": "Vanilla JS sign-up and login flow SDK — embeddable auth UI with configurable methods",
   "type": "module",
   "main": "index.js",

package/signup.js

@@ -194,9 +194,14 @@ export function mount(container, options = {}) {
       );
 
       if (shouldSkipOtp) {
-        // Skip OTP verification, save mobile directly and advance to password step
+        // Skip OTP verification, save mobile directly and advance
         await api.signupMobileSave(state.get('email'), mobile);
-        flow.setStep(STEPS.PASSWORD);
+        if (isSocial()) {
+          const skipOrg = state.get('collectOrgDetails') === false || state.get('showOrgDetails') === false;
+          flow.setStep(skipOrg ? (enableFaceRegistration ? STEPS.FACE : STEPS.SUCCESS) : STEPS.ORG_DETAILS);
+        } else {
+          flow.setStep(STEPS.PASSWORD);
+        }
         return;
       }
 
@@ -246,6 +251,10 @@ export function mount(container, options = {}) {
         const mobile = state.get('mobile');
         if (provider === 'microsoft') await api.microsoftMobileVerify(token, mobile, otp, appIdentifier);
         else await api.googleMobileVerify(token, mobile, otp, appIdentifier);
+
+        const skipOrg = state.get('collectOrgDetails') === false || state.get('showOrgDetails') === false;
+        flow.setStep(skipOrg ? (enableFaceRegistration ? STEPS.FACE : STEPS.SUCCESS) : STEPS.ORG_DETAILS);
+        return;
       } else {
         await api.signupMobileVerify(state.get('email'), state.get('mobile'), otp);
       }
@@ -257,6 +266,34 @@ export function mount(container, options = {}) {
     }
   }
 
+  async function handleOrgDetailsSubmit(data) {
+    state.clearError();
+    state.setMultiple({
+      team: data.team,
+      subTeam: data.subTeam,
+      designation: data.designation,
+    });
+    try {
+      await api.signupSaveOrgDetails({
+        loginToken: state.get('loginToken'),
+        email: state.get('email'),
+        userId: state.get('userId'),
+        team: data.team,
+        sub_team: data.subTeam,
+        designation: data.designation,
+      });
+      if (enableFaceRegistration) {
+        flow.setStep(STEPS.FACE);
+      } else {
+        flow.setStep(STEPS.SUCCESS);
+      }
+    } catch (err) {
+      const msg = err?.data?.error || err?.message || 'Failed to save organization details';
+      state.set('error', msg);
+      showError(msg);
+    }
+  }
+
   async function handlePasswordSubmit(password) {
     state.clearError();
     state.set('password', password);
@@ -330,6 +367,7 @@ export function mount(container, options = {}) {
     onMobileSubmit: handleMobileSubmit,
     onMobileVerify: handleMobileVerify,
     onMobileResend: handleMobileResend,
+    onOrgDetailsSubmit: handleOrgDetailsSubmit,
     onPasswordSubmit: handlePasswordSubmit,
     onFaceSubmit: handleFaceSubmit,
     onBack: () => {

package/ui/screens/index.js

@@ -9,6 +9,7 @@ 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 { createOrgDetailsScreen } from './org-details.js';
 import { createFaceRegistrationScreen } from './face-registration.js';
 import { createSuccessScreen } from './success.js';
 
@@ -19,6 +20,7 @@ export function createScreen(step, state, flow, callbacks) {
     onMobileSubmit,
     onMobileVerify,
     onMobileResend,
+    onOrgDetailsSubmit,
     onPasswordSubmit,
     onFaceSubmit,
     onBack,
@@ -68,6 +70,21 @@ export function createScreen(step, state, flow, callbacks) {
         }
       );
 
+    case STEPS.ORG_DETAILS:
+      return createOrgDetailsScreen(
+        (data) => onOrgDetailsSubmit(data),
+        onBack,
+        {
+          team: state.get('team') || '',
+          subTeam: state.get('subTeam') || '',
+          designation: state.get('designation') || '',
+        },
+        {
+          collectOrgDetails: state.get('collectOrgDetails'),
+          showOrgDetails: state.get('showOrgDetails'),
+        }
+      );
+
     case STEPS.PASSWORD:
       return createPasswordSetupScreen(onPasswordSubmit, onBack);
 

package/ui/screens/org-details.js

@@ -0,0 +1,104 @@
+/**
+ * Organization Details Screen — Team, Sub-team & Designation
+ * v2.0 — warm, modern design for onboarding & social signup
+ */
+
+const BRIEFCASE_ICON = 'M20 7h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM10 4h4v3h-4V4zm10 16H4V9h16v11z';
+const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
+const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+
+export function createOrgDetailsScreen(onNext, onBack, prefill = {}, options = {}) {
+  const wrap = document.createElement('div');
+  wrap.className = 'wf-screen';
+
+  const orgOpt = options.collectOrgDetails !== undefined ? options.collectOrgDetails : options.showOrgDetails;
+  const showTeam = typeof orgOpt === 'object' && orgOpt !== null ? Boolean(orgOpt.team) : orgOpt !== false;
+  const showSubTeam = typeof orgOpt === 'object' && orgOpt !== null ? Boolean(orgOpt.subTeam) : orgOpt !== false;
+  const showDesignation = typeof orgOpt === 'object' && orgOpt !== null ? Boolean(orgOpt.designation) : orgOpt !== false;
+
+  let fieldsHtml = '';
+  if (showTeam && showSubTeam) {
+    fieldsHtml += `
+      <div class="wf-row-2">
+        <div class="wf-field">
+          <label class="wf-label" for="wf-org-team">Team</label>
+          <input type="text" id="wf-org-team" placeholder="e.g. Engineering" class="wf-input" autocomplete="organization" />
+        </div>
+        <div class="wf-field">
+          <label class="wf-label" for="wf-org-subteam">Sub-team</label>
+          <input type="text" id="wf-org-subteam" placeholder="e.g. Backend" class="wf-input" />
+        </div>
+      </div>
+    `;
+  } else if (showTeam) {
+    fieldsHtml += `
+      <div class="wf-field">
+        <label class="wf-label" for="wf-org-team">Team</label>
+        <input type="text" id="wf-org-team" placeholder="e.g. Engineering" class="wf-input" autocomplete="organization" />
+      </div>
+    `;
+  } else if (showSubTeam) {
+    fieldsHtml += `
+      <div class="wf-field">
+        <label class="wf-label" for="wf-org-subteam">Sub-team</label>
+        <input type="text" id="wf-org-subteam" placeholder="e.g. Backend" class="wf-input" />
+      </div>
+    `;
+  }
+
+  if (showDesignation) {
+    fieldsHtml += `
+      <div class="wf-field">
+        <label class="wf-label" for="wf-org-designation">Designation</label>
+        <input type="text" id="wf-org-designation" placeholder="e.g. Software Engineer" class="wf-input" autocomplete="organization-title" />
+      </div>
+    `;
+  }
+
+  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="${BRIEFCASE_ICON}"/></svg>
+      </div>
+      <h2 class="wf-screen-title">Complete your profile</h2>
+      <p class="wf-screen-desc">Add your team and role details to personalize your workspace</p>
+    </div>
+    <form class="wf-form" id="wf-org-form">
+      ${fieldsHtml}
+      <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-btn-org-submit">
+          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-org-form');
+  const teamInput = wrap.querySelector('#wf-org-team');
+  const subTeamInput = wrap.querySelector('#wf-org-subteam');
+  const designationInput = wrap.querySelector('#wf-org-designation');
+
+  if (prefill.team && teamInput) teamInput.value = prefill.team;
+  if (prefill.subTeam && subTeamInput) subTeamInput.value = prefill.subTeam;
+  if (prefill.designation && designationInput) designationInput.value = prefill.designation;
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    onNext({
+      team: teamInput ? teamInput.value.trim() : '',
+      subTeam: subTeamInput ? subTeamInput.value.trim() : '',
+      designation: designationInput ? designationInput.value.trim() : '',
+    });
+  });
+
+  const backBtn = wrap.querySelector('button[data-action="back"]');
+  if (backBtn && typeof onBack === 'function') {
+    backBtn.addEventListener('click', onBack);
+  }
+
+  return wrap;
+}