tbs093a
/
music.service.frontend
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

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

develop
TBS093A 2020-07-25 22:50:18 +02:00
parent 02679b51d8
commit a12f2ee802
2 changed files with 69 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/index/indexConsole/commands/fetchCommands/Login.js
View File

@ -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 => {
setMessage( response['error'] )
})
.then( response => {
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'
+ 'password: ' + hidePassword( passwInput.current.value ) + '\n'
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 )
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
}

75
src/components/index/indexConsole/indexConsole.js
View File

@ -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() )
else if ( inputValue === 'login' ) {
setConsoleHistory( consoleHistory + consoleUser )
setVisibleLoginForm( !loginCommand )
if ( user.username !== '' ) {
if ( inputValue === 'help' ){
setConsoleHistory( consoleHistory + consoleUser + commands.helpUser() )
} 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'