From 68b2d0b81867b9e045600949cd8b21e6d298c5a7 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <you@example.com>
Date: Sat, 2 Apr 2022 13:54:37 +0500
Subject: [PATCH] eye added to log in page

---
 package-lock.json               | 20 ++++++-------
 src/components/sign/SignForm.js | 51 ++++++++++++++++++---------------
 src/pages/SuccessPage.js        |  2 +-
 src/styles/_recovery.scss       | 23 +++++++++++++++
 4 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 26cd8bb..0e7b456 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "react-halkbank",
       "version": "0.1.0",
       "dependencies": {
         "@testing-library/jest-dom": "5.16.1",
@@ -4155,8 +4156,6 @@
       "version": "8.9.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
       "integrity": "sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -4171,9 +4170,7 @@
     "node_modules/ajv-formats/node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "optional": true,
-      "peer": true
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
@@ -20324,13 +20321,14 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "requires": {},
+      "requires": {
+        "ajv": "^8.0.0"
+      },
       "dependencies": {
         "ajv": {
-          "version": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
+          "version": "8.9.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
           "integrity": "sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==",
-          "optional": true,
-          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -20341,9 +20339,7 @@
         "json-schema-traverse": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "optional": true,
-          "peer": true
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
         }
       }
     },
diff --git a/src/components/sign/SignForm.js b/src/components/sign/SignForm.js
index 3cf7db4..bf7e91f 100644
--- a/src/components/sign/SignForm.js
+++ b/src/components/sign/SignForm.js
@@ -6,6 +6,7 @@ import ReCAPTCHA from "react-google-recaptcha";
 // IMPORT IMAGES
 import logout from "../../icons/logout.svg";
 import up from "../../icons/clipboard.svg";
+import eye from "../../icons/eye.svg";
 
 // IMPORT COMPONENTS
 import Loader from "../../components/global/Loader";
@@ -16,13 +17,7 @@ import { ValidateEmail } from "../../validators/ValidateEmail";
 // SITEKEY
 import { sitekey } from "../../recaptcha";
 
-const SignForm = ({
-  setRecoveryOpen,
-  setFormData,
-  error,
-  isLoading,
-  setIsLoading,
-}) => {
+const SignForm = ({ setFormData, error, isLoading, setIsLoading }) => {
   const data = new FormData();
   const [inputValid, setInputValid] = useState({
     login: null,
@@ -31,6 +26,7 @@ const SignForm = ({
     captcha: false,
   });
   const [btnEnabled, setBtnEnabled] = useState(false);
+  const [password, setPassword] = useState(true);
 
   useEffect(() => {
     if (
@@ -91,21 +87,31 @@ const SignForm = ({
               }}
             />
           </div>
-          <div className="input-block">
-            <label htmlFor="password">Введите пароль</label>
-            <input
-              autoComplete="true"
-              required
-              type="password"
-              id="password"
-              onChange={(e) => {
-                if (e.target.value.length >= 8) {
-                  setInputValid({ ...inputValid, password: e.target.value });
-                } else {
-                  setInputValid({ ...inputValid, password: null });
-                }
-              }}
-            />
+          <div className="input-block-outer">
+            <div className="input-block">
+              <label htmlFor="password">Введите пароль</label>
+              <input
+                autoComplete="true"
+                required
+                type={password ? "password" : "text"}
+                id="password"
+                onChange={(e) => {
+                  if (e.target.value.length >= 8) {
+                    setInputValid({ ...inputValid, password: e.target.value });
+                  } else {
+                    setInputValid({ ...inputValid, password: null });
+                  }
+                }}
+              />
+              <div
+                className="p-input-img"
+                onClick={() => {
+                  setPassword(!password);
+                }}
+              >
+                <img src={eye} alt="reveal/hide" />
+              </div>
+            </div>
             {error ? <span>Неверные имя пользователя или пароль</span> : ""}
           </div>
           <div className="captcha-wrapper">
@@ -116,7 +122,6 @@ const SignForm = ({
                 setInputValid({ ...inputValid, captcha: true });
               }}
             />
-            {/* <h1>Captcha</h1> */}
           </div>
           {/* <div className="forget">
             <h3
diff --git a/src/pages/SuccessPage.js b/src/pages/SuccessPage.js
index 6da1d0a..1c18767 100644
--- a/src/pages/SuccessPage.js
+++ b/src/pages/SuccessPage.js
@@ -1,5 +1,5 @@
 // IMPORT MODULES
-import react, { useEffect } from "react";
+import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 // IMPORT COMPONENTS
diff --git a/src/styles/_recovery.scss b/src/styles/_recovery.scss
index 1778354..b554d6f 100644
--- a/src/styles/_recovery.scss
+++ b/src/styles/_recovery.scss
@@ -24,6 +24,24 @@
 .input-block-outer {
   max-width: 34rem;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+
+  span {
+    color: red;
+  }
+}
+
+.sign-form {
+  .input-block-outer {
+    max-width: unset;
+
+    .input-block {
+      position: relative;
+      height: 8.8rem;
+    }
+  }
 }
 
 .rel-block {
@@ -133,6 +151,11 @@
 }
 
 @media screen and (max-width: 600px) {
+  .sign-form {
+    .p-input-img {
+      left: calc(100% - 6rem);
+    }
+  }
   .p-recovery-content {
     display: grid;
     grid-template-columns: 1fr;