Merge pull request #196 from open-formulieren/cleanup/3283-remove-pas…

…sword-component

💥 Remove password Formio component

package.json

@@ -66,7 +66,7 @@
     "@formatjs/cli": "^6.1.1",
     "@formatjs/ts-transformer": "^3.12.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@open-formulieren/types": "^0.34.0",
+    "@open-formulieren/types": "^0.35.0",
     "@storybook/addon-actions": "^8.3.5",
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-interactions": "^8.3.5",

src/components/ComponentConfiguration.stories.tsx

@@ -2743,80 +2743,6 @@ export const CosignV2: Story = {
   },
 };
 
-export const Password: Story = {
-  render: Template,
-  name: 'type: password',
-
-  args: {
-    component: {
-      id: 'wekruya',
-      type: 'password',
-      validateOn: 'blur',
-      key: 'password',
-      label: 'A password field',
-      validate: {
-        required: false,
-      },
-    },
-
-    builderInfo: {
-      title: 'Password Field',
-      icon: 'wallet',
-      group: 'basic',
-      weight: 10,
-      schema: {},
-    },
-  },
-
-  play: async ({canvasElement, args}) => {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByLabelText('Label')).toHaveValue('A password field');
-    await waitFor(async () => {
-      await expect(canvas.getByLabelText('Property Name')).toHaveValue('aPasswordField');
-    });
-    await expect(canvas.getByLabelText('Description')).toHaveValue('');
-    await expect(canvas.getByLabelText('Show in summary')).toBeChecked();
-    await expect(canvas.getByLabelText('Show in email')).not.toBeChecked();
-    await expect(canvas.getByLabelText('Show in PDF')).toBeChecked();
-    await expect(canvas.queryByLabelText('Placeholder')).not.toBeInTheDocument();
-
-    // ensure that changing fields in the edit form properly update the preview
-    const preview = within(canvas.getByTestId('componentPreview'));
-
-    await userEvent.clear(canvas.getByLabelText('Label'));
-    await userEvent.type(canvas.getByLabelText('Label'), 'Updated preview label');
-    expect(await preview.findByText('Updated preview label'));
-
-    const previewInput = preview.getByLabelText<HTMLInputElement>('Updated preview label');
-    await expect(previewInput).toHaveDisplayValue('');
-    await expect(previewInput.type).toEqual('password');
-
-    // Ensure that the manually entered key is kept instead of derived from the label,
-    // even when key/label components are not mounted.
-    const keyInput = canvas.getByLabelText('Property Name');
-    fireEvent.change(keyInput, {target: {value: 'customKey'}});
-    await userEvent.click(canvas.getByRole('tab', {name: 'Advanced'}));
-    await userEvent.click(canvas.getByRole('tab', {name: 'Basic'}));
-    await userEvent.clear(canvas.getByLabelText('Label'));
-    await userEvent.type(canvas.getByLabelText('Label'), 'Other label', {delay: 50});
-    await expect(canvas.getByLabelText('Property Name')).toHaveDisplayValue('customKey');
-
-    // check that toggling the 'multiple' checkbox properly updates the preview.
-    // We use fireEvent because firefox borks on userEvent.click, see:
-    // https://github.com/testing-library/user-event/issues/1149
-    fireEvent.click(canvas.getByLabelText<HTMLInputElement>('Multiple values'));
-    await userEvent.click(preview.getByRole('button', {name: 'Add another'}));
-    // await expect(preview.getByTestId('input-customKey[0]')).toHaveDisplayValue('');
-    // test for the default value inputs -> these don't have accessible labels/names :(
-    const addButtons = canvas.getAllByRole('button', {name: 'Add another'});
-    await userEvent.click(addButtons[0]);
-
-    await userEvent.click(canvas.getByRole('button', {name: 'Save'}));
-    expect(args.onSubmit).toHaveBeenCalled();
-  },
-};
-
 // FIXME: this component is bad for accesibility :(
 export const Signature: Story = {
   render: Template,

src/registry/index.ts

@@ -21,7 +21,6 @@ import Licenseplate from './licenseplate';
 import LeafletMap from './map';
 import NpFamilyMembers from './npFamilyMembers';
 import NumberField from './number';
-import Password from './password';
 import PhoneNumber from './phonenumber';
 import Postcode from './postcode';
 import ProductPrice from './productPrice';
@@ -88,7 +87,6 @@ const REGISTRY: Registry = {
   softRequiredErrors: SoftRequiredErrors,
   // deprecated
   coSign: CosignV1,
-  password: Password,
   productPrice: ProductPrice,
 };