diff --git a/src/components/Common/BaseButton/BaseButton.jsx b/src/components/Common/BaseButton/BaseButton.jsx index d659b3e8..4790c1e4 100644 --- a/src/components/Common/BaseButton/BaseButton.jsx +++ b/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 ( - ); diff --git a/src/pages/PartnerSettings/PartnerSettings.jsx b/src/pages/PartnerSettings/PartnerSettings.jsx index 5e864b9e..dd101fcc 100644 --- a/src/pages/PartnerSettings/PartnerSettings.jsx +++ b/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 (
@@ -31,21 +99,84 @@ export const PartnerSettings = () => {

Изменение логина

- + { + setInputsValue((prevValue) => ({ + ...prevValue, + name: e.target.value, + })); + setInputsError((prevValue) => ({ + ...prevValue, + name: false, + })); + }} + value={inputsValue.name} + /> + {inputsError.name && ( + Минимум 2 символов + )}

Изменение пароля

+
+ { + setInputsValue((prevValue) => ({ + ...prevValue, + oldPassword: e.target.value, + })); + setInputsError((prevValue) => ({ + ...prevValue, + password: false, + })); + }} + value={inputsValue.oldPassword} + /> + {inputsError.password && ( + Введите верный пароль + )} +
- + { + setInputsValue((prevValue) => ({ + ...prevValue, + password: e.target.value, + })); + setInputsError((prevValue) => ({ + ...prevValue, + password: false, + })); + }} + value={inputsValue.password} + /> + {inputsError.password && ( + Минимум 6 символов + )}
Отмена - - Сохранить - + {loader ? ( + + ) : ( + + Сохранить + + )}
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и diff --git a/src/pages/PartnerSettings/partnerSettings.scss b/src/pages/PartnerSettings/partnerSettings.scss index 34dd3523..b2ece0eb 100644 --- a/src/pages/PartnerSettings/partnerSettings.scss +++ b/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; - border-radius: 8px; - width: 373px; - height: 35px; - border: none; - + display: flex; + flex-direction: column; + row-gap: 5px; input { - font-size: 15px; + padding: 5px 10px; background: #eff2f7; - height: 100%; - margin-left: 15px; - width: 85%; + border-radius: 8px; + width: 373px; + 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;