From 02679b51d8c61a515df4653de52d467232d49daa Mon Sep 17 00:00:00 2001
From: TBS093A <zukkamil.44@gmail.com>
Date: Sat, 25 Jul 2020 22:08:40 +0200
Subject: [PATCH] upgrade login component && implement fetch

---
 .../index/indexConsole/commands/commands.js   |  9 +++-
 .../commands/fetchCommands/Login.js           | 53 ++++++++++++++-----
 .../index/indexConsole/indexConsole.js        | 37 ++++++++++---
 src/stores/user/duck/operations.js            | 44 ++++++++-------
 4 files changed, 103 insertions(+), 40 deletions(-)

diff --git a/src/components/index/indexConsole/commands/commands.js b/src/components/index/indexConsole/commands/commands.js
index 33fb9ae..a0da69a 100644
--- a/src/components/index/indexConsole/commands/commands.js
+++ b/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
diff --git a/src/components/index/indexConsole/commands/fetchCommands/Login.js b/src/components/index/indexConsole/commands/fetchCommands/Login.js
index 183f4e8..ae1ab5f 100644
--- a/src/components/index/indexConsole/commands/fetchCommands/Login.js
+++ b/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 => {
-                setMessage(response['error'])
+        
+        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)
\ No newline at end of file
diff --git a/src/components/index/indexConsole/indexConsole.js b/src/components/index/indexConsole/indexConsole.js
index bef96b6..c1fabfa 100644
--- a/src/components/index/indexConsole/indexConsole.js
+++ b/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
\ No newline at end of file
+const mapStateToProps = state => ({
+    user: state.user
+})
+
+export default connect(mapStateToProps, )(IndexConsole)
\ No newline at end of file
diff --git a/src/stores/user/duck/operations.js b/src/stores/user/duck/operations.js
index ba307b2..3fe947d 100644
--- a/src/stores/user/duck/operations.js
+++ b/src/stores/user/duck/operations.js
@@ -15,27 +15,31 @@ export const postAuth = (username, password) => async (dispatch) => {
         username: username,
         password: password
     }
-    return await AppService._post(
-        endpoint + 'auth',
-        body,
-        AppService.defaultToken
-    ).then( response => {
-        try {
-            serviceUser = {
-                id: response.user.id,
-                username: response.user.username,
-                email: response.user.email,
-                ip: response.user.ip,
-                city: response.user.city,
-                country: response.user.country,
-                token: response.Authorization
+    try {
+        return await AppService._post(
+            endpoint + 'auth',
+            body,
+            AppService.defaultToken
+        ).then( response => {
+            try {
+                serviceUser = {
+                    id: response.user.id,
+                    username: response.user.username,
+                    email: response.user.email,
+                    ip: response.user.ip,
+                    city: response.user.city,
+                    country: response.user.country,
+                    token: response.Authorization
+                }
+                dispatch(actions.login(serviceUser))
+                return { error: 'login success' }
+            } catch {
+                return { error: 'login failed' }
             }
-            dispatch(actions.login(serviceUser))
-            return { error: 'login success' }
-        } catch {
-            return response
-        }
-    })
+        }) 
+    } catch {
+        return { error: 'connection failed' }
+    } 
 }
 
 export const deleteAuth = (token)  => async (dispatch) => {