colorized passwords

jslib

@@ -1 +1 @@
-Subproject commit 9283a29d35a18f058f3c84f8aaa919b911f1940a
+Subproject commit 9694d2922ef033c6c5eead2c7b4a308b6d93bf2f

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,

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>

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

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;
+}

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;
 }
 

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,
     ),
 );
 

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