setSettings

This commit is contained in:
Mikola 2023-11-27 14:39:40 +03:00
parent c613dfa879
commit 2f30a8e298
2 changed files with 88 additions and 68 deletions

View File

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

View File

@ -1,68 +1,70 @@
import React, {useState} 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";
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: ''
})
name: "",
oldPassword: "",
password: "",
});
const [inputsError, setInputsError] = useState({
name: false,
password: false,
});
const [loader, setLoader] = useState(false)
const [loader, setLoader] = useState(false);
const setSettings = () => {
if (inputsValue.name.length < 2) {
setInputsError((prevValue) => ({ ...prevValue, name: true }));
return
return;
}
if (inputsValue.password.length < 6 || inputsValue.oldPassword.length < 6) {
setInputsError(() => ({ name: false, password: true }));
return
return;
}
setLoader(true)
setLoader(true);
apiRequest("/user/change-personal-data", {
method: "PUT",
data: {
newUsername : inputsValue.name,
newUsername: inputsValue.name,
},
}).then((data) => {
apiRequest("/user/change-password", {
method: "PUT",
data: {
password : inputsValue.oldPassword,
newPassword: inputsValue.password
password: inputsValue.oldPassword,
newPassword: inputsValue.password,
},
}).then((data) => {
setLoader(false)
if (data.status === 'success') {
setLoader(false);
if (data.status === "success") {
setInputsError({
name: false,
password: false,
})
});
setInputsValue({
name: '',
oldPassword: '',
password: ''
})
name: "",
oldPassword: "",
password: "",
});
showNotification({
show: true,
text: "Данные изменены",
@ -75,9 +77,9 @@ export const PartnerSettings = () => {
type: "error",
});
}
})
})
}
});
});
};
return (
<div className="settings">
<ProfileHeader />
@ -98,69 +100,83 @@ export const PartnerSettings = () => {
<p className="settings__lable-first">Изменение логина</p>
<div className="settings__input">
<input
className={inputsError.name ? 'warning' : ''}
placeholder='Имя'
onChange={(e) => {
className={inputsError.name ? "warning" : ""}
placeholder="Имя"
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
name: e.target.value,
}));
setInputsError((prevValue) => ({ ...prevValue, name: false }));
}}
value={inputsValue.name}
setInputsError((prevValue) => ({
...prevValue,
name: false,
}));
}}
value={inputsValue.name}
/>
{inputsError.name &&
<span className='error'>Минимум 2 символов</span>
}
{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}
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>
}
{inputsError.password && (
<span className="error">Введите верный пароль</span>
)}
</div>
<div className="settings__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}
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>
}
{inputsError.password && (
<span className="error">Минимум 6 символов</span>
)}
</div>
<div className="settings__buttons">
<BaseButton styles={"settings__buttons-cancel"}>
Отмена
</BaseButton>
{loader ? <Loader style={"green"} width={'40px'} height={'40px'} /> :
<BaseButton onClick={setSettings} styles={"settings__buttons-save"}>
Сохранить
</BaseButton>
}
{loader ? (
<Loader style={"green"} width={"40px"} height={"40px"} />
) : (
<BaseButton
onClick={setSettings}
styles={"settings__buttons-save"}
>
Сохранить
</BaseButton>
)}
</div>
<span className="settings__agreement">
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и