clean code -> Login.js && indexConsole.js

src/components/index/indexConsole/commands/fetchCommands/Login.js

@@ -4,7 +4,13 @@ import { connect } from 'react-redux'
 import { postAuth } from '../../../../../stores/user/duck/operations'
 
 
-const Login = ({ user, postAuth, consoleHistory, setConsoleHistory, componentVisible }) => {
+const Login = ({ 
+    user, 
+    postAuth, 
+    consoleHistory, setConsoleHistory, 
+    componentVisible, setComponentVisible,
+    activateConsoleInput
+}) => {
     
     const loginInput = React.createRef()
     const passwInput = React.createRef()
@@ -20,9 +26,9 @@ const Login = ({ user, postAuth, consoleHistory, setConsoleHistory, componentVis
         if ( login !== '' && password !== '') {
             
             postAuth(login, password)
-            .then( response => {
+                .then( response => {
-                setMessage( response['error'] )
+                    setMessage( response['error'] )
-            })
+                })
 
         } else if ( passwInput.current.value === '' ) {
             document.getElementById('passwInput').focus()
@@ -31,16 +37,21 @@ const Login = ({ user, postAuth, consoleHistory, setConsoleHistory, componentVis
     
     useEffect( 
         () => {
+            if ( componentVisible ) {
+                document.getElementById('loginInput').focus()
+            } else {
+                activateConsoleInput()
+            }
             if (message !== '') {
-                let save = 'login: ' + loginInput.current.value  + '\n'
+                let save = 'login:  ' + loginInput.current.value  + '\n'
-                         + 'password: ' + hidePassword( passwInput.current.value ) + '\n'
+                         + 'password:  ' + hidePassword( passwInput.current.value ) + '\n'
                          + message + '\n'
 
                 loginInput.current.value = ''
                 passwInput.current.value = ''
 
                 setConsoleHistory( consoleHistory + save )
-                componentVisible( false )
+                setComponentVisible( false )
                 setMessage('')
             }
         }
@@ -48,7 +59,7 @@ const Login = ({ user, postAuth, consoleHistory, setConsoleHistory, componentVis
 
     const hidePassword = (password) => {
         let hide = ''
-        for (let i = 0; i <= password.length; i++)
+        for (let i = 0; i < password.length; i++)
             hide += '*'
         return hide
     }

src/components/index/indexConsole/indexConsole.js

@@ -10,18 +10,6 @@ import '../../../styles/general.scss'
 
 const IndexConsole = ({ user }) => {
 
-    useEffect( () => resizeConsoleDiv(), [])
-
-    const resizeConsoleDiv = () => {
-        let consoleDiv = document.getElementById('consoleDiv')
-        consoleDiv.style.height = window.innerHeight - 100 + 'px'
-    }
-
-    const activateInput = () => {
-        let input = document.getElementById('consoleInput')
-        input.focus()
-    }
-
     const [consoleHistory, setConsoleHistory] = useState('')
 
     const [loginCommand, setVisibleLoginForm] = useState(false)
@@ -43,24 +31,55 @@ const IndexConsole = ({ user }) => {
         }
     )
 
+    useEffect( () => resizeConsoleDiv(), [])
+
+    const resizeConsoleDiv = () => {
+        let consoleDiv = document.getElementById('consoleDiv')
+        consoleDiv.style.height = window.innerHeight - 100 + 'px'
+    }
+
     const detectCommand = (event) => {
         event.preventDefault()
         let inputValue = consoleInput.current.value
         consoleUser += inputValue + '\n'
-        if ( inputValue === 'help' )
+
-            setConsoleHistory( consoleHistory + consoleUser + commands.help() )
+        if ( user.username !== '' ) {
-        else if ( inputValue === 'login' ) {
+            if ( inputValue === 'help' ){
-            setConsoleHistory( consoleHistory + consoleUser )
+                setConsoleHistory( consoleHistory + consoleUser + commands.helpUser() )
-            setVisibleLoginForm( !loginCommand )
+            } else if ( inputValue === 'logout' ) {
+                setConsoleHistory( consoleHistory + consoleUser )
+                setVisibleLogoutForm( !logoutCommand )
+            } else if ( inputValue === 'clean' ){
+                setConsoleHistory( '' )
+            } else {
+                setConsoleHistory( consoleHistory + consoleUser + commands.undefined(inputValue) )
+            } 
+        } else {
+            if ( inputValue === 'help' ){
+                setConsoleHistory( consoleHistory + consoleUser + commands.help() )
+            } else if ( inputValue === 'login' ) {
+                setConsoleHistory( consoleHistory + consoleUser )
+                setVisibleLoginForm( !loginCommand )
+            } else if ( inputValue === 'clean' ){
+                setConsoleHistory( '' )
+            } else {
+                setConsoleHistory( consoleHistory + consoleUser + commands.undefined(inputValue) )
+            } 
         }
-        else if ( inputValue === 'clean' )
-            setConsoleHistory( '' )
-        else
-            setConsoleHistory( consoleHistory + consoleUser + commands.undefined(inputValue) )
         consoleInput.current.value = ''
         activateInput()
     }
 
+    const activateInput = () => {
+        document.getElementById('consoleInput').focus()
+    }
+
+    const checkVisible = ( bool ) => {
+        return bool 
+            ? { display: 'block' } 
+            : { display: 'none' }
+    }
+
     return (
         <div id='consoleDiv' onClick={ activateInput }>
             <div id='consoleInfo'>
@@ -73,22 +92,26 @@ const IndexConsole = ({ user }) => {
                     { consoleHistory }
             </pre>
             <div id='inputForms'>
-                <div style={ loginCommand === true ? {display: 'block'} : {display: 'none'} } >
+                <div style={ checkVisible( loginCommand ) } >
                     <Login 
                         consoleHistory={ consoleHistory }
                         setConsoleHistory={ setConsoleHistory }
-                        componentVisible={ setVisibleLoginForm } 
+                        componentVisible={ loginCommand }
+                        setComponentVisible={ setVisibleLoginForm }
+                        activateConsoleInput={ activateInput }
                     />
                 </div>
-                <div style={ logoutCommand === true ? {display: 'block'} : {display: 'none'} } >
+                <div style={ checkVisible( logoutCommand ) } >
                     <Logout 
                         consoleHistory={ consoleHistory }
                         setConsoleHistory={ setConsoleHistory } 
-                        componentVisible={ setVisibleLogoutForm } 
+                        componentVisible={ logoutCommand }
+                        setComponentVisible={ setVisibleLogoutForm }
+                        activateConsoleInput={ activateInput }
                     />
                 </div>
             </div>
-            <form onSubmit={ detectCommand } style={ loginCommand || logoutCommand ? {display: 'none'} : {display: 'block'} }>
+            <form onSubmit={ detectCommand } style={ checkVisible( !(loginCommand || logoutCommand) ) }>
                 { consoleUser }
                 <input 
                     id='consoleInput'