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

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

diff --git a/jslib b/jslib
index 4bce0714..e5db0108 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 4bce071498aeda43e44f9b5f7f60ae11a57c7d6f
+Subproject commit e5db01083cc13df3696bb30562a83d729280ac03
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 4a619fb8..08ffb4b7 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -82,9 +82,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">
+                        <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">
+                            </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/app/vault/view.component.html b/src/app/vault/view.component.html
index 5928cf8e..05c36148 100644
--- a/src/app/vault/view.component.html
+++ b/src/app/vault/view.component.html
@@ -100,8 +100,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}}"