Registration validation added + warning password

hipstagram/src/App.js

@@ -16,11 +16,6 @@ import { store } from "./Redux/promise_reducer";
 import { Provider } from "react-redux";
 import history from "./history";
 
-function fff(a) {
-    console.log(a)
-    return <div>Пусто</div>
-}
-
 function App() {
     return (
         <Provider store={store}>
@@ -55,7 +50,6 @@ function App() {
                     <Route path="/settings" component={Settings} />
                     <Route path="/login" component={Login} />
                     <Route path="/registration" component={Registration} />
-                    <Route component={fff} />
                     </Switch>
                 </div>
             </div>

hipstagram/src/Content/Login/Login.js

@@ -1,13 +1,13 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, { useRef, useState} from 'react';
 import {connect} from 'react-redux';
 import {NavLink, useHistory} from 'react-router-dom';
 import {actionLogin} from '../../Actions/action_login';
 import LoginError from '../../Components/LoginError/LoginError';
 import './Login.css';
 
-const Login = ({onLogin = null, checkLogin = false, promiseLoginStatus, payloadLogin, loginNetworkError}) => {      //деструктуризация объекта
+const Login = ({onLogin = null, checkLogin = false, promiseLoginStatus, payloadLogin, loginNetworkError}) => {    //деструктуризация объекта
 
-    let history = useHistory();
+    const history = useHistory();
 
     if (checkLogin) {
         history.push('/profile')
@@ -16,22 +16,19 @@ const Login = ({onLogin = null, checkLogin = false, promiseLoginStatus, payloadL
     if (localStorage.authToken) {
         history.push('/profile')
     }
+
     if (loginNetworkError) {
         history.push('/404')
     }
 
-    // useEffect(()=>{
-    //     if(checkLogin) {
-    //         history.push('/profile')
-    //     }
-    // }, [checkLogin])
-
     const loginRef = useRef(null)
     const pasRef = useRef(null)
 
     const [login, setLogin] = useState("")
     const [password, setPassword] = useState("")
 
+    const RESOLVED = 'RESOLVED'
+
     return (
         <div className='login-wrapper'>
             <input
@@ -40,12 +37,12 @@ const Login = ({onLogin = null, checkLogin = false, promiseLoginStatus, payloadL
                 ref={loginRef}
                 onChange={(e) => setLogin(e.target.value)}
             />
-            {/* зачем нужен value? */}
-            {/* <input placeholder="Login" ref={loginRef} onChange={(e) => setLogin(e.target.value)}></input> */}
+
             <input
                 value={password}
                 placeholder="Password"
-                ref={pasRef} onChange={(e) => setPassword(e.target.value)} type="password"
+                ref={pasRef} onChange={(e) => setPassword(e.target.value)}
+                type="password"
             />
 
             <button onClick={() => onLogin(login, password)}>
@@ -56,7 +53,7 @@ const Login = ({onLogin = null, checkLogin = false, promiseLoginStatus, payloadL
                 <NavLink to="/registration">Registration</NavLink>
             </nav>
 
-            {promiseLoginStatus === 'RESOLVED' && payloadLogin === null && <LoginError/>}
+            {promiseLoginStatus === RESOLVED && payloadLogin === null && <LoginError/>}
         </div>
     )
 }

hipstagram/src/Content/Registration/Registration.css

@@ -24,7 +24,7 @@
     color: #000000;
 }
 
-.registration-wrapper button:hover {
+.button-hover:hover {
     color: #000000;
     background: #efe8e8;
     border: 2px solid greenyellow;

hipstagram/src/Content/Registration/Registration.js

@@ -10,9 +10,18 @@ const Registration = ({onRegistration}) => {
 
     const loginRef = useRef(null)
     const pasRef = useRef(null)
+    const confirmPasRef = useRef(null)
 
     const [login, setLogin] = useState("")
     const [password, setPassword] = useState("")
+    const [confirmPassword, setConfirmPassword] = useState("")
+    const [show, setShow] = useState(false)
+
+    const isRegistrationValid = () => {
+        if(!login || !password || !confirmPassword) return false
+        if(password !== confirmPassword) return false   // indexOf
+        else return true
+    }
 
     return (
         <div className='registration-wrapper'>
@@ -28,9 +37,26 @@ const Registration = ({onRegistration}) => {
                 onChange={(e) => setPassword(e.target.value)}
                 type="password"
             />
-            <input placeholder="Confirm Password"/>
+            <input
+                value={confirmPassword}
+                placeholder="Confirm Password"
+                ref={confirmPasRef}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                type="password"
+            />
 
-            <button onClick={() => onRegistration(login, password)}>
+            <button
+                onClick={() => {
+                    if(isRegistrationValid()) {
+                        onRegistration(login, password)
+                    }
+                    else {
+                        setShow(true)
+                    }
+                }}
+                // disabled={!isRegistrationValid()}
+                className={isRegistrationValid() ? 'button-hover': ''}
+            >
                 <b>Registration</b>
             </button>
 
@@ -39,7 +65,7 @@ const Registration = ({onRegistration}) => {
             </nav>
 
             <ExistingLoginError/>
-            <ConfirmPasswordError/>
+            {show && <ConfirmPasswordError/>}
         </div>
     )
 }