th-126: The Password field content on the Sign up both Business and Customer and Sign in pages is hidden by asterisks after the Show Hide password button was clicked (#148)

* th-126: + show hide password button

* th-126: * input with icon component

* th-126: + color changing

* th-126: * vars naming

* th-126: * enum import input component

---------

Co-authored-by: albsbz <[email protected]>

Author: albsbz

frontend/src/libs/components/icon/maps/icon-name-to-svg.map.ts

@@ -4,6 +4,7 @@ import {
   faCaretDown,
   faChevronDown,
   faChevronLeft,
+  faEye,
   faGear,
   faListUl,
   faLocationDot,
@@ -30,6 +31,7 @@ const iconNameToSvg: Record<ValueOf<typeof IconName>, IconDefinition> = {
   [IconName.MAP]: faMap,
   [IconName.TRUCK]: faTruckPickup,
   [IconName.USERS]: faUsers,
+  [IconName.EYE]: faEye,
 };
 
 export { iconNameToSvg };

frontend/src/libs/components/input/input.tsx

@@ -5,9 +5,15 @@ import {
   type FieldValues,
 } from 'react-hook-form';
 
+import { IconName } from '~/libs/enums/icon-name.enum.js';
 import { getValidClassNames } from '~/libs/helpers/helpers.js';
-import { useFormController } from '~/libs/hooks/hooks.js';
+import {
+  useCallback,
+  useFormController,
+  useState,
+} from '~/libs/hooks/hooks.js';
 
+import { Icon } from '../components.js';
 import styles from './styles.module.scss';
 
 type Properties<T extends FieldValues> = {
@@ -36,7 +42,7 @@ const Input = <T extends FieldValues>({
   step,
 }: Properties<T>): JSX.Element => {
   const { field } = useFormController({ name, control });
-
+  const [isPasswordShown, setIsPasswordShown] = useState(false);
   const error = errors[name]?.message;
   const hasError = Boolean(error);
   const hasValue = Boolean(field.value);
@@ -48,13 +54,21 @@ const Input = <T extends FieldValues>({
     hasError && styles.error,
   ];
 
+  const toggleShowPassword = useCallback(
+    (event: React.MouseEvent<HTMLElement>): void => {
+      event.preventDefault();
+      setIsPasswordShown(!isPasswordShown);
+    },
+    [isPasswordShown],
+  );
+
   return (
     <label className={styles.inputComponentWrapper}>
       {hasLabel && <span className={styles.label}>{label}</span>}
       <span className={styles.inputWrapper}>
         <input
           {...field}
-          type={type}
+          type={isPasswordShown ? 'text' : type}
           placeholder={placeholder}
           className={getValidClassNames(...inputStyles)}
           disabled={isDisabled}
@@ -63,7 +77,16 @@ const Input = <T extends FieldValues>({
           step={step}
         />
         {type === 'password' && (
-          <span className={styles.passwordEye}>&#128065;</span>
+          <button
+            className={getValidClassNames(
+              styles.passwordEye,
+              isPasswordShown && styles.passwordEyeLight,
+            )}
+            onClick={toggleShowPassword}
+            tabIndex={-1}
+          >
+            <Icon iconName={IconName.EYE} size="sm" />
+          </button>
         )}
       </span>
 

frontend/src/libs/components/input/styles.module.scss

@@ -86,11 +86,18 @@ $error-message-height: calc($error-font-size * $line-height-coefficient);
 .passwordEye {
   position: absolute;
   top: 8px;
-  right: 15px;
+  right: 10px;
+  color: $grey-dark;
+  background-color: $white;
+  border: 0;
   cursor: pointer;
   user-select: none;
 }
 
+.passwordEyeLight {
+  color: $grey-light;
+}
+
 .inputWrapper {
   position: relative;
   display: block;

frontend/src/libs/enums/icon-name.enum.ts

@@ -11,6 +11,7 @@ const IconName = {
   STAR: 'star',
   TRUCK: 'truck',
   USERS: 'users',
+  EYE: 'eye',
 } as const;
 
 export { IconName };