hipstagram/src/Actions/action_login.js

@@ -44,7 +44,9 @@ export const actionLogin = (login, password) => async (dispatch) => {
     if(result?.data?.login) {
         console.log(result.data.login)
         dispatch(actionAuthLogin(result.data.login))
-    } else {
+    } else if(result?.data?.createUser === null) {
+        console.log('User name is exist')
+    }else {
         console.log("Authorization failed")
         dispatch(actionLoginNetworkError())
         setTimeout(() => {actionLoginNetworkErrorReset()}, 5000)

hipstagram/src/Components/Button/Button.css

@@ -0,0 +1,35 @@
+.button-active {
+    margin-top: 15px;
+    width: 10%;
+    background: #fff;
+    padding: 10px 0;
+    border-radius: 5px;
+    border: 2px solid #3578e5;
+    color: #000000;
+}
+
+.button-active:hover {
+    color: #fff;
+    background: #3578e5;
+    border-color: #fff;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-out;
+}
+
+.button-disabled {
+    border: 1px solid grey;
+    margin-top: 15px;
+    width: 10%;
+    background: #fff;
+    padding: 10px 0;
+    border-radius: 5px;
+    color: #000000;
+}
+
+.button-disabled:hover {
+    border: 2px solid #e08110;
+    background: #949496;
+    color: #e08110;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-out;
+}

hipstagram/src/Components/Button/Button.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Button.css';
+
+const Button = (props) => {
+    return(
+        <button
+            onClick={(e) => {
+                props.callback(e)
+            }}
+            className={props.isValid ? 'button-active': 'button-disabled'}
+        >
+            <b>{props.name}</b>
+        </button>
+    )
+}
+
+export default Button;

hipstagram/src/Content/Login/Login.css

@@ -14,21 +14,21 @@
     border-color: #3578e5;
 }
 
-.login-wrapper button {
-    margin-top: 15px;
-    width: 10%;
-    background: #fff;
-    padding: 10px 0;
-    border-radius: 5px;
-    border: 2px solid #3578e5;
-    color: #000000;
-}
+/*.login-wrapper button {*/
+/*    margin-top: 15px;*/
+/*    width: 10%;*/
+/*    background: #fff;*/
+/*    padding: 10px 0;*/
+/*    border-radius: 5px;*/
+/*    border: 2px solid #3578e5;*/
+/*    color: #000000;*/
+/*}*/
 
-.login-wrapper button:hover {
-    color: #000000;
-    background: #efe8e8;
-    border: 2px solid greenyellow;
-}
+/*.login-wrapper button:hover {*/
+/*    color: #000000;*/
+/*    background: #efe8e8;*/
+/*    border: 2px solid greenyellow;*/
+/*}*/
 
 .login-wrapper__link {
     text-align: center;

hipstagram/src/Content/Login/Login.js

@@ -4,6 +4,7 @@ import {NavLink, useHistory} from 'react-router-dom';
 import {actionLogin} from '../../Actions/action_login';
 import LoginError from '../../Components/LoginError/LoginError';
 import './Login.css';
+import Button from "../../Components/Button/Button";
 
 const Login = ({onLogin = null, checkLogin = false, promiseLoginStatus, payloadLogin, loginNetworkError}) => {    //деструктуризация объекта
 
@@ -45,9 +46,15 @@ const Login = ({onLogin = null, checkLogin = false, promiseLoginStatus, payloadL
                 type='password'
             />
 
-            <button onClick={() => onLogin(login, password)}>
-                <b>Login</b>
-            </button>
+            {/*<button onClick={() => onLogin(login, password)}>*/}
+            {/*    <b>Login</b>*/}
+            {/*</button>*/}
+
+            <Button
+                name='Login2'
+                isValid={true}
+                callback={() => onLogin(login, password)}
+            />
 
             <nav className='login-wrapper__link'>
                 <NavLink to='/registration'>Registration</NavLink>

hipstagram/src/Content/Registration/Registration.css

@@ -14,25 +14,9 @@
     border-color: #3578e5;
 }
 
-.registration-wrapper button {
-    margin-top: 15px;
-    width: 10%;
-    background: #fff;
-    padding: 10px 0;
-    border-radius: 5px;
-    border: 2px solid #3578e5;
-    color: #000000;
-}
-
-.button-hover:hover {
-    color: #000000;
-    background: #efe8e8;
-    border: 2px solid greenyellow;
-}
-
 .registration-wrapper__link {
     text-align: center;
     color: blue;
-    margin: 15px;
+    margin: 15px 0;
     text-decoration: none;
 }

hipstagram/src/Content/Registration/Registration.js

@@ -5,6 +5,7 @@ import ExistingLoginError from "../../Components/RegistrationError/ExistingLogin
 import ConfirmPasswordError from "../../Components/RegistrationError/ConfirmPasswordError";
 import {connect} from "react-redux";
 import {actionRegistrations} from "../../Actions/action_registration";
+import Button from "../../Components/Button/Button";
 
 const Registration = ({onRegistration}) => {
 
@@ -23,6 +24,15 @@ const Registration = ({onRegistration}) => {
         else return true
     }
 
+    const registrationCallback = () => {
+        if(isRegistrationValid()) {
+            onRegistration(login, password)
+        }
+        else {
+            setShow(true)
+        }
+    }
+
     return (
         <div className='registration-wrapper'>
             <input
@@ -45,20 +55,11 @@ const Registration = ({onRegistration}) => {
                 type="password"
             />
 
-            <button
-                onClick={() => {
-                    if(isRegistrationValid()) {
-                        onRegistration(login, password)
-                    }
-                    else {
-                        setShow(true)
-                    }
-                }}
-                // disabled={!isRegistrationValid()}
-                className={isRegistrationValid() ? 'button-hover': ''}
-            >
-                <b>Registration</b>
-            </button>
+            <Button
+                name='Registration'
+                isValid={isRegistrationValid()}
+                callback={registrationCallback}
+            />
 
             <nav className='registration-wrapper__link'>
                 <NavLink to="/login">Login</NavLink>