feat: add hidden char count toggle (#341)

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>

angular/src/pipes/color-password-count.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe } from "@angular/core";
+import { ColorPasswordPipe } from "./color-password.pipe";
+
+/*
+ An updated pipe that extends ColourPasswordPipe to include a character count
+*/
+@Pipe({ name: "colorPasswordCount" })
+export class ColorPasswordCountPipe extends ColorPasswordPipe {
+  transform(password: string) {
+    const template = (character: string, type: string, index: number) =>
+      `<span class="password-character password-${type}">
+                ${character}<span class="password-count">${index + 1}</span>
+            </span>`;
+    const colorizedPasswordCount = this.generateTemplate(password, template);
+
+    return colorizedPasswordCount;
+  }
+}

angular/src/pipes/color-password.pipe.ts

@@ -9,6 +9,16 @@ import { Utils } from "jslib-common/misc/utils";
 @Pipe({ name: "colorPassword" })
 export class ColorPasswordPipe implements PipeTransform {
   transform(password: string) {
+    const template = (character: string, type: string) =>
+      `<span class="password-${type}">${character}</span>`;
+    const colorizedPassword = this.generateTemplate(password, template);
+    return colorizedPassword;
+  }
+
+  protected generateTemplate(
+    password: string,
+    templateGenerator: (chararacter: string, type: string, index?: number) => string
+  ) {
     // Convert to an array to handle cases that stings have special characters, ie: emoji.
     const passwordArray = Array.from(password);
     let colorizedPassword = "";
@@ -44,7 +54,7 @@ export class ColorPasswordPipe implements PipeTransform {
       } else if (character.match(/\d/)) {
         type = "number";
       }
-      colorizedPassword += '<span class="password-' + type + '">' + character + "</span>";
+      colorizedPassword += templateGenerator(character, type, i);
     }
     return colorizedPassword;
   }