From f14b4b89b9dd28f22b5bd2ad6ccd8aa2b3a61d8a Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Mon, 18 Jun 2018 17:25:22 -0400
Subject: [PATCH] toggle card code on add/edit

---
 jslib                                   |  2 +-
 src/popup/vault/add-edit.component.html | 18 ++++++++++++++----
 src/popup/vault/view.component.html     |  4 ++--
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/jslib b/jslib
index 4bce071498..e5db01083c 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 4bce071498aeda43e44f9b5f7f60ae11a57c7d6f
+Subproject commit e5db01083cc13df3696bb30562a83d729280ac03
diff --git a/src/popup/vault/add-edit.component.html b/src/popup/vault/add-edit.component.html
index e7811970e9..8bbb779b3e 100644
--- a/src/popup/vault/add-edit.component.html
+++ b/src/popup/vault/add-edit.component.html
@@ -97,10 +97,20 @@
                         <input id="cardExpYear" type="text" name="Card.ExpYear" [(ngModel)]="cipher.card.expYear"
                                placeholder="{{'ex' | i18n}} 2019">
                     </div>
-                    <div class="box-content-row" appBoxRow>
-                        <label for="cardCode">{{'securityCode' | i18n}}</label>
-                        <input id="cardCode" type="text" name="Card.Code" [(ngModel)]="cipher.card.code"
-                               appInputVerbatim>
+                    <div class="box-content-row box-content-row-flex" appBoxRow>
+                        <div class="row-main">
+                            <label for="cardCode">{{'securityCode' | i18n}}</label>
+                            <input id="cardCode" class="monospaced"
+                                   type="{{showCardCode ? 'text' : 'password'}}" name="Card.Code"
+                                   [(ngModel)]="cipher.card.code" appInputVerbatim>
+                        </div>
+                        <div class="action-buttons">
+                            <a class="row-btn" href="#" appStopClick appBlurClick
+                               title="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()">
+                                <i class="fa fa-lg"
+                                   [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
+                            </a>
+                        </div>
                     </div>
                 </div>
                 <!-- Identity -->
diff --git a/src/popup/vault/view.component.html b/src/popup/vault/view.component.html
index 126d01d7dd..3b78db7237 100644
--- a/src/popup/vault/view.component.html
+++ b/src/popup/vault/view.component.html
@@ -111,8 +111,8 @@
                 <div class="box-content-row box-content-row-flex" *ngIf="cipher.card.code">
                     <div class="row-main">
                         <span class="row-label">{{'securityCode' | i18n}}</span>
-                        <span [hidden]="showCardCode" >{{cipher.card.maskedCode}}</span>
-                        <span [hidden]="!showCardCode" >{{cipher.card.code}}</span>
+                        <span [hidden]="showCardCode" class="monospaced">{{cipher.card.maskedCode}}</span>
+                        <span [hidden]="!showCardCode" class="monospaced">{{cipher.card.code}}</span>
                     </div>
                     <div class="action-buttons">
                         <a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"