From 6c22919bd983d4a489ec558faaa5876076b1d93a Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 8 Dec 2018 14:00:18 -0500
Subject: [PATCH] colorized passwords

---
 jslib                                         |  2 +-
 src/popup/app.module.ts                       |  2 ++
 .../password-generator-history.component.html |  5 ++--
 .../password-generator.component.html         |  2 +-
 src/popup/scss/misc.scss                      | 29 ++++++++++++++-----
 src/popup/scss/pages.scss                     |  6 +++-
 src/popup/scss/variables.scss                 |  4 +++
 src/popup/vault/view.component.html           |  6 ++--
 8 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/jslib b/jslib
index 9283a29d35a..9694d2922ef 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 9283a29d35a18f058f3c84f8aaa919b911f1940a
+Subproject commit 9694d2922ef033c6c5eead2c7b4a308b6d93bf2f
diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts
index 398165161de..2e04fa4a08f 100644
--- a/src/popup/app.module.ts
+++ b/src/popup/app.module.ts
@@ -54,6 +54,7 @@ import { StopClickDirective } from 'jslib/angular/directives/stop-click.directiv
 import { StopPropDirective } from 'jslib/angular/directives/stop-prop.directive';
 import { TrueFalseValueDirective } from 'jslib/angular/directives/true-false-value.directive';
 
+import { ColorPasswordPipe } from 'jslib/angular/pipes/color-password.pipe';
 import { I18nPipe } from 'jslib/angular/pipes/i18n.pipe';
 import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
 
@@ -156,6 +157,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         CiphersComponent,
         CiphersListComponent,
         CollectionsComponent,
+        ColorPasswordPipe,
         CurrentTabComponent,
         EnvironmentComponent,
         ExportComponent,
diff --git a/src/popup/generator/password-generator-history.component.html b/src/popup/generator/password-generator-history.component.html
index 9d8fbeb530f..ea85c4a11ce 100644
--- a/src/popup/generator/password-generator-history.component.html
+++ b/src/popup/generator/password-generator-history.component.html
@@ -20,9 +20,8 @@
             <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
                 <div class="row-main">
                     <div class="row-main-content">
-                        <span class="text monospaced no-ellipsis">
-                            {{h.password}}
-                        </span>
+                        <div class="text monospaced password-wrapper no-ellipsis"
+                           [innerHTML]="h.password | colorPassword"></div>
                         <span class="detail">{{h.date | date:'medium'}}</span>
                     </div>
                 </div>
diff --git a/src/popup/generator/password-generator.component.html b/src/popup/generator/password-generator.component.html
index bb54bc5f52a..e8a6a3a360d 100644
--- a/src/popup/generator/password-generator.component.html
+++ b/src/popup/generator/password-generator.component.html
@@ -11,7 +11,7 @@
     </div>
 </header>
 <content>
-    <div class="password-block">{{password}}</div>
+    <div class="password-block password-wrapper" [innerHTML]="password | colorPassword"></div>
     <div class="box list">
         <div class="box-content single-line">
             <a class="box-content-row text-primary" href="#" appStopClick appBlurClick
diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss
index acc6690c77f..545103c46ce 100644
--- a/src/popup/scss/misc.scss
+++ b/src/popup/scss/misc.scss
@@ -112,10 +112,6 @@ p.lead {
     padding-bottom: 0 !important;
 }
 
-[hidden] {
-    display: none !important;
-}
-
 .display-block {
     display: block !important;
 }
@@ -134,10 +130,6 @@ p.lead {
     border-radius: 6px;
 }
 
-input[type="search"] {
-    -webkit-appearance: textfield;
-}
-
 .sr-only {
     position: absolute !important;
     width: 1px !important;
@@ -149,6 +141,23 @@ input[type="search"] {
     border: 0 !important;
 }
 
+.password-wrapper {
+    display: flex !important;
+    flex-wrap: wrap;
+}
+
+.password-number {
+    @include themify($themes) {
+        color: themed('passwordNumberColor');
+    }
+}
+
+.password-special {
+    @include themify($themes) {
+        color: themed('passwordSpecialColor');
+    }
+}
+
 #duo-frame {
     background: url('../images/loading.svg') 0 0 no-repeat;
     width: 100%;
@@ -200,3 +209,7 @@ app-vault-icon {
         background-size: 284px 43px;
     }
 }
+
+[hidden] {
+    display: none !important;
+}
diff --git a/src/popup/scss/pages.scss b/src/popup/scss/pages.scss
index d5df201f63a..4b4f779fb3f 100644
--- a/src/popup/scss/pages.scss
+++ b/src/popup/scss/pages.scss
@@ -10,9 +10,13 @@ app-sync {
 
 app-password-generator .password-block {
     font-size: $font-size-large;
-    word-break: break-all;
     font-family: $font-family-monospace;
     text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
     margin: 20px;
 }
 
diff --git a/src/popup/scss/variables.scss b/src/popup/scss/variables.scss
index b817ab809be..ae74952987e 100644
--- a/src/popup/scss/variables.scss
+++ b/src/popup/scss/variables.scss
@@ -79,6 +79,8 @@ $themes: (
         infoColor: $brand-info,
         warningColor: $brand-warning,
         logoSuffix: 'dark',
+        passwordNumberColor: #007fde,
+        passwordSpecialColor: #c40800,
     ),
     dark: (
         textColor: #ffffff,
@@ -123,6 +125,8 @@ $themes: (
         infoColor: $brand-info,
         warningColor: $brand-warning,
         logoSuffix: 'white',
+        passwordNumberColor: #52bdfb,
+        passwordSpecialColor: #ff7c70,
     ),
 );
 
diff --git a/src/popup/vault/view.component.html b/src/popup/vault/view.component.html
index 1469c4c9ca7..66174d7f11d 100644
--- a/src/popup/vault/view.component.html
+++ b/src/popup/vault/view.component.html
@@ -36,8 +36,10 @@
                 <div class="box-content-row box-content-row-flex" *ngIf="cipher.login.password">
                     <div class="row-main">
                         <span class="row-label">{{'password' | i18n}}</span>
-                        <span [hidden]="showPassword" class="monospaced">{{cipher.login.maskedPassword}}</span>
-                        <span [hidden]="!showPassword" class="monospaced">{{cipher.login.password}}</span>
+                        <div [hidden]="showPassword" class="monospaced password-wrapper">
+                            {{cipher.login.maskedPassword}}</div>
+                        <div [hidden]="!showPassword" class="monospaced password-wrapper"
+                            [innerHTML]="cipher.login.password | colorPassword"></div>
                     </div>
                     <div class="action-buttons">
                         <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick