@descope/web-components-ui 0.0.1

package/src/components/descope-radio-group/RadioGroupClass.js

@@ -0,0 +1,192 @@
+import { compose } from '../../helpers';
+import {
+  forwardAttrs,
+  getComponentName,
+  observeAttributes,
+  observeChildren,
+} from '../../helpers/componentHelpers';
+import { resetInputLabelPosition } from '../../helpers/themeHelpers/resetHelpers';
+import {
+  componentNameValidationMixin,
+  createProxy,
+  createStyleMixin,
+  draggableMixin,
+  proxyInputMixin,
+} from '../../mixins';
+import textFieldMappings from '../descope-text-field/textFieldMappings';
+import { componentName as childNodeName, RadioButtonClass } from './RadioButtonClass';
+
+export const componentName = getComponentName('radio-group');
+
+const RadioGroupMixin = (superclass) =>
+  class RadioGroupMixinClass extends superclass {
+    // eslint-disable-next-line class-methods-use-this
+    #renderItem = ({ value, label }) =>
+      `<descope-radio-button value="${value}">${label}</descope-radio-button>`;
+
+    #data;
+
+    constructor() {
+      super();
+
+      // we are overriding vaadin children getter so it will run on our custom elements
+      Object.defineProperty(this.baseElement, 'children', {
+        get: () => this.querySelectorAll(childNodeName),
+      });
+
+      // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
+      this.baseElement.__filterRadioButtons = (nodes) => {
+        return nodes.filter((node) => node.localName === childNodeName);
+      };
+
+      // vaadin radio group missing some input properties
+      this.baseElement.setCustomValidity = () => {};
+    }
+
+    get items() {
+      return this.shadowRoot.querySelector('slot').assignedElements();
+    }
+
+    get size() {
+      return this.getAttribute('size');
+    }
+
+    get data() {
+      if (this.#data) return this.#data;
+
+      const dataAttr = this.getAttribute('data');
+
+      if (dataAttr) {
+        try {
+          const data = JSON.parse(dataAttr);
+          if (this.isValidDataType(data)) {
+            return data;
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('could not parse data string from attribute "data" - ', e.message);
+        }
+      }
+
+      return [];
+    }
+
+    set data(data) {
+      if (this.isValidDataType(data)) {
+        this.#data = data;
+        this.renderItems();
+      }
+    }
+
+    get defaultValue() {
+      return this.getAttribute('default-value');
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    isValidDataType(data) {
+      const isValid = Array.isArray(data);
+      if (!isValid) {
+        // eslint-disable-next-line no-console
+        console.error('data must be an array, received:', data);
+      }
+
+      return isValid;
+    }
+
+    getItemsTemplate() {
+      return this.data?.reduce?.((acc, item) => acc + (this.#renderItem?.(item || {}) || ''), '');
+    }
+
+    renderItems() {
+      const template = this.getItemsTemplate();
+      if (template) this.innerHTML = template;
+    }
+
+    init() {
+      super.init?.();
+
+      this.inputElement = this.baseElement;
+
+      this.renderItems();
+
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+
+      Object.defineProperty(this.baseElement, 'validity', {
+        get: () => {
+          return { valueMissing: !this.baseElement.checkValidity() };
+        },
+      });
+
+      forwardAttrs(this, this.baseElement, {
+        includeAttrs: ['layout'],
+        mapAttrs: { layout: 'theme' },
+      });
+
+      setTimeout(() => {
+        if (this.defaultValue) {
+          this.value = this.defaultValue;
+        }
+      });
+
+      // we want new items to get the size
+      observeChildren(this, ({ addedNodes }) => {
+        addedNodes.forEach((node) => {
+          node.setAttribute('size', this.size);
+        });
+      });
+
+      observeAttributes(
+        this,
+        () => {
+          this.items.forEach((item) => {
+            item.setAttribute('size', this.size);
+          });
+        },
+        {
+          includeAttrs: ['size'],
+        }
+      );
+    }
+  };
+
+export const RadioGroupClass = compose(
+  createStyleMixin({
+    mappings: {
+      ...textFieldMappings,
+      buttonsSpacing: { selector: '::part(group-field)', property: 'justify-content' },
+      buttonsRowGap: { selector: '::part(group-field)', property: 'row-gap' },
+      buttonsColumnGap: { selector: '::part(group-field)', property: 'column-gap' },
+      itemsLabelColor: {
+        selector: () => `::slotted(${RadioButtonClass.componentName})`,
+        property: RadioButtonClass.cssVarList.labelTextColor,
+      },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['setSelectionRange'] }),
+  componentNameValidationMixin,
+  RadioGroupMixin
+)(
+  createProxy({
+    slots: ['', 'prefix'],
+    wrappedEleName: 'vaadin-radio-group',
+    style: () => `
+    :host {
+      display: inline-block;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+
+    vaadin-radio-group {
+      padding: 0;
+      width: 100%;
+    }
+
+    ${resetInputLabelPosition('vaadin-radio-group')}
+    `,
+
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
+    componentName,
+    includeForwardProps: ['value'],
+  })
+);

package/src/components/descope-radio-group/index.js

@@ -0,0 +1,8 @@
+import { componentName as groupComponentName, RadioGroupClass } from './RadioGroupClass';
+import { componentName as buttonComponentName, RadioButtonClass } from './RadioButtonClass';
+import '@vaadin/radio-group';
+
+customElements.define(groupComponentName, RadioGroupClass);
+customElements.define(buttonComponentName, RadioButtonClass);
+
+export { RadioGroupClass };

package/src/components/descope-recaptcha/RecaptchaClass.js

@@ -0,0 +1,230 @@
+import { draggableMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+
+export const componentName = getComponentName('recaptcha');
+
+const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
+
+const BaseClass = createBaseClass({
+  componentName,
+  baseSelector: ':host > div',
+});
+class RawRecaptcha extends BaseClass {
+  static get observedAttributes() {
+    return observedAttributes.concat(BaseClass.observedAttributes || []);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (oldValue !== newValue) {
+      if (attrName === 'enabled') {
+        this.#toggleRecaptcha(newValue === 'true');
+      }
+    }
+  }
+
+  renderRecaptcha(enabled) {
+    if (this.children.length) {
+      this.updatePreview();
+      return;
+    }
+
+    this.toggleRecaptchaEles(enabled);
+  }
+
+  toggleRecaptchaEles(enabled) {
+    if (enabled) {
+      this.recaptchaEle.style.display = '';
+      this.mockRecaptchaEle.style.display = 'none';
+    } else {
+      this.recaptchaEle.style.display = 'none';
+      this.mockRecaptchaEle.style.display = '';
+    }
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+      :host > div:not(.hidden) {
+        display: flex;
+      }
+      :host #recaptcha .grecaptcha-badge {
+        box-shadow: none !important;
+      }
+      :host #recaptcha .grecaptcha-logo {
+        height: 100%;
+      }
+      :host #recaptcha {
+				width: 100%;
+        height: 100%;
+			}
+      :host img {
+        width: 256px;
+      }
+      :host([full-width="true"]) {
+        width: 100%;
+      }
+      .hidden {
+        display: none;
+      }
+		</style>
+    <div class="badge">
+      <span id="recaptcha"></span>
+      <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
+    </div>
+    <slot></slot>
+	`;
+
+    this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
+    this.mockRecaptchaEle = this.baseElement.querySelector('img');
+    this.badge = this.shadowRoot.querySelector('.badge');
+  }
+
+  init() {
+    super.init?.();
+
+    observeChildren(this, this.updatePreview.bind(this));
+  }
+
+  updatePreview() {
+    if (this.children.length) {
+      this.recaptchaEle.style.display = 'none';
+      this.mockRecaptchaEle.style.display = 'none';
+      this.badge.classList.add('hidden');
+    } else {
+      this.toggleRecaptchaEles(this.enabled);
+      this.badge.classList.remove('hidden');
+    }
+  }
+
+  get enterprise() {
+    return this.getAttribute('enterprise') === 'true';
+  }
+
+  get siteKey() {
+    return this.getAttribute('site-key');
+  }
+
+  get action() {
+    return this.getAttribute('action') || 'load';
+  }
+
+  get enabled() {
+    return this.getAttribute('enabled') === 'true';
+  }
+
+  get scriptURL() {
+    const url = new URL('https://www.google.com/recaptcha/');
+    url.pathname += `${this.enterprise ? 'enterprise' : 'api'}.js`;
+    url.searchParams.append('onload', 'onRecaptchaLoadCallback');
+    url.searchParams.append('render', 'explicit');
+    return url.toString();
+  }
+
+  #toggleRecaptcha(enabled) {
+    this.renderRecaptcha(enabled);
+    if (enabled) {
+      this.#createOnLoadScript();
+      if (!document.getElementById('recaptcha-script')) {
+        this.#loadRecaptchaScript();
+      } else {
+        window.onRecaptchaLoadCallback();
+      }
+    }
+  }
+
+  #loadRecaptchaScript() {
+    const script = document.createElement('script');
+    script.src = this.scriptURL;
+    script.async = true;
+    script.id = 'recaptcha-script';
+    script.defer = true;
+    document.body.appendChild(script);
+  }
+
+  get grecaptchaInstance() {
+    return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
+  }
+
+  #getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId) {
+    if (!this.isConnected) {
+      return;
+    }
+
+    grecaptchaInstance.ready(() => {
+      // clone the node and append it to the body so that it can be used by the grepcaptcha script
+      const cloneNode = currentNode
+        .querySelector('textarea[name^="g-recaptcha-response"]')
+        ?.cloneNode();
+      if (cloneNode) {
+        cloneNode.style.display = 'none';
+        document.body.appendChild(cloneNode);
+      }
+
+      // cleaning up the recaptcha element we added to the body
+      const removeCloneNode = () => {
+        cloneNode.remove();
+      };
+
+      if (!this.siteKey) {
+        return;
+      }
+      // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
+      // also calling grecaptchaInstance.reset() does not work
+      const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
+      exec.then((token, e) => {
+        if (e) {
+          // eslint-disable-next-line no-console
+          console.warn('could not execute recaptcha', e);
+        } else {
+          this.updateComponentsContext({
+            risktoken: token,
+            riskaction: this.action,
+          });
+          // if the component is still connected, we should try to get a new token before the token expires (2 minutes)
+          if (this.isConnected) {
+            setTimeout(() => {
+              this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
+            }, 110000);
+          }
+        }
+        removeCloneNode();
+      });
+    });
+  }
+
+  #createOnLoadScript() {
+    window.onRecaptchaLoadCallback = () => {
+      const currentNode = this.recaptchaEle;
+
+      // if there are child nodes, it means that the recaptcha was already rendered
+      if (currentNode.hasChildNodes()) {
+        return;
+      }
+
+      const { grecaptchaInstance } = this;
+
+      if (!grecaptchaInstance) {
+        return;
+      }
+
+      setTimeout(() => {
+        const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {
+          sitekey: this.siteKey,
+          badge: 'inline',
+          size: 'invisible',
+        });
+        this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
+      }, 0);
+    };
+  }
+}
+
+export const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);

package/src/components/descope-recaptcha/index.js

@@ -0,0 +1,5 @@
+import { componentName, RecaptchaClass } from './RecaptchaClass';
+
+customElements.define(componentName, RecaptchaClass);
+
+export { RecaptchaClass };

package/src/components/descope-scopes-list/ScopesListClass.js

@@ -0,0 +1,131 @@
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
+import { createDynamicDataMixin } from '../../mixins/createDynamicDataMixin';
+import { CheckboxClass } from '../boolean-fields/descope-checkbox/CheckboxClass';
+import { SwitchToggleClass } from '../boolean-fields/descope-switch-toggle/SwitchToggleClass';
+
+export const componentName = getComponentName('scopes-list');
+const variants = ['checkbox', 'switch'];
+
+const itemRenderer = ({ id, desc, required = false }, _, ref) => {
+  const ComponentClass = ref.variant === 'checkbox' ? CheckboxClass : SwitchToggleClass;
+
+  return `
+    <${ComponentClass.componentName}
+      bordered="true"
+      size=${ref.size}
+      label="${desc}"
+      data-id="${id}"
+      readonly="${required || ref.isReadOnly}"
+      required="${required}"
+      checked="true"
+    ></${ComponentClass.componentName}>
+`;
+};
+
+class RawScopesList 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 isReadOnly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
+  get size() {
+    return this.getAttribute('size') || 'sm';
+  }
+
+  #getChildNodes() {
+    return Array.from(this.shadowRoot.querySelector('div').children);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  reportValidity() {
+    this.checkValidity();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  checkValidity() {
+    return this.data.every((item) => !item.required || this.value.includes(item.id));
+  }
+
+  get value() {
+    return this.#getChildNodes()
+      .filter((node) => node.checked)
+      .map((node) => node.getAttribute('data-id'));
+  }
+
+  set value(val = []) {
+    this.#getChildNodes().forEach((node) => {
+      // eslint-disable-next-line no-param-reassign
+      node.checked = val.includes(node.getAttribute('data-id'));
+    });
+  }
+
+  get variant() {
+    const variant = this.getAttribute('variant');
+
+    return variants.includes(variant) ? variant : variants[0];
+  }
+}
+
+export const ScopesListClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: [
+        { selector: () => ':host', property: 'direction' },
+        {
+          selector: () => CheckboxClass.componentName,
+          property: CheckboxClass.cssVarList.hostDirection,
+        },
+        {
+          selector: () => SwitchToggleClass.componentName,
+          property: SwitchToggleClass.cssVarList.hostDirection,
+        },
+      ],
+      gap: { selector: () => 'div', property: 'gap' },
+      requiredInputBorderColor: [
+        {
+          selector: `${CheckboxClass.componentName}[required="true"]`,
+          property: CheckboxClass.cssVarList.inputBorderColor,
+        },
+        {
+          selector: `${SwitchToggleClass.componentName}[required="true"]`,
+          property: SwitchToggleClass.cssVarList.inputBorderColor,
+        },
+      ],
+      requiredInputValueTextColor: [
+        {
+          selector: `${CheckboxClass.componentName}[required="true"]`,
+          property: CheckboxClass.cssVarList.inputValueTextColor,
+        },
+        {
+          selector: `${SwitchToggleClass.componentName}[required="true"]`,
+          property: SwitchToggleClass.cssVarList.knobColor,
+        },
+      ],
+    },
+  }),
+  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size', 'variant'] }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawScopesList);

package/src/components/descope-scopes-list/index.js

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