feat: wallet settings with social login and change password

app/scripts/metamask-controller.js

@@ -259,6 +259,7 @@ import { BRIDGE_API_BASE_URL } from '../../shared/constants/bridge';
 import { MultichainWalletSnapClient } from '../../shared/lib/accounts';
 import { SOLANA_WALLET_SNAP_ID } from '../../shared/lib/accounts/solana-wallet-snap';
 ///: END:ONLY_INCLUDE_IF
+import { FirstTimeFlowType } from '../../shared/constants/onboarding';
 import {
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   handleMMITransactionUpdate,
@@ -3717,6 +3718,7 @@ export default class MetamaskController extends EventEmitter {
       createSeedPhraseBackup: this.createSeedPhraseBackup.bind(this),
       fetchAllSeedPhrases: this.fetchAllSeedPhrases.bind(this),
       updateBackupMetadataState: this.updateBackupMetadataState.bind(this),
+      changePassword: this.changePassword.bind(this),
 
       // hardware wallets
       connectHardware: this.connectHardware.bind(this),
@@ -4970,6 +4972,33 @@ export default class MetamaskController extends EventEmitter {
     );
   }
 
+  /**
+   * Changes the password of the current wallet.
+   *
+   * If the wallet is created with social login, the password is changed for the seedless onboarding flow and sync across the devices too.
+   *
+   * @param {string} newPassword - The new password.
+   * @param {string} oldPassword - The old password.
+   * @returns {Promise<void>}
+   */
+  async changePassword(newPassword, oldPassword) {
+    const { firstTimeFlowType } = this.onboardingController.state;
+
+    if (
+      firstTimeFlowType === FirstTimeFlowType.socialCreate ||
+      firstTimeFlowType === FirstTimeFlowType.socialImport
+    ) {
+      // change password for the social login flow
+      await this.seedlessOnboardingController.changePassword(
+        newPassword,
+        oldPassword,
+      );
+    }
+
+    // also update the vault password for keyring controller
+    await this.keyringController.changePassword(newPassword);
+  }
+
   //=============================================================================
   // VAULT / KEYRING RELATED METHODS
   //=============================================================================

app/scripts/metamask-controller.test.js

@@ -59,6 +59,7 @@ import {
   EndowmentTypes,
   RestrictedEthMethods,
 } from '../../shared/constants/permissions';
+import { FirstTimeFlowType } from '../../shared/constants/onboarding';
 import { deferredPromise } from './lib/util';
 import { METAMASK_COOKIE_HANDLER } from './constants/stream';
 import MetaMaskController from './metamask-controller';
@@ -799,6 +800,52 @@ describe('MetaMaskController', () => {
       });
     });
 
+    describe('#changePassword', () => {
+      it('should change the password for both seedless onboarding and keyring controller', async () => {
+        const oldPassword = 'old-password';
+        const newPassword = 'new-password';
+
+        metamaskController.onboardingController.setFirstTimeFlowType(
+          FirstTimeFlowType.socialCreate,
+        );
+
+        await metamaskController.createNewVaultAndKeychain(oldPassword);
+
+        const changePwdSeedlessOnboardingSpy = jest
+          .spyOn(
+            metamaskController.seedlessOnboardingController,
+            'changePassword',
+          )
+          .mockResolvedValueOnce();
+        const changePwdKeyringControllerSpy = jest
+          .spyOn(metamaskController.keyringController, 'changePassword')
+          .mockResolvedValueOnce();
+
+        await metamaskController.changePassword(newPassword, oldPassword);
+
+        expect(changePwdSeedlessOnboardingSpy).toHaveBeenCalledWith(
+          newPassword,
+          oldPassword,
+        );
+        expect(changePwdKeyringControllerSpy).toHaveBeenCalledWith(newPassword);
+      });
+
+      it('should change the password for Keyring Vault for the SRP flow', async () => {
+        const oldPassword = 'old-password';
+        const newPassword = 'new-password';
+
+        await metamaskController.createNewVaultAndKeychain(oldPassword);
+
+        const changePwdKeyringControllerSpy = jest
+          .spyOn(metamaskController.keyringController, 'changePassword')
+          .mockResolvedValueOnce();
+
+        await metamaskController.changePassword(newPassword, oldPassword);
+
+        expect(changePwdKeyringControllerSpy).toHaveBeenCalledWith(newPassword);
+      });
+    });
+
     describe('#createNewVaultAndRestore', () => {
       it('should be able to call newVaultAndRestore despite a mistake.', async () => {
         const password = 'what-what-what';

test/env.js

@@ -16,3 +16,4 @@ process.env.PUSH_NOTIFICATIONS_SERVICE_URL =
 process.env.PORTFOLIO_URL = 'https://portfolio.test';
 process.env.METAMASK_VERSION = 'MOCK_VERSION';
 process.env.TZ = 'UTC';
+process.env.WEB3AUTH_NETWORK = 'sapphire_devnet';

ui/helpers/constants/routes.ts

@@ -71,6 +71,10 @@ export const REVEAL_SRP_LIST_ROUTE =
 PATH_NAME_MAP[REVEAL_SRP_LIST_ROUTE] =
   'Reveal Secret Recovery Phrase List Page';
 
+export const SECURITY_PASSWORD_CHANGE_ROUTE =
+  '/settings/security-and-privacy/password-change';
+PATH_NAME_MAP[SECURITY_PASSWORD_CHANGE_ROUTE] = 'Change Password';
+
 export const BACKUPANDSYNC_ROUTE =
   '/settings/security-and-privacy/backup-and-sync';
 PATH_NAME_MAP[BACKUPANDSYNC_ROUTE] = 'Backup And Sync Settings Page';

ui/pages/settings/index.scss

@@ -5,6 +5,7 @@
 @import 'networks-tab/index';
 @import 'settings-tab/index';
 @import 'contact-list-tab/index';
+@import 'security-tab/index';
 
 .settings-page {
   position: relative;

ui/pages/settings/security-tab/change-password/change-password.stories.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ChangePassword from './change-password';
+
+export default {
+  title: 'Pages/SettingsPage/ChangePassword',
+};
+
+export const DefaultStory = () => <ChangePassword />;
+
+DefaultStory.storyName = 'Default';