marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #106 from milesflo/master

Browse Source 
Frontend Housekeeping
This commit is contained in:
Frikky
2020-07-27 19:40:35 +09:00
committed by GitHub
parent c3f8971036 3f1cbcab81
commit 8bc288ff89
3 changed files with 343 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+2
View File
@@ -17,10 +17,12 @@ import Apps from './views/Apps';
import AppCreator from './views/AppCreator'; import AppCreator from './views/AppCreator';
import Contact from './views/Contact'; import Contact from './views/Contact';
import Oauth2 from './views/Oauth2'; import Oauth2 from './views/Oauth2';
import Dashboard from "./views/Dashboard"; import Dashboard from "./views/Dashboard";
import AdminSetup from "./views/AdminSetup"; import AdminSetup from "./views/AdminSetup";
import Admin from "./views/Admin"; import Admin from "./views/Admin";
import Docs from "./views/Docs"; import Docs from "./views/Docs";
import LandingPageNew from "./views/LandingpageNew"; import LandingPageNew from "./views/LandingpageNew";
import LoginPage from "./views/LoginPage"; import LoginPage from "./views/LoginPage";
import SettingsPage from "./views/SettingsPage"; import SettingsPage from "./views/SettingsPage";
frontend/src/components/Header.js
+7 -4
View File
@@ -6,6 +6,7 @@ import {Link} from 'react-router-dom';
import List from '@material-ui/core/List'; import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select'; import Select from '@material-ui/core/Select';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
@@ -19,7 +20,8 @@ const hoverColor = "#f85a3e"
const hoverOutColor = "#e8eaf6" const hoverOutColor = "#e8eaf6"
const Header = props => { const Header = props => {
const { surfaceColor, inputColor, globalUrl, isLoggedIn, removeCookie, homePage, isLoaded, userdata} = props;
const { globalUrl, isLoggedIn, removeCookie, homePage, isLoaded } = props;
const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor); const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor); const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
@@ -219,6 +221,7 @@ const Header = props => {
</Select> </Select>
</ListItem> </ListItem>
} }
</List> </List>
</div> </div>
</div> </div>
@@ -299,10 +302,10 @@ const Header = props => {
const loadedCheck = isLoaded ? const loadedCheck = isLoaded ?
<div> <div>
<BrowserView> <BrowserView>
{loginTextBrowser} {loginTextBrowser}
</BrowserView> </BrowserView>
<MobileView> <MobileView>
{loginTextMobile} {loginTextMobile}
</MobileView> </MobileView>
</div> </div>
: :
@@ -314,7 +317,7 @@ const Header = props => {
<div> <div>
{loadedCheck} {loadedCheck}
</div> </div>
); )
} }
export default Header; export default Header;
frontend/src/views/Admin.jsx
+304 -329
View File
@@ -18,23 +18,16 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import { useAlert } from "react-alert"; import { useAlert } from "react-alert";
import Dialog from '@material-ui/core/Dialog'; import { Dialog, DialogTitle, DialogActions, DialogContent } from '@material-ui/core';
import DialogTitle from '@material-ui/core/DialogTitle'; import { useTheme } from '@material-ui/core/styles';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import AccessibilityNewIcon from '@material-ui/icons/AccessibilityNew';
import CachedIcon from '@material-ui/icons/Cached'; import CachedIcon from '@material-ui/icons/Cached';
import LockIcon from '@material-ui/icons/Lock';
import BusinessIcon from '@material-ui/icons/Business';
import EcoIcon from '@material-ui/icons/Eco';
import ScheduleIcon from '@material-ui/icons/Schedule';
import CloudIcon from '@material-ui/icons/Cloud';
const surfaceColor = "#27292D"
const inputColor = "#383B40"
const Admin = (props) => { const Admin = (props) => {
const { globalUrl, } = props; const { globalUrl } = props;
const theme = useTheme();
const [firstRequest, setFirstRequest] = React.useState(true); const [firstRequest, setFirstRequest] = React.useState(true);
const [modalUser, setModalUser] = React.useState({}); const [modalUser, setModalUser] = React.useState({});
const [modalOpen, setModalOpen] = React.useState(false); const [modalOpen, setModalOpen] = React.useState(false);
@@ -53,14 +46,14 @@ const Admin = (props) => {
const alert = useAlert() const alert = useAlert()
const deleteAuthentication = (data) => { const deleteAuthentication = (data) => {
alert.info("Deleting auth "+data.label) alert.info("Deleting auth " + data.label)
// Just use this one? // Just use this one?
const url = globalUrl+'/api/v1/apps/authentication/'+data.id const url = globalUrl + '/api/v1/apps/authentication/' + data.id
console.log("URL: ", url) console.log("URL: ", url)
fetch(url, { fetch(url, {
method: 'DELETE', method: 'DELETE',
credentials: "include", credentials: "include",
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
@@ -86,34 +79,35 @@ const Admin = (props) => {
console.log("INPUT: ", data) console.log("INPUT: ", data)
// Just use this one? // Just use this one?
const url = globalUrl+'/api/v1/workflows/'+data["workflow_id"]+"/schedule/"+data.id const url = globalUrl + '/api/v1/workflows/' + data["workflow_id"] + "/schedule/" + data.id
console.log("URL: ", url) console.log("URL: ", url)
fetch(url, { fetch(url, {
method: 'DELETE', method: 'DELETE',
credentials: "include", credentials: "include",
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}) })
.then(response => .then(response =>
response.json().then(responseJson => { response.json().then(responseJson => {
console.log("RESP: ", responseJson) console.log("RESP: ", responseJson)
if (responseJson["success"] === false) { if (responseJson["success"] === false) {
alert.error("Failed stopping schedule") alert.error("Failed stopping schedule")
} else { } else {
getSchedules() getSchedules()
alert.success("Successfully stopped schedule!") alert.success("Successfully stopped schedule!")
} }
}), }),
) )
.catch(error => { .catch(error => {
console.log("Error in userdata: ", error) console.log("Error in userdata: ", error)
}); });
} }
const onPasswordChange = () => { const onPasswordChange = () => {
const data = {"username": selectedUser.username, "newpassword": newPassword} const data = { "username": selectedUser.username, "newpassword": newPassword }
const url = globalUrl+'/api/v1/users/passwordchange'; const url = globalUrl + '/api/v1/users/passwordchange';
fetch(url, { fetch(url, {
mode: 'cors', mode: 'cors',
method: 'POST', method: 'POST',
@@ -125,26 +119,26 @@ const Admin = (props) => {
'Content-Type': 'application/json; charset=utf-8', 'Content-Type': 'application/json; charset=utf-8',
}, },
}) })
.then(response => .then(response =>
response.json().then(responseJson => { response.json().then(responseJson => {
if (responseJson["success"] === false) { if (responseJson["success"] === false) {
alert.error("Failed setting new password") alert.error("Failed setting new password")
} else { } else {
alert.success("Changed password!") alert.success("Changed password!")
} }
}), }),
) )
.catch(error => { .catch(error => {
alert.error("Err: "+error.toString()) alert.error("Err: " + error.toString())
}); });
} }
const deleteUser = (data) => { const deleteUser = (data) => {
// Just use this one? // Just use this one?
const url = globalUrl+'/api/v1/users/'+data.id const url = globalUrl + '/api/v1/users/' + data.id
fetch(url, { fetch(url, {
method: 'DELETE', method: 'DELETE',
credentials: "include", credentials: "include",
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
@@ -174,36 +168,36 @@ const Admin = (props) => {
console.log("INPUT: ", data) console.log("INPUT: ", data)
// Just use this one? // Just use this one?
var data = {"username": data.Username, "password": data.Password} var data = { "username": data.Username, "password": data.Password }
var baseurl = globalUrl var baseurl = globalUrl
const url = baseurl+'/api/v1/users/register'; const url = baseurl + '/api/v1/users/register';
fetch(url, { fetch(url, {
method: 'POST', method: 'POST',
credentials: "include", credentials: "include",
body: JSON.stringify(data), body: JSON.stringify(data),
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}) })
.then(response => .then(response =>
response.json().then(responseJson => { response.json().then(responseJson => {
if (responseJson["success"] === false) { if (responseJson["success"] === false) {
setLoginInfo("Error in input: "+responseJson.reason) setLoginInfo("Error in input: " + responseJson.reason)
} else { } else {
setLoginInfo("") setLoginInfo("")
setModalOpen(false) setModalOpen(false)
getUsers() getUsers()
} }
}), }),
) )
.catch(error => { .catch(error => {
console.log("Error in userdata: ", error) console.log("Error in userdata: ", error)
}); });
} }
const deleteEnvironment = (name) => { const deleteEnvironment = (name) => {
// FIXME - add some check here ROFL // FIXME - add some check here ROFL
alert.info("Deleting environment "+name) alert.info("Deleting environment " + name)
var newEnv = [] var newEnv = []
for (var key in environments) { for (var key in environments) {
if (environments[key].Name == name) { if (environments[key].Name == name) {
@@ -214,26 +208,26 @@ const Admin = (props) => {
} }
// Just use this one? // Just use this one?
const url = globalUrl+'/api/v1/setenvironments'; const url = globalUrl + '/api/v1/setenvironments';
fetch(url, { fetch(url, {
method: 'PUT', method: 'PUT',
credentials: "include", credentials: "include",
body: JSON.stringify(newEnv), body: JSON.stringify(newEnv),
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}) })
.then(response => .then(response =>
response.json().then(responseJson => { response.json().then(responseJson => {
if (responseJson["success"] === false) { if (responseJson["success"] === false) {
alert.error(responseJson.reason) alert.error(responseJson.reason)
} else { } else {
setLoginInfo("") setLoginInfo("")
setModalOpen(false) setModalOpen(false)
getEnvironments() getEnvironments()
} }
}), }),
) )
//.catch(error => { //.catch(error => {
// console.log("Error in userdata: ", error) // console.log("Error in userdata: ", error)
//}); //});
@@ -241,140 +235,140 @@ const Admin = (props) => {
const submitEnvironment = (data) => { const submitEnvironment = (data) => {
// FIXME - add some check here ROFL // FIXME - add some check here ROFL
environments.push({"name": data.environment, "type": "onprem"}) environments.push({ "name": data.environment, "type": "onprem" })
// Just use this one? // Just use this one?
var baseurl = globalUrl var baseurl = globalUrl
const url = baseurl+'/api/v1/setenvironments'; const url = baseurl + '/api/v1/setenvironments';
fetch(url, { fetch(url, {
method: 'PUT', method: 'PUT',
credentials: "include", credentials: "include",
body: JSON.stringify(environments), body: JSON.stringify(environments),
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}) })
.then(response => .then(response =>
response.json().then(responseJson => { response.json().then(responseJson => {
if (responseJson["success"] === false) { if (responseJson["success"] === false) {
setLoginInfo("Error in input: "+responseJson.reason) setLoginInfo("Error in input: " + responseJson.reason)
} else { } else {
setLoginInfo("") setLoginInfo("")
setModalOpen(false) setModalOpen(false)
getEnvironments() getEnvironments()
} }
}), }),
) )
.catch(error => { .catch(error => {
console.log("Error in userdata: ", error) console.log("Error in userdata: ", error)
}); });
} }
const getSchedules = () => { const getSchedules = () => {
fetch(globalUrl+"/api/v1/workflows/schedules", { fetch(globalUrl + "/api/v1/workflows/schedules", {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Accept': 'application/json', 'Accept': 'application/json',
}, },
credentials: "include", credentials: "include",
}) })
.then((response) => { .then((response) => {
if (response.status !== 200) { if (response.status !== 200) {
console.log("Status not 200 for apps :O!") console.log("Status not 200 for apps :O!")
return return
} }
return response.json() return response.json()
}) })
.then((responseJson) => { .then((responseJson) => {
setSchedules(responseJson) setSchedules(responseJson)
}) })
.catch(error => { .catch(error => {
alert.error(error.toString()) alert.error(error.toString())
}); });
} }
const getAppAuthentication = () => { const getAppAuthentication = () => {
fetch(globalUrl+"/api/v1/apps/authentication", { fetch(globalUrl + "/api/v1/apps/authentication", {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Accept': 'application/json', 'Accept': 'application/json',
}, },
credentials: "include", credentials: "include",
}) })
.then((response) => { .then((response) => {
if (response.status !== 200) { if (response.status !== 200) {
console.log("Status not 200 for apps :O!") console.log("Status not 200 for apps :O!")
return return
} }
return response.json() return response.json()
}) })
.then((responseJson) => { .then((responseJson) => {
if (responseJson.success) { if (responseJson.success) {
console.log(responseJson.data) console.log(responseJson.data)
setAuthentication(responseJson.data) setAuthentication(responseJson.data)
} else { } else {
alert.error("Failed getting authentications") alert.error("Failed getting authentications")
} }
}) })
.catch(error => { .catch(error => {
alert.error(error.toString()) alert.error(error.toString())
}); });
} }
const getEnvironments = () => { const getEnvironments = () => {
fetch(globalUrl+"/api/v1/getenvironments", { fetch(globalUrl + "/api/v1/getenvironments", {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Accept': 'application/json', 'Accept': 'application/json',
}, },
credentials: "include", credentials: "include",
}) })
.then((response) => { .then((response) => {
if (response.status !== 200) { if (response.status !== 200) {
console.log("Status not 200 for apps :O!") console.log("Status not 200 for apps :O!")
return return
} }
return response.json() return response.json()
}) })
.then((responseJson) => { .then((responseJson) => {
console.log(responseJson) console.log(responseJson)
setEnvironments(responseJson) setEnvironments(responseJson)
}) })
.catch(error => { .catch(error => {
alert.error(error.toString()) alert.error(error.toString())
}); });
} }
const getUsers = () => { const getUsers = () => {
fetch(globalUrl+"/api/v1/getusers", { fetch(globalUrl + "/api/v1/getusers", {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Accept': 'application/json', 'Accept': 'application/json',
}, },
credentials: "include", credentials: "include",
}) })
.then((response) => { .then((response) => {
if (response.status !== 200) { if (response.status !== 200) {
console.log("Status not 200 for apps :O!") console.log("Status not 200 for apps :O!")
return return
} }
return response.json() return response.json()
}) })
.then((responseJson) => { .then((responseJson) => {
console.log(responseJson) console.log(responseJson)
setUsers(responseJson) setUsers(responseJson)
}) })
.catch(error => { .catch(error => {
alert.error(error.toString()) alert.error(error.toString())
}); });
} }
if (firstRequest) { if (firstRequest) {
@@ -386,7 +380,7 @@ const Admin = (props) => {
maxWidth: 1250, maxWidth: 1250,
margin: "auto", margin: "auto",
color: "white", color: "white",
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
marginBottom: 10, marginBottom: 10,
padding: 20, padding: 20,
} }
@@ -396,11 +390,11 @@ const Admin = (props) => {
} }
const setUser = (userId, field, value) => { const setUser = (userId, field, value) => {
const data = {"user_id": userId} const data = { "user_id": userId }
data[field] = value data[field] = value
console.log("DATA: ", data) console.log("DATA: ", data)
fetch(globalUrl+"/api/v1/users/updateuser", { fetch(globalUrl + "/api/v1/users/updateuser", {
method: 'PUT', method: 'PUT',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
@@ -409,33 +403,33 @@ const Admin = (props) => {
body: JSON.stringify(data), body: JSON.stringify(data),
credentials: "include", credentials: "include",
}) })
.then((response) => { .then((response) => {
if (response.status !== 200) { if (response.status !== 200) {
console.log("Status not 200 for WORKFLOW EXECUTION :O!") console.log("Status not 200 for WORKFLOW EXECUTION :O!")
} else { } else {
getUsers() getUsers()
} }
return response.json() return response.json()
}) })
.then((responseJson) => { .then((responseJson) => {
if (!responseJson.success && responseJson.reason !== undefined) { if (!responseJson.success && responseJson.reason !== undefined) {
alert.error("Failed setting user: "+responseJson.reason) alert.error("Failed setting user: " + responseJson.reason)
} else { } else {
alert.success("Set the user field "+field+" to "+value) alert.success("Set the user field " + field + " to " + value)
} }
}) })
.catch(error => { .catch(error => {
console.log(error) console.log(error)
}); });
} }
const generateApikey = (userId) => { const generateApikey = (userId) => {
const data = {"user_id": userId} const data = { "user_id": userId }
fetch(globalUrl+"/api/v1/generateapikey", { fetch(globalUrl + "/api/v1/generateapikey", {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
@@ -444,48 +438,48 @@ const Admin = (props) => {
body: JSON.stringify(data), body: JSON.stringify(data),
credentials: "include", credentials: "include",
}) })
.then((response) => { .then((response) => {
if (response.status !== 200) { if (response.status !== 200) {
console.log("Status not 200 for WORKFLOW EXECUTION :O!") console.log("Status not 200 for WORKFLOW EXECUTION :O!")
} else { } else {
getUsers() getUsers()
} }
return response.json() return response.json()
}) })
.then((responseJson) => { .then((responseJson) => {
console.log("RESP: ", responseJson) console.log("RESP: ", responseJson)
if (!responseJson.success && responseJson.reason !== undefined) { if (!responseJson.success && responseJson.reason !== undefined) {
alert.error("Failed getting new: "+responseJson.reason) alert.error("Failed getting new: " + responseJson.reason)
} else { } else {
alert.success("Got new API key") alert.success("Got new API key")
} }
}) })
.catch(error => { .catch(error => {
console.log(error) console.log(error)
}); });
} }
const editAuthenticationModal = const editAuthenticationModal =
<Dialog <Dialog modal
open={selectedAuthenticationModalOpen} open={selectedAuthenticationModalOpen}
onClose={() => {setSelectedAuthenticationModalOpen(false)}} onClose={() => { setSelectedAuthenticationModalOpen(false) }}
PaperProps={{ PaperProps={{
style: { style: {
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
color: "white", color: "white",
minWidth: "800px", minWidth: "800px",
minHeight: "320px", minHeight: "320px",
}, },
}} }}
> >
<DialogTitle><span style={{color: "white"}}>Edit authentication</span></DialogTitle> <DialogTitle><span style={{ color: "white" }}>Edit authentication</span></DialogTitle>
<DialogContent> <DialogContent>
<div style={{display: "flex"}}> <div style={{ display: "flex" }}>
<TextField <TextField
style={{backgroundColor: inputColor, flex: 3}} style={{ backgroundColor: theme.palette.inputColor, flex: 3 }}
InputProps={{ InputProps={{
style:{ style: {
height: 50, height: 50,
color: "white", color: "white",
}, },
@@ -502,7 +496,7 @@ const Admin = (props) => {
onChange={e => setNewPassword(e.target.value)} onChange={e => setNewPassword(e.target.value)}
/> />
<Button <Button
style={{maxHeight: 50, flex: 1}} style={{ maxHeight: 50, flex: 1 }}
variant="outlined" variant="outlined"
color="primary" color="primary"
onClick={() => onPasswordChange()} onClick={() => onPasswordChange()}
@@ -510,7 +504,7 @@ const Admin = (props) => {
Submit Submit
</Button> </Button>
</div> </div>
<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/> <Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
<Button <Button
style={{}} style={{}}
variant="outlined" variant="outlined"
@@ -531,25 +525,25 @@ const Admin = (props) => {
</Dialog> </Dialog>
const editUserModal = const editUserModal =
<Dialog <Dialog modal
open={selectedUserModalOpen} open={selectedUserModalOpen}
onClose={() => {setSelectedUserModalOpen(false)}} onClose={() => { setSelectedUserModalOpen(false) }}
PaperProps={{ PaperProps={{
style: { style: {
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
color: "white", color: "white",
minWidth: "800px", minWidth: "800px",
minHeight: "320px", minHeight: "320px",
}, },
}} }}
> >
<DialogTitle><span style={{color: "white"}}>Edit user</span></DialogTitle> <DialogTitle><span style={{ color: "white" }}>Edit user</span></DialogTitle>
<DialogContent> <DialogContent>
<div style={{display: "flex"}}> <div style={{ display: "flex" }}>
<TextField <TextField
style={{marginTop: 0, backgroundColor: inputColor, flex: 3}} style={{ marginTop: 0, backgroundColor: theme.palette.inputColor, flex: 3 }}
InputProps={{ InputProps={{
style:{ style: {
height: 50, height: 50,
color: "white", color: "white",
}, },
@@ -566,7 +560,7 @@ const Admin = (props) => {
onChange={e => setNewPassword(e.target.value)} onChange={e => setNewPassword(e.target.value)}
/> />
<Button <Button
style={{maxHeight: 50, flex: 1}} style={{ maxHeight: 50, flex: 1 }}
variant="outlined" variant="outlined"
color="primary" color="primary"
onClick={() => onPasswordChange()} onClick={() => onPasswordChange()}
@@ -574,7 +568,7 @@ const Admin = (props) => {
Submit Submit
</Button> </Button>
</div> </div>
<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/> <Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
<Button <Button
style={{}} style={{}}
variant="outlined" variant="outlined"
@@ -595,20 +589,20 @@ const Admin = (props) => {
</Dialog> </Dialog>
const modalView = const modalView =
<Dialog <Dialog modal
open={modalOpen} open={modalOpen}
onClose={() => {setModalOpen(false)}} onClose={() => { setModalOpen(false) }}
PaperProps={{ PaperProps={{
style: { style: {
backgroundColor: surfaceColor, backgroundColor: theme.palette.surfaceColor,
color: "white", color: "white",
minWidth: "800px", minWidth: "800px",
minHeight: "320px", minHeight: "320px",
}, },
}} }}
> >
<DialogTitle><span style={{color: "white"}}> <DialogTitle><span style={{ color: "white" }}>
{curTab === 0 ? "Add user" : curTab === 2 ? "Add environment" : "Add organization"} {curTab === 0 ? "Add user" : "Add environment"}
</span></DialogTitle> </span></DialogTitle>
<DialogContent> <DialogContent>
{curTab === 0 ? {curTab === 0 ?
@@ -616,10 +610,10 @@ const Admin = (props) => {
Username Username
<TextField <TextField
color="primary" color="primary"
style={{backgroundColor: inputColor}} style={{ backgroundColor: theme.palette.inputColor }}
autoFocus autoFocus
InputProps={{ InputProps={{
style:{ style: {
height: "50px", height: "50px",
color: "white", color: "white",
fontSize: "1em", fontSize: "1em",
@@ -637,9 +631,9 @@ const Admin = (props) => {
Password Password
<TextField <TextField
color="primary" color="primary"
style={{backgroundColor: inputColor}} style={{ backgroundColor: theme.palette.inputColor }}
InputProps={{ InputProps={{
style:{ style: {
height: "50px", height: "50px",
color: "white", color: "white",
fontSize: "1em", fontSize: "1em",
@@ -656,60 +650,37 @@ const Admin = (props) => {
onChange={(event) => changeModalData("Password", event.target.value)} onChange={(event) => changeModalData("Password", event.target.value)}
/> />
</div> </div>
: curTab === 2 ? : curTab === 2 ?
<div> <div>
Environment Name Environment Name
<TextField <TextField
color="primary" color="primary"
style={{backgroundColor: inputColor}} style={{ backgroundColor: theme.palette.inputColor }}
autoFocus autoFocus
InputProps={{ InputProps={{
style:{ style: {
height: "50px", height: "50px",
color: "white", color: "white",
fontSize: "1em", fontSize: "1em",
}, },
}} }}
required required
fullWidth={true} fullWidth={true}
placeholder="datacenter froglantern" placeholder="datacenter froglantern"
id="environment_name" id="environment_name"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
onChange={(event) => changeModalData("environment", event.target.value)} onChange={(event) => changeModalData("environment", event.target.value)}
/> />
</div> </div>
: : null}
<div>
Org Name
<TextField
color="primary"
style={{backgroundColor: inputColor}}
autoFocus
InputProps={{
style:{
height: "50px",
color: "white",
fontSize: "1em",
},
}}
required
fullWidth={true}
placeholder="datacenter froglantern"
id="environment_name"
margin="normal"
variant="outlined"
onChange={(event) => changeModalData("organization", event.target.value)}
/>
</div>
}
{loginInfo} {loginInfo}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button style={{borderRadius: "0px"}} onClick={() => setModalOpen(false)} color="primary"> <Button style={{ borderRadius: "0px" }} onClick={() => setModalOpen(false)} color="primary">
Cancel Cancel
</Button> </Button>
<Button variant="contained" style={{borderRadius: "0px"}} onClick={() => { <Button variant="contained" style={{ borderRadius: "0px" }} onClick={() => {
if (curTab === 0) { if (curTab === 0) {
submitUser(modalUser) submitUser(modalUser)
} else if (curTab === 2) { } else if (curTab === 2) {
@@ -723,11 +694,11 @@ const Admin = (props) => {
const usersView = curTab === 0 ? const usersView = curTab === 0 ?
<div> <div>
<div style={{marginTop: 20, marginBottom: 20,}}> <div style={{ marginTop: 20, marginBottom: 20, }}>
<h2 style={{display: "inline",}}>User management</h2> <h2 style={{ display: "inline", }}>User management</h2>
<span style={{marginLeft: 25}}>Add, edit, block or change passwords</span> <span style={{ marginLeft: 25 }}>Add, edit, block or change passwords</span>
</div> </div>
<div/> <div />
<Button <Button
style={{}} style={{}}
variant="contained" variant="contained"
@@ -736,83 +707,87 @@ const Admin = (props) => {
> >
Add user Add user
</Button> </Button>
<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/> <Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
<List> <List>
<ListItem> <ListItem>
<ListItemText <ListItemText
primary="Username" primary="Username"
style={{minWidth: 200, maxWidth: 200}} style={{ minWidth: 200, maxWidth: 200 }}
/> />
<ListItemText <ListItemText
primary="API key" primary="API key"
style={{minWidth: 350, maxWidth: 350, overflow: "hidden"}} style={{ minWidth: 350, maxWidth: 350, overflow: "hidden" }}
/> />
<ListItemText <ListItemText
primary="Role" primary="Role"
style={{minWidth: 150, maxWidth: 150}} style={{ minWidth: 150, maxWidth: 150 }}
/> />
<ListItemText <ListItemText
primary="Active" primary="Active"
style={{minWidth: 180, maxWidth: 180}} style={{ minWidth: 180, maxWidth: 180 }}
/> />
<ListItemText <ListItemText
primary="Actions" primary="Actions"
style={{minWidth: 180, maxWidth: 180}} style={{ minWidth: 180, maxWidth: 180 }}
/> />
</ListItem> </ListItem>
{users === undefined ? null : users.map(data => { {users === undefined ? null : users.map(data => {
return ( return (
<ListItem key={data.id}> <ListItem>
<ListItemText <ListItemText
primary={data.username} primary={data.username}
style={{minWidth: 200, maxWidth: 200}} style={{ minWidth: 200, maxWidth: 200 }}
/> />
<ListItemText <ListItemText
primary={data.apikey === undefined || data.apikey.length === 0 ? "" : data.apikey} primary={data.apikey === undefined || data.apikey.length === 0 ? "" : data.apikey}
style={{maxWidth: 350, minWidth: 350,}} style={{ maxWidth: 350, minWidth: 350, }}
/> />
<ListItemText <ListItemText
primary= primary=
<Select {<Select
PaperProps={{
style: {
}
}}
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
marginLeft: 10, marginLeft: 10,
} }
}} }}
value={data.role} value={data.role}
fullWidth fullWidth
onChange={(e) => { onChange={(e) => {
console.log("VALUE: ", e.target.value) console.log("VALUE: ", e.target.value)
setUser(data.id, "role", e.target.value) setUser(data.id, "role", e.target.value)
}} }}
style={{backgroundColor: surfaceColor, color: "white", height: "50px"}} style={{ backgroundColor: theme.palette.surfaceColor, color: "white", height: "50px" }}
> >
<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={"admin"}> <MenuItem style={{ backgroundColor: theme.palette.inputColor, color: "white" }} value={"admin"}>
Admin Admin
</MenuItem> </MenuItem>
<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={"user"}> <MenuItem style={{ backgroundColor: theme.palette.inputColor, color: "white" }} value={"user"}>
User User
</MenuItem> </MenuItem>
</Select> </Select>}
style={{minWidth: 150, maxWidth: 150}} style = {{ minWidth: 150, maxWidth: 150}}
/> />
<ListItemText <ListItemText
primary={data.active ? "True" : "False"} primary={data.active ? "True" : "False"}
style={{minWidth: 180, maxWidth: 180}} style={{ minWidth: 180, maxWidth: 180 }}
/> />
<ListItemText style={{display: "flex"}}> <ListItemText style={{ display: "flex" }}>
<Button <Button
style={{}} style={{}}
variant="outlined" variant="outlined"
color="primary" color="primary"
onClick={() => { onClick={() => {
setSelectedUserModalOpen(true) setSelectedUserModalOpen(true)
setSelectedUser(data) setSelectedUser(data)
}} }}
> >
Edit user Edit user
</Button> </Button>
</ListItemText> </ListItemText>
</ListItem> </ListItem>
) )
})} })}