[EC-474] Add hidden char count toggle to web and desktop (#3262)

* feat-web: add hidden char count toggle

* Added toggle char count for desktop

* Use Tailwind and Component Library, add i18n

* Hide char count when password is hidden

* Initial proposal

* Update colors per design spec for all clients

Also make variable names consistent across clients

* Remove unused scss

* Add styling

* Set fixed with for password count elements

* Add separate wrapped stories

* Fix alignment of first char when wrapped

* Minor refactors

* Make naming consistent

* Add Figma url

* add barrel files

* Use CL component

* Fix template

* Remove duplicate style

* Use ColorPasswordComponent in web, remove old pipe

Also remove styling and move pipe out of jslib-module given that
it's no longer shared by all Angular clients

* Run prettier

* Remove unused scss vars

* Undo unnecessary changes

* Remove unnecessary changes

* Fix styling

* Fix selector

* Collect show password event

* Fix incorrect background in dark mode

* Fix linting

* Use color password for password history

* Add char count to hidden custom fields in desktop

* Fix char count background in web: take 2

* Update service name

* Add missing label toggleCharacterCount for desktop

Co-authored-by: Daniel James Smith <djsmith@web.de>
Co-authored-by: Thomas Rittson <trittson@bitwarden.com>

apps/desktop/src/app/app.module.ts

@@ -58,6 +58,9 @@ import localeZhCn from "@angular/common/locales/zh-Hans";
 import localeZhTw from "@angular/common/locales/zh-Hant";
 import { NgModule } from "@angular/core";
 
+import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
+import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe";
+
 import { AccessibilityCookieComponent } from "./accounts/accessibility-cookie.component";
 import { DeleteAccountComponent } from "./accounts/delete-account.component";
 import { EnvironmentComponent } from "./accounts/environment.component";
@@ -170,6 +173,8 @@ registerLocaleData(localeZhTw, "zh-TW");
     AttachmentsComponent,
     VaultItemsComponent,
     CollectionsComponent,
+    ColorPasswordPipe,
+    ColorPasswordCountPipe,
     DeleteAccountComponent,
     EnvironmentComponent,
     ExportComponent,

apps/desktop/src/app/vault/password-generator-history.component.html

@@ -10,7 +10,7 @@
             <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
               <div class="row-main">
                 <div
-                  class="generated-wrapper monospaced"
+                  class="password-wrapper monospaced"
                   appSelectCopy
                   [innerHTML]="h.password | colorPassword"
                 ></div>

apps/desktop/src/app/vault/password-history.component.html

@@ -9,9 +9,7 @@
           <div class="box-content condensed">
             <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
               <div class="row-main">
-                <span class="text monospaced">
-                  {{ h.password }}
-                </span>
+                <span class="text monospaced" [innerHTML]="h.password | colorPassword"></span>
                 <span class="detail">{{ h.lastUsedDate | date: "medium" }}</span>
               </div>
               <div class="action-buttons">

apps/desktop/src/app/vault/view-custom-fields.component.html

@@ -17,12 +17,16 @@
           {{ field.value || " " }}
         </div>
         <div *ngIf="field.type === fieldType.Hidden">
+          <span *ngIf="!field.showValue" class="monospaced">{{ field.maskedValue }}</span>
           <span
-            *ngIf="field.showValue"
+            *ngIf="field.showValue && !field.showCount"
             class="monospaced show-whitespace"
             [innerHTML]="field.value | colorPassword"
           ></span>
-          <span *ngIf="!field.showValue" class="monospaced">{{ field.maskedValue }}</span>
+          <span
+            *ngIf="field.showValue && field.showCount"
+            [innerHTML]="field.value | colorPasswordCount"
+          ></span>
         </div>
         <div *ngIf="field.type === fieldType.Boolean">
           <i class="bwi bwi-check-square" *ngIf="field.value === 'true'" aria-hidden="true"></i>
@@ -41,7 +45,18 @@
           <span>{{ cipher.linkedFieldI18nKey(field.linkedId) | i18n }}</span>
         </div>
       </div>
-      <div class="action-buttons">
+      <div class="action-buttons action-buttons-fixed">
+        <button
+          type="button"
+          class="row-btn"
+          appStopClick
+          appA11yTitle="{{ 'toggleCharacterCount' | i18n }}"
+          *ngIf="field.type === fieldType.Hidden && cipher.viewPassword && field.showValue"
+          (click)="toggleFieldCount(field)"
+          [attr.aria-pressed]="field.showCount"
+        >
+          <i class="bwi bwi-lg bwi-numbered-list" aria-hidden="true"></i>
+        </button>
         <button
           type="button"
           class="row-btn"

apps/desktop/src/app/vault/view.component.html

@@ -50,11 +50,15 @@
                 {{ cipher.login.maskedPassword }}
               </div>
               <div
-                *ngIf="showPassword"
-                class="monospaced generated-wrapper"
+                *ngIf="showPassword && !showPasswordCount"
+                class="monospaced password-wrapper"
                 appSelectCopy
                 [innerHTML]="cipher.login.password | colorPassword"
               ></div>
+              <div
+                *ngIf="showPassword && showPasswordCount"
+                [innerHTML]="cipher.login.password | colorPasswordCount"
+              ></div>
             </div>
             <div class="action-buttons" *ngIf="cipher.viewPassword">
               <button
@@ -77,6 +81,18 @@
                   aria-hidden="true"
                 ></i>
               </button>
+              <button
+                type="button"
+                class="row-btn"
+                appStopClick
+                attr.aria-label="{{ 'toggleCharacterCount' | i18n }} {{ 'password' | i18n }}"
+                appA11yTitle="{{ 'toggleCharacterCount' | i18n }}"
+                (click)="togglePasswordCount()"
+                *ngIf="showPassword"
+                [attr.aria-pressed]="showPasswordCount"
+              >
+                <i class="bwi bwi-lg bwi-numbered-list" aria-hidden="true"></i>
+              </button>
               <button
                 type="button"
                 class="row-btn"

apps/desktop/src/locales/en/messages.json

@@ -2057,5 +2057,9 @@
   },
   "logInWithAnotherDevice": {
     "message": "Log in with another device"
+  },
+  "toggleCharacterCount": {
+    "message": "Toggle character count",
+    "description": "'Character count' describes a feature that displays a number next to each character of the password."
   }
 }

apps/desktop/src/scss/box.scss

@@ -366,6 +366,11 @@
     display: flex;
     margin-left: 5px;
 
+    &.action-buttons-fixed {
+      align-self: start;
+      margin-top: 2px;
+    }
+
     .row-btn {
       @extend .icon-btn;
     }

apps/desktop/src/scss/misc.scss

@@ -215,8 +215,8 @@ p.lead {
   }
 }
 
-.generated-wrapper {
-  word-break: break-all;
+.password-wrapper {
+  overflow-wrap: break-word;
   white-space: pre-wrap;
   min-width: 0;
 }
@@ -233,6 +233,30 @@ p.lead {
   }
 }
 
+.password-character {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  width: 30px;
+  height: 36px;
+  font-weight: 600;
+
+  &:nth-child(odd) {
+    @include themify($themes) {
+      background-color: themed("backgroundColorAlt2");
+    }
+  }
+}
+
+.password-count {
+  white-space: nowrap;
+  font-size: 8px;
+
+  @include themify($themes) {
+    color: themed("passwordCountText") !important;
+  }
+}
+
 #duo-frame {
   background: url("../images/loading.svg") 0 0 no-repeat;
   height: 330px;

apps/desktop/src/scss/variables.scss

@@ -88,6 +88,7 @@ $themes: (
     logoSuffix: "dark",
     passwordNumberColor: #007fde,
     passwordSpecialColor: #c40800,
+    passwordCountText: #212529,
     calloutBorderColor: $border-color-dark,
     calloutBackgroundColor: $background-color,
     accountSwitcherBackgroundColor: $background-color,
@@ -142,6 +143,7 @@ $themes: (
     logoSuffix: "white",
     passwordNumberColor: #52bdfb,
     passwordSpecialColor: #ff7c70,
+    passwordCountText: #ffffff,
     calloutBorderColor: #2f2f2f,
     calloutBackgroundColor: #363636,
     accountSwitcherBackgroundColor: #2f2f2f,
@@ -196,6 +198,7 @@ $themes: (
     logoSuffix: "white",
     passwordNumberColor: $nord8,
     passwordSpecialColor: $nord12,
+    passwordCountText: $nord5,
     calloutBorderColor: $nord1,
     calloutBackgroundColor: $nord2,
     accountSwitcherBackgroundColor: $nord0,