apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

setSettings

Browse Source
This commit is contained in:
Mikola 2023-11-27 14:39:11 +03:00
parent 5bcaa9259e
commit c613dfa879
3 changed files with 146 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Common/BaseButton/BaseButton.jsx
View File

@ -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>
);

123
src/pages/PartnerSettings/PartnerSettings.jsx
View File

@ -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">
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и

30
src/pages/PartnerSettings/partnerSettings.scss
View File

@ -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;