From 1ab6ce6ec02217c74c3473b087868b9e0bf43f94 Mon Sep 17 00:00:00 2001
From: Neil Burrows <neil@pawprint.co.uk>
Date: Wed, 13 Jun 2018 17:33:26 +0100
Subject: [PATCH] Adding mask and toggle for Card Security Code (#5)

* Adding mask and toggle for Card Security Code

* For Card Code Mask - show same number of characters as code
---
 src/angular/components/view.component.ts | 6 ++++++
 src/models/view/cardView.ts              | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/src/angular/components/view.component.ts b/src/angular/components/view.component.ts
index 18cdfafb93..9ff6b83b78 100644
--- a/src/angular/components/view.component.ts
+++ b/src/angular/components/view.component.ts
@@ -31,6 +31,7 @@ export class ViewComponent implements OnDestroy {
 
     cipher: CipherView;
     showPassword: boolean;
+    showCardCode: boolean;
     isPremium: boolean;
     totpCode: string;
     totpCodeFormatted: string;
@@ -80,6 +81,11 @@ export class ViewComponent implements OnDestroy {
         this.showPassword = !this.showPassword;
     }
 
+    toggleCardCode() {
+        this.analytics.eventTrack.next({ action: 'Toggled Card Code' });
+        this.showCardCode = !this.showCardCode;
+    }
+
     async checkPassword() {
         if (this.cipher.login == null || this.cipher.login.password == null || this.cipher.login.password === '') {
             return;
diff --git a/src/models/view/cardView.ts b/src/models/view/cardView.ts
index 26e3308e31..1630c67482 100644
--- a/src/models/view/cardView.ts
+++ b/src/models/view/cardView.ts
@@ -18,6 +18,10 @@ export class CardView implements View {
         // ctor
     }
 
+    get maskedCode(): string {
+        return this.code != null ? '•'.repeat(this.code.length) : null;
+    }
+
     get brand(): string {
         return this._brand;
     }