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

reset and confirm modals

Browse Source
This commit is contained in:
Николай Полтщук 2023-07-18 16:20:40 +03:00
parent 7c7ea86c8c
commit e0b289c3fd
12 changed files with 315 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -12,6 +12,7 @@ import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
import { TrackerRegistration } from "@pages/TrackerRegistration/TrackerRegistration";
import Home from "./pages/Home/Home";
import Candidate from "./components/Candidate/Candidate";
import Calendar from "./components/Calendar/Calendar";
@ -61,6 +62,7 @@ const App = () => {
<Route exact path="/auth" element={<AuthForPartners />} />
<Route exact path="/tracker-intro" element={<TrackerIntro />} />
<Route exact path="/tracker-auth" element={<TrackerAuth />} />
<Route exact path="/tracker-registration" element={<TrackerRegistration />} />
<Route exact path="/worker/:id" element={<FreeDevelopers />} />
<Route

BIN
src/assets/images/trackerAuthImg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/images/trackerRegistrationImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

4
src/components/AuthBlock/AuthBlock.js
View File

@ -4,7 +4,7 @@ import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
import "./authBlock.scss";
export const AuthBlock = ({ title, description, img }) => {
export const AuthBlock = ({ title, description, img, resetModal }) => {
return (
<div className="auth__wrapper">
<div className="auth__info">
@ -31,7 +31,7 @@ export const AuthBlock = ({ title, description, img }) => {
>
Войти
</button>
<span>Вспомнить пароль</span>
<span onClick={() => resetModal(true)}>Вспомнить пароль</span>
</div>
</form>
{img && <img src={img} alt="authImg" className="auth__img" />}

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

@ -103,7 +103,7 @@
&__img {
position: absolute;
right: 10px;
right: 48px;
top: -90px;
}
}

19
src/components/Modal/ModalReset/ModalReset.js Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import close from "assets/icons/closeProjectPersons.svg";
import "./modalReset.scss";
export const ModalReset = ({ setModalReset }) => {
return (
<div className="modalReset">
<h3 className='modalReset__title'>Восстановление доступа</h3>
<div className='modalReset__input'>
<span>Укажите e-mail, для которого хотите восстановить пароль.</span>
<input placeholder='email'/>
</div>
<button className='modalReset__submit'>Восстановить</button>
<img onClick={() => setModalReset(false)} src={close} className='modalReset__close' alt='close' />
</div>
);
};

59
src/components/Modal/ModalReset/modalReset.scss Normal file
View File

@ -0,0 +1,59 @@
.modalReset {
display: flex;
flex-direction: column;
border-radius: 20px;
background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%);
padding: 23px 110px 8px 36px;
row-gap: 29px;
position: relative;
&__title {
font-size: 24px;
font-weight: 500;
color: #263238;
margin-bottom: 0;
}
&__input {
display: flex;
flex-direction: column;
row-gap: 15px;
span {
font-size: 15px;
color: #000;
}
input {
padding: 8px 12px;
font-size: 15px;
border-radius: 8px;
background-color: #EFF2F7;
outline: none;
border: none;
max-width: 300px;
}
}
&__submit {
border-radius: 44px;
background: #52B709;
padding: 9px 46px;
color: #FFF;
font-size: 16px;
font-weight: 500;
line-height: 32px;
border: none;
max-width: 200px;
outline: none;
}
&__close {
position: absolute;
top: 28px;
right: 28px;
width: 15px;
height: 15px;
cursor: pointer;
}
}

17
src/components/Modal/ModalTrackerRegistration/ModalTrackerRegistration.js Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
import close from "assets/icons/closeProjectPersons.svg";
import "./modalTrackerRegistration.scss";
export const ModalTrackerRegistration = ({ setModalReset }) => {
return (
<div className="modalConfirmTracker">
<h3 className='modalConfirmTracker__title'>Спасибо за регистрацию. Теперь можете войти в кабинет</h3>
<p className='modalConfirmTracker__info'>Мы отправили ссылку<br/>
для активации вашего аккаунта на почту<br/> <span>nhw44308@mail.com</span></p>
<button className='modalConfirmTracker__btn'>Перейти в почту</button>
<img onClick={() => setModalReset(false)} src={close} className='modalReset__close' alt='close' />
</div>
);
};

39
src/components/Modal/ModalTrackerRegistration/modalTrackerRegistration.scss Normal file
View File

@ -0,0 +1,39 @@
.modalConfirmTracker {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 40px 10px;
&__title {
font-size: 24px;
font-weight: 500;
max-width: 360px;
margin-bottom: 24px;
text-align: center;
}
&__info {
font-size: 15px;
font-weight: 300;
max-width: 320px;
text-align: center;
margin-bottom: 30px;
span {
font-weight: 700;
line-height: 25px;
}
}
&__btn {
border-radius: 44px;
background: #52B709;
outline: none;
border: none;
font-size: 16px;
font-weight: 500;
line-height: 32px;
color: #FFF;
padding: 9px 37px;
}
}

11
src/pages/TrackerAuth/TrackerAuth.js
View File

@ -1,9 +1,11 @@
import React from "react";
import React, {useState} from "react";
import AuthBlock from "@components/AuthBlock/AuthBlock";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import {ModalReset} from "@components/Modal/ModalReset/ModalReset";
import arrowInfo from "assets/icons/trackerIntroInfo.svg";
import trackerAuthImg from "assets/images/trackerAuthImg.png";
@ -11,6 +13,7 @@ import trackerAuthImg from "assets/images/trackerAuthImg.png";
import "./trackerAuth.scss";
export const TrackerAuth = () => {
const [modalResetOpen, setModalReset] = useState(false)
return (
<div className="trackerAuth">
<AuthHeader />
@ -27,8 +30,14 @@ export const TrackerAuth = () => {
<AuthBlock
description="Создавайте и редактируйте задачи и проекты вместе с другими участниками команды."
img={trackerAuthImg}
resetModal={setModalReset}
/>
</div>
{modalResetOpen &&
<ModalLayout active={modalResetOpen} setActive={setModalReset}>
<ModalReset setModalReset={setModalReset} />
</ModalLayout>
}
<Footer />
</div>
</div>

71
src/pages/TrackerRegistration/TrackerRegistration.js Normal file
View File

@ -0,0 +1,71 @@
import React, {useState} from "react";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration"
import arrowInfo from "assets/icons/trackerIntroInfo.svg";
import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
import registrationImg from "assets/images/trackerRegistrationImg.png"
import "./trackerRegistration.scss";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
export const TrackerRegistration = () => {
const [modalConfirmOpen, setModalConfirm] = useState(false)
return (
<div className="trackerRegistration">
<AuthHeader />
<SideBar />
<div className="trackerAuth__content">
<div className="container">
<h1 className="trackerAuth__title">
Создайте свое{" "}
<span>
рабочее пространство
<img src={arrowInfo} alt="arrow" />
</span>
</h1>
<div className='trackerRegistration__form'>
<div className='trackerRegistration__form__inputs'>
<div className='trackerRegistration__inputContainer'>
<span>Ваше имя *</span>
<input placeholder='Имя' />
</div>
<div className='trackerRegistration__inputContainer'>
<span>Придумайте пароль*</span>
<input placeholder='Пароль' />
</div>
<div className='trackerRegistration__inputContainer'>
<span>Ваш email *</span>
<input placeholder='Email' type='email' />
</div>
<div className='trackerRegistration__inputContainer'>
<span>Повторите пароль*</span>
<input placeholder='Повторите пароль' />
</div>
</div>
<div className='trackerRegistration__form__submit'>
<button onClick={() => setModalConfirm(true)}>Отправить</button>
<div className='trackerRegistration__form__info'>
<img src={authImg} alt='img' />
<p>
Создавайте и редактируйте задачи и проекты вместе с другими участниками команды.
</p>
</div>
</div>
<img className='trackerRegistration__form__img' src={registrationImg} alt='img' />
</div>
</div>
{modalConfirmOpen &&
<ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
<ModalTrackerRegistration setModalReset={setModalConfirm} />
</ModalLayout>
}
<Footer />
</div>
</div>
);
};

95
src/pages/TrackerRegistration/trackerRegistration.scss Normal file
View File

@ -0,0 +1,95 @@
.trackerRegistration {
&__content {
font-family: "LabGrotesque", sans-serif;
background-color: #f1f1f1;
color: #000000;
padding: 50px 0 0;
min-height: 100vh;
@media (max-width: 1375px) {
padding-top: 100px;
}
.container {
padding-bottom: 30px;
}
}
&__form {
position: relative;
border-radius: 12px;
background: #FFF;
padding: 59px 115px 70px 102px;
&__inputs {
display: flex;
flex-wrap: wrap;
max-width: 650px;
row-gap: 25px;
column-gap: 44px;
}
&__submit {
display: flex;
align-items: center;
button {
border-radius: 44px;
padding: 9px 39px;
background: #52B709;
font-weight: 500;
font-size: 18px;
color: #FFF;
border: none;
margin-right: 165px;
}
}
&__info {
display: flex;
align-items: center;
img {
margin-right: 31px;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 22px;
color: #000;
max-width: 430px;
}
}
&__img {
position: absolute;
top: -100px;
right: 58px;
}
}
&__inputContainer {
display: flex;
flex-direction: column;
row-gap: 15px;
max-width: 300px;
width: 100%;
margin-bottom: 44px;
span {
font-weight: 400;
font-size: 15px;
color: #000;
}
input {
outline: none;
padding: 8px 12px 9px;
background-color: #EFF2F7;
border-radius: 8px;
border: none;
font-weight: 400;
font-size: 15px;
color: #000;
}
}
}