Added loading to login and admin user creation
This commit is contained in:
@@ -100,6 +100,7 @@ services:
|
|||||||
- 9200:9200
|
- 9200:9200
|
||||||
networks:
|
networks:
|
||||||
- shuffle
|
- shuffle
|
||||||
|
# OLD DATABASE:
|
||||||
#database:
|
#database:
|
||||||
# #build: ./backend/database
|
# #build: ./backend/database
|
||||||
# image: frikky/shuffle:database
|
# image: frikky/shuffle:database
|
||||||
|
|||||||
@@ -2,9 +2,7 @@
|
|||||||
import React, {useState} from 'react';
|
import React, {useState} from 'react';
|
||||||
import { makeStyles } from '@material-ui/styles';
|
import { makeStyles } from '@material-ui/styles';
|
||||||
|
|
||||||
import TextField from '@material-ui/core/TextField';
|
import {CircularProgress, TextField, Button, Paper, Typography} from '@material-ui/core'
|
||||||
import Button from '@material-ui/core/Button';
|
|
||||||
import Paper from '@material-ui/core/Paper';
|
|
||||||
|
|
||||||
const bodyDivStyle = {
|
const bodyDivStyle = {
|
||||||
margin: "auto",
|
margin: "auto",
|
||||||
@@ -35,6 +33,7 @@ const AdminAccount = props => {
|
|||||||
const [username, setUsername] = useState("");
|
const [username, setUsername] = useState("");
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
const [firstRequest, setFirstRequest] = useState(true);
|
const [firstRequest, setFirstRequest] = useState(true);
|
||||||
|
const [loginLoading, setLoginLoading] = useState(false);
|
||||||
|
|
||||||
// Used to swap from login to register. True = login, false = register
|
// Used to swap from login to register. True = login, false = register
|
||||||
const register = true
|
const register = true
|
||||||
@@ -81,6 +80,7 @@ const AdminAccount = props => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onSubmit = (e) => {
|
const onSubmit = (e) => {
|
||||||
|
setLoginLoading(true)
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
// FIXME - add some check here ROFL
|
// FIXME - add some check here ROFL
|
||||||
|
|
||||||
@@ -97,6 +97,7 @@ const AdminAccount = props => {
|
|||||||
})
|
})
|
||||||
.then(response =>
|
.then(response =>
|
||||||
response.json().then(responseJson => {
|
response.json().then(responseJson => {
|
||||||
|
setLoginLoading(false)
|
||||||
if (responseJson["success"] === false) {
|
if (responseJson["success"] === false) {
|
||||||
setLoginInfo(responseJson["reason"])
|
setLoginInfo(responseJson["reason"])
|
||||||
} else {
|
} else {
|
||||||
@@ -106,6 +107,7 @@ const AdminAccount = props => {
|
|||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
|
setLoginLoading(false)
|
||||||
setLoginInfo("Error in userdata: ", error)
|
setLoginInfo("Error in userdata: ", error)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -161,7 +163,7 @@ const AdminAccount = props => {
|
|||||||
id="emailfield"
|
id="emailfield"
|
||||||
margin="normal"
|
margin="normal"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
onChange={onChangeUser}
|
onChange={onChangeUser}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
Password
|
Password
|
||||||
@@ -191,7 +193,9 @@ const AdminAccount = props => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={{display: "flex", marginTop: "15px"}}>
|
<div style={{display: "flex", marginTop: "15px"}}>
|
||||||
<Button color="primary" variant="contained" type="submit" style={{flex: "1", marginRight: "5px"}} disabled={!handleValidateForm()}>SUBMIT</Button>
|
<Button color="primary" variant="contained" type="submit" style={{flex: "1", marginRight: "5px"}} disabled={!handleValidateForm() || loginLoading}>
|
||||||
|
{loginLoading ? <CircularProgress color="secondary" style={{color: "white",}} /> : "SUBMIT"}
|
||||||
|
</Button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div style={{marginTop: "10px"}}>
|
<div style={{marginTop: "10px"}}>
|
||||||
|
|||||||
@@ -1721,7 +1721,7 @@ const AngularWorkflow = (props) => {
|
|||||||
|
|
||||||
if (data.type === "ACTION") {
|
if (data.type === "ACTION") {
|
||||||
var curaction = workflow.actions.find(a => a.id === data.id)
|
var curaction = workflow.actions.find(a => a.id === data.id)
|
||||||
console.log("INSIDE CURACTION: ", curaction)
|
//console.log("INSIDE CURACTION: ", curaction)
|
||||||
if (!curaction || curaction === undefined) {
|
if (!curaction || curaction === undefined) {
|
||||||
//event.target.unselect()
|
//event.target.unselect()
|
||||||
//alert.error("Action not found. Please remake it.")
|
//alert.error("Action not found. Please remake it.")
|
||||||
@@ -1729,7 +1729,7 @@ const AngularWorkflow = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const curapp = apps.find(a => a.name === curaction.app_name && ((a.app_version === curaction.app_version || (a.loop_versions !== null && a.loop_versions.includes(curaction.app_version)))))
|
const curapp = apps.find(a => a.name === curaction.app_name && ((a.app_version === curaction.app_version || (a.loop_versions !== null && a.loop_versions.includes(curaction.app_version)))))
|
||||||
console.log("APP: ", curapp)
|
//console.log("APP: ", curapp)
|
||||||
if (!curapp || curapp === undefined) {
|
if (!curapp || curapp === undefined) {
|
||||||
alert.error(`App ${curaction.app_name}:${curaction.app_version} not found. Is it activated?`)
|
alert.error(`App ${curaction.app_name}:${curaction.app_version} not found. Is it activated?`)
|
||||||
|
|
||||||
@@ -1752,7 +1752,7 @@ const AngularWorkflow = (props) => {
|
|||||||
//console.log("AUTHENTICATION: ", curapp.authentication)
|
//console.log("AUTHENTICATION: ", curapp.authentication)
|
||||||
setRequiresAuthentication(curapp.authentication.required && curapp.authentication.parameters !== undefined && curapp.authentication.parameters !== null)
|
setRequiresAuthentication(curapp.authentication.required && curapp.authentication.parameters !== undefined && curapp.authentication.parameters !== null)
|
||||||
if (curapp.authentication.required) {
|
if (curapp.authentication.required) {
|
||||||
console.log("App requires auth.")
|
//console.log("App requires auth.")
|
||||||
// Setup auth here :)
|
// Setup auth here :)
|
||||||
const authenticationOptions = []
|
const authenticationOptions = []
|
||||||
var findAuthId = ""
|
var findAuthId = ""
|
||||||
@@ -1761,7 +1761,7 @@ const AngularWorkflow = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
var tmpAuth = JSON.parse(JSON.stringify(newAppAuth))
|
var tmpAuth = JSON.parse(JSON.stringify(newAppAuth))
|
||||||
console.log("FOUND AUTH: ", tmpAuth)
|
//console.log("FOUND AUTH: ", tmpAuth)
|
||||||
|
|
||||||
//console.log("Checking authentication: ", tmpAuth)
|
//console.log("Checking authentication: ", tmpAuth)
|
||||||
for (var key in tmpAuth) {
|
for (var key in tmpAuth) {
|
||||||
@@ -1781,7 +1781,7 @@ const AngularWorkflow = (props) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("OPTIONS: ", authenticationOptions)
|
//console.log("OPTIONS: ", authenticationOptions)
|
||||||
curaction.authentication = authenticationOptions
|
curaction.authentication = authenticationOptions
|
||||||
//console.log("Authentication: ", authenticationOptions)
|
//console.log("Authentication: ", authenticationOptions)
|
||||||
if (curaction.selectedAuthentication === null || curaction.selectedAuthentication === undefined || curaction.selectedAuthentication.length === "") {
|
if (curaction.selectedAuthentication === null || curaction.selectedAuthentication === undefined || curaction.selectedAuthentication.length === "") {
|
||||||
@@ -1794,11 +1794,8 @@ const AngularWorkflow = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//setSelectedAction(JSON.parse(JSON.stringify(curaction)))
|
//setSelectedAction(JSON.parse(JSON.stringify(curaction)))
|
||||||
console.log("CURAPP: ", curapp, selectedApp)
|
//console.log("CURAPP: ", curapp, selectedApp)
|
||||||
if (curapp.id !== selectedApp.id) {
|
setSelectedApp(curapp)
|
||||||
setSelectedApp(curapp)
|
|
||||||
}
|
|
||||||
|
|
||||||
setSelectedAction(curaction)
|
setSelectedAction(curaction)
|
||||||
|
|
||||||
cy.removeListener('drag')
|
cy.removeListener('drag')
|
||||||
|
|||||||
+26
-20
@@ -243,6 +243,9 @@ const Apps = (props) => {
|
|||||||
privateapps.push(...invalid)
|
privateapps.push(...invalid)
|
||||||
|
|
||||||
setApps(privateapps)
|
setApps(privateapps)
|
||||||
|
|
||||||
|
//handleSearchChange(event.target.value)
|
||||||
|
//setCursearch(event.target.value)
|
||||||
setFilteredApps(privateapps)
|
setFilteredApps(privateapps)
|
||||||
if (privateapps.length > 0) {
|
if (privateapps.length > 0) {
|
||||||
if (selectedApp.id === undefined || selectedApp.id === null) {
|
if (selectedApp.id === undefined || selectedApp.id === null) {
|
||||||
@@ -995,26 +998,29 @@ const Apps = (props) => {
|
|||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<TextField
|
<div style={{height: 50}}>
|
||||||
style={{backgroundColor: inputColor, borderRadius: 5,}}
|
<TextField
|
||||||
InputProps={{
|
style={{backgroundColor: inputColor, borderRadius: 5,}}
|
||||||
style:{
|
InputProps={{
|
||||||
color: "white",
|
style:{
|
||||||
minHeight: "50px",
|
color: "white",
|
||||||
marginLeft: "5px",
|
minHeight: "50px",
|
||||||
maxWidth: "95%",
|
marginLeft: "5px",
|
||||||
fontSize: "1em",
|
maxWidth: "95%",
|
||||||
borderRadius: 5,
|
fontSize: "1em",
|
||||||
},
|
borderRadius: 5,
|
||||||
}}
|
},
|
||||||
fullWidth
|
}}
|
||||||
color="primary"
|
disabled={apps === undefined || apps === null || apps.length === 0}
|
||||||
placeholder={"Search apps"}
|
fullWidth
|
||||||
onChange={(event) => {
|
color="primary"
|
||||||
handleSearchChange(event.target.value)
|
placeholder={"Search apps"}
|
||||||
setCursearch(event.target.value)
|
onChange={(event) => {
|
||||||
}}
|
handleSearchChange(event.target.value)
|
||||||
/>
|
setCursearch(event.target.value)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div style={{marginTop: 15}}>
|
<div style={{marginTop: 15}}>
|
||||||
{apps.length > 0 ?
|
{apps.length > 0 ?
|
||||||
filteredApps.length > 0 ?
|
filteredApps.length > 0 ?
|
||||||
|
|||||||
@@ -2,9 +2,7 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { makeStyles } from '@material-ui/styles';
|
import { makeStyles } from '@material-ui/styles';
|
||||||
|
|
||||||
import TextField from '@material-ui/core/TextField';
|
import {CircularProgress, TextField, Button, Paper, Typography} from '@material-ui/core'
|
||||||
import Button from '@material-ui/core/Button';
|
|
||||||
import Paper from '@material-ui/core/Paper';
|
|
||||||
import { useTheme } from '@material-ui/core/styles';
|
import { useTheme } from '@material-ui/core/styles';
|
||||||
|
|
||||||
|
|
||||||
@@ -33,6 +31,7 @@ const LoginDialog = props => {
|
|||||||
const [username, setUsername] = useState("");
|
const [username, setUsername] = useState("");
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
const [firstRequest, setFirstRequest] = useState(true);
|
const [firstRequest, setFirstRequest] = useState(true);
|
||||||
|
const [loginLoading, setLoginLoading] = useState(false);
|
||||||
|
|
||||||
// Used to swap from login to register. True = login, false = register
|
// Used to swap from login to register. True = login, false = register
|
||||||
|
|
||||||
@@ -69,7 +68,7 @@ const LoginDialog = props => {
|
|||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
setLoginInfo("Error logging in: ", error)
|
setLoginInfo("Error logging in - please refresh in a minute: ", error)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -79,6 +78,7 @@ const LoginDialog = props => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onSubmit = (e) => {
|
const onSubmit = (e) => {
|
||||||
|
setLoginLoading(true)
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
setLoginInfo("")
|
setLoginInfo("")
|
||||||
// FIXME - add some check here ROFL
|
// FIXME - add some check here ROFL
|
||||||
@@ -101,6 +101,7 @@ const LoginDialog = props => {
|
|||||||
})
|
})
|
||||||
.then(response =>
|
.then(response =>
|
||||||
response.json().then(responseJson => {
|
response.json().then(responseJson => {
|
||||||
|
setLoginLoading(false)
|
||||||
if (responseJson["success"] === false) {
|
if (responseJson["success"] === false) {
|
||||||
setLoginInfo(responseJson["reason"])
|
setLoginInfo(responseJson["reason"])
|
||||||
} else {
|
} else {
|
||||||
@@ -116,6 +117,7 @@ const LoginDialog = props => {
|
|||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
|
setLoginLoading(false)
|
||||||
setLoginInfo("Error logging in: " + error)
|
setLoginInfo("Error logging in: " + error)
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@@ -231,8 +233,9 @@ const LoginDialog = props => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: "flex", marginTop: "15px" }}>
|
<div style={{ display: "flex", marginTop: "15px" }}>
|
||||||
<Button color="primary" variant="contained" type="submit" style={{ flex: "1", marginRight: "5px" }} disabled={!handleValidateForm()}>SUBMIT</Button>
|
<Button color="primary" variant="contained" type="submit" style={{ flex: "1", marginRight: "5px" }} disabled={!handleValidateForm() || loginLoading}>
|
||||||
|
{loginLoading ? <CircularProgress color="secondary" style={{color: "white",}} /> : "SUBMIT"}
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ marginTop: "10px" }}>
|
<div style={{ marginTop: "10px" }}>
|
||||||
{loginInfo}
|
{loginInfo}
|
||||||
|
|||||||
Reference in New Issue
Block a user