feat: add hidden char count toggle (#341)

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

angular/src/components/view-custom-fields.component.ts

@@ -23,8 +23,17 @@ export class ViewCustomFieldsComponent {
 
     const f = field as any;
     f.showValue = !f.showValue;
+    f.showCount = false;
     if (f.showValue) {
       this.eventService.collect(EventType.Cipher_ClientToggledHiddenFieldVisible, this.cipher.id);
     }
   }
+
+  async toggleFieldCount(field: FieldView) {
+    if (!field.showValue) {
+      return;
+    }
+
+    field.showCount = !field.showCount;
+  }
 }

angular/src/components/view.component.ts

@@ -44,6 +44,7 @@ export class ViewComponent implements OnDestroy, OnInit {
 
   cipher: CipherView;
   showPassword: boolean;
+  showPasswordCount: boolean;
   showCardNumber: boolean;
   showCardCode: boolean;
   canAccessPremium: boolean;
@@ -218,11 +219,20 @@ export class ViewComponent implements OnDestroy, OnInit {
     }
 
     this.showPassword = !this.showPassword;
+    this.showPasswordCount = false;
     if (this.showPassword) {
       this.eventService.collect(EventType.Cipher_ClientToggledPasswordVisible, this.cipherId);
     }
   }
 
+  async togglePasswordCount() {
+    if (!this.showPassword) {
+      return;
+    }
+
+    this.showPasswordCount = !this.showPasswordCount;
+  }
+
   async toggleCardNumber() {
     if (!(await this.promptPassword())) {
       return;

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

angular/src/scss/bwicons/fonts/bwi-font.svg

@@ -163,6 +163,7 @@
 <glyph unicode="&#xe986;" glyph-name="mobile" data-tags="bw-mobile" d="M517.369-31.195c14.501 0 26.256 11.756 26.256 26.256s-11.755 26.256-26.256 26.256-26.256-11.755-26.256-26.256c0-14.5 11.755-26.256 26.256-26.256zM239.492 861.091c16.574 18.214 39.779 29.234 64.526 30.627h415.965c24.747-1.393 47.951-12.413 64.525-30.627s25.173-42.166 23.958-66.603v-175.116c0.151-3.031 0.152-6.081 0-9.14v-452.461c0.152-3.059 0.151-6.11 0-9.141v-175.116c1.216-24.438-7.385-48.389-23.958-66.603s-39.778-29.234-64.525-30.628h-415.965c-24.747 1.394-47.952 12.414-64.526 30.628s-25.173 42.165-23.958 66.603v175.13c-0.151 3.027-0.152 6.072 0 9.127v452.461c-0.152 3.059-0.151 6.109 0 9.14v175.116c-1.215 24.437 7.385 48.389 23.958 66.603zM284.75 816.656c-5.514-6.060-8.369-14.034-7.976-22.168v-32.082c-0.393-7.033 2.069-13.904 6.827-19.123 4.76-5.217 11.389-8.394 18.511-8.816h419.776c7.122 0.421 13.752 3.598 18.511 8.816s7.221 12.090 6.828 19.123v32.082c0.393 8.135-2.462 16.108-7.977 22.168-5.514 6.061-13.194 9.756-21.433 10.242h-411.634c-8.239-0.486-15.918-4.181-21.433-10.242zM301.242 112.908c0.917-0.137 1.843-0.234 2.776-0.289h415.965c0.932 0.055 1.856 0.154 2.774 0.29 6.372 1.386 12.193 4.696 16.591 9.53 4.853 5.335 7.672 12.153 8.010 19.28 0.045 0.958 0.045 1.922 0 2.888l-0.003 0.034v494.801c-0.343 7.114-3.161 13.919-8.007 19.246-4.398 4.835-10.216 8.145-16.59 9.532-0.916 0.135-1.843 0.232-2.775 0.288h-415.965c-0.933-0.055-1.857-0.154-2.774-0.29-6.373-1.386-12.194-4.695-16.591-9.53-4.846-5.327-7.665-12.132-8.008-19.246v-497.756c0.343-7.115 3.162-13.92 8.008-19.247 4.398-4.834 10.216-8.145 16.59-9.531zM739.25-48.655c5.515 6.060 8.369 14.034 7.977 22.168v45.21c0.393 7.034-2.069 13.905-6.828 19.123s-11.389 8.394-18.511 8.816h-419.776c-7.122-0.421-13.752-3.597-18.511-8.816-4.758-5.217-7.22-12.088-6.827-19.123v-45.21c-0.393-8.134 2.462-16.108 7.976-22.168s13.194-9.756 21.433-10.243h411.637c8.237 0.487 15.917 4.181 21.43 10.243z" />
 <glyph unicode="&#xe987;" glyph-name="cli" data-tags="bw-cli" d="M564.293 401.426c8.527 6.203 20.465 4.315 26.668-4.209l76.359-104.993c4.994-6.865 4.854-16.203-0.343-22.912l-76.359-98.631c-6.453-8.337-18.443-9.864-26.78-3.408-8.335 6.453-9.862 18.443-3.407 26.78l67.589 87.302-67.932 93.405c-6.203 8.527-4.315 20.465 4.209 26.666zM709.15 207.82c-10.543 0-19.089-8.548-19.089-19.089s8.548-19.089 19.089-19.089h139.99c10.543 0 19.089 8.548 19.089 19.089s-8.548 19.089-19.089 19.089h-139.99zM935.28 729.6h-846.557c-23.99-1.351-46.483-12.034-62.549-29.691s-24.403-40.874-23.226-64.565v-502.692c-1.177-23.722 7.158-46.91 23.226-64.566 16.065-17.658 38.529-28.339 62.549-29.691h846.304c24.053 1.289 46.578 11.939 62.711 29.598s24.5 40.905 23.323 64.658v502.692c1.177 23.722-7.158 46.909-23.226 64.565s-38.562 28.339-62.549 29.691zM935.28 666.763c7.987-0.47 15.43-4.054 20.774-9.93s8.114-13.603 7.731-21.489v-18.375c0.383-6.819-2.003-13.478-6.616-18.538-4.614-5.059-11.041-8.138-17.944-8.547h-854.512c-6.874 0.408-13.3 3.488-17.912 8.547-4.614 5.060-6.968 11.72-6.585 18.538v18.375c-0.383 7.887 2.386 15.614 7.731 21.489s12.791 9.455 20.774 9.93h846.557zM935.28 101.613h-846.557c-7.922 0.471-15.303 3.991-20.648 9.802s-8.146 13.415-7.857 21.238v366.938c-0.351 6.819 2.003 13.477 6.616 18.537s11.041 8.138 17.944 8.547h854.576c6.905-0.376 13.333-3.457 17.944-8.547s7-11.75 6.616-18.537v-366.938c0.383-7.919-2.417-15.646-7.762-21.52-5.345-5.876-12.854-9.425-20.871-9.898v0.376z" />
 <glyph unicode="&#xe988;" glyph-name="save-changes" data-tags="bw-save-changes" d="M37.926 839.11v-910.222c0-31.42 25.47-56.889 56.889-56.889h834.37c31.42 0 56.889 25.469 56.889 56.889v754.218c0 26.878-11.408 52.494-31.387 70.475l-131.199 118.079c-17.41 15.669-40.004 24.34-63.427 24.34h-665.245c-31.419 0-56.889-25.47-56.889-56.889zM884.983 688.755c3.995-3.595 6.277-8.719 6.277-14.095v-688.883c0-10.473-8.49-18.963-18.963-18.963h-37.926c-10.473 0-18.963 8.49-18.963 18.963v334.127c0 14.454-12.736 26.169-28.444 26.169h-549.926c-15.709 0-28.444-11.715-28.444-26.169v-334.127c0-10.473-8.49-18.963-18.963-18.963h-37.926c-10.473 0-18.963 8.49-18.963 18.963v796.444c0 10.473 8.49 18.963 18.963 18.963h37.926c10.473 0 18.963-8.49 18.963-18.963v-199.111c0-15.709 12.245-28.444 27.35-28.444h476.262c15.106 0 27.35 12.736 27.35 28.444v203.255c0 8.184 6.635 14.819 14.82 14.819 3.66 0 7.191-1.355 9.912-3.804l120.695-108.626zM282.256 611.555c-10.473 0-18.963 8.49-18.963 18.963v170.667h229.744c10.473 0 18.963-8.49 18.963-18.963v-75.852c0-20.946 16.979-37.926 37.926-37.926h37.926c20.946 0 37.926 16.979 37.926 37.926v75.852c0 10.473 8.49 18.963 18.963 18.963h21.151c10.473 0 18.963-8.49 18.963-18.963v-151.704c0-10.473-8.49-18.963-18.963-18.963h-383.636zM265.482-14.223v288.996c0 10.473 8.49 18.963 18.963 18.963h474.074v-307.959c0-10.473-8.49-18.963-18.963-18.963h-455.111c-10.473 0-18.963 8.49-18.963 18.963z" />
+<glyph unicode="&#xe989;" glyph-name="numbered-list" data-tags="bw-numbered-list" d="M128.654 569.533v138.823c-29.309-19.833-49.039-29.749-59.194-29.749-4.847 0-9.173 1.679-12.981 5.037-3.693 3.458-5.539 7.424-5.539 11.898 0 5.186 1.846 8.999 5.539 11.438s10.213 5.593 19.557 9.459c13.963 5.798 25.097 11.898 33.405 18.306 8.424 6.406 15.867 13.577 22.328 21.507 6.463 7.935 10.675 12.814 12.636 14.646s5.654 2.748 11.079 2.748c6.115 0 11.019-2.085 14.711-6.256 3.693-4.169 5.539-9.916 5.539-17.239v-174.673c0-20.441-7.903-30.662-23.711-30.662-7.039 0-12.692 2.084-16.962 6.256-4.271 4.169-6.405 10.322-6.405 18.459zM107.712 309.403h90.35c9.001 0 15.867-1.629 20.599-4.883 4.729-3.253 7.097-7.676 7.097-13.273 0-4.983-1.903-9.204-5.711-12.662-3.692-3.458-9.348-5.186-16.962-5.186h-127.391c-8.655 0-15.405 2.084-20.251 6.255-4.846 4.273-7.27 9.255-7.27 14.95 0 3.663 1.557 8.491 4.673 14.492 3.116 6.103 6.519 10.883 10.214 14.342 15.346 14.035 29.195 26.035 41.542 36.002 12.347 10.069 21.175 16.68 26.482 19.833 9.462 5.897 17.307 11.797 23.539 17.695 6.346 6.002 11.134 12.103 14.367 18.306 3.347 6.305 5.019 12.458 5.019 18.459 0 6.511-1.789 12.307-5.366 17.391-3.461 5.187-8.252 9.204-14.367 12.053-6.002 2.847-12.579 4.273-19.731 4.273-15.116 0-27.003-5.847-35.655-17.545-1.155-1.525-3.116-5.696-5.885-12.509-2.654-6.815-5.711-12.053-9.173-15.712-3.348-3.661-8.308-5.491-14.887-5.491-5.77 0-10.557 1.679-14.366 5.033-3.81 3.357-5.713 7.935-5.713 13.73 0 7.017 1.789 14.341 5.366 21.967s8.886 14.542 15.925 20.747c7.156 6.205 16.156 11.188 27.003 14.952 10.962 3.864 23.77 5.796 38.426 5.796 17.656 0 32.714-2.439 45.176-7.322 8.076-3.253 15.174-7.729 21.289-13.423s10.847-12.307 14.194-19.832c3.461-7.425 5.192-15.152 5.192-23.187 0-12.611-3.578-24.105-10.731-34.476-7.038-10.272-14.25-18.358-21.636-24.255-7.384-5.798-19.789-14.952-37.213-27.459-17.307-12.509-29.195-22.223-35.655-29.138-2.769-2.747-5.598-6.051-8.482-9.914zM125.712 133.175c10.615 0 19.731 2.748 27.348 8.239 7.731 5.492 11.596 13.373 11.596 23.646 0 7.831-3.058 14.542-9.173 20.137-6.115 5.697-14.367 8.544-24.753 8.544-7.039 0-12.868-0.865-17.483-2.593-4.498-1.728-8.076-4.017-10.73-6.866-2.654-2.847-5.191-6.51-7.614-10.983-2.309-4.477-4.444-8.696-6.404-12.662-1.156-2.135-3.231-3.814-6.232-5.037-3-1.22-6.464-1.83-10.385-1.83-4.615 0-8.886 1.628-12.809 4.882-3.809 3.358-5.711 7.781-5.711 13.273 0 5.289 1.788 10.832 5.366 16.63 3.692 5.897 8.999 11.493 15.924 16.78 7.039 5.287 15.753 9.51 26.138 12.662 10.385 3.253 21.982 4.882 34.789 4.882 11.192 0 21.406-1.373 30.637-4.118 9.231-2.644 17.251-6.51 24.059-11.594 6.809-5.085 11.943-10.984 15.405-17.695s5.192-13.933 5.192-21.663c0-10.17-2.537-18.914-7.614-26.239-4.96-7.22-12.117-14.29-21.465-21.203 9.001-4.273 16.558-9.155 22.675-14.647 6.231-5.491 10.902-11.594 14.018-18.305 3.116-6.611 4.673-13.781 4.673-21.512 0-9.254-2.133-18.204-6.404-26.849-4.155-8.644-10.329-16.374-18.521-23.186-8.193-6.712-17.945-12.002-29.251-15.867-11.192-3.763-23.598-5.645-37.213-5.645-13.846 0-26.252 2.187-37.212 6.559s-20.020 9.815-27.176 16.325c-7.038 6.61-12.406 13.423-16.097 20.441-3.578 7.017-5.366 12.814-5.366 17.392 0 5.897 2.133 10.628 6.404 14.187 4.386 3.661 9.81 5.491 16.269 5.491 3.231 0 6.347-0.865 9.348-2.593 2.999-1.628 4.96-3.609 5.885-5.951 6-14.136 12.405-24.662 19.212-31.577 6.925-6.816 16.617-10.221 29.078-10.221 7.156 0 14.019 1.525 20.599 4.578 6.693 3.153 12.174 7.779 16.441 13.882 4.386 6.102 6.577 13.171 6.577 21.203 0 11.898-3.692 21.204-11.078 27.917-7.384 6.816-17.655 10.221-30.809 10.221-2.309 0-5.885-0.204-10.73-0.609s-7.963-0.609-9.348-0.609c-6.347 0-11.251 1.373-14.712 4.118-3.461 2.848-5.191 6.763-5.191 11.748 0 4.883 2.075 8.796 6.231 11.748 4.155 3.052 10.329 4.577 18.521 4.577h7.098zM356.64 680.597h607.317c15.6 0 28.248-12.647 28.248-28.248s-12.647-28.248-28.248-28.248h-607.317c-15.6 0-28.248 12.647-28.248 28.248s12.647 28.248 28.248 28.248zM356.64 412.248h607.317c15.6 0 28.248-12.647 28.248-28.248s-12.647-28.248-28.248-28.248h-607.317c-15.6 0-28.248 12.647-28.248 28.248s12.647 28.248 28.248 28.248zM356.64 129.776h607.317c15.6 0 28.248-12.647 28.248-28.248s-12.647-28.248-28.248-28.248h-607.317c-15.6 0-28.248 12.647-28.248 28.248s12.647 28.248 28.248 28.248z" />
 <glyph unicode="&#xe9ee;" glyph-name="rocket" data-tags="rocket" d="M650.515 648.267c33.538 33.532 87.904 33.532 121.443 0 33.538-33.538 33.538-87.904 0-121.443s-87.904-33.538-121.443 0c-33.532 33.538-33.532 87.904 0 121.443zM750.801 627.113c-21.855 21.856-57.284 21.856-79.134 0-21.856-21.855-21.856-57.284 0-79.134 21.855-21.855 57.284-21.855 79.134 0s21.855 57.284 0 79.134zM493.141 680.645c113.184 90.608 223.416 148.836 310.181 180.552 43.273 15.818 81.527 25.336 111.933 28.691 15.138 1.668 29.339 1.929 41.709 0.19 11.507-1.615 25.903-5.552 36.583-16.232l3.981-3.981c10.68-10.679 14.617-25.076 16.232-36.582 1.739-12.377 1.478-26.572-0.19-41.71-3.356-30.406-12.874-68.659-28.691-111.932-31.716-86.771-89.944-196.998-180.552-310.187-29.487-36.837-59.902-73.855-91.847-111.076l30.789-145.412c4.388-20.715-0.21-42.314-12.654-59.447l-89.489-123.202c-35.299-48.598-110.586-37.857-130.894 18.67l-31.576 87.886-74.269-74.269c-5.844-5.844-15.313-5.844-21.151 0-5.844 5.845-5.844 15.313 0 21.152l80.747 80.747-47.795 47.794-162.229-162.229c-5.844-5.844-15.313-5.844-21.151 0s-5.844 15.313 0 21.151l162.229 162.229-54.059 54.060-306.392-306.392c-5.844-5.844-15.313-5.844-21.151 0-5.844 5.845-5.844 15.313 0 21.151l306.391 306.392-54.059 54.060-61.939-61.939c-5.845-5.844-15.313-5.844-21.151 0-5.845 5.844-5.845 15.313 0 21.151l61.938 61.939-47.794 47.794-112.086-112.086c-5.844-5.844-15.312-5.844-21.151 0-5.844 5.845-5.844 15.313 0 21.152l109.675 109.669-100.568 36.13c-56.526 20.307-67.261 95.6-18.663 130.894l123.202 89.489c17.132 12.444 38.73 17.041 59.446 12.654l145.412-30.789c37.221 31.945 74.238 62.36 111.076 91.847zM952.797 829.985c-0.744 0.223-2.062 0.551-4.14 0.84-5.79 0.812-14.652 0.934-26.837-0.411-24.234-2.675-57.643-10.683-97.952-25.414-80.389-29.379-184.973-84.318-293.329-171.062-38.013-30.432-76.092-61.749-114.295-94.665-2.919-4.249-6.879-7.644-11.433-9.895-54.88-47.714-110.027-98.85-165.607-155.478l258.391-258.39c56.628 55.58 107.765 110.728 155.48 165.609 2.25 4.551 5.643 8.51 9.89 11.427 32.912 38.205 64.235 76.284 94.667 114.298 86.744 108.362 141.683 212.941 171.063 293.329 14.73 40.309 22.744 73.723 25.414 97.952 1.345 12.179 1.222 21.047 0.411 26.837-0.29 2.078-0.619 3.397-0.84 4.14l-0.875 0.875zM224.258 561.056c-4.141 0.875-8.464-0.045-11.889-2.533l-123.202-89.489c-9.719-7.058-7.573-22.117 3.736-26.177l96.234-34.573c45.935 47.161 91.519 90.548 136.803 131.242l-101.677 21.529zM663.214 202.25c-40.694-45.278-84.081-90.868-131.243-136.803l34.574-96.235c4.061-11.304 19.119-13.455 26.177-3.736l89.489 123.202c2.488 3.425 3.408 7.748 2.533 11.889l-21.529 101.678z" />
 <glyph unicode="&#xe9ef;" glyph-name="ellipsis-h" data-tags="ellipsis-h" d="M919.751 314.596c-43.122 0-78.080 34.958-78.080 78.080s34.958 78.080 78.080 78.080c43.122 0 78.080-34.958 78.080-78.080s-34.958-78.080-78.080-78.080zM520.676 314.596c-43.122 0-78.080 34.958-78.080 78.080s34.958 78.080 78.080 78.080c43.122 0 78.080-34.958 78.080-78.080s-34.958-78.080-78.080-78.080zM121.6 314.596c-43.122 0-78.080 34.958-78.080 78.080s34.958 78.080 78.080 78.080c43.122 0 78.080-34.958 78.080-78.080s-34.958-78.080-78.080-78.080z" />
 <glyph unicode="&#xe9f0;" glyph-name="ellipsis-v" data-tags="ellipsis-v" d="M586.472 734.020c0-37.017-30.007-67.024-67.024-67.024s-67.024 30.007-67.024 67.024c0 37.017 30.007 67.024 67.024 67.024s67.024-30.007 67.024-67.024zM586.472 391.448c0-37.017-30.007-67.024-67.024-67.024s-67.024 30.007-67.024 67.024c0 37.017 30.007 67.024 67.024 67.024s67.024-30.007 67.024-67.024zM586.472 48.872c0-37.017-30.007-67.024-67.024-67.024s-67.024 30.007-67.024 67.024c0 37.017 30.007 67.024 67.024 67.024s67.024-30.007 67.024-67.024z" />

angular/src/scss/bwicons/styles/style.scss

@@ -240,6 +240,7 @@ $icons: (
   "apple": "\e945",
   "android": "\e944",
   "error": "\e981",
+  "numbered-list": "\e989"
 );
 
 @each $name, $glyph in $icons {

common/src/models/view/fieldView.ts

@@ -10,6 +10,7 @@ export class FieldView implements View {
   type: FieldType = null;
   newField = false; // Marks if the field is new and hasn't been saved
   showValue = false;
+  showCount = false;
   linkedId: LinkedIdType = null;
 
   constructor(f?: Field) {