Merge pull request #443 from Studio-Yandex-Practicum/development_442_…

…change_password

Добавил страницу с формой изменения пароля и подключил к API

src/app/providers/StoreProvider/config/StateSchema.ts

@@ -20,6 +20,7 @@ import type { IFeedbackSchema } from '@/features/Reviews/model/types/types'
 import { IEditAccountFormSchema } from '@/widgets/EditAccount/model/scheme/editAccountFormSliceScheme'
 import type { TNumberOfPageSchema } from '@/widgets/Pagination/types/types'
 import { ICreateAccountSchema } from '@/widgets/CreateAccount/model/types/types'
+import { IChangePasswordFormSchema } from '@/widgets/ChangePassword/model/scheme/changePasswordFormSliceScheme'
 
 export interface StateSchema {
   aboutUs: IAboutUsSchema
@@ -46,6 +47,7 @@ export interface StateSchema {
   pagination: TNumberOfPageSchema
   editAccount: IEditAccountFormSchema
   createAccount: ICreateAccountSchema
+  changePassword: IChangePasswordFormSchema
 }
 
 export interface ThunkExtraArg {

src/app/providers/StoreProvider/config/store.ts

@@ -25,6 +25,7 @@ import { feedbacksReducer } from '@/features/Reviews/model/slice/feedbacksSlice'
 import { editAccountFormReducer } from '@/widgets/EditAccount/model/slice/editAccountFormSlice'
 import { paginationSliceReducer } from '@/widgets/Pagination/slice/paginationSlice'
 import { createAccountReducer } from '@/widgets/CreateAccount/model/slice/loginSlice'
+import { changePasswordFormReducer } from '@/widgets/ChangePassword/model/slice/changePasswordtFormSlice'
 
 export type RootState = StateSchema
 
@@ -52,7 +53,8 @@ const rootReducer: ReducersMapObject<RootState> = {
   categoryFilters: categoryFiltersSliceReducer,
   pagination: paginationSliceReducer,
   editAccount: editAccountFormReducer,
-  createAccount: createAccountReducer
+  createAccount: createAccountReducer,
+  changePassword: changePasswordFormReducer
 }
 
 export function createReduxStore(initialState: RootState) {

src/app/router/AppRouter/ui/AppRouter.tsx

@@ -5,6 +5,7 @@ import { AccountPage } from '@/pages/AccountPage/AccountPage'
 import BlogPage from '@/pages/BlogPage/BlogPage'
 import CartPage from '@/pages/CartPage/CartPage'
 import { CategoryPage } from '@/pages/CategoryPage/CategoryPage'
+import { ChangePasswordPage } from '@/pages/ChangePasswordPage/ChangePasswordPage'
 import ComparePage from '@/pages/ComparePage/ComparePage'
 import ContactsPage from '@/pages/ContactsPage/ContactsPage'
 import CreateAccountPage from '@/pages/CreateAccountPage/CreateAccountPage'
@@ -170,6 +171,10 @@ export const AppRouter = createBrowserRouter([
       {
         path: Routes.SHOP_NEWS,
         element: <ShopNewsPage />
+      },
+      {
+        path: Routes.CHANGE_PASSWORD,
+        element: <ProtectedRoute element={ChangePasswordPage} />
       }
 
       /*       {

src/entities/SideBarEntity/model/functions/sideBarOptions.ts

@@ -6,7 +6,7 @@ const user = [
     routes: [
       { subtitle: 'Личный Кабинет', route: Routes.ACCOUNT },
       { subtitle: 'Изменить контактную информацию', route: Routes.EDIT_ACCOUNT },
-      { subtitle: 'Изменить свой пароль', route: Routes.HOME }, // '/change-password' - данного роута пока нет
+      { subtitle: 'Изменить свой пароль', route: Routes.CHANGE_PASSWORD },
       { subtitle: 'Изменить мои адреса', route: Routes.HOME }, // '/address-book' - данного роута пока нет
       { subtitle: 'Посмотреть закладки', route: Routes.FAVORITES }
     ]

src/pages/ChangePasswordPage/ChangePasswordPage.module.scss

@@ -0,0 +1,33 @@
+@use '../../shared/styles/utils/mixins' as media;
+@use '../../shared/styles/utils/variables' as color;
+
+.changePasswordPage {
+  width: 100%;
+
+  &__pageDescriptor {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__container {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    align-items: start;
+    gap: 20px;
+
+    @include media.respond-to('large') {
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+
+  &__contentContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+  }
+}

src/pages/ChangePasswordPage/ChangePasswordPage.tsx

@@ -0,0 +1,61 @@
+import { FC, Suspense, useState } from 'react'
+
+import SideBarMenuModal from '@/features/SideBarMenuModal'
+import { Routes } from '@/shared/config/routerConfig/routes'
+import { useResize } from '@/shared/libs/hooks/useResize'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
+import Heading from '@/shared/ui/Heading/Heading'
+import Modal from '@/shared/ui/Modal/Modal'
+import Spinner from '@/shared/ui/Spinner/Spinner'
+import WrapperForMainContent from '@/shared/ui/WrapperForMainContent/WrapperForMainContent'
+import { ChangePassword } from '@/widgets/ChangePassword/ChangePassword'
+import { withAdaptiveSideBar } from '@/widgets/SideBarMenu'
+
+import styles from './ChangePasswordPage.module.scss'
+
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'Личный Кабинет', href: Routes.ACCOUNT },
+  { heading: 'Изменить пароль', href: '' }
+]
+
+export const ChangePasswordPage: FC = () => {
+  const { isScreenLg } = useResize()
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
+  const [isModalClosing, setIsModalClosing] = useState<boolean>(false)
+  const AdaptiveSideBar = withAdaptiveSideBar(isScreenLg)
+
+  const handleClick = () => {
+    setIsModalOpen(true)
+  }
+
+  const changeModalState = () => {
+    setIsModalOpen(!isModalOpen)
+  }
+
+  return (
+    <WrapperForMainContent>
+      <div className={styles.changePasswordPage__pageDescriptor}>
+        <Heading>Изменить пароль</Heading>
+        <Breadcrumbs links={links} />
+      </div>
+      <div className={styles.changePasswordPage__container}>
+        <AdaptiveSideBar handleClick={handleClick} />
+        <div className={styles.changePasswordPage__contentContainer}>
+          <ChangePassword />
+        </div>
+      </div>
+      {isModalOpen && (
+        <Modal
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
+          <Suspense fallback={<Spinner />}>
+            <SideBarMenuModal handleClose={changeModalState} />
+          </Suspense>
+        </Modal>
+      )}
+    </WrapperForMainContent>
+  )
+}

src/shared/api/types.ts

@@ -19,7 +19,8 @@ export enum ApiRoutes {
   RENEW_PRODUCT_AMOUNT = 'cart/',
   USER = 'users/me',
   UPDATE_PROFILE = 'update-profile',
-  CREATE_ACCOUNT = 'users'
+  CREATE_ACCOUNT = 'users',
+  CHANGE_PASSWORD = 'users/set_password'
 }
 
 export enum ApiErrorTypes {

src/shared/config/routerConfig/routes.ts

@@ -34,5 +34,6 @@ export enum Routes {
   ERROR = '*',
   CREATE_ACCOUNT_SUCCESS = '/success',
   NEWSLETTER = '/newsletter',
-  SHOP_NEWS = '/shopnews'
+  SHOP_NEWS = '/shopnews',
+  CHANGE_PASSWORD = '/change-password'
 }

src/widgets/ChangePassword/ChangePassword.module.scss

@@ -0,0 +1,88 @@
+@use '../../shared/styles/utils/variables' as color;
+
+@mixin font($size) {
+  font-size: $size;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.changePasswordform {
+  width: 100%;
+  min-height: 400px;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 20px;
+  background-color: color.$white;
+  border-radius: 5px;
+
+  &__header {
+    font-size: 20px;
+    line-height: 1;
+    font-weight: 700;
+  }
+
+  &__form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 20px;
+  }
+
+  &__label {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__fieldlabel {
+    @include font(14px);
+  }
+
+  &__field {
+    width: 100%;
+    padding: 10px 16px;
+    border: none;
+    outline: none;
+    background-color: color.$body-bg;
+    border-radius: 5px;
+    box-shadow: none;
+    @include font(14px);
+
+    transition: box-shadow 0.5s;
+
+    &:focus {
+      box-shadow: 0 0 0 2px color.$theme-primary-color;
+    }
+
+    &_textfield {
+      min-height: 100px;
+    }
+  }
+
+  &__btnConteiner {
+    width: 50%;
+    display: flex;
+    gap: 10px;
+  }
+
+  &__submitbtn {
+    width: 100%;
+    transition: opacity 0.5s;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__msg {
+    font-size: 18px;
+    line-height: 25px;
+    font-weight: 400;
+  }
+}