From 40e135a297f417babd5ae1b55f948ae62e26213b Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 24 Feb 2018 13:45:41 -0500
Subject: [PATCH] toggle password visibility on login/register

---
 src/app/accounts/environment.component.html |  2 +-
 src/app/accounts/login.component.html       | 17 +++++++---
 src/app/accounts/login.component.ts         |  7 +++++
 src/app/accounts/register.component.html    | 35 ++++++++++++++++-----
 src/app/accounts/register.component.ts      |  7 +++++
 src/scss/pages.scss                         |  6 ++++
 6 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/src/app/accounts/environment.component.html b/src/app/accounts/environment.component.html
index 18ad462a69..648b4a53a3 100644
--- a/src/app/accounts/environment.component.html
+++ b/src/app/accounts/environment.component.html
@@ -1,5 +1,5 @@
 <div class="modal fade">
-    <div class="modal-dialog modal-sm">
+    <div class="modal-dialog">
         <form class="modal-content" (ngSubmit)="submit()">
             <div class="modal-body">
                 <div class="box">
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html
index f82c91e39f..36e4e2d45a 100644
--- a/src/app/accounts/login.component.html
+++ b/src/app/accounts/login.component.html
@@ -9,10 +9,19 @@
                     <input id="email" type="text" name="Email" [(ngModel)]="email" required
                            [appAutofocus]="email === ''">
                 </div>
-                <div class="box-content-row" appBoxRow>
-                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                    <input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
-                           required [appAutofocus]="email !== ''">
+                <div class="box-content-row box-content-row-flex" appBoxRow>
+                    <div class="row-main">
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
+                               class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
+                    </div>
+                    <div class="action-buttons">
+                        <a class="row-btn" href="#" appStopClick appBlurClick
+                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                            <i class="fa fa-lg"
+                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/app/accounts/login.component.ts b/src/app/accounts/login.component.ts
index 7be831f6e0..7efdb4750b 100644
--- a/src/app/accounts/login.component.ts
+++ b/src/app/accounts/login.component.ts
@@ -29,6 +29,7 @@ export class LoginComponent {
 
     email: string = '';
     masterPassword: string = '';
+    showPassword: boolean = false;
     formPromise: Promise<AuthResult>;
 
     constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
@@ -76,4 +77,10 @@ export class LoginComponent {
             modal.close();
         });
     }
+
+    togglePassword() {
+        this.analytics.eventTrack.next({ action: 'Toggled Master Password on Login' });
+        this.showPassword = !this.showPassword;
+        document.getElementById('masterPassword').focus();
+    }
 }
diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index 08b7fda7f5..055eabc16c 100644
--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -8,10 +8,19 @@
                     <input id="email" type="text" name="Email" [(ngModel)]="email" required
                            [appAutofocus]="email === ''">
                 </div>
-                <div class="box-content-row" appBoxRow>
-                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                    <input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
-                           required [appAutofocus]="email !== ''">
+                <div class="box-content-row box-content-row-flex" appBoxRow>
+                    <div class="row-main">
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
+                               class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
+                    </div>
+                    <div class="action-buttons">
+                        <a class="row-btn" href="#" appStopClick appBlurClick
+                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                            <i class="fa fa-lg"
+                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                        </a>
+                    </div>
                 </div>
             </div>
             <div class="box-footer">
@@ -20,10 +29,20 @@
         </div>
         <div class="box last">
             <div class="box-content">
-                <div class="box-content-row" appBoxRow>
-                    <label for="master-password-retype">{{'reTypeMasterPass' | i18n}}</label>
-                    <input id="master-password-retype" type="password" name="MasterPasswordRetype"
-                           [(ngModel)]="confirmMasterPassword" required>
+                <div class="box-content-row box-content-row-flex" appBoxRow>
+                    <div class="row-main">
+                        <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
+                        <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
+                               name="MasterPasswordRetype" class="monospaced" [(ngModel)]="confirmMasterPassword"
+                               required>
+                    </div>
+                    <div class="action-buttons">
+                        <a class="row-btn" href="#" appStopClick appBlurClick
+                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                            <i class="fa fa-lg"
+                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                        </a>
+                    </div>
                 </div>
                 <div class="box-content-row" appBoxRow>
                     <label for="hint">{{'masterPassHint' | i18n}}</label>
diff --git a/src/app/accounts/register.component.ts b/src/app/accounts/register.component.ts
index f55dadf4e9..f282ccddfb 100644
--- a/src/app/accounts/register.component.ts
+++ b/src/app/accounts/register.component.ts
@@ -22,6 +22,7 @@ export class RegisterComponent {
     masterPassword: string = '';
     confirmMasterPassword: string = '';
     hint: string = '';
+    showPassword: boolean = false;
     formPromise: Promise<any>;
 
     constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
@@ -72,4 +73,10 @@ export class RegisterComponent {
         const request = new RegisterRequest(this.email, hashedPassword, this.hint, encKey.encryptedString);
         await this.apiService.postRegister(request);
     }
+
+    togglePassword(confirmField: boolean) {
+        this.analytics.eventTrack.next({ action: 'Toggled Master Password on Register' });
+        this.showPassword = !this.showPassword;
+        document.getElementById(confirmField ? 'masterPasswordRetype' : 'masterPassword').focus();
+    }
 }
diff --git a/src/scss/pages.scss b/src/scss/pages.scss
index 0a935a95c6..a072211337 100644
--- a/src/scss/pages.scss
+++ b/src/scss/pages.scss
@@ -110,3 +110,9 @@
         }
     }
 }
+
+#register-page {
+    .content {
+        width: 400px;
+    }
+}