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

trackerTask #12

Merged
nik.polishuk merged 4 commits from trackerTask into main 2024-02-01 23:15:29 +03:00
Conversation 0 Commits 4 Files Changed 14 +199 -27
7 changed files with 199 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f07589217a - Show all commits

20
src/components/AuthBlock/authBlock.scss
View File

@ -101,6 +101,21 @@
line-height: 32px;
color: white;
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);
color: white;
}
@media (max-width: 450px) {
width: 100%;
max-width: none;
}
}
&__img {

6
src/components/Modal/ModalTrackerRegistration/ModalTrackerRegistration.js
View File

@ -1,5 +1,6 @@
import React from "react";
import { Link } from "react-router-dom";
import close from "assets/icons/closeProjectPersons.svg";
import "./modalTrackerRegistration.scss";
@ -16,12 +17,13 @@ export const ModalTrackerRegistration = ({ setModalReset, email }) => {
для активации вашего аккаунта на почту
<br /> <span>{email}</span>
</p>
<button
<Link
to={'/registration-setting'}
onClick={() => setModalReset(false)}
className="modalConfirmTracker__btn"
>
Понятно
</button>
</Link>
<img
onClick={() => setModalReset(false)}
src={close}

28
src/components/PartnerPersonCard/PartnerPersonCard.jsx Normal file
View 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
View 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;
}
}

1
src/pages/PartnerСategories/partnerСategories.scss
View File

@ -14,6 +14,7 @@
&__items {
display: flex;
gap: 10px;
flex-wrap: wrap;
//flex-wrap: wrap;
//margin-top: 25px;
//row-gap: 24px;

109
src/pages/TrackerRegistration/TrackerRegistration.js
View File

@ -5,6 +5,9 @@ import { Footer } from "@components/Common/Footer/Footer";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration";
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 authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
@ -14,9 +17,42 @@ import "./trackerRegistration.scss";
export const TrackerRegistration = () => {
const [modalConfirmOpen, setModalConfirm] = useState(false);
const [inputs, setInputs] = useState({
email: ""
const fields = {
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 (
<div className="tracker-registration">
@ -34,33 +70,64 @@ export const TrackerRegistration = () => {
<div className="tracker-registration__form">
<div className="tracker-registration__form__inputs">
<div className="tracker-registration__inputContainer">
<span>Ваше имя</span>
<input placeholder="Имя" />
</div>
<div className="tracker-registration__inputContainer">
<span>Ваш e-mail</span>
<h5>Ваше имя</h5>
<input
placeholder="E-mail"
onChange={(e) =>
setInputs((prevState) => ({
...prevState,
email: e.target.value
}))
}
type="email"
placeholder="Имя"
className={validationErrors.username ? "error" : ""}
onChange={handleChange}
value={formData.username}
id="username"
/>
<span>{validationErrors.username}</span>
</div>
<div className="tracker-registration__inputContainer">
<span>Придумайте пароль</span>
<input placeholder="Пароль" />
<h5>Ваш e-mail</h5>
<input
onChange={handleChange}
className={validationErrors.email ? "error" : ""}
placeholder="E-mail"
type="email"
id="email"
value={formData.email}
/>
<span>{validationErrors.email}</span>
</div>
<div className="tracker-registration__inputContainer">
<span>Повторите пароль</span>
<input placeholder="Повторите пароль" />
<h5>Придумайте пароль</h5>
<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 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">
<img src={authImg} alt="img" />
<p>
@ -80,7 +147,7 @@ export const TrackerRegistration = () => {
<ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
<ModalTrackerRegistration
setModalReset={setModalConfirm}
email={inputs.email}
email={formData.email}
/>
</ModalLayout>
)}

15
src/pages/TrackerRegistration/trackerRegistration.scss
View File

@ -41,6 +41,7 @@
&__submit {
display: flex;
align-items: center;
margin-top: 5px;
button {
border-radius: 44px;
@ -106,15 +107,18 @@
&__inputContainer {
display: flex;
flex-direction: column;
row-gap: 15px;
max-width: 300px;
width: 100%;
margin-bottom: 44px;
h5 {
font-size: 15px;
}
span {
font-weight: 400;
font-size: 15px;
color: #000;
font-size: 12px;
color: red;
}
input {
@ -122,6 +126,7 @@
padding: 8px 12px 9px;
background-color: #EFF2F7;
border-radius: 8px;
margin: 10px 0;
border: none;
font-weight: 400;
font-size: 15px;
@ -132,5 +137,9 @@
margin-bottom: 0;
max-width: none;
}
.error {
border: 1px solid red;
}
}
}