added password protection page for change password flow (#1007)

src/apps/popup/pages/change-password/index.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { useWatch } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { ChangePasswordPageContent } from '@popup/pages/change-password/content';
+import { PasswordProtectionPage } from '@popup/pages/password-protection-page';
 import { RouterPath, useTypedNavigate } from '@popup/router';
 
 import { changePassword } from '@background/redux/sagas/actions';
@@ -22,6 +23,9 @@ import {
 import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
 
 export const ChangePasswordPage = () => {
+  const [isPasswordConfirmed, setIsPasswordConfirmed] =
+    useState<boolean>(false);
+
   const { t } = useTranslation();
   const navigate = useTypedNavigate();
 
@@ -37,6 +41,10 @@ export const ChangePasswordPage = () => {
     name: 'password'
   });
 
+  const setPasswordConfirmed = useCallback(() => {
+    setIsPasswordConfirmed(true);
+  }, []);
+
   const isSubmitButtonDisabled = calculateSubmitButtonDisabled({
     isDirty
   });
@@ -46,6 +54,12 @@ export const ChangePasswordPage = () => {
     navigate(RouterPath.Home);
   };
 
+  if (!isPasswordConfirmed) {
+    return (
+      <PasswordProtectionPage setPasswordConfirmed={setPasswordConfirmed} />
+    );
+  }
+
   return (
     <PopupLayout
       variant="form"