[PM-2570] [PM-4649] Update change master password UI (#8416)

* Update the change master password dialog on browser
Change text to remove the mention of the bitwarden.com web vault
Change icon to show it's external link

Changes based on Figma attached to PM-2570

* Update the change master password dialog on desktop
Change text to remove the mention of the bitwarden.com web vault

Changes based on Figma attached to PM-2570 and to replicate what is done on browser

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

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

@@ -172,6 +172,12 @@
   "changeMasterPassword": {
     "message": "Change master password"
   },
+  "continueToWebApp": {
+    "message": "Continue to web app?"
+  },
+  "changeMasterPasswordOnWebConfirmation": {
+    "message": "You can change your master password on the Bitwarden web app."
+  },
   "fingerprintPhrase": {
     "message": "Fingerprint phrase",
     "description": "A 'fingerprint phrase' is a unique word phrase (similar to a passphrase) that a user can use to authenticate their public key with another user, for the purposes of sharing."
@@ -557,12 +563,6 @@
   "addedFolder": {
     "message": "Folder added"
   },
-  "changeMasterPass": {
-    "message": "Change master password"
-  },
-  "changeMasterPasswordConfirmation": {
-    "message": "You can change your master password on the bitwarden.com web vault. Do you want to visit the website now?"
-  },
   "twoStepLoginConfirmation": {
     "message": "Two-step login makes your account more secure by requiring you to verify your login with another device such as a security key, authenticator app, SMS, phone call, or email. Two-step login can be set up on the bitwarden.com web vault. Do you want to visit the website now?"
   },

apps/browser/src/popup/settings/settings.component.html

@@ -153,7 +153,7 @@
         *ngIf="showChangeMasterPass"
       >
         <div class="row-main">{{ "changeMasterPassword" | i18n }}</div>
-        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-external-link bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
         type="button"

apps/browser/src/popup/settings/settings.component.ts

@@ -441,9 +441,10 @@ export class SettingsComponent implements OnInit {
 
   async changePassword() {
     const confirmed = await this.dialogService.openSimpleDialog({
-      title: { key: "changeMasterPassword" },
+      title: { key: "continueToWebApp" },
-      content: { key: "changeMasterPasswordConfirmation" },
+      content: { key: "changeMasterPasswordOnWebConfirmation" },
       type: "info",
+      acceptButtonText: { key: "continue" },
     });
     if (confirmed) {
       const env = await firstValueFrom(this.environmentService.environment$);

apps/desktop/src/locales/en/messages.json

@@ -800,8 +800,11 @@
   "changeMasterPass": {
     "message": "Change master password"
   },
-  "changeMasterPasswordConfirmation": {
+  "continueToWebApp": {
-    "message": "You can change your master password on the bitwarden.com web vault. Do you want to visit the website now?"
+    "message": "Continue to web app?"
+  },
+  "changeMasterPasswordOnWebConfirmation": {
+    "message": "You can change your master password on the Bitwarden web app."
   },
   "fingerprintPhrase": {
     "message": "Fingerprint phrase",

apps/desktop/src/main/menu/menu.account.ts

@@ -65,10 +65,10 @@ export class AccountMenu implements IMenubarMenu {
       id: "changeMasterPass",
       click: async () => {
         const result = await dialog.showMessageBox(this._window, {
-          title: this.localize("changeMasterPass"),
+          title: this.localize("continueToWebApp"),
-          message: this.localize("changeMasterPass"),
+          message: this.localize("continueToWebApp"),
-          detail: this.localize("changeMasterPasswordConfirmation"),
+          detail: this.localize("changeMasterPasswordOnWebConfirmation"),
-          buttons: [this.localize("yes"), this.localize("no")],
+          buttons: [this.localize("continue"), this.localize("cancel")],
           cancelId: 1,
           defaultId: 0,
           noLink: true,