diff --git a/src/popup/accounts/update-temp-password.component.html b/src/popup/accounts/update-temp-password.component.html
index 5154590c8bc..0ac0ae45592 100644
--- a/src/popup/accounts/update-temp-password.component.html
+++ b/src/popup/accounts/update-temp-password.component.html
@@ -41,14 +41,14 @@
+ appInputVerbatim (input)="updatePasswordStrength()">
@@ -72,7 +72,7 @@
diff --git a/src/popup/accounts/update-temp-password.component.ts b/src/popup/accounts/update-temp-password.component.ts
index 2ae67464648..c1aab92a8e0 100644
--- a/src/popup/accounts/update-temp-password.component.ts
+++ b/src/popup/accounts/update-temp-password.component.ts
@@ -11,12 +11,47 @@ import { UserService } from 'jslib-common/abstractions/user.service';
import { UpdateTempPasswordComponent as BaseUpdateTempPasswordComponent } from 'jslib-angular/components/update-temp-password.component';
+interface MasterPasswordScore {
+ Color: string;
+ Text: string;
+ Width: number;
+}
+
@Component({
selector: 'app-update-temp-password',
templateUrl: 'update-temp-password.component.html',
})
-
export class UpdateTempPasswordComponent extends BaseUpdateTempPasswordComponent {
+ get masterPasswordScoreStyle(): MasterPasswordScore {
+ const scoreWidth = this.masterPasswordScore == null ? 0 : (this.masterPasswordScore + 1) * 20;
+ switch (this.masterPasswordScore) {
+ case 4:
+ return {
+ Color: 'bg-success',
+ Text: 'strong',
+ Width: scoreWidth,
+ };
+ case 3:
+ return {
+ Color: 'bg-primary',
+ Text: 'good',
+ Width: scoreWidth,
+ };
+ case 2:
+ return {
+ Color: 'bg-warning',
+ Text: 'weak',
+ Width: scoreWidth,
+ };
+ default:
+ return {
+ Color: 'bg-danger',
+ Text: 'weak',
+ Width: scoreWidth,
+ };
+ }
+ }
+
constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
passwordGenerationService: PasswordGenerationService, policyService: PolicyService,
cryptoService: CryptoService, userService: UserService,