[PM-20034] - [Vault][Browser] Display View Login button and specific banner when an At-risk password task is missing a valid website (#16206)

* add banner for at risk pw without uri

* remove unnecessary title attr. use hasUris

apps/browser/src/_locales/en/messages.json

@@ -556,6 +556,9 @@
   "view": {
     "message": "View"
   },
+  "viewLogin": {
+    "message": "View login"
+  },
   "noItemsInList": {
     "message": "There are no items to list."
   },
@@ -5446,6 +5449,12 @@
   "changeAtRiskPassword": {
     "message": "Change at-risk password"
   },
+  "changeAtRiskPasswordAndAddWebsite": {
+    "message": "This login is at-risk and missing a website. Add a website and change the password for stronger security."
+  },
+  "missingWebsite": {
+    "message": "Missing website"
+  },
   "settingsVaultOptions": {
     "message": "Vault options"
   },

apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.html

@@ -3,7 +3,7 @@
     slot="header"
     [pageTitle]="'atRiskPasswords' | i18n"
     showBackButton
-    [backAction]="navigateToVault.bind(this)"
+    [backAction]="navigateToVault"
   >
     <ng-container slot="end">
       <app-pop-out></app-pop-out>
@@ -13,7 +13,7 @@
   <bit-callout
     *ngIf="showAutofillCallout$ | async"
     type="info"
-    [title]="'changeAtRiskPasswordsFaster' | i18n"
+    [appA11yTitle]="'changeAtRiskPasswordsFaster' | i18n"
     data-testid="autofill-callout"
   >
     <p bitTypography="body2">{{ "changeAtRiskPasswordsFasterDesc" | i18n }}</p>
@@ -65,10 +65,10 @@
             type="button"
             bitBadge
             variant="primary"
+            *ngIf="hasLoginUri(cipher)"
             appStopProp
             (click)="launchChangePassword(cipher)"
-            [title]="'changeButtonTitle' | i18n: cipher.name"
+            [appA11yTitle]="'changeButtonTitle' | i18n: cipher.name"
-            [attr.aria-label]="'changeButtonTitle' | i18n: cipher.name"
             [disabled]="launchingCipher() == cipher"
           >
             <ng-container *ngIf="launchingCipher() != cipher">
@@ -80,6 +80,16 @@
               aria-hidden="true"
             ></i>
           </button>
+          <button
+            type="button"
+            bitBadge
+            variant="primary"
+            *ngIf="!hasLoginUri(cipher)"
+            [appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
+            (click)="viewCipher(cipher)"
+          >
+            {{ "viewLogin" | i18n }}
+          </button>
         </bit-item-action>
       </bit-item>
     </bit-item-group>

apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.ts

@@ -253,6 +253,10 @@ export class AtRiskPasswordsComponent implements OnInit {
     await this.atRiskPasswordPageService.dismissCallout(userId);
   }
 
+  protected hasLoginUri(cipher: CipherView) {
+    return cipher.login?.hasUris;
+  }
+
   launchChangePassword = async (cipher: CipherView) => {
     try {
       this.launchingCipher.set(cipher);
@@ -273,7 +277,7 @@ export class AtRiskPasswordsComponent implements OnInit {
    * which can conflict with the `PopupRouterCacheService`. This replaces the
    * built-in back button behavior so the user always navigates to the vault.
    */
-  protected async navigateToVault() {
+  protected navigateToVault = async () => {
     await this.router.navigate(["/tabs/vault"]);
-  }
+  };
 }

libs/vault/src/cipher-view/cipher-view.component.html

@@ -4,10 +4,14 @@
   </bit-callout>
 
   <bit-callout
-    *ngIf="cipher?.login.uris.length > 0 && hadPendingChangePasswordTask"
+    *ngIf="!hasLoginUri && hadPendingChangePasswordTask"
     type="warning"
-    [title]="''"
+    [title]="'missingWebsite' | i18n"
   >
+    {{ "changeAtRiskPasswordAndAddWebsite" | i18n }}
+  </bit-callout>
+
+  <bit-callout *ngIf="hasLoginUri && hadPendingChangePasswordTask" type="warning" [title]="''">
     <i class="bwi bwi-exclamation-triangle tw-text-warning" aria-hidden="true"></i>
     <a bitLink href="#" appStopClick (click)="launchChangePassword()">
       {{ "changeAtRiskPassword" | i18n }}
@@ -39,7 +43,7 @@
     *ngIf="hasLogin"
     [cipher]="cipher"
     [activeUserId]="activeUserId$ | async"
-    [hadPendingChangePasswordTask]="hadPendingChangePasswordTask"
+    [hadPendingChangePasswordTask]="hadPendingChangePasswordTask && cipher?.login.uris.length > 0"
     (handleChangePassword)="launchChangePassword()"
   ></app-login-credentials-view>
 

libs/vault/src/cipher-view/cipher-view.component.ts

@@ -139,6 +139,10 @@ export class CipherViewComponent implements OnChanges, OnDestroy {
     return !!this.cipher?.sshKey?.privateKey;
   }
 
+  get hasLoginUri() {
+    return this.cipher?.login?.hasUris;
+  }
+
   async loadCipherData() {
     if (!this.cipher) {
       return;