Merge pull request #156 from apuc/settings

Settings

src/components/Common/BaseButton/BaseButton.jsx

@@ -2,9 +2,13 @@ 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,7 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
+
+import { apiRequest } from "@api/request";
+
+import { useNotification } from "@hooks/useNotification";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
+import { Loader } from "@components/Common/Loader/Loader";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@@ -12,6 +17,69 @@ import kontur from "assets/images/logo/konturLogo.png";
 import "./partnerSettings.scss";
 
 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 +99,84 @@ 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>
+                ) : (
+                  <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 {
-    background: #eff2f7;
+    display: flex;
-    border-radius: 8px;
+    flex-direction: column;
-    width: 373px;
+    row-gap: 5px;
-    height: 35px;
-    border: none;
-
     input {
-      font-size: 15px;
+      padding: 5px 10px;
       background: #eff2f7;
-      height: 100%;
+      border-radius: 8px;
-      margin-left: 15px;
+      width: 373px;
-      width: 85%;
+      height: 35px;
       border: none;
+      font-size: 15px;
       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;