TPS
/
halkbank_shahsyotag_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

password recovery finished

This commit is contained in:
VividTruthKeeper 2022-02-09 15:47:34 +05:00
parent e6b252e107
commit 06e13aae69
9 changed files with 206 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -13,6 +13,7 @@ import Footer from "./components/global/Footer";
import Main from "./pages/Main";
import SignIn from "./pages/SignIn";
import SignUp from "./pages/SignUp";
import Home from "./pages/Home";
const App = () => {
return (
@ -21,6 +22,7 @@ const App = () => {
<Route path="/" element={<Main />} />
<Route path="/sign-in" element={<SignIn />} />
<Route path="/sign-up" element={<SignUp />} />
<Route path="/home" element={<Home />} />
</Routes>
</div>
);

116
src/components/sign/PasswordRec.js Normal file
View File

@ -0,0 +1,116 @@
// IMPORT MODULES
import React, { useState, useEffect, useRef } from "react";
// IMPORT IMAGES
import Next from "../../icons/arrow-circle-right.svg";
const PasswordRec = ({ recoveryOpen, setRecoveryOpen }) => {
const [recStage, setRecStage] = useState(1);
const ref = useRef();
useEffect(() => {
if (!recoveryOpen) {
document.body.style.overflowY = "visible";
} else {
document.body.style.overflowY = "hidden";
}
window.addEventListener("mousedown", (e) => {
if (recoveryOpen && ref.current && !ref.current.contains(e.target)) {
setRecoveryOpen(false);
}
});
return () => {
window.removeEventListener("mousedown", () => {});
};
}, [recoveryOpen]);
return (
<section className={recoveryOpen ? "recovery active" : "recovery"}>
<div className="recovery-container">
<div className="recovery-inner" ref={ref}>
{recStage === 1 ? (
<div className="recovery-block recovery-1">
<form>
<h2 className="form-title">Восстановление пароля</h2>
<div className="reg-input-block rec-input">
<label htmlFor="mail">
Электронная почта<span>*</span>
</label>
<input
type="email"
id="mail"
name="mail"
placeholder="amanamanow@gmail.com"
required
/>
</div>
<div className="rec-btn">
<button
type="button"
className="sign-btn"
onClick={(e) => {
setRecStage((prevStage) => prevStage + 1);
}}
>
<div>
<h3>Отправить</h3>
<div className="btn-img">
<img src={Next} alt="next" />
</div>
</div>
</button>
</div>
</form>
</div>
) : recStage === 2 ? (
<div className="recovery-block recovery-2">
<form>
<h2 className="form-title">Новый пароль</h2>
<div className="reg-input-block rec-input">
<label htmlFor="new-pass">
Введите пароль<span>*</span>
</label>
<input
type="password"
id="new-pass"
name="new-pass"
required
/>
</div>
<div className="reg-input-block rec-input">
<label htmlFor="confirm">
Повторите пароль<span>*</span>
</label>
<input type="password" id="confirm" name="confirm" required />
</div>
<div className="rec-btn">
<button
type="button"
className="sign-btn"
onClick={(e) => {
e.preventDefault();
setRecoveryOpen(false);
setTimeout(() => {
setRecStage(1);
}, 400);
}}
>
<div>
<h3>Изменить</h3>
<div className="btn-img">
<img src={Next} alt="next" />
</div>
</div>
</button>
</div>
</form>
</div>
) : (
""
)}
</div>
</div>
</section>
);
};
export default PasswordRec;

6
src/components/sign/RegForm.js
View File

@ -203,11 +203,7 @@ const RegForm = () => {
Все поля с символом ( <span>*</span> ) обязательны для заполнения
Все поля доожны быть заполненны латиницей
</h2>
<button
type="submit"
className="sign-btn"
onClick={(e) => e.preventDefault()}
>
<button type="button" className="sign-btn">
<div>
<h3>Зарегистрироваться</h3>
<div className="btn-img">

17
src/components/sign/SignForm.js
View File

@ -5,8 +5,9 @@ import { Link } from "react-router-dom";
// IMPORT IMAGES
import logout from "../../icons/logout.svg";
import up from "../../icons/clipboard.svg";
import { useEffect } from "react/cjs/react.development";
const SignForm = () => {
const SignForm = ({ setRecoveryOpen }) => {
return (
<section className="sign-form">
<form>
@ -26,15 +27,17 @@ const SignForm = () => {
<h1>CAPTCHA</h1>
</div>
<div className="forget">
<h3>Забыли пароль?</h3>
<h3
onClick={() => {
setRecoveryOpen(true);
}}
>
Забыли пароль?
</h3>
</div>
</div>
<div className="sign-bottom">
<button
type="submit"
className="sign-btn"
onClick={(e) => e.preventDefault()}
>
<button type="button" className="sign-btn">
<div>
<h3>Войти</h3>
<div className="btn-img">

4
src/icons/arrow-circle-right.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 16C4.08698 16 0.5 12.413 0.5 8C0.5 3.58698 4.08698 0 8.5 0C12.913 0 16.5 3.58698 16.5 8C16.5 12.413 12.913 16 8.5 16ZM8.5 1.11628C4.70465 1.11628 1.61628 4.20465 1.61628 8C1.61628 11.7953 4.70465 14.8837 8.5 14.8837C12.2953 14.8837 15.3837 11.7953 15.3837 8C15.3837 4.20465 12.2953 1.11628 8.5 1.11628Z" fill="white"/>
<path d="M7.56209 11.185C7.4207 11.185 7.2793 11.1329 7.16767 11.0213C6.95186 10.8055 6.95186 10.4483 7.16767 10.2325L9.40023 7.99991L7.16767 5.76735C6.95186 5.55153 6.95186 5.19432 7.16767 4.97851C7.38349 4.7627 7.7407 4.7627 7.95651 4.97851L10.5835 7.60549C10.7993 7.8213 10.7993 8.17851 10.5835 8.39432L7.95651 11.0213C7.84488 11.1329 7.70349 11.185 7.56209 11.185Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 821 B

8
src/pages/Home.js Normal file
View File

@ -0,0 +1,8 @@
// IMPORT MODULES
import React from "react";
const Home = () => {
return <h1>Home</h1>;
};
export default Home;

10
src/pages/SignIn.js
View File

@ -1,5 +1,5 @@
// IMPORT MODULES
import React from "react";
import React, { useState } from "react";
// IMPORT COMPONENTS
import LogoBg from "../components/global/LogoBg";
@ -8,15 +8,21 @@ import Footer from "../components/global/Footer";
// IMPORT PERSONAL COMPONENTS
import SignForm from "../components/sign/SignForm";
import PasswordRec from "../components/sign/PasswordRec";
const SignIn = () => {
const [recoveryOpen, setRecoveryOpen] = useState(false);
return (
<section className="sign-in">
<PasswordRec
recoveryOpen={recoveryOpen}
setRecoveryOpen={setRecoveryOpen}
/>
<Nav />
<LogoBg />
<div className="container">
<div className="sign-in-inner">
<SignForm />
<SignForm setRecoveryOpen={setRecoveryOpen} />
</div>
</div>
<Footer />

1
src/styles/_global.scss
View File

@ -31,4 +31,5 @@ textarea {
body {
min-height: 100vh;
position: relative;
}

56
src/styles/_sing-in.scss
View File

@ -117,3 +117,59 @@
flex-direction: column;
gap: 3rem;
}
// MODAL WINDOWS
.recovery {
z-index: 50;
position: fixed;
top: 0;
left: 0;
min-width: 100vw;
min-height: 100vh;
background: rgba(58, 58, 58, 0.6);
display: flex;
align-items: center;
opacity: 0;
pointer-events: none;
transition: 0.4s all ease;
&.active {
pointer-events: all;
opacity: 1;
transition: 0.4s all ease;
}
}
.recovery-container {
width: 100%;
max-width: 58rem;
padding: 0 3rem;
margin: 0 auto;
}
.recovery-block {
padding: 5rem;
background: #fff;
border-radius: 0.5rem;
form {
display: flex;
flex-direction: column;
}
}
.rec-input {
margin-bottom: 0;
}
.form-title {
font-size: 2.2rem;
}
.recovery-1,
.recovery-2 {
form {
gap: 3rem;
}
}