[PM-4260] [BEEEP] Mask TOTP seeds in cipher edit view - similar to how the password is hidden (#6649)

* PoC disallow changing masked values in edit mode and mask TOTP with password

* toggle totp seed visibility independently from password visibility in edit mode

* cleanup

* add fallback value for when a cipher returns a null value for maskedPassword

* toggle masks off for maskable login properties with no value on load

* do not show mask toggle for password or totp if no value is present

apps/browser/src/vault/popup/components/vault/add-edit.component.html

@@ -70,15 +70,18 @@
             <div class="row-main">
               <label for="loginPassword">{{ "password" | i18n }}</label>
               <input
+                *ngIf="showPassword"
                 id="loginPassword"
                 class="monospaced"
-                type="{{ showPassword ? 'text' : 'password' }}"
+                type="text"
                 name="Login.Password"
                 [(ngModel)]="cipher.login.password"
                 appInputVerbatim
-                [disabled]="!cipher.viewPassword"
                 [readonly]="!cipher.edit && editMode"
               />
+              <div *ngIf="!showPassword" class="monospaced">
+                {{ cipher.login.maskedPassword || "••••••••" }}
+              </div>
             </div>
             <div class="action-buttons">
               <button
@@ -108,7 +111,7 @@
                 appStopClick
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                 (click)="togglePassword()"
-                *ngIf="cipher.viewPassword"
+                *ngIf="cipher.viewPassword && cipher.login.password"
                 [attr.aria-pressed]="showPassword"
               >
                 <i
@@ -150,17 +153,35 @@
             <div class="row-main">
               <label for="loginTotp">{{ "authenticatorKeyTotp" | i18n }}</label>
               <input
+                *ngIf="showTotpSeed"
                 id="loginTotp"
-                type="{{ cipher.viewPassword ? 'text' : 'password' }}"
+                type="text"
                 name="Login.Totp"
                 class="monospaced"
                 [(ngModel)]="cipher.login.totp"
                 appInputVerbatim
-                [disabled]="!cipher.viewPassword"
                 [readonly]="!cipher.edit && editMode"
               />
+              <div *ngIf="!showTotpSeed" class="monospaced">
+                {{ cipher.login.maskedPassword || "••••••••" }}
+              </div>
             </div>
             <div class="action-buttons">
+              <button
+                type="button"
+                class="row-btn"
+                appStopClick
+                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
+                (click)="toggleTotpSeed()"
+                *ngIf="cipher.viewPassword && cipher.login.totp"
+                [attr.aria-pressed]="showTotpSeed"
+              >
+                <i
+                  class="bwi bwi-lg"
+                  aria-hidden="true"
+                  [ngClass]="{ 'bwi-eye': !showTotpSeed, 'bwi-eye-slash': showTotpSeed }"
+                ></i>
+              </button>
               <button
                 type="button"
                 class="row-btn"