From 8e519f5518facd0febc85cf78c03f3fe70dcb0b0 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 24 Feb 2018 13:48:55 -0500
Subject: [PATCH] toggle password on unlock page

---
 src/app/accounts/lock.component.html | 17 +++++++++++++----
 src/app/accounts/lock.component.ts   |  7 +++++++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/app/accounts/lock.component.html b/src/app/accounts/lock.component.html
index 0fa0edba73..611c04ebf9 100644
--- a/src/app/accounts/lock.component.html
+++ b/src/app/accounts/lock.component.html
@@ -4,10 +4,19 @@
         <p>{{'yourVaultIsLocked' | i18n}}</p>
         <div class="box last">
             <div class="box-content">
-                <div class="box-content-row" appBoxRow>
-                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                    <input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword"
-                           required appAutofocus>
+                <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>
+                    </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/lock.component.ts b/src/app/accounts/lock.component.ts
index 9cdcf01140..d5e3dd8701 100644
--- a/src/app/accounts/lock.component.ts
+++ b/src/app/accounts/lock.component.ts
@@ -18,6 +18,7 @@ import { UserService } from 'jslib/abstractions/user.service';
 })
 export class LockComponent {
     masterPassword: string = '';
+    showPassword: boolean = false;
 
     constructor(private router: Router, private analytics: Angulartics2,
         private toasterService: ToasterService, private i18nService: I18nService,
@@ -53,4 +54,10 @@ export class LockComponent {
             this.messagingService.send('logout');
         }
     }
+
+    togglePassword() {
+        this.analytics.eventTrack.next({ action: 'Toggled Master Password on Unlock' });
+        this.showPassword = !this.showPassword;
+        document.getElementById('masterPassword').focus();
+    }
 }