@descope-ui/descope-password-strength 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-04-06)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `test-drivers` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.9`
+* `@descope-ui/theme-globals` updated to version `0.0.9`
+* `@descope-ui/theme-input-wrapper` updated to version `0.0.9`

package/e2e/descope-password-strength.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+import createPasswordStrengthTestDriver from '../testDriver/passwordStrengthTestDriver';
+
+const componentAttributes = {
+  fullWidth: ['true', 'false'],
+  password: ['', '1', '1Qaz', '1QaZ2Wse', '1QaZ2Wse3E', '1QaZ2Wse3EdC']
+};
+
+const presets = {
+  'direction rtl': {
+    direction: 'rtl',
+    password: '1',
+  },
+  'full width': {
+    fullWidth: 'true',
+    password: '1',
+  },
+};
+
+const storyName = 'descope-password-strength';
+const componentName = 'descope-password-strength';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test.describe(`${attr}: ${value}`, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, { [attr]: value }), { waitUntil: 'load' });
+      });
+      test('style', async ({ page }) => {
+        await page.waitForSelector(componentName);
+        const component = createPasswordStrengthTestDriver(page.locator(componentName));
+
+        expect(await component.screenshot({animations: 'disabled', delay: 5000, timeout: 5000})).toMatchSnapshot();
+      });
+    });
+  });
+
+  loopPresets(presets, (preset, name) => {
+    test(name, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, preset));
+      await page.waitForSelector(componentName);
+      const component = createPasswordStrengthTestDriver(page.locator(componentName));
+      expect(
+        await component.screenshot({ animations: 'disabled', delay: 5000, timeout: 5000 })
+      ).toMatchSnapshot();
+    });
+  });
+});

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@descope-ui/descope-password-strength",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/PasswordStrengthClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "test-drivers": "0.0.1"
+  },
+  "dependencies": {
+    "@zxcvbn-ts/core": "^3.0.4",
+    "@zxcvbn-ts/language-common": "^3.0.4",
+    "@zxcvbn-ts/language-en": "^3.0.2",
+    "@descope-ui/common": "0.0.9",
+    "@descope-ui/theme-globals": "0.0.9",
+    "@descope-ui/theme-input-wrapper": "0.0.9"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,17 @@
+{
+  "name": "@descope-ui/descope-password-strength",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-password-strength/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/PasswordStrengthClass.js

@@ -0,0 +1,162 @@
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import {
+  getComponentName,
+  injectStyle
+} from '@descope-ui/common/components-helpers';
+import {
+  componentNameValidationMixin,
+  createStyleMixin,
+  draggableMixin,
+} from '@descope-ui/common/components-mixins';
+import { compose } from '@descope-ui/common/utils';
+
+export const componentName = getComponentName('password-strength');
+class RawPasswordStrength extends createBaseClass({
+  componentName,
+  baseSelector: ':host > .wrapper',
+}) {
+  static get observedAttributes() {
+    return ['options', 'value'];
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <div class="wrapper">
+        <div class="bars-container"></div>
+        <div class="text-container">
+        </div>
+      </div>
+		`;
+
+    injectStyle(`
+        :host {
+					display: inline-flex;
+				}
+
+        .wrapper {
+          display: inline-flex;
+          position: relative;
+          flex-direction: column;
+          width: 100%;
+          height: 100%;
+          align-items: flex-start;
+        }
+
+        .bar {
+          flex-grow: 1;
+        }
+
+        .bars-container {
+          display: flex;
+          flex-grow: 1;
+          width: 100%;
+        }
+    `, this);
+
+    this.barsContainer = this.shadowRoot.querySelector('.bars-container');
+    this.textContainer = this.shadowRoot.querySelector('.text-container');
+  }
+
+  get options() {
+    return this.getAttribute('options')?.split(',') || [];
+  }
+
+  // we need to have the option to take the zxcvbn from outside the component
+  getCalcScoreFn = () => import('./calcScore').then(module => module.default);
+
+  #score = -1;
+
+  async calcScore() {
+    const value = this.getAttribute('value') || ''
+    if (!value) return -1;
+
+    const calcScore = await this.getCalcScoreFn();
+
+    return calcScore(value).score;
+  }
+
+  renderBars() {
+    this.barsContainer.innerHTML = '';
+    this.bars = this.options.map((option, index) => {
+      const bar = document.createElement('div');
+      bar.classList.add('bar');
+      bar.classList.toggle('filled', index <= this.#score);
+      this.barsContainer.appendChild(bar);
+
+      return bar;
+    });
+  }
+
+  init() {
+    super.init?.();
+    // we are prefetching the calcScore function
+    this.getCalcScoreFn();
+  }
+
+
+  async onValueChange() {
+    const newScore = await this.calcScore();
+    if (newScore === this.#score) return;
+
+    this.#score = newScore;
+    this.dispatchEvent(new CustomEvent('score-changed', { bubbles: true, composed: true, detail: this.#score }));
+
+    this.bars?.forEach((bar, index) => {
+      bar.classList.toggle('filled', index <= this.#score);
+    });
+
+    this.textContainer.innerHTML = this.options[this.#score] || '';
+
+    if (this.#score === -1) this.removeAttribute('score');
+    else this.setAttribute('score', this.#score);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    if (name === 'options') {
+      return this.renderBars();
+    }
+
+    if (name === 'value') {
+      return this.onValueChange();
+    }
+  }
+}
+
+const { host, bar, filledBar, barsContainer, text } = {
+  host: { selector: () => ':host' },
+  bar: { selector: ' .bar' },
+  barsContainer: { selector: ' .bars-container' },
+  filledBar: { selector: ' .bar.filled' },
+  text: { selector: ' .text-container' },
+};
+
+export const PasswordStrengthClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      hostWidth: [
+        { ...host, property: 'width' },
+        { ...host, property: 'min-width' },
+      ],
+      hostDirection: { ...host, property: 'direction' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      barHeight: { ...bar, property: 'height' },
+      barBorderRadius: { ...bar, property: 'border-radius' },
+      emptyBarColor: { ...bar, property: 'background-color' },
+      filledBarColor: { ...filledBar, property: 'background-color' },
+      textColor: { ...text, property: 'color' },
+      spacing: { property: 'gap' },
+      barSpacing: { ...barsContainer, property: 'gap' },
+      fontSize: {},
+      fontWeight: {},
+      fontFamily: {},
+      barTransition: { ...bar, property: 'transition' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawPasswordStrength);

package/src/component/calcScore.js

@@ -0,0 +1,16 @@
+import { zxcvbn, zxcvbnOptions } from "@zxcvbn-ts/core";
+import * as zxcvbnCommonPackage from "@zxcvbn-ts/language-common";
+import * as zxcvbnEnPackage from "@zxcvbn-ts/language-en";
+
+
+export const options = {
+  translations: zxcvbnEnPackage.translations,
+  graphs: zxcvbnCommonPackage.adjacencyGraphs,
+  dictionary: {
+    ...zxcvbnCommonPackage.dictionary,
+    ...zxcvbnEnPackage.dictionary,
+  },
+};
+zxcvbnOptions.setOptions(options);
+
+export default zxcvbn

package/src/component/index.js

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

package/src/theme.js

@@ -0,0 +1,52 @@
+import globals from '@descope-ui/theme-globals';
+import { PasswordStrengthClass } from './component/PasswordStrengthClass';
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+import { refs } from '@descope-ui/theme-input-wrapper';
+
+const globalRefs = getThemeRefs(globals);
+const compVars = PasswordStrengthClass.cssVarList;
+
+const passwordStrength = {
+  [compVars.hostDirection]: globalRefs.direction,
+  [compVars.barHeight]: '4px',
+  [compVars.barTransition]: 'background-color 0.3s',
+  [compVars.barBorderRadius]: globalRefs.radius.sm,
+  [compVars.hostMinWidth]: refs.minWidth,
+  [compVars.barSpacing]: globalRefs.spacing.sm,
+  [compVars.emptyBarColor]: globalRefs.colors.surface.light,
+  [compVars.fontFamily]: refs.fontFamily,
+  [compVars.fontSize]: refs.labelFontSize,
+  [compVars.fontWeight]: refs.labelFontWeight,
+  [compVars.spacing]: globalRefs.spacing.sm,
+  _fullWidth: {
+    [compVars.hostWidth]: '100%',
+  },
+  score : {
+    0: {
+      [compVars.filledBarColor]: globalRefs.colors.error.light,
+      [compVars.textColor]: globalRefs.colors.error.light,
+    },
+    1: {
+      [compVars.filledBarColor]: globalRefs.colors.error.main,
+      [compVars.textColor]: globalRefs.colors.error.main,
+    },
+    2: {
+      [compVars.filledBarColor]: globalRefs.colors.error.dark,
+      [compVars.textColor]: globalRefs.colors.error.dark,
+    },
+    3: {
+      [compVars.filledBarColor]: globalRefs.colors.success.dark,
+      [compVars.textColor]: globalRefs.colors.success.dark,
+    },
+    4: {
+      [compVars.filledBarColor]: globalRefs.colors.success.main,
+      [compVars.textColor]: globalRefs.colors.success.main,
+    },
+  }
+};
+
+export default passwordStrength;
+
+export const vars = {
+  ...compVars,
+};

package/stories/descope-password-strength.stories.js

@@ -0,0 +1,29 @@
+import { componentName } from '../src/component';
+import { directionControl } from '@descope-ui/common/sb-controls';
+
+const Template = ({ options, password, direction, fullWidth }) =>
+  `
+  <descope-password-strength
+    value="${password ?? -1}"
+    options="${options.join(',') || ''}"
+    st-host-direction="${direction ?? ''}"
+    full-width="${fullWidth ?? false}"
+  ></descope-password-strength>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-password-strength',
+  argTypes: {
+    ...directionControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  direction: '',
+  password: '',
+  options: ['Very weak','Weak','Average','Strong','Very strong'],
+  fullWidth: false,
+};

package/testDriver/passwordStrengthTestDriver.ts

@@ -0,0 +1,11 @@
+import { Locator } from '@playwright/test';
+import { createComponentTestDriver } from 'test-drivers';
+
+const createPasswordStrengthTestDriver = (locator: Locator) => {
+
+  return {
+    ...createComponentTestDriver(locator),
+  };
+};
+
+export default createPasswordStrengthTestDriver;