From 43d6d27ad993b971bc486e840e1165b948a28379 Mon Sep 17 00:00:00 2001
From: Andreas Steinmann <asteinmann@intershop.com>
Date: Wed, 11 Sep 2024 16:05:53 +0200
Subject: [PATCH] feat(accessibility): add password visibility toggle, use
 dedicated password component and update error indicators (#1694)

* Add functionality to toggle password visibility for password fields.
* Replace TextInputFieldComponent with PasswordFieldComponent to provide password-specific functionality.
* Update error field indicator from "x" to "!" for improved clarity and accessibility.

BREAKING CHANGES: The TextInputFieldComponent is no longer used for password fields. Instead, the PasswordFieldComponent is now used, which includes functionality to toggle password visibility. Password validators are applied to each instance as needed.
---
 src/app/core/directives.module.ts             |  3 +
 .../directives/focus-outside.directive.ts     | 32 +++++++++
 src/app/core/icon.module.ts                   |  6 ++
 .../punchout-user-form.component.ts           | 11 ++-
 .../account-profile-password.component.ts     | 14 ++--
 .../update-password-form.component.spec.ts    |  2 +-
 .../update-password-form.component.ts         | 11 ++-
 ...registration-form-configuration.service.ts | 11 ++-
 .../login/login-form/login-form.component.ts  |  3 +-
 .../validation-icons.component.html           |  4 +-
 .../password-field.component.html             | 29 ++++++++
 .../password-field.component.spec.ts          | 70 +++++++++++++++++++
 .../password-field.component.ts               | 45 ++++++++++++
 .../text-input-field.component.ts             |  6 +-
 src/app/shared/formly/types/types.module.ts   | 11 ++-
 src/assets/i18n/de_DE.json                    |  2 +
 src/assets/i18n/en_US.json                    |  2 +
 src/assets/i18n/fr_FR.json                    |  2 +
 src/styles/global/forms.scss                  | 37 ++++++++++
 19 files changed, 272 insertions(+), 29 deletions(-)
 create mode 100644 src/app/core/directives/focus-outside.directive.ts
 create mode 100644 src/app/shared/formly/types/password-field/password-field.component.html
 create mode 100644 src/app/shared/formly/types/password-field/password-field.component.spec.ts
 create mode 100644 src/app/shared/formly/types/password-field/password-field.component.ts

diff --git a/src/app/core/directives.module.ts b/src/app/core/directives.module.ts
index 90bc5490f4..f5597f0880 100644
--- a/src/app/core/directives.module.ts
+++ b/src/app/core/directives.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 
 import { BrowserLazyViewDirective } from './directives/browser-lazy-view.directive';
 import { ClickOutsideDirective } from './directives/click-outside.directive';
+import { FocusOutsideDirective } from './directives/focus-outside.directive';
 import { IdentityProviderCapabilityDirective } from './directives/identity-provider-capability.directive';
 import { IntersectionObserverDirective } from './directives/intersection-observer.directive';
 import { LazyLoadingContentDirective } from './directives/lazy-loading-content.directive';
@@ -14,6 +15,7 @@ import { ServerHtmlDirective } from './directives/server-html.directive';
   declarations: [
     BrowserLazyViewDirective,
     ClickOutsideDirective,
+    FocusOutsideDirective,
     IdentityProviderCapabilityDirective,
     IntersectionObserverDirective,
     LazyLoadingContentDirective,
@@ -25,6 +27,7 @@ import { ServerHtmlDirective } from './directives/server-html.directive';
   exports: [
     BrowserLazyViewDirective,
     ClickOutsideDirective,
+    FocusOutsideDirective,
     IdentityProviderCapabilityDirective,
     IntersectionObserverDirective,
     LazyLoadingContentDirective,
diff --git a/src/app/core/directives/focus-outside.directive.ts b/src/app/core/directives/focus-outside.directive.ts
new file mode 100644
index 0000000000..37c5ee0609
--- /dev/null
+++ b/src/app/core/directives/focus-outside.directive.ts
@@ -0,0 +1,32 @@
+import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';
+
+/**
+ * This directive can be set on a html tag to check focus outside of the tag.
+ * It only works on desktop devices, NOT on touch devices.
+ */
+@Directive({
+  selector: '[ishFocusOutside]',
+})
+export class FocusOutsideDirective {
+  private isTouchDevice: boolean;
+
+  constructor(private elementRef: ElementRef) {
+    this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+  }
+
+  /**
+   * Event to tell the listener, when focus moves outside the target element
+   */
+  @Output() isFocusedOutside = new EventEmitter<boolean>();
+
+  /**
+   * Method to check if focus is outside of the targetElement. Emits true when focus moves outside.
+   */
+  @HostListener('document:focusin', ['$event.target'])
+  onFocusIn(targetElement: ElementRef): void {
+    const focusedInside = this.elementRef.nativeElement.contains(targetElement);
+    if (!focusedInside && !this.isTouchDevice) {
+      this.isFocusedOutside.emit(true);
+    }
+  }
+}
diff --git a/src/app/core/icon.module.ts b/src/app/core/icon.module.ts
index ccbc96a2c5..5f17f04471 100644
--- a/src/app/core/icon.module.ts
+++ b/src/app/core/icon.module.ts
@@ -22,6 +22,9 @@ import {
   faCog,
   faCogs,
   faEnvelope,
+  faExclamationTriangle,
+  faEye,
+  faEyeSlash,
   faFastForward,
   faFax,
   faGear,
@@ -90,6 +93,9 @@ export class IconModule {
       faGlobeAmericas,
       faHeart,
       faHome,
+      faExclamationTriangle,
+      faEye,
+      faEyeSlash,
       faInbox,
       faInfoCircle,
       faList,
diff --git a/src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.ts b/src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.ts
index 748ff1e734..25fd939b11 100644
--- a/src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.ts
+++ b/src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.ts
@@ -4,7 +4,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 
 import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { FormsService } from 'ish-shared/forms/utils/forms.service';
-import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
+import { SpecialValidators, formlyValidation } from 'ish-shared/forms/validators/special-validators';
 
 import { PunchoutType, PunchoutUser } from '../../models/punchout-user/punchout-user.model';
 
@@ -90,12 +90,14 @@ export class PunchoutUserFormComponent implements OnInit {
               },
               hideRequiredMarker: true,
             },
+            validators: {
+              password: formlyValidation('password', SpecialValidators.password),
+            },
           },
           {
             key: 'passwordConfirmation',
-            type: 'ish-text-input-field',
+            type: 'ish-password-field',
             props: {
-              type: 'password',
               required: this.punchoutUser ? false : true,
               label: this.punchoutUser
                 ? 'account.punchout.password.new.confirmation.label'
@@ -103,6 +105,9 @@ export class PunchoutUserFormComponent implements OnInit {
               attributes: { autocomplete: 'new-password' },
               hideRequiredMarker: true,
             },
+            validators: {
+              password: formlyValidation('password', SpecialValidators.password),
+            },
             validation: {
               messages: {
                 required: 'account.punchout.password.confirmation.error.required',
diff --git a/src/app/pages/account-profile-password/account-profile-password/account-profile-password.component.ts b/src/app/pages/account-profile-password/account-profile-password/account-profile-password.component.ts
index 756fb9aca6..6e4be2e3fd 100644
--- a/src/app/pages/account-profile-password/account-profile-password/account-profile-password.component.ts
+++ b/src/app/pages/account-profile-password/account-profile-password/account-profile-password.component.ts
@@ -14,7 +14,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
 import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { FormsService } from 'ish-shared/forms/utils/forms.service';
-import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
+import { SpecialValidators, formlyValidation } from 'ish-shared/forms/validators/special-validators';
 
 /**
  * The Account Profile Password Page Component displays a form for changing the user's password
@@ -43,9 +43,8 @@ export class AccountProfilePasswordComponent implements OnInit, OnChanges {
         fieldGroup: [
           {
             key: 'currentPassword',
-            type: 'ish-text-input-field',
+            type: 'ish-password-field',
             props: {
-              type: 'password',
               required: true,
               hideRequiredMarker: true,
               label: 'account.password.label',
@@ -70,16 +69,21 @@ export class AccountProfilePasswordComponent implements OnInit, OnChanges {
               },
               attributes: { autocomplete: 'new-password' },
             },
+            validators: {
+              password: formlyValidation('password', SpecialValidators.password),
+            },
           },
           {
             key: 'passwordConfirmation',
-            type: 'ish-text-input-field',
+            type: 'ish-password-field',
             props: {
-              type: 'password',
               required: true,
               hideRequiredMarker: true,
               label: 'account.update_password.newpassword_confirmation.label',
             },
+            validators: {
+              password: formlyValidation('password', SpecialValidators.password),
+            },
             validation: {
               messages: {
                 required: 'account.register.password_confirmation.error.default',
diff --git a/src/app/pages/forgot-password/update-password-form/update-password-form.component.spec.ts b/src/app/pages/forgot-password/update-password-form/update-password-form.component.spec.ts
index 6863e2ee4c..e59e6f094c 100644
--- a/src/app/pages/forgot-password/update-password-form/update-password-form.component.spec.ts
+++ b/src/app/pages/forgot-password/update-password-form/update-password-form.component.spec.ts
@@ -34,7 +34,7 @@ describe('Update Password Form Component', () => {
   it('should render forgot password form step 2 for password reminder', () => {
     fixture.detectChanges();
 
-    expect(element.innerHTML.match(/ish-password-field/g)).toHaveLength(1);
+    expect(element.innerHTML.match(/ish-password-field/g)).toHaveLength(2);
     expect(element.innerHTML).toContain('password');
     expect(element.innerHTML).toContain('passwordConfirmation');
 
diff --git a/src/app/pages/forgot-password/update-password-form/update-password-form.component.ts b/src/app/pages/forgot-password/update-password-form/update-password-form.component.ts
index 3c7c6091f2..e3f823edad 100644
--- a/src/app/pages/forgot-password/update-password-form/update-password-form.component.ts
+++ b/src/app/pages/forgot-password/update-password-form/update-password-form.component.ts
@@ -4,7 +4,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 
 import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { FormsService } from 'ish-shared/forms/utils/forms.service';
-import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
+import { SpecialValidators, formlyValidation } from 'ish-shared/forms/validators/special-validators';
 
 /**
  * The Update Password Form Component displays a Forgot Password Update Password form and triggers the submit.
@@ -49,6 +49,9 @@ export class UpdatePasswordFormComponent implements OnInit {
                 args: { 0: '7' },
               },
             },
+            validators: {
+              password: formlyValidation('password', SpecialValidators.password),
+            },
             validation: {
               messages: {
                 minLength: 'account.update_password.new_password.error.length',
@@ -57,13 +60,15 @@ export class UpdatePasswordFormComponent implements OnInit {
           },
           {
             key: 'passwordConfirmation',
-            type: 'ish-text-input-field',
+            type: 'ish-password-field',
             props: {
-              type: 'password',
               required: true,
               hideRequiredMarker: true,
               label: 'account.register.password_confirmation.label',
             },
+            validators: {
+              password: formlyValidation('password', SpecialValidators.password),
+            },
             validation: {
               messages: {
                 required: 'account.register.password_confirmation.error.default',
diff --git a/src/app/pages/registration/services/registration-form-configuration/registration-form-configuration.service.ts b/src/app/pages/registration/services/registration-form-configuration/registration-form-configuration.service.ts
index 003aa915b4..732095ea91 100644
--- a/src/app/pages/registration/services/registration-form-configuration/registration-form-configuration.service.ts
+++ b/src/app/pages/registration/services/registration-form-configuration/registration-form-configuration.service.ts
@@ -16,7 +16,7 @@ import { Customer, CustomerRegistrationType } from 'ish-core/models/customer/cus
 import { User } from 'ish-core/models/user/user.model';
 import { ConfirmLeaveModalComponent } from 'ish-shared/components/registration/confirm-leave-modal/confirm-leave-modal.component';
 import { FieldLibrary } from 'ish-shared/formly/field-library/field-library';
-import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
+import { SpecialValidators, formlyValidation } from 'ish-shared/forms/validators/special-validators';
 
 export interface RegistrationConfigType {
   businessCustomer?: boolean;
@@ -285,16 +285,21 @@ export class RegistrationFormConfigurationService {
               },
               attributes: { autocomplete: 'new-password' },
             },
+            validators: {
+              password: formlyValidation('password', SpecialValidators.password),
+            },
           },
           {
             key: 'passwordConfirmation',
-            type: 'ish-text-input-field',
+            type: 'ish-password-field',
             props: {
-              type: 'password',
               required: true,
               label: 'account.register.password_confirmation.label',
               attributes: { autocomplete: 'new-password' },
             },
+            validators: {
+              password: formlyValidation('password', SpecialValidators.password),
+            },
             validation: {
               messages: {
                 required: 'account.register.password_confirmation.error.default',
diff --git a/src/app/shared/components/login/login-form/login-form.component.ts b/src/app/shared/components/login/login-form/login-form.component.ts
index 66420c0620..3471efec11 100644
--- a/src/app/shared/components/login/login-form/login-form.component.ts
+++ b/src/app/shared/components/login/login-form/login-form.component.ts
@@ -73,9 +73,8 @@ export class LoginFormComponent implements OnInit {
       },
       {
         key: 'password',
-        type: 'ish-text-input-field',
+        type: 'ish-password-field',
         props: {
-          type: 'password',
           label: 'account.login.password.label',
           labelClass: this.labelClass || 'col-md-3',
           fieldClass: this.inputClass || 'col-md-6',
diff --git a/src/app/shared/formly/components/validation-icons/validation-icons.component.html b/src/app/shared/formly/components/validation-icons/validation-icons.component.html
index 2af91f1158..e61747d28f 100644
--- a/src/app/shared/formly/components/validation-icons/validation-icons.component.html
+++ b/src/app/shared/formly/components/validation-icons/validation-icons.component.html
@@ -2,8 +2,8 @@
   <fa-icon
     *ngIf="showError; else noError"
     class="form-control-feedback"
-    [icon]="['fas', 'times']"
-    data-testing-id="times-icon"
+    [icon]="['fas', 'exclamation-triangle']"
+    data-testing-id="exclamation-triangle-icon"
   />
   <ng-template #noError>
     <span class="has-success">
diff --git a/src/app/shared/formly/types/password-field/password-field.component.html b/src/app/shared/formly/types/password-field/password-field.component.html
new file mode 100644
index 0000000000..264c3b96ab
--- /dev/null
+++ b/src/app/shared/formly/types/password-field/password-field.component.html
@@ -0,0 +1,29 @@
+<div class="password-field-wrapper" ishFocusOutside (isFocusedOutside)="onFocusOutside($event)">
+  <input
+    [type]="showPassword ? 'text' : 'password'"
+    [formControl]="formControl"
+    [formlyAttributes]="field"
+    class="form-control"
+    [ngClass]="props.inputClass"
+    [attr.data-testing-id]="field.key"
+    [attr.aria-label]="props.ariaLabel | translate"
+    [attr.aria-required]="props.required ? 'true' : undefined"
+    [attr.aria-invalid]="showError ? 'true' : undefined"
+    [attr.aria-describedby]="ariaDescribedByIds"
+    (input)="onInput()"
+  />
+
+  <button
+    [attr.aria-label]="
+      showPassword ? ('form.password.hide.button.label' | translate) : ('form.password.show.button.label' | translate)
+    "
+    class="btn btn-link text-decoration-none"
+    [ngClass]="{ visible: !isButtonDisabled }"
+    type="button"
+    [disabled]="isButtonDisabled"
+    (click)="togglePasswordVisibility()"
+  >
+    <fa-icon *ngIf="showPassword" [icon]="['fas', 'eye-slash']" />
+    <fa-icon *ngIf="!showPassword" [icon]="['fas', 'eye']" />
+  </button>
+</div>
diff --git a/src/app/shared/formly/types/password-field/password-field.component.spec.ts b/src/app/shared/formly/types/password-field/password-field.component.spec.ts
new file mode 100644
index 0000000000..34ff0a8da2
--- /dev/null
+++ b/src/app/shared/formly/types/password-field/password-field.component.spec.ts
@@ -0,0 +1,70 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { MockComponent } from 'ng-mocks';
+
+import { FormlyTestingComponentsModule } from 'ish-shared/formly/dev/testing/formly-testing-components.module';
+import { FormlyTestingContainerComponent } from 'ish-shared/formly/dev/testing/formly-testing-container/formly-testing-container.component';
+
+import { PasswordFieldComponent } from './password-field.component';
+
+describe('Password Field Component', () => {
+  let component: FormlyTestingContainerComponent;
+  let fixture: ComponentFixture<FormlyTestingContainerComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        FormlyModule.forRoot({
+          types: [
+            {
+              name: 'ish-password-field',
+              component: PasswordFieldComponent,
+            },
+          ],
+        }),
+        FormlyTestingComponentsModule,
+        ReactiveFormsModule,
+        TranslateModule.forRoot(),
+      ],
+      declarations: [MockComponent(FaIconComponent), PasswordFieldComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    const testComponentInputs = {
+      fields: [
+        {
+          key: 'password',
+          type: 'ish-password-field',
+          props: {
+            required: true,
+          },
+        } as FormlyFieldConfig,
+      ],
+      form: new FormGroup({}),
+      model: {
+        displayValue: 'testValue',
+      },
+    };
+    fixture = TestBed.createComponent(FormlyTestingContainerComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+
+    component.testComponentInputs = testComponentInputs;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+
+  it('should be rendered after creation', () => {
+    fixture.detectChanges();
+    expect(element.querySelector('ish-password-field')).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/formly/types/password-field/password-field.component.ts b/src/app/shared/formly/types/password-field/password-field.component.ts
new file mode 100644
index 0000000000..159bcdb9bf
--- /dev/null
+++ b/src/app/shared/formly/types/password-field/password-field.component.ts
@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
+
+import { ariaDescribedByIds } from 'ish-shared/forms/utils/form-utils';
+
+/**
+ * Type for a basic input field
+ *
+ * @props **ariaLabel** adds an aria-label to the component for better accessibility, recommended if there is no associated label
+ * @props **label** - the text that should be shown next to the password field
+ *
+ * @defaultWrappers form-field-horizontal & validation
+ */
+@Component({
+  selector: 'ish-password-field',
+  templateUrl: './password-field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PasswordFieldComponent extends FieldType<FieldTypeConfig> {
+  showPassword = false;
+  isButtonDisabled = true;
+
+  onInput() {
+    if (this.formControl.value.length === 1) {
+      // enable the button only if the input was previously empty and user inserts the first character
+      this.isButtonDisabled = false;
+    }
+  }
+
+  onFocusOutside(isFocusedOutside: boolean) {
+    if (isFocusedOutside) {
+      // hide the password and disable the button when focus is outside the wrapper
+      this.showPassword = false;
+      this.isButtonDisabled = true;
+    }
+  }
+
+  togglePasswordVisibility() {
+    this.showPassword = !this.showPassword;
+  }
+
+  get ariaDescribedByIds(): string | null {
+    return ariaDescribedByIds(this.field.id, this.showError, this.props.customDescription);
+  }
+}
diff --git a/src/app/shared/formly/types/text-input-field/text-input-field.component.ts b/src/app/shared/formly/types/text-input-field/text-input-field.component.ts
index 0eba3ea30d..4a8de29c9f 100644
--- a/src/app/shared/formly/types/text-input-field/text-input-field.component.ts
+++ b/src/app/shared/formly/types/text-input-field/text-input-field.component.ts
@@ -10,7 +10,7 @@ import { ariaDescribedByIds } from 'ish-shared/forms/utils/form-utils';
  * Type for a basic input field
  *
  * @props **ariaLabel** adds an aria-label to the component for better accessibility, recommended if there is no associated label
- * @props **type** supports all text types; 'text' (default), 'email', 'password', 'tel'
+ * @props **type** supports all text types; 'text' (default), 'email', 'tel'
  * @props **mask** adds a ngx-mask mask (https://www.npmjs.com/package/ngx-mask) to mask the input with a given pattern
  *
  * @defaultWrappers form-field-horizontal & validation
@@ -22,7 +22,7 @@ import { ariaDescribedByIds } from 'ish-shared/forms/utils/form-utils';
   providers: [provideNgxMask()],
 })
 export class TextInputFieldComponent extends FieldType<FieldTypeConfig> implements OnInit {
-  private textInputFieldTypes = ['text', 'email', 'password', 'tel'];
+  private textInputFieldTypes = ['text', 'email', 'tel'];
   thousandSeparator: string;
   decimalMarker: ',' | '.';
 
@@ -39,7 +39,7 @@ export class TextInputFieldComponent extends FieldType<FieldTypeConfig> implemen
 
     if (!this.textInputFieldTypes.includes(field.props.type)) {
       throw new Error(
-        'parameter <props.type> is not valid for TextInputFieldComponent, only text, email, password and tel are possible values'
+        'parameter <props.type> is not valid for TextInputFieldComponent, only text, email and tel are possible values'
       );
     }
   }
diff --git a/src/app/shared/formly/types/types.module.ts b/src/app/shared/formly/types/types.module.ts
index 6d38fbea0a..a6a200638c 100644
--- a/src/app/shared/formly/types/types.module.ts
+++ b/src/app/shared/formly/types/types.module.ts
@@ -26,6 +26,7 @@ import { LocalizedParserFormatter } from './date-picker-field/localized-parser-f
 import { DateRangePickerFieldComponent } from './date-range-picker-field/date-range-picker-field.component';
 import { FieldsetFieldComponent } from './fieldset-field/fieldset-field.component';
 import { HtmlTextFieldComponent } from './html-text-field/html-text-field.component';
+import { PasswordFieldComponent } from './password-field/password-field.component';
 import { PlainTextFieldComponent } from './plain-text-field/plain-text-field.component';
 import { RadioFieldComponent } from './radio-field/radio-field.component';
 import { SelectFieldComponent } from './select-field/select-field.component';
@@ -39,6 +40,7 @@ const fieldComponents = [
   DateRangePickerFieldComponent,
   FieldsetFieldComponent,
   HtmlTextFieldComponent,
+  PasswordFieldComponent,
   PlainTextFieldComponent,
   RadioFieldComponent,
   SelectFieldComponent,
@@ -115,14 +117,9 @@ const fieldComponents = [
         },
         {
           name: 'ish-password-field',
-          extends: 'ish-text-input-field',
+          component: PasswordFieldComponent,
+          wrappers: ['form-field-horizontal', 'validation'],
           defaultOptions: {
-            props: {
-              type: 'password',
-            },
-            validators: {
-              password: formlyValidation('password', SpecialValidators.password),
-            },
             validation: {
               messages: {
                 password: 'form.password.error.invalid',
diff --git a/src/assets/i18n/de_DE.json b/src/assets/i18n/de_DE.json
index 73bd248ade..46b1a6deb5 100644
--- a/src/assets/i18n/de_DE.json
+++ b/src/assets/i18n/de_DE.json
@@ -897,6 +897,8 @@
   "form.password.error.equalTo": "Ihre Kennwörter sind nicht identisch.",
   "form.password.error.invalid": "Das Kennwort muss sowohl Buchstaben als auch Ziffern enthalten. Leerzeichen sind nicht erlaubt.",
   "form.password.error.required": "Bitte geben Sie ein Kennwort ein.",
+  "form.password.hide.button.label": "Kennwort anzeigen",
+  "form.password.show.button.label": "Kennwort verbergen",
   "form.phone.error.invalid": "Bitte geben Sie eine gültige Telefonnummer an.",
   "form.phone.error.required": "Bitte geben Sie Ihre Telefonnummer an.",
   "header.navigation.collapse_category.aria_label": "Kategorie {{0}} zuklappen",
diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
index 18b890bf4c..f032890d99 100644
--- a/src/assets/i18n/en_US.json
+++ b/src/assets/i18n/en_US.json
@@ -897,6 +897,8 @@
   "form.password.error.equalTo": "Your passwords do not match.",
   "form.password.error.invalid": "Your password must include both numeric and alphabetic characters. It must not contain whitespace characters.",
   "form.password.error.required": "Please enter a password.",
+  "form.password.hide.button.label": "Hide password",
+  "form.password.show.button.label": "Show password",
   "form.phone.error.invalid": "Please enter a valid phone number.",
   "form.phone.error.required": "Please enter your phone number.",
   "header.navigation.collapse_category.aria_label": "Collapse category {{0}}",
diff --git a/src/assets/i18n/fr_FR.json b/src/assets/i18n/fr_FR.json
index 112389ea4e..e58225844c 100644
--- a/src/assets/i18n/fr_FR.json
+++ b/src/assets/i18n/fr_FR.json
@@ -897,6 +897,8 @@
   "form.password.error.equalTo": "Vos mots de passe ne sont pas les mêmes.",
   "form.password.error.invalid": "Votre mot de passe doit contenir des chiffres et des lettres. Il ne doit pas contenir des espaces.",
   "form.password.error.required": "Veuillez saisir un mot de passe.",
+  "form.password.hide.button.label": "Masquer le mot de passe",
+  "form.password.show.button.label": "Afficher le mot de passe",
   "form.phone.error.invalid": "Veuillez saisir un numéro de téléphone valide.",
   "form.phone.error.required": "Veuillez saisir votre numéro de téléphone.",
   "header.navigation.collapse_category.aria_label": "Fermer la catégorie {{0}}",
diff --git a/src/styles/global/forms.scss b/src/styles/global/forms.scss
index 75778127ba..30338c244d 100644
--- a/src/styles/global/forms.scss
+++ b/src/styles/global/forms.scss
@@ -95,6 +95,37 @@ input[type='search']::-ms-clear {
   display: none;
 }
 
+// password field with show/hide button (eye icon) to toggle visibility of the password
+.password-field-wrapper {
+  // hide the default "Show/Hide Password" button in Edge
+  input[type='password']::-ms-reveal {
+    display: none;
+  }
+
+  button {
+    &.btn-link {
+      position: absolute;
+      top: 1px;
+      right: 40px;
+      width: $space-default * 2;
+      padding-right: 6px;
+      padding-left: 6px;
+      pointer-events: auto; /* Ensure the button is clickable */
+      cursor: pointer; /* Ensure the cursor is a pointer */
+      opacity: 0;
+      transition: opacity 0.2s ease;
+
+      .ng-fa-icon {
+        color: $button-default-color;
+      }
+
+      &.visible {
+        opacity: 1;
+      }
+    }
+  }
+}
+
 /* removes the 'x' and other default search elements inside the search input in Chrome */
 input[type='search']::-webkit-search-decoration,
 input[type='search']::-webkit-search-cancel-button,
@@ -246,6 +277,12 @@ optgroup {
   }
 }
 
+.validation-offset-password {
+  .form-control-feedback {
+    right: 70px;
+  }
+}
+
 /* purgecss ignore */
 .ngb-dp-weekday {
   font-style: normal !important;