feat(password): add form integration

ovh · Feb 5, 2024 · 05f396d · 05f396d
1 parent f83e367
commit 05f396d
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 112 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -1100,92 +1100,78 @@ export namespace Components {
     interface OsdsPassword {
         /**
           * ariaLabel of the password
-          * @see OdsPasswordAttributes.ariaLabel
          */
         "ariaLabel": HTMLElement['ariaLabel'];
         /**
           * ID of the element that labels the password
-          * @see OdsPasswordAttributes.ariaLabelledby
          */
         "ariaLabelledby"?: string;
         /**
           * Ability to clear the password value
-          * @see OdsPasswordAttributes.clearable
          */
         "clearable"?: boolean;
         /**
           * Main color of the password: see component principles
-          * @see OdsPasswordAttributes.color
          */
         "color"?: ODS_THEME_COLOR_INTENT;
         /**
           * Indicates if the password is contrasted or not: see component principles
-          * @see OdsPasswordAttributes.contrasted
          */
         "contrasted"?: boolean;
+        /**
+          * Default value of the password
+         */
+        "defaultValue": string;
         /**
           * Indicates if the password is disabled or not: see component principles
-          * @see OdsPasswordAttributes.disabled
          */
         "disabled"?: boolean;
         /**
           * Indicates if the password shows error or not
-          * @see OdsPasswordAttributes.error
          */
         "error"?: boolean;
         /**
           * List of forbidden values for the password
-          * @see OdsPasswordAttributes.forbiddenValues
          */
         "forbiddenValues": OdsFormForbiddenValues<number>;
         /**
           * Indicates if the password is inline or not
-          * @see OdsPasswordAttributes.inline
          */
         "inline"?: boolean;
         /**
           * Label of the password field
-          * @see OdsPasswordAttributes.label
          */
         "label"?: string;
         /**
           * Indicates if the password is in loading state or not
-          * @see OdsPasswordAttributes.loading
          */
         "loading"?: boolean;
         /**
           * Indicates if the password is masked or not
-          * @see OdsPasswordAttributes.masked
          */
         "masked"?: boolean;
         /**
           * Name of the password field
-          * @see OdsPasswordAttributes.name
          */
         "name"?: string;
         /**
           * Placeholder text for the password
-          * @see OdsPasswordAttributes.placeholder
          */
         "placeholder"?: string;
         /**
           * Indicates if the password is read-only or not
-          * @see OdsPasswordAttributes.readOnly
          */
         "readOnly"?: boolean;
         /**
           * Indicates if the password is required or not
-          * @see OdsPasswordAttributes.required
          */
         "required"?: boolean;
         /**
           * Size of the password: see component principles
-          * @see OdsPasswordAttributes.size
          */
         "size"?: ODS_INPUT_SIZE1;
         /**
           * Current value of the password
-          * @see OdsInputAttributes.value
          */
         "value": string;
     }
@@ -3816,92 +3802,78 @@ declare namespace LocalJSX {
     interface OsdsPassword {
         /**
           * ariaLabel of the password
-          * @see OdsPasswordAttributes.ariaLabel
          */
         "ariaLabel"?: HTMLElement['ariaLabel'];
         /**
           * ID of the element that labels the password
-          * @see OdsPasswordAttributes.ariaLabelledby
          */
         "ariaLabelledby"?: string;
         /**
           * Ability to clear the password value
-          * @see OdsPasswordAttributes.clearable
          */
         "clearable"?: boolean;
         /**
           * Main color of the password: see component principles
-          * @see OdsPasswordAttributes.color
          */
         "color"?: ODS_THEME_COLOR_INTENT;
         /**
           * Indicates if the password is contrasted or not: see component principles
-          * @see OdsPasswordAttributes.contrasted
          */
         "contrasted"?: boolean;
+        /**
+          * Default value of the password
+         */
+        "defaultValue"?: string;
         /**
           * Indicates if the password is disabled or not: see component principles
-          * @see OdsPasswordAttributes.disabled
          */
         "disabled"?: boolean;
         /**
           * Indicates if the password shows error or not
-          * @see OdsPasswordAttributes.error
          */
         "error"?: boolean;
         /**
           * List of forbidden values for the password
-          * @see OdsPasswordAttributes.forbiddenValues
          */
         "forbiddenValues"?: OdsFormForbiddenValues<number>;
         /**
           * Indicates if the password is inline or not
-          * @see OdsPasswordAttributes.inline
          */
         "inline"?: boolean;
         /**
           * Label of the password field
-          * @see OdsPasswordAttributes.label
          */
         "label"?: string;
         /**
           * Indicates if the password is in loading state or not
-          * @see OdsPasswordAttributes.loading
          */
         "loading"?: boolean;
         /**
           * Indicates if the password is masked or not
-          * @see OdsPasswordAttributes.masked
          */
         "masked"?: boolean;
         /**
           * Name of the password field
-          * @see OdsPasswordAttributes.name
          */
         "name"?: string;
         /**
           * Placeholder text for the password
-          * @see OdsPasswordAttributes.placeholder
          */
         "placeholder"?: string;
         /**
           * Indicates if the password is read-only or not
-          * @see OdsPasswordAttributes.readOnly
          */
         "readOnly"?: boolean;
         /**
           * Indicates if the password is required or not
-          * @see OdsPasswordAttributes.required
          */
         "required"?: boolean;
         /**
           * Size of the password: see component principles
-          * @see OdsPasswordAttributes.size
          */
         "size"?: ODS_INPUT_SIZE1;
         /**
           * Current value of the password
-          * @see OdsInputAttributes.value
          */
         "value"?: string;
     }

diff --git a/...ages/components/src/password/src/components/osds-password/constants/default-attributes.ts b/...ages/components/src/password/src/components/osds-password/constants/default-attributes.ts
@@ -10,6 +10,7 @@ const DEFAULT_ATTRIBUTE: OdsPasswordAttribute = Object.freeze({
   clearable: false,
   color: ODS_THEME_COLOR_INTENT.default,
   contrasted: false,
+  defaultValue: '',
   disabled: false,
   error: false,
   forbiddenValues: [],

diff --git a/packages/components/src/password/src/components/osds-password/core/controller.ts b/packages/components/src/password/src/components/osds-password/core/controller.ts
@@ -0,0 +1,26 @@
+import type { OdsInputValueChangeEvent } from '../../../../../input/src';
+import type { OsdsPassword } from '../osds-password';
+
+class OdsPasswordController {
+  private readonly component: OsdsPassword;
+
+  constructor(component: OsdsPassword) {
+    this.component = component;
+  }
+
+  beforeInit(): void {
+    if (!this.component.value && this.component.defaultValue) {
+      this.component.value = this.component.defaultValue;
+    }
+    this.component.internals.setFormValue(this.component.value?.toString() ?? '');
+  }
+
+  onValueChange({ detail }: OdsInputValueChangeEvent): void {
+    this.component.value = detail.value?.toString() ?? '';
+    this.component.internals?.setFormValue?.(this.component.value?.toString() ?? '');
+  }
+}
+
+export {
+  OdsPasswordController,
+};
diff --git a/packages/components/src/password/src/components/osds-password/interfaces/attributes.ts b/packages/components/src/password/src/components/osds-password/interfaces/attributes.ts
@@ -13,6 +13,8 @@ interface OdsPasswordAttribute {
   color?: ODS_THEME_COLOR_INTENT;
   /** Indicates if the password is contrasted or not: see component principles */
   contrasted?: boolean;
+  /** Default value of the password */
+  defaultValue: string;
   /** Indicates if the password is disabled or not: see component principles */
   disabled?: boolean;
   /** Indicates if the password shows error or not */

diff --git a/...ages/components/src/password/src/components/osds-password/osds-password.e2e.screenshot.ts b/...ages/components/src/password/src/components/osds-password/osds-password.e2e.screenshot.ts
@@ -1,16 +1,14 @@
 import type { OdsPasswordAttribute } from './interfaces/attributes';
 import type { E2EElement, E2EPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
 import { ODS_THEME_COLOR_INTENTS } from '@ovhcloud/ods-common-theming';
 import { ODS_INPUT_SIZES } from '../../../../input/src';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
 
 describe('e2e:osds-password', () => {
-  const baseAttribute = { ariaLabel: '', forbiddenValues: [], value: '' };
+  const baseAttribute = { ariaLabel: '', defaultValue: '', forbiddenValues: [], value: '' };
   let page: E2EPage;
   let el: E2EElement;
 

diff --git a/packages/components/src/password/src/components/osds-password/osds-password.e2e.ts b/packages/components/src/password/src/components/osds-password/osds-password.e2e.ts
@@ -1,15 +1,12 @@
 import type { OdsPasswordAttribute } from './interfaces/attributes';
 import type { E2EElement, E2EPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
 import { ODS_INPUT_TYPE } from '../../../../input/src';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
-
 describe('e2e:osds-password', () => {
-  const baseAttribute = { ariaLabel: '', forbiddenValues: [], value: '' };
+  const baseAttribute = { ariaLabel: '', defaultValue: '', forbiddenValues: [], value: '' };
   let page: E2EPage;
   let el: E2EElement;
 

diff --git a/packages/components/src/password/src/components/osds-password/osds-password.spec.ts b/packages/components/src/password/src/components/osds-password/osds-password.spec.ts
@@ -1,17 +1,16 @@
+jest.mock('./core/controller'); // keep jest.mock before any
+
 import type { OdsPasswordAttribute } from './interfaces/attributes';
 import type { SpecPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str, odsUnitTestAttribute } from '@ovhcloud/ods-common-testing';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ODS_INPUT_SIZE } from '../../../../input/src';
 import { newSpecPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 import { OsdsPassword } from './osds-password';
 
-
 describe('spec:osds-password', () => {
-  const baseAttribute = { ariaLabel: '', forbiddenValues: [], value: '' };
+  const baseAttribute = { ariaLabel: '', defaultValue: '', forbiddenValues: [], value: '' };
   let page: SpecPage;
   let root: HTMLElement | undefined;
   let instance: OsdsPassword;