Added password change confirmation (#2057)

* Added change password confirmation * Fixed tests * Deleted commented code * Fixed imports * Refactored imports
ita-social-projects · Jul 8, 2024 · d5830ab · d5830ab
1 parent 2c6844d
commit d5830ab
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/src/constants/translations/en/edit-profile.json b/src/constants/translations/en/edit-profile.json
@@ -74,6 +74,7 @@
       "title": "Password & Security",
       "description": "Change password and security settings",
       "changePassword": "Change password",
+      "changePasswordConfirm": "Are you sure you want to change the password?",
       "currentPassword": "Current password",
       "newPassword": "New password",
       "retypePassword": "Re-type new password",

diff --git a/src/constants/translations/ua/edit-profile.json b/src/constants/translations/ua/edit-profile.json
@@ -74,6 +74,7 @@
       "title": "Пароль і Безпека",
       "description": "Зміна паролю та налаштуваннь безпеки",
       "changePassword": "Змінити пароль",
+      "changePasswordConfirm": "Ви впевнені, що бажаєте змінити пароль?",
       "currentPassword": "Поточний пароль",
       "newPassword": "Новий пароль",
       "retypePassword": "Повторіть пароль",

diff --git a/src/containers/edit-profile/password-security-tab/PasswordSecurityTab.tsx b/src/containers/edit-profile/password-security-tab/PasswordSecurityTab.tsx
@@ -16,6 +16,7 @@ import useChangeUserStatus from '~/hooks/use-change-user-status'
 import useAxios from '~/hooks/use-axios'
 import { useAppDispatch } from '~/hooks/use-redux'
 import useInputVisibility from '~/hooks/use-input-visibility'
+import useConfirm from '~/hooks/use-confirm'
 
 import { AuthService } from '~/services/auth-service'
 import { openAlert } from '~/redux/features/snackbarSlice'
@@ -40,15 +41,25 @@ import {
 const PasswordSecurityTab: FC<EditProfileTabUserProps> = ({ user }) => {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
+  const { checkConfirmation } = useConfirm()
 
   const { neededAction, checkStatusChange } = useChangeUserStatus()
 
   const handleSubmitChangePassword = async () => {
-    resetErrors()
-    await sendChangedPassword({
-      password: data.password,
-      currentPassword: data.currentPassword
+    const confirmed = await checkConfirmation({
+      message: t(
+        'editProfilePage.profile.passwordSecurityTab.changePasswordConfirm'
+      ),
+      title: 'titles.confirmTitle',
+      check: true
     })
+    if (confirmed) {
+      resetErrors()
+      await sendChangedPassword({
+        password: data.password,
+        currentPassword: data.currentPassword
+      })
+    }
   }
 
   const handleResponse = () => {

diff --git a/tests/unit/containers/edit-profile/password-security-tab/PasswordSecurityTab.spec.jsx b/tests/unit/containers/edit-profile/password-security-tab/PasswordSecurityTab.spec.jsx
@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import {
   screen,
   fireEvent,
@@ -87,6 +88,9 @@ describe('PasswordSecurityTab', () => {
       fireEvent.click(saveButton)
     })
 
+    const confirmButton = screen.getByText('common.yes')
+    fireEvent.click(confirmButton)
+
     await waitFor(() => {
       expect(AuthService.changePassword).toHaveBeenCalledWith(
         userDataMock._id,