feat: add password display functionality

src/entities/InputField/model/InputFieldModel.ts

@@ -1,7 +1,7 @@
 import type { InputFieldParams, InputFieldValidatorParams } from '@/shared/types/interfaces.ts';
 
 import InputFieldValidatorModel from '@/features/InputFieldValidator/model/InputFieldValidatorModel.ts';
-import { EVENT_NAMES } from '@/shared/constants/enums.ts';
+import { EVENT_NAMES, INPUT_TYPES } from '@/shared/constants/enums.ts';
 
 import InputFieldView from '../view/InputFieldView.ts';
 
@@ -19,6 +19,8 @@ class InputFieldModel {
       this.validator = new InputFieldValidatorModel(validParams, this.isValid);
       this.setInputHandler();
     }
+
+    this.setShowPasswordHandler();
   }
 
   private inputHandler(): boolean {
@@ -49,6 +51,19 @@ class InputFieldModel {
     return true;
   }
 
+  private setShowPasswordHandler(): boolean {
+    const button = this.view.getShowPasswordButton().getHTML();
+    button.addEventListener(EVENT_NAMES.CLICK, () => this.showPasswordHandler());
+    return true;
+  }
+
+  private showPasswordHandler(): boolean {
+    const input = this.view.getInput().getHTML();
+    input.type = input.type === INPUT_TYPES.PASSWORD ? INPUT_TYPES.TEXT : INPUT_TYPES.PASSWORD;
+    this.view.switchPasswordButtonSVG(input.type);
+    return true;
+  }
+
   public getIsValid(): boolean {
     return this.isValid;
   }

src/entities/InputField/view/InputFieldView.ts

@@ -1,7 +1,9 @@
 import type { InputFieldParams, InputParams, LabelParams } from '@/shared/types/interfaces.ts';
 
-import { TAG_NAMES } from '@/shared/constants/enums.ts';
+import ButtonModel from '@/shared/Button/model/ButtonModel.ts';
+import { INPUT_TYPES, SVG_DETAILS, TAG_NAMES } from '@/shared/constants/enums.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
+import createSVGUse from '@/shared/utils/createSVGUse.ts';
 
 import InputModel from '../../../shared/Input/model/InputModel.ts';
 
@@ -14,8 +16,11 @@ class InputFieldView {
 
   private label: HTMLLabelElement | null = null;
 
+  private showPasswordButton: ButtonModel;
+
   constructor(params: InputFieldParams) {
     this.input = this.createInput(params.inputParams);
+    this.showPasswordButton = this.createShowPasswordButton();
     this.inputField = this.createHTML(params);
   }
 
@@ -37,6 +42,10 @@ class InputFieldView {
       this.inputField = this.input;
     }
 
+    if (this.getInput().getHTML().type === INPUT_TYPES.PASSWORD) {
+      this.label?.append(this.showPasswordButton.getHTML());
+    }
+
     return this.inputField;
   }
 
@@ -65,6 +74,12 @@ class InputFieldView {
     return this.label;
   }
 
+  private createShowPasswordButton(): ButtonModel {
+    this.showPasswordButton = new ButtonModel({});
+    this.switchPasswordButtonSVG(INPUT_TYPES.PASSWORD);
+    return this.showPasswordButton;
+  }
+
   public getErrorField(): HTMLSpanElement | null {
     return this.errorField;
   }
@@ -77,12 +92,24 @@ class InputFieldView {
     return this.input;
   }
 
+  public getShowPasswordButton(): ButtonModel {
+    return this.showPasswordButton;
+  }
+
   public getValue(): string {
     if (this.inputField instanceof InputModel) {
       return this.inputField.getValue();
     }
     return this.input.getValue();
   }
+
+  public switchPasswordButtonSVG(type: string): SVGSVGElement {
+    const svg = document.createElementNS(SVG_DETAILS.SVG_URL, TAG_NAMES.SVG);
+    this.showPasswordButton.getHTML().innerHTML = '';
+    svg.append(createSVGUse(type === INPUT_TYPES.PASSWORD ? SVG_DETAILS.CLOSE_EYE : SVG_DETAILS.OPEN_EYE));
+    this.showPasswordButton.getHTML().append(svg);
+    return svg;
+  }
 }
 
 export default InputFieldView;

src/shared/constants/enums.ts

@@ -178,3 +178,9 @@ export const FORM_SUBMIT_BUTTON_TEXT = {
   LOGIN: 'Login',
   REGISTRATION: 'Register',
 } as const;
+
+export const SVG_DETAILS = {
+  CLOSE_EYE: 'closeEye',
+  OPEN_EYE: 'openEye',
+  SVG_URL: 'http://www.w3.org/2000/svg',
+} as const;