Added loading to login and admin user creation

This commit is contained in:
frikky
2021-05-26 12:39:07 +02:00
parent cfab53012e
commit 06b74cf4da
5 changed files with 52 additions and 41 deletions
+1
View File
@@ -100,6 +100,7 @@ services:
- 9200:9200
networks:
- shuffle
# OLD DATABASE:
#database:
# #build: ./backend/database
# image: frikky/shuffle:database
+9 -5
View File
@@ -2,9 +2,7 @@
import React, {useState} from 'react';
import { makeStyles } from '@material-ui/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import {CircularProgress, TextField, Button, Paper, Typography} from '@material-ui/core'
const bodyDivStyle = {
margin: "auto",
@@ -35,6 +33,7 @@ const AdminAccount = props => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [firstRequest, setFirstRequest] = useState(true);
const [loginLoading, setLoginLoading] = useState(false);
// Used to swap from login to register. True = login, false = register
const register = true
@@ -81,6 +80,7 @@ const AdminAccount = props => {
}
const onSubmit = (e) => {
setLoginLoading(true)
e.preventDefault()
// FIXME - add some check here ROFL
@@ -97,6 +97,7 @@ const AdminAccount = props => {
})
.then(response =>
response.json().then(responseJson => {
setLoginLoading(false)
if (responseJson["success"] === false) {
setLoginInfo(responseJson["reason"])
} else {
@@ -106,6 +107,7 @@ const AdminAccount = props => {
}),
)
.catch(error => {
setLoginLoading(false)
setLoginInfo("Error in userdata: ", error)
});
}
@@ -161,7 +163,7 @@ const AdminAccount = props => {
id="emailfield"
margin="normal"
variant="outlined"
onChange={onChangeUser}
onChange={onChangeUser}
/>
</div>
Password
@@ -191,7 +193,9 @@ const AdminAccount = props => {
/>
</div>
<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 style={{marginTop: "10px"}}>
+7 -10
View File
@@ -1721,7 +1721,7 @@ const AngularWorkflow = (props) => {
if (data.type === "ACTION") {
var curaction = workflow.actions.find(a => a.id === data.id)
console.log("INSIDE CURACTION: ", curaction)
//console.log("INSIDE CURACTION: ", curaction)
if (!curaction || curaction === undefined) {
//event.target.unselect()
//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)))))
console.log("APP: ", curapp)
//console.log("APP: ", curapp)
if (!curapp || curapp === undefined) {
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)
setRequiresAuthentication(curapp.authentication.required && curapp.authentication.parameters !== undefined && curapp.authentication.parameters !== null)
if (curapp.authentication.required) {
console.log("App requires auth.")
//console.log("App requires auth.")
// Setup auth here :)
const authenticationOptions = []
var findAuthId = ""
@@ -1761,7 +1761,7 @@ const AngularWorkflow = (props) => {
}
var tmpAuth = JSON.parse(JSON.stringify(newAppAuth))
console.log("FOUND AUTH: ", tmpAuth)
//console.log("FOUND AUTH: ", tmpAuth)
//console.log("Checking authentication: ", tmpAuth)
for (var key in tmpAuth) {
@@ -1781,7 +1781,7 @@ const AngularWorkflow = (props) => {
}
}
console.log("OPTIONS: ", authenticationOptions)
//console.log("OPTIONS: ", authenticationOptions)
curaction.authentication = authenticationOptions
//console.log("Authentication: ", authenticationOptions)
if (curaction.selectedAuthentication === null || curaction.selectedAuthentication === undefined || curaction.selectedAuthentication.length === "") {
@@ -1794,11 +1794,8 @@ const AngularWorkflow = (props) => {
}
//setSelectedAction(JSON.parse(JSON.stringify(curaction)))
console.log("CURAPP: ", curapp, selectedApp)
if (curapp.id !== selectedApp.id) {
setSelectedApp(curapp)
}
//console.log("CURAPP: ", curapp, selectedApp)
setSelectedApp(curapp)
setSelectedAction(curaction)
cy.removeListener('drag')
+26 -20
View File
@@ -243,6 +243,9 @@ const Apps = (props) => {
privateapps.push(...invalid)
setApps(privateapps)
//handleSearchChange(event.target.value)
//setCursearch(event.target.value)
setFilteredApps(privateapps)
if (privateapps.length > 0) {
if (selectedApp.id === undefined || selectedApp.id === null) {
@@ -995,26 +998,29 @@ const Apps = (props) => {
</span>
}
</div>
<TextField
style={{backgroundColor: inputColor, borderRadius: 5,}}
InputProps={{
style:{
color: "white",
minHeight: "50px",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
borderRadius: 5,
},
}}
fullWidth
color="primary"
placeholder={"Search apps"}
onChange={(event) => {
handleSearchChange(event.target.value)
setCursearch(event.target.value)
}}
/>
<div style={{height: 50}}>
<TextField
style={{backgroundColor: inputColor, borderRadius: 5,}}
InputProps={{
style:{
color: "white",
minHeight: "50px",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
borderRadius: 5,
},
}}
disabled={apps === undefined || apps === null || apps.length === 0}
fullWidth
color="primary"
placeholder={"Search apps"}
onChange={(event) => {
handleSearchChange(event.target.value)
setCursearch(event.target.value)
}}
/>
</div>
<div style={{marginTop: 15}}>
{apps.length > 0 ?
filteredApps.length > 0 ?
+9 -6
View File
@@ -2,9 +2,7 @@
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import {CircularProgress, TextField, Button, Paper, Typography} from '@material-ui/core'
import { useTheme } from '@material-ui/core/styles';
@@ -33,6 +31,7 @@ const LoginDialog = props => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [firstRequest, setFirstRequest] = useState(true);
const [loginLoading, setLoginLoading] = useState(false);
// Used to swap from login to register. True = login, false = register
@@ -69,7 +68,7 @@ const LoginDialog = props => {
}),
)
.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) => {
setLoginLoading(true)
e.preventDefault()
setLoginInfo("")
// FIXME - add some check here ROFL
@@ -101,6 +101,7 @@ const LoginDialog = props => {
})
.then(response =>
response.json().then(responseJson => {
setLoginLoading(false)
if (responseJson["success"] === false) {
setLoginInfo(responseJson["reason"])
} else {
@@ -116,6 +117,7 @@ const LoginDialog = props => {
}),
)
.catch(error => {
setLoginLoading(false)
setLoginInfo("Error logging in: " + error)
});
} else {
@@ -231,8 +233,9 @@ const LoginDialog = props => {
/>
</div>
<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 style={{ marginTop: "10px" }}>
{loginInfo}