central-auth-js-sdk 1.2.10 → 1.2.11

package/INTEGRATION_GUIDE.md

@@ -354,9 +354,13 @@ const instance = startSignup({
 
 ## 5.3. Organization details (Team, Sub-team & Designation)
 
-During the email verification step, the SDK by default renders fields to collect **Team**, **Sub-team**, and **Designation** alongside First and Last Name.
+During registration (both email signup verification and Google/Social profile completion), the SDK renders **dynamic dropdown menus** populated with the **Teams**, **Sub-teams**, and **Designations** configured in the Central Auth Admin Interface for your entity.
 
-If your application does not need to collect organization details, or if you only want to collect a subset of them, use **`collectOrgDetails`** (or its alias **`showOrgDetails`**).
+### Dynamic Dropdown & Hierarchy Features
+- **Dynamic Hierarchy**: The **Sub-team** dropdown dynamically updates its options according to the selected **Team** (displaying only sub-teams mapped to that parent team).
+- **Auto-Resolution**: By default, the SDK automatically detects the entity domain from the user's email (e.g. `jane@jukshio.com` -> `jukshio.com`) and queries `GET /org/structure?entity_domain=...`.
+- **Explicit Entity Configuration**: You can explicitly supply `entityName` (e.g. `'Juksho'`), `entityId`, or `entityDomain` in `startSignup` or `initializeAuth` to bind the signup wizard to a specific tenant.
+- **Granular Visibility**: If your application does not need to collect organization details, or if you only want to collect a subset of them, use **`collectOrgDetails`** (or its alias **`showOrgDetails`**).
 
 ### Configuration options
 
@@ -392,6 +396,16 @@ const instance = startSignup({
 });
 ```
 
+#### 3. Bind to an entity explicitly (e.g. Juksho)
+
+```javascript
+const instance = startSignup({
+  container: '#auth-container',
+  env: 'dev',
+  entityName: 'Juksho', // Loads teams, sub-teams, and designations for Juksho entity
+});
+```
+
 #### 3. Set globally via `initializeAuth`
 
 ```javascript

package/auth.js

@@ -125,6 +125,10 @@ export function initializeAuth(config = {}) {
     collectOrgDetails: true,
     mobileVerification: 'india_only',
     skipMobileOtp: false,
+    entityName: null,
+    entityId: null,
+    entityDomain: null,
+    orgStructure: null,
     theme: null,
     ...config,
   };
@@ -187,6 +191,10 @@ export function startSignup(config = {}) {
     showOrgDetails: config.showOrgDetails ?? merged.showOrgDetails,
     mobileVerification: config.mobileVerification ?? merged.mobileVerification,
     skipMobileOtp: config.skipMobileOtp ?? merged.skipMobileOtp,
+    entityName: config.entityName ?? merged.entityName,
+    entityId: config.entityId ?? merged.entityId,
+    entityDomain: config.entityDomain ?? merged.entityDomain,
+    orgStructure: config.orgStructure ?? merged.orgStructure,
     theme: merged.theme || undefined,
     onSignupComplete: config.onSignupComplete ?? merged.onSignupComplete,
     onContinue: config.onContinue ?? merged.onContinue,

package/core/api.js

@@ -94,6 +94,33 @@ export function createApi(baseUrl = DEFAULT_BASE, options = {}) {
       return request('POST', '/signup/org/details', payload);
     },
 
+    /** GET /org/structure — Fetch organization structure (teams, sub-teams, designations) */
+    async getOrgStructure({ entityId, entityName, entityDomain } = {}) {
+      const tryFetch = async (queryParam) => {
+        return request('GET', `/org/structure?${queryParam}`);
+      };
+
+      if (entityId) {
+        try {
+          const res = await tryFetch(`entity_id=${encodeURIComponent(entityId)}`);
+          if (res && (res.teams || res.designations)) return res;
+        } catch (_) {}
+      }
+      if (entityDomain) {
+        try {
+          const res = await tryFetch(`entity_domain=${encodeURIComponent(entityDomain)}`);
+          if (res && (res.teams || res.designations)) return res;
+        } catch (_) {}
+      }
+      if (entityName) {
+        try {
+          const res = await tryFetch(`entity_name=${encodeURIComponent(entityName)}`);
+          if (res && (res.teams || res.designations)) return res;
+        } catch (_) {}
+      }
+      return { teams: [], designations: [] };
+    },
+
     /** POST /signup/password/set — Password step */
     async signupPasswordSet(email, password) {
       return request('POST', '/signup/password/set', { email, password });

package/package.json

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

package/signup.js

@@ -74,6 +74,10 @@ export function mount(container, options = {}) {
     mobileVerification = 'india_only',
     collectOrgDetails = true,
     showOrgDetails,
+    entityName = null,
+    entityId = null,
+    entityDomain = null,
+    orgStructure = null,
   } = options;
 
   const flow = new FlowController();
@@ -84,6 +88,10 @@ export function mount(container, options = {}) {
   if (showOrgDetails !== undefined) {
     state.set('showOrgDetails', showOrgDetails);
   }
+  if (entityName) state.set('entityName', entityName);
+  if (entityId) state.set('entityId', entityId);
+  if (entityDomain) state.set('entityDomain', entityDomain);
+  if (orgStructure) state.set('orgStructure', orgStructure);
   const api = createApi(apiBaseUrl);
 
   const layout = createLayout(el, () => {});
@@ -96,7 +104,18 @@ export function mount(container, options = {}) {
     state.set('loginToken', oauth.loginToken);
     state.set('socialProvider', oauth.provider);
     if (oauth.email) state.set('email', oauth.email);
+    if (oauth.entityDomain) state.set('entityDomain', oauth.entityDomain);
     clearOAuthParams();
+    const socialDomain = oauth.entityDomain || (oauth.email && oauth.email.includes('@') ? oauth.email.split('@')[1] : null);
+    api.getOrgStructure({
+      entityId: state.get('entityId'),
+      entityName: state.get('entityName'),
+      entityDomain: socialDomain,
+    }).then((res) => {
+      if (res && (res.teams || res.designations)) {
+        state.set('orgStructure', res);
+      }
+    }).catch(() => {});
     flow.setSocialFlow();
     if (oauth.nextStep === 'FR_ENROLLMENT') {
       flow.setStep(STEPS.FACE);
@@ -131,6 +150,16 @@ export function mount(container, options = {}) {
       if (data.lastName) state.set('lastName', data.lastName);
     }
     state.set('email', email);
+    const emailDomain = state.get('entityDomain') || (email && email.includes('@') ? email.split('@')[1] : null);
+    api.getOrgStructure({
+      entityId: state.get('entityId'),
+      entityName: state.get('entityName'),
+      entityDomain: emailDomain,
+    }).then((res) => {
+      if (res && (res.teams || res.designations)) {
+        state.set('orgStructure', res);
+      }
+    }).catch(() => {});
     try {
       const res = await api.signupStart(email);
       const apiStep = mapNextStep(res?.next_step);

package/styles.css

@@ -557,6 +557,31 @@
   box-shadow: 0 0 0 3px var(--wf-primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
+select.wf-input,
+.wf-select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.875rem center;
+  background-size: 1rem 1rem;
+  padding-right: 2.25rem;
+  cursor: pointer;
+}
+
+select.wf-input option,
+.wf-select option {
+  background: var(--wf-card);
+  color: var(--wf-fg);
+}
+
+select.wf-input:disabled,
+.wf-select:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--wf-muted-bg);
+}
+
 .wf-input::placeholder {
   color: var(--wf-muted);
 }

package/ui/screens/email-verify.js

@@ -1,63 +1,33 @@
 /**
- * Email Verification Screen — OTP + First/Last name
+ * Email Verification Screen — OTP + First/Last name + Org Hierarchy Dropdowns
  * 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';
+import { renderOrgFieldsHtml, attachOrgFieldsLogic } from "./org-fields.js";
+
+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 = {}, options = {}) {
-  const wrap = document.createElement('div');
-  wrap.className = 'wf-screen';
+  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;
+  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 orgFieldsHtml = '';
-  if (showTeam && showSubTeam) {
-    orgFieldsHtml += `
-      <div class="wf-row-2">
-        <div class="wf-field">
-          <label class="wf-label" for="wf-team">Team</label>
-          <input type="text" id="wf-team" placeholder="Engineering" class="wf-input" autocomplete="organization" />
-        </div>
-        <div class="wf-field">
-          <label class="wf-label" for="wf-sub-team">Sub-team</label>
-          <input type="text" id="wf-sub-team" placeholder="Backend" class="wf-input" />
-        </div>
-      </div>
-    `;
-  } else if (showTeam) {
-    orgFieldsHtml += `
-      <div class="wf-field">
-        <label class="wf-label" for="wf-team">Team</label>
-        <input type="text" id="wf-team" placeholder="Engineering" class="wf-input" autocomplete="organization" />
-      </div>
-    `;
-  } else if (showSubTeam) {
-    orgFieldsHtml += `
-      <div class="wf-field">
-        <label class="wf-label" for="wf-sub-team">Sub-team</label>
-        <input type="text" id="wf-sub-team" placeholder="Backend" class="wf-input" />
-      </div>
-    `;
-  }
-
-  if (showDesignation) {
-    orgFieldsHtml += `
-      <div class="wf-field">
-        <label class="wf-label" for="wf-designation">Designation</label>
-        <input type="text" id="wf-designation" placeholder="Software Engineer" class="wf-input" autocomplete="organization-title" />
-      </div>
-    `;
-  }
+  const orgFieldsHtml = renderOrgFieldsHtml({
+    showTeam,
+    showSubTeam,
+    showDesignation,
+    prefix: "wf-",
+  });
 
   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('');
+  `).join("");
 
   wrap.innerHTML = `
     <div class="wf-screen-header">
@@ -98,57 +68,59 @@ export function createEmailVerifyScreen(email, onNext, onBack, prefill = {}, opt
     </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');
-  const team = wrap.querySelector('#wf-team');
-  const subTeam = wrap.querySelector('#wf-sub-team');
-  const designation = wrap.querySelector('#wf-designation');
+  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;
-  if (prefill.team && team) team.value = prefill.team;
-  if (prefill.subTeam && subTeam) subTeam.value = prefill.subTeam;
-  if (prefill.designation && designation) designation.value = prefill.designation;
+
+  // Initialize and attach dynamic org dropdowns logic
+  const orgLogic = attachOrgFieldsLogic({
+    wrap,
+    prefix: "wf-",
+    prefill,
+    options,
+  });
 
   function handleOtpPaste(e) {
     e.preventDefault();
-    const pasted = (e.clipboardData || window.clipboardData).getData('text');
-    const digits = pasted.replace(/\D/g, '').slice(0, 6).split('');
+    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);
+    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();
+    el.addEventListener("keydown", (e) => {
+      if (e.key === "Backspace" && !e.target.value && i > 0) otpEls[i - 1].focus();
     });
   });
 
-  form.addEventListener('submit', (e) => {
+  form.addEventListener("submit", (e) => {
     e.preventDefault();
-    const code = [...otpEls].map((o) => o.value).join('');
+    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(),
-        team: team ? team.value.trim() : '',
-        subTeam: subTeam ? subTeam.value.trim() : '',
-        designation: designation ? designation.value.trim() : '',
+        team: orgLogic.getTeam(),
+        subTeam: orgLogic.getSubTeam(),
+        designation: orgLogic.getDesignation(),
       });
     }
   });
 
-  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+  wrap.querySelector('[data-action="back"]').addEventListener("click", onBack);
 
   return wrap;
 }

package/ui/screens/index.js

@@ -3,15 +3,15 @@
  * 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 { createOrgDetailsScreen } from './org-details.js';
-import { createFaceRegistrationScreen } from './face-registration.js';
-import { createSuccessScreen } from './success.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 { createOrgDetailsScreen } from "./org-details.js";
+import { createFaceRegistrationScreen } from "./face-registration.js";
+import { createSuccessScreen } from "./success.js";
 
 export function createScreen(step, state, flow, callbacks) {
   const {
@@ -31,41 +31,54 @@ export function createScreen(step, state, flow, callbacks) {
     api,
   } = callbacks;
 
+  const email = state.get("email") || "";
+  const derivedDomain = email.includes("@") ? email.split("@")[1] : null;
+  const entityDomain = state.get("entityDomain") || derivedDomain;
+  const entityName = state.get("entityName") || null;
+  const entityId = state.get("entityId") || null;
+  const orgStructure = state.get("orgStructure") || null;
+
   switch (step) {
     case STEPS.EMAIL:
       return createEmailEntryScreen(onEmailSubmit, onSocialSignUp, onSwitchToLogin, onBackToApp);
 
     case STEPS.EMAIL_VERIFY:
       return createEmailVerifyScreen(
-        state.get('email'),
+        email,
         (data) => onEmailVerify(data),
         onBack,
         {
-          firstName: state.get('firstName') || '',
-          lastName: state.get('lastName') || '',
-          team: state.get('team') || '',
-          subTeam: state.get('subTeam') || '',
-          designation: state.get('designation') || '',
+          firstName: state.get("firstName") || "",
+          lastName: state.get("lastName") || "",
+          team: state.get("team") || "",
+          subTeam: state.get("subTeam") || "",
+          designation: state.get("designation") || "",
         },
         {
-          collectOrgDetails: state.get('collectOrgDetails'),
-          showOrgDetails: state.get('showOrgDetails'),
+          collectOrgDetails: state.get("collectOrgDetails"),
+          showOrgDetails: state.get("showOrgDetails"),
+          api,
+          entityId,
+          entityName,
+          entityDomain,
+          orgStructure,
+          onOrgLoaded: (data) => state.set("orgStructure", data),
         }
       );
 
     case STEPS.MOBILE:
       return createMobileEntryScreen(onMobileSubmit, onBack, {
-        skipMobileOtp: state.get('skipMobileOtp'),
-        mobileVerification: state.get('mobileVerification'),
+        skipMobileOtp: state.get("skipMobileOtp"),
+        mobileVerification: state.get("mobileVerification"),
       });
 
     case STEPS.MOBILE_VERIFY:
       return createMobileVerifyScreen(
-        state.get('mobile'),
+        state.get("mobile"),
         (otp, channel) => onMobileVerify(otp, channel),
         onBack,
         {
-          channel: state.get('mobileChannel') || 'sms',
+          channel: state.get("mobileChannel") || "sms",
           onResend: onMobileResend,
         }
       );
@@ -75,13 +88,19 @@ export function createScreen(step, state, flow, callbacks) {
         (data) => onOrgDetailsSubmit(data),
         onBack,
         {
-          team: state.get('team') || '',
-          subTeam: state.get('subTeam') || '',
-          designation: state.get('designation') || '',
+          team: state.get("team") || "",
+          subTeam: state.get("subTeam") || "",
+          designation: state.get("designation") || "",
         },
         {
-          collectOrgDetails: state.get('collectOrgDetails'),
-          showOrgDetails: state.get('showOrgDetails'),
+          collectOrgDetails: state.get("collectOrgDetails"),
+          showOrgDetails: state.get("showOrgDetails"),
+          api,
+          entityId,
+          entityName,
+          entityDomain,
+          orgStructure,
+          onOrgLoaded: (data) => state.set("orgStructure", data),
         }
       );
 
@@ -96,9 +115,9 @@ export function createScreen(step, state, flow, callbacks) {
       );
 
     case STEPS.SUCCESS:
-      return createSuccessScreen(typeof onContinue === 'function' ? onContinue : () => {});
+      return createSuccessScreen(typeof onContinue === "function" ? onContinue : () => {});
 
     default:
-      return document.createElement('div');
+      return document.createElement("div");
   }
 }

package/ui/screens/org-details.js

@@ -1,59 +1,29 @@
 /**
- * Organization Details Screen — Team, Sub-team & Designation
+ * Organization Details Screen — Team, Sub-team & Designation Dropdowns
  * 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';
+import { renderOrgFieldsHtml, attachOrgFieldsLogic } from "./org-fields.js";
+
+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 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>
-    `;
-  }
+  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;
 
-  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>
-    `;
-  }
+  const fieldsHtml = renderOrgFieldsHtml({
+    showTeam,
+    showSubTeam,
+    showDesignation,
+    prefix: "wf-org-",
+  });
 
   wrap.innerHTML = `
     <div class="wf-screen-header">
@@ -61,7 +31,7 @@ export function createOrgDetailsScreen(onNext, onBack, prefill = {}, options = {
         <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>
+      <p class="wf-screen-desc">Select your team and role to personalize your workspace</p>
     </div>
     <form class="wf-form" id="wf-org-form">
       ${fieldsHtml}
@@ -77,27 +47,28 @@ export function createOrgDetailsScreen(onNext, onBack, prefill = {}, options = {
     </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');
+  const form = wrap.querySelector("#wf-org-form");
 
-  if (prefill.team && teamInput) teamInput.value = prefill.team;
-  if (prefill.subTeam && subTeamInput) subTeamInput.value = prefill.subTeam;
-  if (prefill.designation && designationInput) designationInput.value = prefill.designation;
+  // Initialize and attach dynamic org dropdowns logic
+  const orgLogic = attachOrgFieldsLogic({
+    wrap,
+    prefix: "wf-org-",
+    prefill,
+    options,
+  });
 
-  form.addEventListener('submit', (e) => {
+  form.addEventListener("submit", (e) => {
     e.preventDefault();
     onNext({
-      team: teamInput ? teamInput.value.trim() : '',
-      subTeam: subTeamInput ? subTeamInput.value.trim() : '',
-      designation: designationInput ? designationInput.value.trim() : '',
+      team: orgLogic.getTeam(),
+      subTeam: orgLogic.getSubTeam(),
+      designation: orgLogic.getDesignation(),
     });
   });
 
   const backBtn = wrap.querySelector('button[data-action="back"]');
-  if (backBtn && typeof onBack === 'function') {
-    backBtn.addEventListener('click', onBack);
+  if (backBtn && typeof onBack === "function") {
+    backBtn.addEventListener("click", onBack);
   }
 
   return wrap;

package/ui/screens/org-fields.js

@@ -0,0 +1,190 @@
+/**
+ * Shared Org Fields (Team, Sub-team, Designation) Dropdowns Component
+ * Handles dynamic fetching from /org/structure and cascaded sub-team filtering.
+ */
+
+function escapeHtml(str) {
+  if (!str) return "";
+  return String(str)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+export function renderOrgFieldsHtml({
+  showTeam = true,
+  showSubTeam = true,
+  showDesignation = true,
+  prefix = "wf-",
+} = {}) {
+  let html = "";
+
+  if (showTeam && showSubTeam) {
+    html += `
+      <div class="wf-row-2">
+        <div class="wf-field">
+          <label class="wf-label" for="${prefix}team">Team</label>
+          <select id="${prefix}team" class="wf-input wf-select" autocomplete="organization">
+            <option value="">Select Team</option>
+          </select>
+        </div>
+        <div class="wf-field">
+          <label class="wf-label" for="${prefix}sub-team">Sub-team</label>
+          <select id="${prefix}sub-team" class="wf-input wf-select" disabled>
+            <option value="">Select a team first</option>
+          </select>
+        </div>
+      </div>
+    `;
+  } else if (showTeam) {
+    html += `
+      <div class="wf-field">
+        <label class="wf-label" for="${prefix}team">Team</label>
+        <select id="${prefix}team" class="wf-input wf-select" autocomplete="organization">
+          <option value="">Select Team</option>
+        </select>
+      </div>
+    `;
+  } else if (showSubTeam) {
+    html += `
+      <div class="wf-field">
+        <label class="wf-label" for="${prefix}sub-team">Sub-team</label>
+        <select id="${prefix}sub-team" class="wf-input wf-select" disabled>
+          <option value="">Select a team first</option>
+        </select>
+      </div>
+    `;
+  }
+
+  if (showDesignation) {
+    html += `
+      <div class="wf-field">
+        <label class="wf-label" for="${prefix}designation">Designation</label>
+        <select id="${prefix}designation" class="wf-input wf-select" autocomplete="organization-title">
+          <option value="">Select Designation</option>
+        </select>
+      </div>
+    `;
+  }
+
+  return html;
+}
+
+export function attachOrgFieldsLogic({
+  wrap,
+  prefix = "wf-",
+  prefill = {},
+  options = {},
+}) {
+  const teamEl = wrap.querySelector(`#${prefix}team`);
+  const subTeamEl = wrap.querySelector(`#${prefix}sub-team`);
+  const designationEl = wrap.querySelector(`#${prefix}designation`);
+
+  let currentTeams = [];
+  let currentDesignations = [];
+
+  function updateSubTeams(selectedTeamName, selectedSubTeamValue = "") {
+    if (!subTeamEl) return;
+    if (!selectedTeamName) {
+      subTeamEl.innerHTML = '<option value="">Select a team first</option>';
+      subTeamEl.disabled = true;
+      subTeamEl.value = "";
+      return;
+    }
+
+    const team = currentTeams.find((t) => t.name === selectedTeamName || t.id === selectedTeamName);
+    const subTeams = team && Array.isArray(team.sub_teams) ? team.sub_teams : [];
+
+    if (subTeams.length === 0) {
+      subTeamEl.innerHTML = '<option value="">No sub-teams</option>';
+      subTeamEl.disabled = true;
+      subTeamEl.value = "";
+      return;
+    }
+
+    let opts = '<option value="">Select Sub-team</option>';
+    subTeams.forEach((st) => {
+      opts += `<option value="${escapeHtml(st.name)}">${escapeHtml(st.name)}</option>`;
+    });
+    subTeamEl.innerHTML = opts;
+    subTeamEl.disabled = false;
+
+    if (selectedSubTeamValue) {
+      subTeamEl.value = selectedSubTeamValue;
+    }
+  }
+
+  function populate(orgData) {
+    if (!orgData) return;
+    currentTeams = Array.isArray(orgData.teams) ? orgData.teams : [];
+    currentDesignations = Array.isArray(orgData.designations) ? orgData.designations : [];
+
+    // Populate Teams
+    if (teamEl) {
+      const prevVal = teamEl.value || prefill.team || "";
+      let opts = '<option value="">Select Team</option>';
+      currentTeams.forEach((t) => {
+        opts += `<option value="${escapeHtml(t.name)}">${escapeHtml(t.name)}</option>`;
+      });
+      teamEl.innerHTML = opts;
+      if (prevVal) {
+        teamEl.value = prevVal;
+        updateSubTeams(prevVal, subTeamEl?.value || prefill.subTeam || "");
+      }
+    }
+
+    // Populate Designations
+    if (designationEl) {
+      const prevVal = designationEl.value || prefill.designation || "";
+      let opts = '<option value="">Select Designation</option>';
+      currentDesignations.forEach((d) => {
+        opts += `<option value="${escapeHtml(d.name)}">${escapeHtml(d.name)}</option>`;
+      });
+      designationEl.innerHTML = opts;
+      if (prevVal) {
+        designationEl.value = prevVal;
+      }
+    }
+  }
+
+  // Handle Team change -> cascade Sub-teams
+  if (teamEl) {
+    teamEl.addEventListener("change", () => {
+      updateSubTeams(teamEl.value);
+    });
+  }
+
+  // If org structure was already loaded, populate immediately
+  if (options.orgStructure) {
+    populate(options.orgStructure);
+  }
+
+  // If api is available, ensure we have the latest org structure
+  if (options.api && typeof options.api.getOrgStructure === "function") {
+    const { entityId, entityName, entityDomain, onOrgLoaded } = options;
+    if (entityId || entityName || entityDomain) {
+      options.api.getOrgStructure({ entityId, entityName, entityDomain })
+        .then((res) => {
+          if (res && (Array.isArray(res.teams) || Array.isArray(res.designations))) {
+            if (typeof onOrgLoaded === "function") onOrgLoaded(res);
+            populate(res);
+          }
+        })
+        .catch(() => {});
+    }
+  }
+
+  return {
+    getTeam() {
+      return teamEl ? teamEl.value.trim() : "";
+    },
+    getSubTeam() {
+      return subTeamEl && !subTeamEl.disabled ? subTeamEl.value.trim() : "";
+    },
+    getDesignation() {
+      return designationEl ? designationEl.value.trim() : "";
+    },
+    populate,
+  };
+}