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 - 9200:9200
networks: networks:
- shuffle - shuffle
# OLD DATABASE:
#database: #database:
# #build: ./backend/database # #build: ./backend/database
# image: frikky/shuffle:database # image: frikky/shuffle:database
+9 -5
View File
@@ -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"}}>
+7 -10
View File
@@ -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
View File
@@ -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 ?
+9 -6
View File
@@ -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}