Upgrade password field

src/app/login/components/form-login.component.html

@@ -5,10 +5,17 @@
             placeholder="Enter email" required autofocus>
         <small class="form-text text-muted">We'll never share your email with anyone else.</small>
     </div>
-    <div class="form-group">
-        <label for="password">Password</label>
-        <input type="password" id="password" class="form-control" name="password" [(ngModel)]="model.password"
-            placeholder="Password" required>
+    <label for="password">Password</label>
+    <div class="input-group mb-3">
+        <input [type]="showPassword ? 'text' : 'password'" id="password" class="form-control"
+            placeholder="Password" name="password" [(ngModel)]="model.password" aria-label="Password" required>
+        <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button" id="button-addon2"
+                (click)="showPassword = !showPassword">
+                <div *ngIf="!showPassword"><span class="fas fa-fw fa-eye-slash"></span></div>
+                <div *ngIf="showPassword"><span class="fas fa-fw fa-eye"></span></div>
+            </button>
+        </div>
     </div>
     <div class="form-group">
         <button type="submit" class="btn btn-success" [disabled]="!f.form.valid || f.form.pristine">Sign In</button>

src/app/login/components/form-register.component.html

@@ -5,15 +5,25 @@
             placeholder="Enter email" required>
         <small class="form-text text-muted">We'll never share your email with anyone else.</small>
     </div>
+
     <div class="form-group">
         <label for="confirm_email">Email confirmation</label>
         <input type="email" id="confirm_email" class="form-control" name="confirm_email" placeholder="Enter email"
             required>
     </div>
-    <div class="form-group">
-        <label for="register_password">Password</label>
-        <input type="password" id="register_password" class="form-control" name="password" [(ngModel)]="model.password"
-            placeholder="Password" required>
+
+    <label for="register_password">Password</label>
+    <div class="input-group mb-3">
+        <input [type]="showPassword ? 'text' : 'password'" id="register_password" class="form-control"
+            placeholder="Password" name="password" [(ngModel)]="model.password" aria-label="Password" required>
+        <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button" id="button-addon2"
+                (click)="showPassword = !showPassword">
+                <div *ngIf="!showPassword"><span class="fas fa-fw fa-eye-slash"></span></div>
+                <div *ngIf="showPassword"><span class="fas fa-fw fa-eye"></span></div>
+            </button>
+        </div>
     </div>
+
     <button type="submit" class="btn btn-success" [disabled]="!f.form.valid || f.form.pristine">Register</button>
 </form>
\ No newline at end of file

src/app/login/containers/change-password.component.html

 <div class="container">
-    <form name="form" (ngSubmit)="f.form.valid && submitted()" #f="ngForm" novalidate>
-        <div class="form-group">
+    <div class="row justify-content-center">
+        <form name="form" (ngSubmit)="f.form.valid && submitted()" #f="ngForm" class="col-4" novalidate>
             <label for="password">Password</label>
-            <input type="password" 
-                id="password" 
-                class="form-control" 
-                name="password" 
-                [(ngModel)]="model.password"
-                placeholder="Enter your password" 
-                required>
-        </div>
-        <div class="form-group">
+            <div class="input-group mb-3">
+                <input [type]="showPassword ? 'text' : 'password'" id="password" class="form-control"
+                    placeholder="Enter your password" name="password" [(ngModel)]="model.password" aria-label="Password" required>
+                <div class="input-group-append">
+                    <button class="btn btn-outline-secondary" type="button" (click)="showPassword = !showPassword">
+                        <div *ngIf="!showPassword"><span class="fas fa-fw fa-eye-slash"></span></div>
+                        <div *ngIf="showPassword"><span class="fas fa-fw fa-eye"></span></div>
+                    </button>
+                </div>
+            </div>
             <label for="new_password">New password</label>
-            <input type="password" 
-                id="new_password" 
-                class="form-control" 
-                name="new_password"
-                [(ngModel)]="model.newPassword" 
-                placeholder="Enter new password" 
-                required>
-        </div>
-        <div class="form-group">
-            <label for="confirm_password">Confirm assword</label>
-            <input type="password" 
-                id="confirm_password" 
-                class="form-control" 
-                name="confirm_password"
-                [(ngModel)]="model.confirmPassword" 
-                placeholder="Confirm new password" 
-                required>
-        </div>
-        <div class="form-group">
-            <button type="submit" class="btn btn-success" [disabled]="!f.form.valid || f.form.pristine">
-                Change password
-            </button>
-        </div>
-    </form>
+            <div class="input-group mb-3">
+                <input [type]="showNewPassword ? 'text' : 'password'" id="new_password" class="form-control"
+                    placeholder="Enter new password" name="new_password" [(ngModel)]="model.newPassword" aria-label="New Password" required>
+                <div class="input-group-append">
+                    <button class="btn btn-outline-secondary" type="button" (click)="showNewPassword = !showNewPassword">
+                        <div *ngIf="!showNewPassword"><span class="fas fa-fw fa-eye-slash"></span></div>
+                        <div *ngIf="showNewPassword"><span class="fas fa-fw fa-eye"></span></div>
+                    </button>
+                </div>
+            </div>
+            <div class="form-group text-center">
+                <button type="submit" class="btn btn-success" [disabled]="!f.form.valid || f.form.pristine">
+                    Change password
+                </button>
+            </div>
+        </form>
+    </div>
 </div>
\ No newline at end of file

src/app/login/containers/change-password.component.ts

@@ -11,7 +11,7 @@ import * as fromLogin from '../store/login.reducer';
     styleUrls: ['login.component.css']
 })
 export class ChangePasswordComponent {
-    model = { password: '', newPassword: '', confirmPassword: '' };
+    model = { password: '', newPassword: '' };
 
     constructor(private store: Store<{ login: fromLogin.State }>) { }