diff --git a/angular/src/components/view-custom-fields.component.ts b/angular/src/components/view-custom-fields.component.ts
index 0f67aa02ca..8439ed67b7 100644
--- a/angular/src/components/view-custom-fields.component.ts
+++ b/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;
+ }
}
diff --git a/angular/src/components/view.component.ts b/angular/src/components/view.component.ts
index c92e0b0c36..d1e949677b 100644
--- a/angular/src/components/view.component.ts
+++ b/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;
diff --git a/angular/src/pipes/color-password-count.pipe.ts b/angular/src/pipes/color-password-count.pipe.ts
new file mode 100644
index 0000000000..3c0ec0de92
--- /dev/null
+++ b/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) =>
+ `
+ ${character}${index + 1}
+ `;
+ const colorizedPasswordCount = this.generateTemplate(password, template);
+
+ return colorizedPasswordCount;
+ }
+}
diff --git a/angular/src/pipes/color-password.pipe.ts b/angular/src/pipes/color-password.pipe.ts
index c888c16dfc..1b3d607203 100644
--- a/angular/src/pipes/color-password.pipe.ts
+++ b/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) =>
+ `${character}`;
+ 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 += '' + character + "";
+ colorizedPassword += templateGenerator(character, type, i);
}
return colorizedPassword;
}
diff --git a/angular/src/scss/bwicons/fonts/bwi-font.svg b/angular/src/scss/bwicons/fonts/bwi-font.svg
index 6084f2e38d..8b37358b76 100644
--- a/angular/src/scss/bwicons/fonts/bwi-font.svg
+++ b/angular/src/scss/bwicons/fonts/bwi-font.svg
@@ -163,6 +163,7 @@
+
diff --git a/angular/src/scss/bwicons/fonts/bwi-font.ttf b/angular/src/scss/bwicons/fonts/bwi-font.ttf
index 900da5ca18..9b1cfde3dd 100644
Binary files a/angular/src/scss/bwicons/fonts/bwi-font.ttf and b/angular/src/scss/bwicons/fonts/bwi-font.ttf differ
diff --git a/angular/src/scss/bwicons/fonts/bwi-font.woff b/angular/src/scss/bwicons/fonts/bwi-font.woff
index 8cde2bacfe..fdf107376e 100644
Binary files a/angular/src/scss/bwicons/fonts/bwi-font.woff and b/angular/src/scss/bwicons/fonts/bwi-font.woff differ
diff --git a/angular/src/scss/bwicons/fonts/bwi-font.woff2 b/angular/src/scss/bwicons/fonts/bwi-font.woff2
index 898cf2c3fb..04cda6895e 100644
Binary files a/angular/src/scss/bwicons/fonts/bwi-font.woff2 and b/angular/src/scss/bwicons/fonts/bwi-font.woff2 differ
diff --git a/angular/src/scss/bwicons/styles/style.scss b/angular/src/scss/bwicons/styles/style.scss
index 3658c75e2b..5c17c3e9b4 100644
--- a/angular/src/scss/bwicons/styles/style.scss
+++ b/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 {
diff --git a/common/src/models/view/fieldView.ts b/common/src/models/view/fieldView.ts
index 46d42018da..51e3aaef35 100644
--- a/common/src/models/view/fieldView.ts
+++ b/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) {