Edit container for Change Password and create popup

src/constants/translations/en/edit-profile.json

@@ -72,13 +72,15 @@
     "passwordSecurityTab": {
       "tabTitle": "Password & Security",
       "title": "Password & Security",
+      "subTitle": "You can change your password using the current one.",
       "description": "Change password and security settings",
       "changePassword": "Change password",
+      "changePasswordModalDescription": "Reset your current password to new one.",
       "changePasswordConfirm": "Are you sure you want to change the password?",
       "currentPassword": "Current password",
       "newPassword": "New password",
       "retypePassword": "Re-type new password",
-      "savePassword": "Save new password",
+      "savePassword": "Save the password",
       "deactivateAccount": "Deactivate account",
       "deactivateBtn": "Deactivate",
       "deactivateTitle": "Deactivate your account?",

src/constants/translations/uk/edit-profile.json

@@ -72,8 +72,10 @@
     "passwordSecurityTab": {
       "tabTitle": "Пароль і Безпека",
       "title": "Пароль і Безпека",
+      "subTitle": "Ви можете змінити свій пароль, використовуючи поточний.",
       "description": "Зміна паролю та налаштуваннь безпеки",
       "changePassword": "Змінити пароль",
+      "changePasswordModalDescription": "Змінити поточний пароль на новий.",
       "changePasswordConfirm": "Ви впевнені, що бажаєте змінити пароль?",
       "currentPassword": "Поточний пароль",
       "newPassword": "Новий пароль",

src/containers/edit-profile/password-security-tab/PasswordSecurityTab.styles.ts

@@ -4,14 +4,12 @@ import { rootContainer } from '~/containers/edit-profile/common.styles'
 export const styles = {
   container: rootContainer,
   titleAndDescription: {
-    title: {
-      typography: TypographyVariantEnum.H6
-    },
-    description: {
-      typography: TypographyVariantEnum.Body2,
-      color: 'primary.500',
-      mb: '30px'
-    }
+    typography: TypographyVariantEnum.H5
+  },
+  description: {
+    typography: TypographyVariantEnum.Subtitle1,
+    color: 'primary.500',
+    mb: '30px'
   },
   subtitle: {
     typography: TypographyVariantEnum.Body1,
@@ -20,13 +18,9 @@ export const styles = {
   form: { display: 'flex', flexDirection: 'column', gap: '8px' },
 
   passwordButtonsContainer: {
-    m: '10px 0 20px',
-    display: 'grid',
-    gridTemplateColumns: {
-      sm: 'repeat(5, minmax(0, 1fr))',
-      md: 'repeat(7, minmax(0, 1fr))',
-      lg: 'repeat(10, minmax(0, 1fr))'
-    },
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
     gap: '10px'
   },
 
@@ -39,5 +33,12 @@ export const styles = {
   deactivateButton: {
     mt: '20px',
     backgroundColor: 'error.700'
+  },
+  modalContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '700px',
+    position: 'relative'
   }
 }

src/containers/edit-profile/password-security-tab/PasswordSecurityTab.tsx

@@ -1,227 +1,54 @@
-import { useCallback, FC } from 'react'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-
 import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import Divider from '@mui/material/Divider'
-
-import Loader from '~/components/loader/Loader'
-import AppButton from '~/components/app-button/AppButton'
-import AppTextField from '~/components/app-text-field/AppTextField'
-import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
-import { snackbarVariants } from '~/constants'
 
-import useForm from '~/hooks/use-form'
+import { useModalContext } from '~/context/modal-context'
 import useChangeUserStatus from '~/hooks/use-change-user-status'
-import useAxios from '~/hooks/use-axios'
-import { useAppDispatch, useAppSelector } 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'
+import PasswordSecurityItem from '~/containers/edit-profile/password-security-tab/password-security-item/PasswordSecurityItem'
+import ChangePasswordModal from '~/containers/edit-profile/password-security-tab/change-password-modal/ChangePasswordModal'
+import AppButton from '~/components/app-button/AppButton'
 
 import { styles } from '~/containers/edit-profile/password-security-tab/PasswordSecurityTab.styles'
-
-import {
-  ButtonVariantEnum,
-  ComponentEnum,
-  ButtonTypeEnum,
-  InputEnum,
-  SizeEnum,
-  FormValues,
-  ErrorResponse
-} from '~/types'
-import {
-  initialValues,
-  validations
-} from '~/containers/edit-profile/password-security-tab/PasswordSecurityTab.constants'
+import { ButtonVariantEnum, SizeEnum } from '~/types'
 
 const PasswordSecurityTab: FC = () => {
   const { t } = useTranslation()
-  const dispatch = useAppDispatch()
-  const { userId } = useAppSelector((state) => state.appMain)
-  const { checkConfirmation } = useConfirm()
-
+  const { openModal } = useModalContext()
   const { neededAction, checkStatusChange } = useChangeUserStatus()
 
-  const handleSubmitChangePassword = async () => {
-    const confirmed = await checkConfirmation({
-      message: t(
-        'editProfilePage.profile.passwordSecurityTab.changePasswordConfirm'
-      ),
-      title: 'titles.confirmTitle',
-      check: true
+  const openChangePasswordModal = () => {
+    openModal({
+      component: <ChangePasswordModal />
     })
-    if (confirmed) {
-      resetErrors()
-      await sendChangedPassword({
-        password: data.password,
-        currentPassword: data.currentPassword
-      })
-    }
-  }
-
-  const handleResponse = () => {
-    dispatch(
-      openAlert({
-        severity: snackbarVariants.success,
-        message: 'editProfilePage.profile.successMessage'
-      })
-    )
-  }
-
-  const changePassword = useCallback(
-    (data: { password: string; currentPassword: string }) => {
-      return AuthService.changePassword(userId, data)
-    },
-    [userId]
-  )
-
-  const handleResponseError = (error?: ErrorResponse) => {
-    if (error?.code === 'INCORRECT_CREDENTIALS') {
-      handleErrors('password', t('common.errorMessages.samePasswords'))
-    } else {
-      handleErrors('currentPassword', t('common.errorMessages.currentPassword'))
-    }
   }
-
-  const { loading, fetchData: sendChangedPassword } = useAxios({
-    service: changePassword,
-    onResponse: handleResponse,
-    onResponseError: handleResponseError,
-    fetchOnMount: false
-  })
-
-  const {
-    data,
-    handleSubmit,
-    handleInputChange,
-    errors,
-    handleBlur,
-    resetData,
-    resetErrors,
-    handleErrors
-  } = useForm<FormValues>({
-    onSubmit: handleSubmitChangePassword,
-    initialValues: initialValues,
-    validations: validations
-  })
-
   const handleChangeStatusClick = () => {
     void checkStatusChange(
       `editProfilePage.profile.passwordSecurityTab.${neededAction}Title`,
       `editProfilePage.profile.passwordSecurityTab.${neededAction}Description`,
       true
     )
   }
-
-  const {
-    inputVisibility: currentPasswordVisibility,
-    showInputText: showCurrentPassword
-  } = useInputVisibility(errors.currentPassword)
-
-  const { inputVisibility: passwordVisibility, showInputText: showPassword } =
-    useInputVisibility(errors.password)
-
-  const {
-    inputVisibility: newPasswordVisibility,
-    showInputText: showNewPassword
-  } = useInputVisibility(errors.confirmPassword)
-
-  const onDiscard = () => {
-    resetData()
-    resetErrors()
-  }
-
-  const saveButtonContent = loading ? (
-    <Loader size={20} />
-  ) : (
-    t('editProfilePage.profile.passwordSecurityTab.savePassword')
-  )
-
-  const inputType = (isVisible: boolean) =>
-    isVisible ? InputEnum.Text : InputEnum.Password
-
   return (
-    <Box sx={styles.container}>
-      <TitleWithDescription
-        description={t(
-          'editProfilePage.profile.passwordSecurityTab.description'
+    <Box>
+      <PasswordSecurityItem
+        buttonText={t(
+          'editProfilePage.profile.passwordSecurityTab.changePassword'
         )}
-        style={styles.titleAndDescription}
+        description={t('editProfilePage.profile.passwordSecurityTab.subTitle')}
+        onClick={openChangePasswordModal}
+        sx={styles.deactivateButton}
         title={t('editProfilePage.profile.passwordSecurityTab.title')}
       />
-      <Box component={ComponentEnum.Form} onSubmit={handleSubmit}>
-        <Typography sx={styles.subtitle}>
-          {t('editProfilePage.profile.passwordSecurityTab.changePassword')}
-        </Typography>
-        <Box sx={styles.form}>
-          <AppTextField
-            InputProps={currentPasswordVisibility}
-            errorMsg={t(errors.currentPassword)}
-            fullWidth
-            label={t(
-              'editProfilePage.profile.passwordSecurityTab.currentPassword'
-            )}
-            onBlur={handleBlur('currentPassword')}
-            onChange={handleInputChange('currentPassword')}
-            type={inputType(showCurrentPassword)}
-            value={data.currentPassword}
-          />
-          <AppTextField
-            InputProps={passwordVisibility}
-            errorMsg={t(errors.password)}
-            fullWidth
-            label={t('editProfilePage.profile.passwordSecurityTab.newPassword')}
-            onBlur={handleBlur('password')}
-            onChange={handleInputChange('password')}
-            type={inputType(showPassword)}
-            value={data.password}
-          />
-          <AppTextField
-            InputProps={newPasswordVisibility}
-            errorMsg={t(errors.confirmPassword)}
-            fullWidth
-            label={t(
-              'editProfilePage.profile.passwordSecurityTab.retypePassword'
-            )}
-            onBlur={handleBlur('confirmPassword')}
-            onChange={handleInputChange('confirmPassword')}
-            type={inputType(showNewPassword)}
-            value={data.confirmPassword}
-          />
-        </Box>
-        <Box sx={styles.passwordButtonsContainer}>
-          <AppButton
-            size={SizeEnum.Large}
-            sx={styles.saveButton}
-            type={ButtonTypeEnum.Submit}
-            variant={ButtonVariantEnum.Contained}
-          >
-            {saveButtonContent}
-          </AppButton>
-          <AppButton
-            onClick={onDiscard}
-            size={SizeEnum.Large}
-            sx={styles.discardButton}
-            variant={ButtonVariantEnum.Tonal}
-          >
-            {t('common.discard')}
-          </AppButton>
-        </Box>
-        <Divider />
-        <AppButton
-          onClick={handleChangeStatusClick}
-          size={SizeEnum.Large}
-          sx={styles.deactivateButton}
-          variant={ButtonVariantEnum.Danger}
-        >
-          {t(
-            `editProfilePage.profile.passwordSecurityTab.${neededAction}Account`
-          )}
-        </AppButton>
-      </Box>
+      <AppButton
+        onClick={handleChangeStatusClick}
+        size={SizeEnum.Large}
+        sx={styles.deactivateButton}
+        variant={ButtonVariantEnum.Danger}
+      >
+        {t(
+          `editProfilePage.profile.passwordSecurityTab.${neededAction}Account`
+        )}
+      </AppButton>
     </Box>
   )
 }