@descope/web-components-ui 1.0.393 → 1.0.395

package/src/components/descope-security-questions-setup/SecurityQuestionsSetupClass.js

@@ -0,0 +1,237 @@
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName, observeAttributes } from '../../helpers/componentHelpers';
+import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
+import { ComboBoxClass } from '../descope-combo-box/ComboBoxClass';
+import { TextFieldClass } from '../descope-text-field/TextFieldClass';
+
+export const componentName = getComponentName('security-questions-setup');
+
+const attrsToSync = [
+  'full-width',
+  'readonly',
+  'size',
+  'label-type',
+  'question-label',
+  'question-placeholder',
+  'question-data-errormessage-value-missing',
+  'answer-label',
+  'answer-placeholder',
+  'answer-data-errormessage-value-missing',
+];
+
+const attrsToReRender = ['count', 'questions'];
+class RawSecurityQuestionsSetup extends createBaseClass({ componentName, baseSelector: 'div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+
+      div {
+        display: flex;
+        flex-direction: column;
+      }
+
+		</style>
+    <div></div>
+		`;
+  }
+
+  get count() {
+    return Number(this.getAttribute('count')) || 0;
+  }
+
+  #renderQuestions() {
+    const res = Array.from({ length: this.count }).map(
+      (_, index) =>
+        // <!--html-->
+        `
+      <div class="question-wrapper">
+      <descope-combo-box
+        data-id="${index}"
+        item-label-path="data-name"
+        item-value-path="data-id"
+        bordered="true"
+        required="true"
+        clear-button-visible="true"
+      ></descope-combo-box>
+
+      <descope-text-field
+        data-id="${index}"
+        required="true"
+        bordered="true"
+        minlength="2"
+      ></descope-text-field>
+    </div>
+      `
+      // <!--!html-->
+    );
+
+    this.baseElement.innerHTML = res.join(
+      '<spacer></spacer><descope-divider></descope-divider><spacer></spacer>'
+    );
+
+    this.comboBoxes.forEach((el) => {
+      el.addEventListener('change', (e) => {
+        this.updateRemainingCombosData(e.target);
+        const AttachedTextField = this.getAttachedTextField(e.target);
+
+        AttachedTextField.value = '';
+      });
+
+      // eslint-disable-next-line no-param-reassign
+      el.data = this.data;
+    });
+
+    this.#syncAttrs(attrsToSync);
+  }
+
+  getAttachedTextField(combo) {
+    const selector = `descope-text-field[data-id="${combo.getAttribute('data-id')}"]`;
+
+    return this.baseElement.querySelector(selector);
+  }
+
+  filterData(comboValue) {
+    const res = this.data.filter((item) => {
+      return item.value === comboValue || !this.selectedQuestionIds.includes(item.value);
+    });
+
+    return res;
+  }
+
+  reportValidity() {
+    this.inputs.reverse().forEach((el) => el.reportValidity());
+
+    return this.checkValidity();
+  }
+
+  checkValidity() {
+    return [...this.comboBoxes, ...this.textFields].every((el) => el.checkValidity());
+  }
+
+  updateRemainingCombosData(sourceCombo) {
+    this.comboBoxes
+      .filter((combo) => combo !== sourceCombo)
+      .forEach((combo) => {
+        // eslint-disable-next-line no-param-reassign
+        combo.data = this.filterData(combo.value);
+      });
+  }
+
+  get questions() {
+    try {
+      return JSON.parse(this.getAttribute('questions')) || [];
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(componentName, 'Error parsing questions attribute', e);
+      return [];
+    }
+  }
+
+  // this returns the structure expected by the combo box
+  get data() {
+    return this.questions.map(({ id, text }) => ({ value: id, label: text }));
+  }
+
+  get comboBoxes() {
+    return Array.from(this.baseElement.querySelectorAll('descope-combo-box'));
+  }
+
+  get textFields() {
+    return Array.from(this.baseElement.querySelectorAll('descope-text-field'));
+  }
+
+  get inputs() {
+    return Array.from(this.baseElement.querySelectorAll('descope-combo-box, descope-text-field'));
+  }
+
+  get selectedQuestionIds() {
+    return this.comboBoxes.map((el) => el.value);
+  }
+
+  get value() {
+    return this.comboBoxes.map((combo) => {
+      const id = combo.value;
+      const answer = this.getAttachedTextField(combo).value;
+
+      return { id, answer };
+    });
+  }
+
+  set value(val = []) {
+    val.forEach((item, index) => {
+      const combo = this.comboBoxes[index];
+      const textField = this.getAttachedTextField(combo);
+
+      combo.value = item.id;
+      textField.value = item.answer;
+    });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  #updateAttribute(ele, attrName, value) {
+    if (value === null) ele.removeAttribute(attrName);
+    else ele.setAttribute(attrName, value);
+  }
+
+  #syncAttrs(attrs) {
+    const componentMap = {
+      question: this.comboBoxes,
+      answer: this.textFields,
+    };
+
+    attrs.forEach((attr) => {
+      const [maybeComponentType, ...rest] = attr.split('-');
+      const elements = componentMap[maybeComponentType] || this.inputs;
+      const attrName = componentMap[maybeComponentType] ? rest.join('-') : attr;
+
+      elements.forEach((el) => {
+        this.#updateAttribute(el, attrName, this.getAttribute(attr));
+      });
+    });
+  }
+
+  init() {
+    super.init?.();
+    // render new components
+    observeAttributes(
+      this,
+      () => {
+        this.#renderQuestions();
+      },
+      { includeAttrs: attrsToReRender }
+    );
+
+    // update existing components
+    observeAttributes(this, this.#syncAttrs.bind(this), {
+      includeAttrs: attrsToSync,
+    });
+  }
+}
+
+export const SecurityQuestionsSetupClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }, { property: 'width' }],
+      hostDirection: [
+        { selector: () => ':host', property: 'direction' },
+        {
+          selector: () => ComboBoxClass.componentName,
+          property: ComboBoxClass.cssVarList.hostDirection,
+        },
+        {
+          selector: () => TextFieldClass.componentName,
+          property: TextFieldClass.cssVarList.hostDirection,
+        },
+      ],
+      gap: { selector: () => 'div', property: 'gap' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawSecurityQuestionsSetup);

package/src/components/descope-security-questions-setup/index.js

@@ -0,0 +1,6 @@
+import { componentName, SecurityQuestionsSetupClass } from './SecurityQuestionsSetupClass';
+import '../boolean-fields/descope-checkbox';
+
+customElements.define(componentName, SecurityQuestionsSetupClass);
+
+export { SecurityQuestionsSetupClass };

package/src/components/descope-security-questions-verify/SecurityQuestionsVerifyClass.js

@@ -0,0 +1,208 @@
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName, observeAttributes } from '../../helpers/componentHelpers';
+import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
+import { TextClass } from '../descope-text/TextClass';
+import { TextFieldClass } from '../descope-text-field/TextFieldClass';
+
+export const componentName = getComponentName('security-questions-verify');
+
+const textFieldsAttrs = [
+  'full-width',
+  'readonly',
+  'size',
+  'answer-placeholder',
+  'answer-data-errormessage-value-missing',
+];
+
+const textsAttrs = ['question-mode'];
+
+const attrMappings = {
+  'answer-placeholder': 'placeholder',
+  'answer-data-errormessage-value-missing': 'data-errormessage-value-missing',
+  'question-mode': 'mode',
+};
+
+const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
+
+const attrsToReRender = ['questions'];
+class RawSecurityQuestionsVerify extends createBaseClass({ componentName, baseSelector: 'div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+
+      div {
+        display: flex;
+        flex-direction: column;
+      }
+
+		</style>
+    <div></div>
+		`;
+  }
+
+  #renderQuestions() {
+    const res = this.questions.map(
+      ({ id, text }) =>
+        // <!--html-->
+        `
+      <div class="question-wrapper">
+      <descope-text
+        data-id="${id}"
+      >${text}</descope-text>
+
+      <descope-text-field
+        data-id="${id}"
+        required="true"
+        bordered="true"
+      ></descope-text-field>
+    </div>
+      `
+      // <!--!html-->
+    );
+
+    this.baseElement.innerHTML = res.join(
+      '<spacer></spacer><descope-divider></descope-divider><spacer></spacer>'
+    );
+
+    this.#syncAttrs(attrsToSync);
+
+    // focus input when text is clicked
+    this.texts.forEach((el) => {
+      const input = this.textFields.find(
+        (field) => field.getAttribute('data-id') === el.getAttribute('data-id')
+      );
+      // eslint-disable-next-line no-param-reassign
+      if (input) el.onclick = input.focus.bind(input);
+    });
+  }
+
+  reportValidity() {
+    this.textFields.reverse().forEach((el) => el.reportValidity());
+
+    return this.checkValidity();
+  }
+
+  checkValidity() {
+    return this.textFields.every((el) => el.checkValidity());
+  }
+
+  get questions() {
+    try {
+      return JSON.parse(this.getAttribute('questions')) || [];
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(componentName, 'Error parsing questions attribute', e);
+      return [];
+    }
+  }
+
+  get texts() {
+    return Array.from(this.baseElement.querySelectorAll('descope-text'));
+  }
+
+  get textFields() {
+    return Array.from(this.baseElement.querySelectorAll('descope-text-field'));
+  }
+
+  get elements() {
+    return Array.from(this.baseElement.querySelectorAll('descope-text, descope-text-field'));
+  }
+
+  get value() {
+    return this.textFields.map((el) => ({ id: el.getAttribute('data-id'), answer: el.value }));
+  }
+
+  set value(val = []) {
+    val.forEach(({ id, answer }) => {
+      const textField = this.textFields.find((el) => el.getAttribute('data-id') === id);
+      if (textField) textField.value = answer;
+    });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  #updateAttribute(ele, attrName, value) {
+    if (value === null) ele.removeAttribute(attrName);
+    else ele.setAttribute(attrName, value);
+  }
+
+  #getElementsToUpdate(attr) {
+    switch (true) {
+      case textFieldsAttrs.includes(attr):
+        return this.textFields;
+      case textsAttrs.includes(attr):
+        return this.texts;
+      default:
+        return [];
+    }
+  }
+
+  #syncAttrs(attrs) {
+    attrs.forEach((attr) => {
+      this.#getElementsToUpdate(attr).forEach((el) => {
+        this.#updateAttribute(el, attrMappings[attr] || attr, this.getAttribute(attr));
+      });
+    });
+  }
+
+  init() {
+    super.init?.();
+    // render new components
+    observeAttributes(
+      this,
+      () => {
+        this.#renderQuestions();
+      },
+      { includeAttrs: attrsToReRender }
+    );
+
+    // update existing components
+    observeAttributes(this, this.#syncAttrs.bind(this), {
+      includeAttrs: attrsToSync,
+    });
+  }
+}
+
+export const SecurityQuestionsVerifyClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }, { property: 'width' }],
+      hostDirection: [
+        { selector: () => ':host', property: 'direction' },
+        {
+          selector: () => TextClass.componentName,
+          property: TextClass.cssVarList.hostDirection,
+        },
+        {
+          selector: () => TextFieldClass.componentName,
+          property: TextFieldClass.cssVarList.hostDirection,
+        },
+      ],
+      gap: { selector: () => 'div', property: 'gap' },
+      questionTextAlign: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.textAlign,
+      },
+      questionFontSize: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.fontSize,
+      },
+      questionFontFamily: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.fontFamily,
+      },
+      questionCursor: {
+        selector: () => TextClass.componentName,
+        property: 'cursor',
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawSecurityQuestionsVerify);

package/src/components/descope-security-questions-verify/index.js

@@ -0,0 +1,7 @@
+import { componentName, SecurityQuestionsVerifyClass } from './SecurityQuestionsVerifyClass';
+import '../descope-text';
+import '../descope-text-field';
+
+customElements.define(componentName, SecurityQuestionsVerifyClass);
+
+export { SecurityQuestionsVerifyClass };

package/src/index.cjs.js

@@ -54,3 +54,5 @@ export { ListItemClass } from './components/descope-list/ListItemClass';
 export { AppsListClass } from './components/descope-apps-list/AppsListClass';
 export { ScopesListClass } from './components/descope-scopes-list/ScopesListClass';
 export { ThirdPartyAppLogoClass } from './components/descope-third-party-app-logo/ThirdPartyAppLogoClass';
+export { SecurityQuestionsSetupClass } from './components/descope-security-questions-setup/SecurityQuestionsSetupClass';
+export { SecurityQuestionsVerifyClass } from './components/descope-security-questions-verify/SecurityQuestionsVerifyClass';

package/src/index.js

@@ -46,6 +46,8 @@ export * from './components/descope-list';
 export * from './components/descope-apps-list';
 export * from './components/descope-scopes-list';
 export * from './components/descope-third-party-app-logo';
+export * from './components/descope-security-questions-setup';
+export * from './components/descope-security-questions-verify';
 
 export {
   globalsThemeToStyle,

package/src/theme/components/index.js

@@ -48,6 +48,8 @@ import * as listItem from './list/listItem';
 import * as appsList from './appsList';
 import * as scopesList from './scopesList';
 import * as thirdPartyAppLogo from './thirdPartyAppLogo';
+import * as securityQuestionsSetup from './securityQuestionsSetup';
+import * as securityQuestionsVerify from './securityQuestionsVerify';
 
 const components = {
   button,
@@ -101,6 +103,8 @@ const components = {
   appsList,
   scopesList,
   thirdPartyAppLogo,
+  securityQuestionsSetup,
+  securityQuestionsVerify,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/securityQuestionsSetup.js

@@ -0,0 +1,12 @@
+import { SecurityQuestionsSetupClass } from '../../components/descope-security-questions-setup/SecurityQuestionsSetupClass';
+
+export const vars = SecurityQuestionsSetupClass.cssVarList;
+
+const securityQuestionsSetup = {
+  [vars.hostWidth]: 'fit-content',
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default securityQuestionsSetup;

package/src/theme/components/securityQuestionsVerify.js

@@ -0,0 +1,16 @@
+import { SecurityQuestionsVerifyClass } from '../../components/descope-security-questions-verify/SecurityQuestionsVerifyClass';
+import { refs } from './inputWrapper';
+
+export const vars = SecurityQuestionsVerifyClass.cssVarList;
+
+const securityQuestionsVerify = {
+  [vars.hostWidth]: 'min-content',
+  [vars.questionCursor]: 'pointer',
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+  [vars.questionFontSize]: refs.fontSize,
+  [vars.questionFontFamily]: refs.fontFamily,
+};
+
+export default securityQuestionsVerify;