setSettings

src/components/Common/BaseButton/BaseButton.jsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import "./basebutton.scss";
 
-export const BaseButton = ({ children, styles, ...props }) => {
+export const BaseButton = ({ children, styles, onClick, ...props }) => {
   return (
-    <button className={styles ? `${styles} button` : "button"} {...props}>
+    <button onClick={onClick} className={styles ? `${styles} button` : "button"} {...props}>
       {children}
     </button>
   );

src/pages/PartnerSettings/PartnerSettings.jsx

@@ -1,17 +1,83 @@
-import React from "react";
+import React, {useState} from "react";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
+import { useNotification } from "@hooks/useNotification";
+import { Loader } from "@components/Common/Loader/Loader";
 
 import astral from "assets/images/logo/astralLogo.png";
 import kontur from "assets/images/logo/konturLogo.png";
 
 import "./partnerSettings.scss";
+import {apiRequest} from "@api/request";
 
 export const PartnerSettings = () => {
+  const { showNotification } = useNotification();
+  const [inputsValue, setInputsValue] = useState({
+    name: '',
+    oldPassword: '',
+    password: ''
+  })
+
+  const [inputsError, setInputsError] = useState({
+    name: false,
+    password: false,
+  });
+
+  const [loader, setLoader] = useState(false)
+
+  const setSettings = () => {
+    if (inputsValue.name.length < 2) {
+      setInputsError((prevValue) => ({ ...prevValue, name: true }));
+      return
+    }
+    if (inputsValue.password.length < 6 || inputsValue.oldPassword.length < 6) {
+      setInputsError(() => ({ name: false, password: true }));
+      return
+    }
+    setLoader(true)
+    apiRequest("/user/change-personal-data", {
+      method: "PUT",
+      data: {
+        newUsername : inputsValue.name,
+      },
+    }).then((data) => {
+      apiRequest("/user/change-password", {
+        method: "PUT",
+        data: {
+          password  : inputsValue.oldPassword,
+          newPassword: inputsValue.password
+        },
+      }).then((data) => {
+        setLoader(false)
+        if (data.status === 'success') {
+          setInputsError({
+            name: false,
+            password: false,
+          })
+          setInputsValue({
+            name: '',
+            oldPassword: '',
+            password: ''
+          })
+          showNotification({
+            show: true,
+            text: "Данные изменены",
+            type: "success",
+          });
+        } else {
+          showNotification({
+            show: true,
+            text: "Неверные данные",
+            type: "error",
+          });
+        }
+      })
+    })
+  }
   return (
     <div className="settings">
       <ProfileHeader />
@@ -31,21 +97,70 @@ export const PartnerSettings = () => {
 
               <p className="settings__lable-first">Изменение логина</p>
               <div className="settings__input">
-                <input></input>
+                <input
+                    className={inputsError.name ? 'warning' : ''}
+                    placeholder='Имя'
+                    onChange={(e) => {
+                    setInputsValue((prevValue) => ({
+                      ...prevValue,
+                      name: e.target.value,
+                    }));
+                    setInputsError((prevValue) => ({ ...prevValue, name: false }));
+                }}
+                    value={inputsValue.name}
+                />
+                {inputsError.name &&
+                    <span className='error'>Минимум 2 символов</span>
+                }
               </div>
 
               <p className="settings__lable-second">Изменение пароля</p>
+              <div className="settings__input oldPassword">
+                <input
+                    className={inputsError.password ? 'warning' : ''}
+                    placeholder='Старый пароль'
+                    type={"password"}
+                    onChange={(e) => {
+                      setInputsValue((prevValue) => ({
+                        ...prevValue,
+                        oldPassword: e.target.value,
+                      }));
+                      setInputsError((prevValue) => ({ ...prevValue, password: false }));
+                    }}
+                    value={inputsValue.oldPassword}
+                />
+                {inputsError.password &&
+                  <span className='error'>Введите верный пароль</span>
+                }
+              </div>
               <div className="settings__input">
-                <input></input>
+                <input
+                    className={inputsError.password ? 'warning' : ''}
+                    placeholder='Новый пароль'
+                    type={"password"}
+                    onChange={(e) => {
+                      setInputsValue((prevValue) => ({
+                        ...prevValue,
+                        password: e.target.value,
+                      }));
+                      setInputsError((prevValue) => ({ ...prevValue, password: false }));
+                    }}
+                    value={inputsValue.password}
+                />
+                {inputsError.password &&
+                    <span className='error'>Минимум 6 символов</span>
+                }
               </div>
 
               <div className="settings__buttons">
                 <BaseButton styles={"settings__buttons-cancel"}>
                   Отмена
                 </BaseButton>
-                <BaseButton styles={"settings__buttons-save"}>
+                {loader ? <Loader style={"green"} width={'40px'} height={'40px'} /> :
+                    <BaseButton onClick={setSettings} styles={"settings__buttons-save"}>
                       Сохранить
                     </BaseButton>
+                }
               </div>
               <span className="settings__agreement">
                 Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и

src/pages/PartnerSettings/partnerSettings.scss

@@ -34,26 +34,37 @@
       margin: 39px 0 10px 0;
     }
     &-second {
-      margin: 31px 0 10px 0;
+      margin: 15px 0 10px 0;
     }
   }
 
   &__input {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    input {
+      padding: 5px 10px;
       background: #eff2f7;
       border-radius: 8px;
       width: 373px;
       height: 35px;
       border: none;
-
-    input {
       font-size: 15px;
-      background: #eff2f7;
-      height: 100%;
-      margin-left: 15px;
-      width: 85%;
-      border: none;
       outline: none;
     }
+
+    .error {
+      color: red;
+      font-size: 12px;
+    }
+
+    .warning {
+      border: 1px solid red;
+    }
+  }
+
+  .oldPassword {
+    margin-bottom: 25px;
   }
 
   &__agreement {
@@ -72,7 +83,7 @@
 
     &-cancel,
     &-save {
-      width: 151px;
+      min-width: 151px;
       height: 40px;
       font-size: 14px;
       line-height: 32px;
@@ -143,7 +154,6 @@
   &__report,
   &__login {
     width: 500px;
-    height: 435px;
     background: #ffffff;
     border-radius: 12px;
     padding: 30px 60px;