From b196b345e11db3cc7dc30dfe2bc250c93131ecef Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <you@example.com>
Date: Fri, 11 Feb 2022 14:03:39 +0500
Subject: [PATCH] adopted input validation in sign in page

---
 src/components/sign/SignForm.js | 51 ++++++++++++++++++++++++++++++---
 src/styles/_global.scss         |  6 ++++
 src/styles/_sing-in.scss        | 11 +++++++
 3 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/components/sign/SignForm.js b/src/components/sign/SignForm.js
index 9a37f85..c5215b3 100644
--- a/src/components/sign/SignForm.js
+++ b/src/components/sign/SignForm.js
@@ -1,5 +1,5 @@
 // IMPORT MODULES
-import React from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Link } from "react-router-dom";
 
 // IMPORT IMAGES
@@ -7,6 +7,19 @@ import logout from "../../icons/logout.svg";
 import up from "../../icons/clipboard.svg";
 
 const SignForm = ({ setRecoveryOpen }) => {
+  const [inputValid, setInputValid] = useState({
+    login: false,
+    password: false,
+  });
+  const [btnEnabled, setBtnEnabled] = useState(false);
+
+  useEffect(() => {
+    if (inputValid.login === true && inputValid.password === true) {
+      setBtnEnabled(true);
+    } else {
+      setBtnEnabled(false);
+    }
+  }, [inputValid]);
   return (
     <section className="sign-form">
       <form>
@@ -16,11 +29,41 @@ const SignForm = ({ setRecoveryOpen }) => {
         <div className="sign-mid">
           <div className="input-block">
             <label htmlFor="login">Логин</label>
-            <input type="text" id="login" />
+            <input
+              required
+              type="text"
+              id="login"
+              name="login"
+              onChange={(e) => {
+                if (e.target.value !== "") {
+                  setInputValid({ ...inputValid, login: true });
+                } else {
+                  setInputValid({ ...inputValid, login: false });
+                }
+              }}
+            />
           </div>
           <div className="input-block">
             <label htmlFor="password">Введите пароль</label>
-            <input type="password" id="password" />
+            <input
+              required
+              type="password"
+              id="password"
+              onChange={(e) => {
+                if (e.target.value.length >= 8) {
+                  setInputValid({ ...inputValid, password: true });
+                } else {
+                  setInputValid({ ...inputValid, password: false });
+                }
+              }}
+            />
+            <span
+              className={
+                inputValid.password ? "pass-check" : "pass-check active"
+              }
+            >
+              Пароль должен содержать не менее 8 символов
+            </span>
           </div>
           <div className="captcha">
             <h1>CAPTCHA</h1>
@@ -36,7 +79,7 @@ const SignForm = ({ setRecoveryOpen }) => {
           </div>
         </div>
         <div className="sign-bottom">
-          <button type="button" className="sign-btn">
+          <button disabled={!btnEnabled} type="button" className="sign-btn">
             <div>
               <h3>Войти</h3>
               <div className="btn-img">
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index d27ea61..0cf5c6c 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -35,3 +35,9 @@ body {
   min-height: 100vh;
   position: relative;
 }
+
+button:disabled {
+  background: #e5e5e5 !important;
+  pointer-events: none;
+  transition: 0.4s all ease;
+}
diff --git a/src/styles/_sing-in.scss b/src/styles/_sing-in.scss
index b0d210a..adbe948 100644
--- a/src/styles/_sing-in.scss
+++ b/src/styles/_sing-in.scss
@@ -173,3 +173,14 @@
     gap: 3rem;
   }
 }
+
+.pass-check {
+  display: none;
+  color: red;
+  font-size: 1.2rem;
+  font-weight: bold;
+
+  &.active {
+    display: block;
+  }
+}