setSettings
This commit is contained in:
parent
c613dfa879
commit
2f30a8e298
@ -4,7 +4,11 @@ import "./basebutton.scss";
|
|||||||
|
|
||||||
export const BaseButton = ({ children, styles, onClick, ...props }) => {
|
export const BaseButton = ({ children, styles, onClick, ...props }) => {
|
||||||
return (
|
return (
|
||||||
<button onClick={onClick} className={styles ? `${styles} button` : "button"} {...props}>
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
className={styles ? `${styles} button` : "button"}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
@ -1,44 +1,46 @@
|
|||||||
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 BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||||
import { Footer } from "@components/Common/Footer/Footer";
|
import { Footer } from "@components/Common/Footer/Footer";
|
||||||
|
import { Loader } from "@components/Common/Loader/Loader";
|
||||||
import { Navigation } from "@components/Navigation/Navigation";
|
import { Navigation } from "@components/Navigation/Navigation";
|
||||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
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 astral from "assets/images/logo/astralLogo.png";
|
||||||
import kontur from "assets/images/logo/konturLogo.png";
|
import kontur from "assets/images/logo/konturLogo.png";
|
||||||
|
|
||||||
import "./partnerSettings.scss";
|
import "./partnerSettings.scss";
|
||||||
import {apiRequest} from "@api/request";
|
|
||||||
|
|
||||||
export const PartnerSettings = () => {
|
export const PartnerSettings = () => {
|
||||||
const { showNotification } = useNotification();
|
const { showNotification } = useNotification();
|
||||||
const [inputsValue, setInputsValue] = useState({
|
const [inputsValue, setInputsValue] = useState({
|
||||||
name: '',
|
name: "",
|
||||||
oldPassword: '',
|
oldPassword: "",
|
||||||
password: ''
|
password: "",
|
||||||
})
|
});
|
||||||
|
|
||||||
const [inputsError, setInputsError] = useState({
|
const [inputsError, setInputsError] = useState({
|
||||||
name: false,
|
name: false,
|
||||||
password: false,
|
password: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const [loader, setLoader] = useState(false)
|
const [loader, setLoader] = useState(false);
|
||||||
|
|
||||||
const setSettings = () => {
|
const setSettings = () => {
|
||||||
if (inputsValue.name.length < 2) {
|
if (inputsValue.name.length < 2) {
|
||||||
setInputsError((prevValue) => ({ ...prevValue, name: true }));
|
setInputsError((prevValue) => ({ ...prevValue, name: true }));
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
if (inputsValue.password.length < 6 || inputsValue.oldPassword.length < 6) {
|
if (inputsValue.password.length < 6 || inputsValue.oldPassword.length < 6) {
|
||||||
setInputsError(() => ({ name: false, password: true }));
|
setInputsError(() => ({ name: false, password: true }));
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
setLoader(true)
|
setLoader(true);
|
||||||
apiRequest("/user/change-personal-data", {
|
apiRequest("/user/change-personal-data", {
|
||||||
method: "PUT",
|
method: "PUT",
|
||||||
data: {
|
data: {
|
||||||
@ -49,20 +51,20 @@ export const PartnerSettings = () => {
|
|||||||
method: "PUT",
|
method: "PUT",
|
||||||
data: {
|
data: {
|
||||||
password: inputsValue.oldPassword,
|
password: inputsValue.oldPassword,
|
||||||
newPassword: inputsValue.password
|
newPassword: inputsValue.password,
|
||||||
},
|
},
|
||||||
}).then((data) => {
|
}).then((data) => {
|
||||||
setLoader(false)
|
setLoader(false);
|
||||||
if (data.status === 'success') {
|
if (data.status === "success") {
|
||||||
setInputsError({
|
setInputsError({
|
||||||
name: false,
|
name: false,
|
||||||
password: false,
|
password: false,
|
||||||
})
|
});
|
||||||
setInputsValue({
|
setInputsValue({
|
||||||
name: '',
|
name: "",
|
||||||
oldPassword: '',
|
oldPassword: "",
|
||||||
password: ''
|
password: "",
|
||||||
})
|
});
|
||||||
showNotification({
|
showNotification({
|
||||||
show: true,
|
show: true,
|
||||||
text: "Данные изменены",
|
text: "Данные изменены",
|
||||||
@ -75,9 +77,9 @@ export const PartnerSettings = () => {
|
|||||||
type: "error",
|
type: "error",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
return (
|
return (
|
||||||
<div className="settings">
|
<div className="settings">
|
||||||
<ProfileHeader />
|
<ProfileHeader />
|
||||||
@ -98,69 +100,83 @@ export const PartnerSettings = () => {
|
|||||||
<p className="settings__lable-first">Изменение логина</p>
|
<p className="settings__lable-first">Изменение логина</p>
|
||||||
<div className="settings__input">
|
<div className="settings__input">
|
||||||
<input
|
<input
|
||||||
className={inputsError.name ? 'warning' : ''}
|
className={inputsError.name ? "warning" : ""}
|
||||||
placeholder='Имя'
|
placeholder="Имя"
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setInputsValue((prevValue) => ({
|
setInputsValue((prevValue) => ({
|
||||||
...prevValue,
|
...prevValue,
|
||||||
name: e.target.value,
|
name: e.target.value,
|
||||||
}));
|
}));
|
||||||
setInputsError((prevValue) => ({ ...prevValue, name: false }));
|
setInputsError((prevValue) => ({
|
||||||
|
...prevValue,
|
||||||
|
name: false,
|
||||||
|
}));
|
||||||
}}
|
}}
|
||||||
value={inputsValue.name}
|
value={inputsValue.name}
|
||||||
/>
|
/>
|
||||||
{inputsError.name &&
|
{inputsError.name && (
|
||||||
<span className='error'>Минимум 2 символов</span>
|
<span className="error">Минимум 2 символов</span>
|
||||||
}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="settings__lable-second">Изменение пароля</p>
|
<p className="settings__lable-second">Изменение пароля</p>
|
||||||
<div className="settings__input oldPassword">
|
<div className="settings__input oldPassword">
|
||||||
<input
|
<input
|
||||||
className={inputsError.password ? 'warning' : ''}
|
className={inputsError.password ? "warning" : ""}
|
||||||
placeholder='Старый пароль'
|
placeholder="Старый пароль"
|
||||||
type={"password"}
|
type={"password"}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setInputsValue((prevValue) => ({
|
setInputsValue((prevValue) => ({
|
||||||
...prevValue,
|
...prevValue,
|
||||||
oldPassword: e.target.value,
|
oldPassword: e.target.value,
|
||||||
}));
|
}));
|
||||||
setInputsError((prevValue) => ({ ...prevValue, password: false }));
|
setInputsError((prevValue) => ({
|
||||||
|
...prevValue,
|
||||||
|
password: false,
|
||||||
|
}));
|
||||||
}}
|
}}
|
||||||
value={inputsValue.oldPassword}
|
value={inputsValue.oldPassword}
|
||||||
/>
|
/>
|
||||||
{inputsError.password &&
|
{inputsError.password && (
|
||||||
<span className='error'>Введите верный пароль</span>
|
<span className="error">Введите верный пароль</span>
|
||||||
}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="settings__input">
|
<div className="settings__input">
|
||||||
<input
|
<input
|
||||||
className={inputsError.password ? 'warning' : ''}
|
className={inputsError.password ? "warning" : ""}
|
||||||
placeholder='Новый пароль'
|
placeholder="Новый пароль"
|
||||||
type={"password"}
|
type={"password"}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setInputsValue((prevValue) => ({
|
setInputsValue((prevValue) => ({
|
||||||
...prevValue,
|
...prevValue,
|
||||||
password: e.target.value,
|
password: e.target.value,
|
||||||
}));
|
}));
|
||||||
setInputsError((prevValue) => ({ ...prevValue, password: false }));
|
setInputsError((prevValue) => ({
|
||||||
|
...prevValue,
|
||||||
|
password: false,
|
||||||
|
}));
|
||||||
}}
|
}}
|
||||||
value={inputsValue.password}
|
value={inputsValue.password}
|
||||||
/>
|
/>
|
||||||
{inputsError.password &&
|
{inputsError.password && (
|
||||||
<span className='error'>Минимум 6 символов</span>
|
<span className="error">Минимум 6 символов</span>
|
||||||
}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="settings__buttons">
|
<div className="settings__buttons">
|
||||||
<BaseButton styles={"settings__buttons-cancel"}>
|
<BaseButton styles={"settings__buttons-cancel"}>
|
||||||
Отмена
|
Отмена
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
{loader ? <Loader style={"green"} width={'40px'} height={'40px'} /> :
|
{loader ? (
|
||||||
<BaseButton onClick={setSettings} styles={"settings__buttons-save"}>
|
<Loader style={"green"} width={"40px"} height={"40px"} />
|
||||||
|
) : (
|
||||||
|
<BaseButton
|
||||||
|
onClick={setSettings}
|
||||||
|
styles={"settings__buttons-save"}
|
||||||
|
>
|
||||||
Сохранить
|
Сохранить
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<span className="settings__agreement">
|
<span className="settings__agreement">
|
||||||
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
|
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
|
||||||
|
Loading…
Reference in New Issue
Block a user