colorized password

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,

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">

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">