From 97a3a97a156b1364cc6d8e986f4b23efa5ea3c27 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Sat, 8 Dec 2018 14:11:10 -0500
Subject: [PATCH] colorized password

---
 jslib                                         |  2 +-
 src/app/app.module.ts                         |  2 ++
 .../password-generator-history.component.html |  2 +-
 .../tools/password-generator.component.html   |  4 +---
 src/scss/styles.scss                          | 19 +++++++++++++++++--
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/jslib b/jslib
index 9283a29d35..9694d2922e 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 9283a29d35a18f058f3c84f8aaa919b911f1940a
+Subproject commit 9694d2922ef033c6c5eead2c7b4a308b6d93bf2f
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b6811c400b..7b0a529e67 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -134,6 +134,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';
 import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
@@ -211,6 +212,7 @@ registerLocaleData(localeZhCn, 'zh-CN');
         ChangePasswordComponent,
         CiphersComponent,
         CollectionsComponent,
+        ColorPasswordPipe,
         CreateOrganizationComponent,
         DeauthorizeSessionsComponent,
         DeleteAccountComponent,
diff --git a/src/app/tools/password-generator-history.component.html b/src/app/tools/password-generator-history.component.html
index 47aab69cba..2b53b4ccf5 100644
--- a/src/app/tools/password-generator-history.component.html
+++ b/src/app/tools/password-generator-history.component.html
@@ -10,7 +10,7 @@
             <ul class="list-group list-group-flush" *ngIf="history.length">
                 <li class="list-group-item d-flex" *ngFor="let h of history">
                     <div>
-                        <div class="password">{{h.password}}</div>
+                        <div class="text-monospace password-wrapper" [innerHTML]="h.password | colorPassword"></div>
                         <small class="text-muted">{{h.date | date:'medium'}}</small>
                     </div>
                     <div class="ml-auto">
diff --git a/src/app/tools/password-generator.component.html b/src/app/tools/password-generator.component.html
index 7da7cf987a..39293c4118 100644
--- a/src/app/tools/password-generator.component.html
+++ b/src/app/tools/password-generator.component.html
@@ -2,9 +2,7 @@
     <h1>{{'passwordGenerator' | i18n}}</h1>
 </div>
 <div class="card card-password bg-light my-4">
-    <div class="card-body">
-        {{password}}
-    </div>
+    <div class="card-body" [innerHTML]="password | colorPassword"></div>
 </div>
 <div class="form-group">
     <div class="form-check form-check-inline">
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 058fee899e..b7aafda30e 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -399,6 +399,19 @@ input[type="search"]::-webkit-search-cancel-button {
     font-weight: 600;
 }
 
+.password-wrapper {
+    display: flex !important;
+    flex-wrap: wrap;
+}
+
+.password-number {
+    color: #007fde;
+}
+
+.password-special {
+    color: #c40800;
+}
+
 app-vault-groupings, app-org-vault-groupings {
     .card {
         #search {
@@ -461,7 +474,10 @@ app-password-generator {
 
     .card-password {
         .card-body {
-            word-break: break-all;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
             text-align: center;
             font-size: $font-size-lg;
             font-family: $font-family-monospace;
@@ -474,7 +490,6 @@ app-password-generator-history {
         line-height: 1;
 
         .password {
-            word-break: break-all;
             font-family: $font-family-monospace;
         }
     }