implemented password score styling for update temp password

src/popup/accounts/update-temp-password.component.html

@@ -41,14 +41,14 @@
                         <div class="row-main">
                             <label for="masterPassword">
                                 {{'masterPass' | i18n}}
-                                <strong class="sub-label text-{{masterPasswordScoreColor}}"
+                                <strong class="sub-label text-{{masterPasswordScoreStyle.Color}}"
-                                    *ngIf="masterPasswordScoreText">
+                                    *ngIf="masterPasswordScoreStyle.Text">
-                                    {{masterPasswordScoreText}}
+                                    {{masterPasswordScoreStyle.Text}}
                                 </strong>
                             </label>
                             <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
                                 name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword" required
-                                [appAutofocus]="email !== ''" appInputVerbatim (input)="updatePasswordStrength()">
+                                appInputVerbatim (input)="updatePasswordStrength()">
                         </div>
                         <div class="action-buttons">
                             <a class="row-btn" href="#" appStopClick appBlurClick
@@ -59,9 +59,9 @@
                         </div>
                     </div>
                     <div class="progress">
-                        <div class="progress-bar bg-{{masterPasswordScoreColor}}" role="progressbar" aria-valuenow="0"
+                        <div class="progress-bar bg-{{masterPasswordScoreStyle.Color}}" role="progressbar" aria-valuenow="0"
-                            aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: (masterPasswordScoreWidth + '%')}"
+                            aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: (masterPasswordScoreStyle.Width + '%')}"
-                            attr.aria-valuenow="{{masterPasswordScoreWidth}}"></div>
+                            attr.aria-valuenow="{{masterPasswordScoreStyle.Width}}"></div>
                     </div>
                 </div>
             </div>
@@ -72,7 +72,7 @@
                     <div class="row-main">
                         <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
                         <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
-                            name="MasterPasswordRetype" class="monospaced" [(ngModel)]="confirmMasterPassword" required
+                            name="MasterPasswordRetype" class="monospaced" [(ngModel)]="masterPasswordRetype" required
                             appInputVerbatim>
                     </div>
                     <div class="action-buttons">

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,