catalogSpecialists
This commit is contained in:
parent
0acbef4195
commit
f07589217a
@ -101,6 +101,21 @@
|
|||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
color: white;
|
color: white;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
max-width: 185px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -139,6 +154,11 @@
|
|||||||
transform: scale(1.03);
|
transform: scale(1.03);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__img {
|
&__img {
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
import close from "assets/icons/closeProjectPersons.svg";
|
import close from "assets/icons/closeProjectPersons.svg";
|
||||||
|
|
||||||
import "./modalTrackerRegistration.scss";
|
import "./modalTrackerRegistration.scss";
|
||||||
@ -16,12 +17,13 @@ export const ModalTrackerRegistration = ({ setModalReset, email }) => {
|
|||||||
для активации вашего аккаунта на почту
|
для активации вашего аккаунта на почту
|
||||||
<br /> <span>{email}</span>
|
<br /> <span>{email}</span>
|
||||||
</p>
|
</p>
|
||||||
<button
|
<Link
|
||||||
|
to={'/registration-setting'}
|
||||||
onClick={() => setModalReset(false)}
|
onClick={() => setModalReset(false)}
|
||||||
className="modalConfirmTracker__btn"
|
className="modalConfirmTracker__btn"
|
||||||
>
|
>
|
||||||
Понятно
|
Понятно
|
||||||
</button>
|
</Link>
|
||||||
<img
|
<img
|
||||||
onClick={() => setModalReset(false)}
|
onClick={() => setModalReset(false)}
|
||||||
src={close}
|
src={close}
|
||||||
|
28
src/components/PartnerPersonCard/PartnerPersonCard.jsx
Normal file
28
src/components/PartnerPersonCard/PartnerPersonCard.jsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { urlForLocal } from "@utils/helper";
|
||||||
|
|
||||||
|
import rightArrow from "assets/icons/arrows/arrowRight.svg";
|
||||||
|
|
||||||
|
import "./partnerPersonCard.scss";
|
||||||
|
|
||||||
|
export const PartnerPersonCard = ({name, img, userId}) => {
|
||||||
|
return (
|
||||||
|
<div className="partnerPersonCard">
|
||||||
|
<div className="partnerPersonCard__img">
|
||||||
|
<img src={urlForLocal(img)} alt='avatar' />
|
||||||
|
</div>
|
||||||
|
<div className="partnerPersonCard__info">
|
||||||
|
<h2 className="partnerPersonCard__name">{name}</h2>
|
||||||
|
<Link className="partnerPersonCard__report" to={`calendar/${userId}`}>
|
||||||
|
Подробный отчет
|
||||||
|
<div className="partnerPersonCard__more">
|
||||||
|
<img src={rightArrow} alt='arrow' />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PartnerPersonCard;
|
45
src/components/PartnerPersonCard/partnerPersonCard.scss
Normal file
45
src/components/PartnerPersonCard/partnerPersonCard.scss
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
.partnerPersonCard {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 25px;
|
||||||
|
z-index: 2;
|
||||||
|
img {
|
||||||
|
width: 77px;
|
||||||
|
height: 77px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
position: relative;
|
||||||
|
background: #E1FCCF;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 15px 15px 15px 30px;
|
||||||
|
left: -15px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__report {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 10px;
|
||||||
|
color: black;
|
||||||
|
font-size: 16px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__more {
|
||||||
|
width: 41px;
|
||||||
|
height: 41px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
@ -14,6 +14,7 @@
|
|||||||
&__items {
|
&__items {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
//flex-wrap: wrap;
|
//flex-wrap: wrap;
|
||||||
//margin-top: 25px;
|
//margin-top: 25px;
|
||||||
//row-gap: 24px;
|
//row-gap: 24px;
|
||||||
|
@ -5,6 +5,9 @@ import { Footer } from "@components/Common/Footer/Footer";
|
|||||||
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
|
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
|
||||||
import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration";
|
import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration";
|
||||||
import SideBar from "@components/SideBar/SideBar";
|
import SideBar from "@components/SideBar/SideBar";
|
||||||
|
import { useFormValidation } from "@hooks/useFormValidation";
|
||||||
|
import { useNotification } from "@hooks/useNotification";
|
||||||
|
import { Navigate } from "react-router-dom";
|
||||||
|
|
||||||
import arrowInfo from "assets/icons/trackerIntroInfo.svg";
|
import arrowInfo from "assets/icons/trackerIntroInfo.svg";
|
||||||
import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
|
import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
|
||||||
@ -14,9 +17,42 @@ import "./trackerRegistration.scss";
|
|||||||
|
|
||||||
export const TrackerRegistration = () => {
|
export const TrackerRegistration = () => {
|
||||||
const [modalConfirmOpen, setModalConfirm] = useState(false);
|
const [modalConfirmOpen, setModalConfirm] = useState(false);
|
||||||
const [inputs, setInputs] = useState({
|
const fields = {
|
||||||
email: ""
|
username: "",
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
secondPassword: ""
|
||||||
|
};
|
||||||
|
|
||||||
|
const apiEndpoint = "/register/sign-up";
|
||||||
|
|
||||||
|
const { showNotification } = useNotification();
|
||||||
|
const showNotificationError = () => {
|
||||||
|
showNotification({
|
||||||
|
show: true,
|
||||||
|
text: "Аккаунт с таким логином или email уже существует",
|
||||||
|
type: "error"
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
const showNotificationTrue = () => {
|
||||||
|
showNotification({
|
||||||
|
show: true,
|
||||||
|
text: "Аккаунт успешно создан",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const {
|
||||||
|
formData,
|
||||||
|
validationErrors,
|
||||||
|
handleChange,
|
||||||
|
handleSubmit,
|
||||||
|
} = useFormValidation(
|
||||||
|
apiEndpoint,
|
||||||
|
fields,
|
||||||
|
showNotificationError,
|
||||||
|
showNotificationTrue,
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tracker-registration">
|
<div className="tracker-registration">
|
||||||
@ -34,33 +70,64 @@ export const TrackerRegistration = () => {
|
|||||||
<div className="tracker-registration__form">
|
<div className="tracker-registration__form">
|
||||||
<div className="tracker-registration__form__inputs">
|
<div className="tracker-registration__form__inputs">
|
||||||
<div className="tracker-registration__inputContainer">
|
<div className="tracker-registration__inputContainer">
|
||||||
<span>Ваше имя</span>
|
<h5>Ваше имя</h5>
|
||||||
<input placeholder="Имя" />
|
|
||||||
</div>
|
|
||||||
<div className="tracker-registration__inputContainer">
|
|
||||||
<span>Ваш e-mail</span>
|
|
||||||
<input
|
<input
|
||||||
placeholder="E-mail"
|
placeholder="Имя"
|
||||||
onChange={(e) =>
|
className={validationErrors.username ? "error" : ""}
|
||||||
setInputs((prevState) => ({
|
onChange={handleChange}
|
||||||
...prevState,
|
value={formData.username}
|
||||||
email: e.target.value
|
id="username"
|
||||||
}))
|
|
||||||
}
|
|
||||||
type="email"
|
|
||||||
/>
|
/>
|
||||||
|
<span>{validationErrors.username}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="tracker-registration__inputContainer">
|
<div className="tracker-registration__inputContainer">
|
||||||
<span>Придумайте пароль</span>
|
<h5>Ваш e-mail</h5>
|
||||||
<input placeholder="Пароль" />
|
<input
|
||||||
|
onChange={handleChange}
|
||||||
|
className={validationErrors.email ? "error" : ""}
|
||||||
|
placeholder="E-mail"
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
value={formData.email}
|
||||||
|
/>
|
||||||
|
<span>{validationErrors.email}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="tracker-registration__inputContainer">
|
<div className="tracker-registration__inputContainer">
|
||||||
<span>Повторите пароль</span>
|
<h5>Придумайте пароль</h5>
|
||||||
<input placeholder="Повторите пароль" />
|
<input
|
||||||
|
placeholder="Пароль"
|
||||||
|
className={validationErrors.password ? "error" : ""}
|
||||||
|
onChange={handleChange}
|
||||||
|
value={formData.password}
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
/>
|
||||||
|
<span>{validationErrors.password}</span>
|
||||||
|
</div>
|
||||||
|
<div className="tracker-registration__inputContainer">
|
||||||
|
<h5>Повторите пароль</h5>
|
||||||
|
<input
|
||||||
|
placeholder="Повторите пароль"
|
||||||
|
className={validationErrors.secondPassword ? "error" : ""}
|
||||||
|
value={formData.secondPassword}
|
||||||
|
type="password"
|
||||||
|
onChange={handleChange}
|
||||||
|
id="secondPassword"
|
||||||
|
/>
|
||||||
|
<span>{validationErrors.secondPassword}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="tracker-registration__form__submit">
|
<div className="tracker-registration__form__submit">
|
||||||
<button onClick={() => setModalConfirm(true)}>Отправить</button>
|
<button
|
||||||
|
onClick={async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const result = await handleSubmit(e);
|
||||||
|
if (result === true) {
|
||||||
|
setModalConfirm(true)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Отправить</button>
|
||||||
<div className="tracker-registration__form__info">
|
<div className="tracker-registration__form__info">
|
||||||
<img src={authImg} alt="img" />
|
<img src={authImg} alt="img" />
|
||||||
<p>
|
<p>
|
||||||
@ -80,7 +147,7 @@ export const TrackerRegistration = () => {
|
|||||||
<ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
|
<ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
|
||||||
<ModalTrackerRegistration
|
<ModalTrackerRegistration
|
||||||
setModalReset={setModalConfirm}
|
setModalReset={setModalConfirm}
|
||||||
email={inputs.email}
|
email={formData.email}
|
||||||
/>
|
/>
|
||||||
</ModalLayout>
|
</ModalLayout>
|
||||||
)}
|
)}
|
||||||
|
@ -41,6 +41,7 @@
|
|||||||
&__submit {
|
&__submit {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-top: 5px;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
border-radius: 44px;
|
border-radius: 44px;
|
||||||
@ -106,15 +107,18 @@
|
|||||||
&__inputContainer {
|
&__inputContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
row-gap: 15px;
|
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 44px;
|
margin-bottom: 44px;
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 15px;
|
font-size: 12px;
|
||||||
color: #000;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@ -122,6 +126,7 @@
|
|||||||
padding: 8px 12px 9px;
|
padding: 8px 12px 9px;
|
||||||
background-color: #EFF2F7;
|
background-color: #EFF2F7;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
margin: 10px 0;
|
||||||
border: none;
|
border: none;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
@ -132,5 +137,9 @@
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user