colorized password

jslib

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

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

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