feat(clickable eye): eye closed when showing password

src/app/login/login.component.html

@@ -21,7 +21,7 @@
         </div>
         <div class="form-group password" fxLayout="column">
           <label for="password">Mot de passe</label>
-          <div fxLayout="row" fxLayoutGap="13px">
+          <div fxLayout="row" fxLayoutGap="13px" fxLayoutAlign="default center">
             <input
               [type]="isShowPassword ? 'text' : 'password'"
               autocomplete="on"
@@ -29,9 +29,12 @@
               class="form-input"
               [ngClass]="{ inputInvalid: f.password.invalid && f.password.value }"
             />
-            <svg (click)="toggleShowPassword()" class="eyePassword" aria-hidden="true">
-              <use [attr.xlink:href]="'assets/form/sprite.svg#eyePassword'"></use>
-            </svg>
+            <div class="eyePassword">
+              <svg (click)="toggleShowPassword()" aria-hidden="true" preserveAspectRatio="xMinYMid">
+                <use *ngIf="!isShowPassword" [attr.xlink:href]="'assets/form/sprite.svg#eyePasswordVisible'"></use>
+                <use *ngIf="isShowPassword" [attr.xlink:href]="'assets/form/sprite.svg#eyePasswordInvisible'"></use>
+              </svg>
+            </div>
             <svg *ngIf="f.password.invalid && f.password.value" class="notValidate" aria-hidden="true">
               <use [attr.xlink:href]="'assets/form/sprite.svg#notValidate'"></use>
             </svg>

src/app/login/login.component.scss

@@ -79,11 +79,15 @@
         }
       }
       .eyePassword {
-        cursor: pointer;
-        width: 24px;
-        height: 40px;
-        stroke: $grey-3;
-        fill: $grey-3;
+        display: flex;
+        align-content: center;
+        svg {
+          cursor: pointer;
+          width: 32px;
+          height: 32px;
+          stroke: $grey-3;
+          fill: $grey-3;
+        }
       }
       .passHint {
         margin-top: 0.5rem;