bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

Fix angular performance issue on color-password.component (#14560)

Browse Source 
* Fix performance issue, by using track $index instead of character as it can contain duplicate characters

* Migrate component to use Angular signal inputs

* Make file ts-strict compliant

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
This commit is contained in:
Daniel James Smith
2025-05-08 23:19:09 +02:00
committed by GitHub
parent 9e467163db
commit 26ecf3191c
3 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
libs/components/src/color-password/color-password.component.ts
View File

@@ -1,7 +1,4 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { Component, HostBinding, Input } from "@angular/core";
import { Component, computed, HostBinding, input } from "@angular/core";
import { Utils } from "@bitwarden/common/platform/misc/utils";
@@ -14,10 +11,10 @@ enum CharacterType {
@Component({
selector: "bit-color-password",
template: `@for (character of passwordArray; track character; let i = $index) {
template: `@for (character of passwordCharArray(); track $index; let i = $index) {
<span [class]="getCharacterClass(character)">
<span>{{ character }}</span>
@if (showCount) {
@if (showCount()) {
<span class="tw-whitespace-nowrap tw-text-xs tw-leading-5 tw-text-main">{{ i + 1 }}</span>
}
</span>
@@ -25,8 +22,13 @@ enum CharacterType {
standalone: true,
})
export class ColorPasswordComponent {
@Input() password: string = null;
@Input() showCount = false;
password = input<string>("");
showCount = input<boolean>(false);
// Convert to an array to handle cases that strings have special characters, i.e.: emoji.
passwordCharArray = computed(() => {
return Array.from(this.password() ?? "");
});
characterStyles: Record<CharacterType, string[]> = {
[CharacterType.Emoji]: [],
@@ -40,16 +42,11 @@ export class ColorPasswordComponent {
return ["tw-min-w-0", "tw-whitespace-pre-wrap", "tw-break-all"];
}
get passwordArray() {
// Convert to an array to handle cases that strings have special characters, i.e.: emoji.
return Array.from(this.password);
}
getCharacterClass(character: string) {
const charType = this.getCharacterType(character);
const charClass = this.characterStyles[charType];
if (this.showCount) {
if (this.showCount()) {
return charClass.concat([
"tw-inline-flex",
"tw-flex-col",

2
libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.spec.ts
View File

@@ -168,7 +168,7 @@ describe("LoginCredentialsViewComponent", () => {
const passwordColor = passwordField.query(By.directive(ColorPasswordComponent));
expect(passwordColor.componentInstance.password).toBe(cipher.login.password);
expect(passwordColor.componentInstance.password()).toBe(cipher.login.password);
});
it("records event", () => {

2
libs/vault/src/components/password-history-view/password-history-view.component.spec.ts
View File

@@ -68,7 +68,7 @@ describe("PasswordHistoryViewComponent", () => {
it("renders all passwords", () => {
const passwords = fixture.debugElement.queryAll(By.directive(ColorPasswordComponent));
expect(passwords.map((password) => password.componentInstance.password)).toEqual([
expect(passwords.map((password) => password.componentInstance.password())).toEqual([
"bad-password-1",
"bad-password-2",
]);