From 06e13aae69b979ad887654139a0441400d34d25f Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <you@example.com>
Date: Wed, 9 Feb 2022 15:47:34 +0500
Subject: [PATCH] password recovery finished

---
 src/App.js                         |   2 +
 src/components/sign/PasswordRec.js | 116 +++++++++++++++++++++++++++++
 src/components/sign/RegForm.js     |   6 +-
 src/components/sign/SignForm.js    |  17 +++--
 src/icons/arrow-circle-right.svg   |   4 +
 src/pages/Home.js                  |   8 ++
 src/pages/SignIn.js                |  10 ++-
 src/styles/_global.scss            |   1 +
 src/styles/_sing-in.scss           |  56 ++++++++++++++
 9 files changed, 206 insertions(+), 14 deletions(-)
 create mode 100644 src/components/sign/PasswordRec.js
 create mode 100644 src/icons/arrow-circle-right.svg
 create mode 100644 src/pages/Home.js

diff --git a/src/App.js b/src/App.js
index feb7f4c..b11082a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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>
   );
diff --git a/src/components/sign/PasswordRec.js b/src/components/sign/PasswordRec.js
new file mode 100644
index 0000000..82a7a59
--- /dev/null
+++ b/src/components/sign/PasswordRec.js
@@ -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;
diff --git a/src/components/sign/RegForm.js b/src/components/sign/RegForm.js
index a02ef10..fd66973 100644
--- a/src/components/sign/RegForm.js
+++ b/src/components/sign/RegForm.js
@@ -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">
diff --git a/src/components/sign/SignForm.js b/src/components/sign/SignForm.js
index cd2e8cd..fab1c38 100644
--- a/src/components/sign/SignForm.js
+++ b/src/components/sign/SignForm.js
@@ -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">
diff --git a/src/icons/arrow-circle-right.svg b/src/icons/arrow-circle-right.svg
new file mode 100644
index 0000000..0491e67
--- /dev/null
+++ b/src/icons/arrow-circle-right.svg
@@ -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>
diff --git a/src/pages/Home.js b/src/pages/Home.js
new file mode 100644
index 0000000..ff2419d
--- /dev/null
+++ b/src/pages/Home.js
@@ -0,0 +1,8 @@
+// IMPORT MODULES
+import React from "react";
+
+const Home = () => {
+  return <h1>Home</h1>;
+};
+
+export default Home;
diff --git a/src/pages/SignIn.js b/src/pages/SignIn.js
index 00ae8b5..ffc3789 100644
--- a/src/pages/SignIn.js
+++ b/src/pages/SignIn.js
@@ -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 />
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index 05dc57a..c856131 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -31,4 +31,5 @@ textarea {
 
 body {
   min-height: 100vh;
+  position: relative;
 }
diff --git a/src/styles/_sing-in.scss b/src/styles/_sing-in.scss
index a841655..b0d210a 100644
--- a/src/styles/_sing-in.scss
+++ b/src/styles/_sing-in.scss
@@ -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;
+  }
+}