upgrade login component && implement fetch

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

@@ -5,7 +5,13 @@ import ConsoleLoad from '../consoleLoad'
 const help = () => {
     return    "register                                            - register user by form \n"
             + "login                                               - login user by form \n"
-            + "logout                                              - logout user \n"
+            + "start                                               - start command \n"
+            + "    -a      --app                                   - app flag - start music service app \n"
+            + "clean                                               - clean screen \n"
+}
+
+const helpUser = () => {
+    return  "logout                                              - logout user \n"
             + "start                                               - start command \n"
             + "    -a      --app                                   - app flag - start music service app \n"
             + "clean                                               - clean screen \n"
@@ -34,6 +40,7 @@ const undefined = (command) => {
 
 export default {
     help,
+    helpUser,
     register,
     startApp,
     undefined

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

@@ -1,50 +1,76 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 
 import { postAuth } from '../../../../../stores/user/duck/operations'
 
 
-const Login = ({ user, postAuth }) => {
+const Login = ({ user, postAuth, consoleHistory, setConsoleHistory, componentVisible }) => {
     
     const loginInput = React.createRef()
     const passwInput = React.createRef()
 
     const [message, setMessage] = useState('')
 
-    const login = (event) => {
+    const login = async (event) => {
         event.preventDefault()
-        if ( loginInput.current.value !== '' &&
-        passwInput.current.value !== '') {
-            postAuth(
-                loginInput.current.value, 
-                passwInput.current.value
-            ).then( response => {
+        
+        let login = loginInput.current.value 
+        let password = passwInput.current.value
+
+        if ( login !== '' && password !== '') {
+            
+            postAuth(login, password)
+            .then( response => {
                 setMessage( response['error'] )
             })
-            document.getElementById('passwInput').disbled = true
-            document.getElementById('passwInput').disabled = true
+
         } else if ( passwInput.current.value === '' ) {
             document.getElementById('passwInput').focus()
         }
     }
     
+    useEffect( 
+        () => {
+            if (message !== '') {
+                let save = 'login: ' + loginInput.current.value  + '\n'
+                         + 'password: ' + hidePassword( passwInput.current.value ) + '\n'
+                         + message + '\n'
+
+                loginInput.current.value = ''
+                passwInput.current.value = ''
+
+                setConsoleHistory( consoleHistory + save )
+                componentVisible( false )
+                setMessage('')
+            }
+        }
+    )
+
+    const hidePassword = (password) => {
+        let hide = ''
+        for (let i = 0; i <= password.length; i++)
+            hide += '*'
+        return hide
+    }
+
     return (
         <div>
             <form onSubmit={ login }>
                 login:
                 <input 
                     id='loginInput'
+                    autoComplete='off'
                     ref={ loginInput }
                 />
                 <br />
                 password:
                 <input 
                     id='passwInput'
+                    autoComplete='off'
                     type='password'
                     ref={ passwInput }
                 />
                 <br />
-                { message }
                 <button type='submit' />
             </form>
         </div>
@@ -57,6 +83,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
     postAuth: (username, password) => dispatch( postAuth(username, password) )
+
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Login)

src/components/index/indexConsole/indexConsole.js

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react'
+import { connect } from 'react-redux'
 
 import commands from './commands/commands'
 import Login from './commands/fetchCommands/Login' 
-// import Logout from './commands/fetchCommands/Logout'
+import Logout from './commands/fetchCommands/Logout'
 
 import '../../../styles/general.scss'
 
 
-const IndexConsole = ( user ) => {
+const IndexConsole = ({ user }) => {
 
     useEffect( () => resizeConsoleDiv(), [])
 
@@ -28,7 +29,19 @@ const IndexConsole = ( user ) => {
 
     const consoleInput = React.createRef()
 
-    let consoleUser = 'guest@00x097 * >  '
+    let consoleUser = user.username !== '' 
+                    ? user.username + '@00x097 # >  ' 
+                    : 'guest@00x097 * >  '
+
+    useEffect(
+        () => {
+            if ( user.username !== '' ) {
+                consoleUser = user.username + '@00x097 # >  '
+            } else {
+                consoleUser = 'guest@00x097 * >  '
+            }
+        }
+    )
 
     const detectCommand = (event) => {
         event.preventDefault()
@@ -61,10 +74,18 @@ const IndexConsole = ( user ) => {
             </pre>
             <div id='inputForms'>
                 <div style={ loginCommand === true ? {display: 'block'} : {display: 'none'} } >
-                    <Login visible={ loginCommand } consoleHistory={ consoleHistory } />
+                    <Login 
+                        consoleHistory={ consoleHistory }
+                        setConsoleHistory={ setConsoleHistory } 
+                        componentVisible={ setVisibleLoginForm } 
+                    />
                 </div>
                 <div style={ logoutCommand === true ? {display: 'block'} : {display: 'none'} } >
-                    
+                    <Logout 
+                        consoleHistory={ consoleHistory }
+                        setConsoleHistory={ setConsoleHistory } 
+                        componentVisible={ setVisibleLogoutForm } 
+                    />
                 </div>
             </div>
             <form onSubmit={ detectCommand } style={ loginCommand || logoutCommand ? {display: 'none'} : {display: 'block'} }>
@@ -80,4 +101,8 @@ const IndexConsole = ( user ) => {
     )
 }
 
-export default IndexConsole
+const mapStateToProps = state => ({
+    user: state.user
+})
+
+export default connect(mapStateToProps, )(IndexConsole)

src/stores/user/duck/operations.js

@@ -15,6 +15,7 @@ export const postAuth = (username, password) => async (dispatch) => {
         username: username,
         password: password
     }
+    try {
         return await AppService._post(
             endpoint + 'auth',
             body,
@@ -33,9 +34,12 @@ export const postAuth = (username, password) => async (dispatch) => {
                 dispatch(actions.login(serviceUser))
                 return { error: 'login success' }
             } catch {
-            return response
+                return { error: 'login failed' }
             }
         }) 
+    } catch {
+        return { error: 'connection failed' }
+    } 
 }
 
 export const deleteAuth = (token)  => async (dispatch) => {