Color passwords (#177)

* Highlight passwords in the cipher view

* Highlight generated password

src/app/app.module.ts

@@ -37,6 +37,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';
 
@@ -141,6 +142,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         BoxRowDirective,
         CiphersComponent,
         CollectionsComponent,
+        ColorPasswordPipe,
         EnvironmentComponent,
         ExportComponent,
         FallbackSrcDirective,

src/app/vault/password-generator.component.html

@@ -2,7 +2,7 @@
     <div class="modal-dialog modal-sm">
         <div class="modal-content">
             <div class="modal-body">
-                <div class="password-block">{{password}}</div>
+                <div class="password-block" [innerHTML]="password | colorPassword"></div>
                 <div class="box">
                     <div class="box-content condensed">
                         <a class="box-content-row" href="#" appStopClick appBlurClick

src/app/vault/view.component.html

@@ -27,7 +27,7 @@
                         <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>
+                            <span [hidden]="!showPassword" class="monospaced" [innerHTML]="cipher.login.password | colorPassword"></span>
                         </div>
                         <div class="action-buttons">
                             <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick

src/scss/base.scss

@@ -64,6 +64,18 @@ input, select, textarea {
     }
 }
 
+.passwordNumber {
+    @include themify($themes) {
+        color: themed('passwordNumberColor');
+    }
+}
+
+.passwordSpecial {
+    @include themify($themes) {
+        color: themed('passwordSpecialColor');
+    }
+}
+
 input, select, textarea, button {
     font-size: $font-size-base;
     font-family: $font-family-sans-serif;

src/scss/variables.scss

@@ -41,6 +41,8 @@ $button-color-danger: darken($brand-danger, 10%);
 $themes: (
     light: (
         textColor: $text-color,
+        passwordNumberColor: #007fde,
+        passwordSpecialColor: #c40800,
         borderColor: $border-color-dark,
         backgroundColor: $background-color,
         backgroundColorAlt: $background-color-alt,
@@ -87,6 +89,8 @@ $themes: (
     ),
     dark: (
         textColor: #ffffff,
+        passwordNumberColor: #9fd9ff,
+        passwordSpecialColor: #ff7c70,
         borderColor: #2f2f2f,
         backgroundColor: #363636,
         backgroundColorAlt: #3d3d3d,
@@ -133,6 +137,8 @@ $themes: (
     ),
     nord: (
         textColor: $nord5,
+        passwordNumberColor: $nord8,
+        passwordSpecialColor: $nord12,
         borderColor: $nord0,
         backgroundColor: $nord2,
         backgroundColorAlt: $nord1,