Merge pull request #106 from milesflo/master

Frontend Housekeeping

frontend/src/App.jsx

@@ -17,10 +17,12 @@ import Apps from './views/Apps';
 import AppCreator from './views/AppCreator';
 import Contact from './views/Contact';
 import Oauth2 from './views/Oauth2';
+
 import Dashboard from "./views/Dashboard";
 import AdminSetup from "./views/AdminSetup";
 import Admin from "./views/Admin";
 import Docs from "./views/Docs";
+
 import LandingPageNew from "./views/LandingpageNew";
 import LoginPage from "./views/LoginPage";
 import SettingsPage from "./views/SettingsPage";

frontend/src/components/Header.js

@@ -6,6 +6,7 @@ import {Link} from 'react-router-dom';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 
+
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import Button from '@material-ui/core/Button';
@@ -19,7 +20,8 @@ const hoverColor = "#f85a3e"
 const hoverOutColor = "#e8eaf6"
 
 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 [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
@@ -219,6 +221,7 @@ const Header = props => {
 							</Select>
 						</ListItem>
 					}
+
 				</List>
 			</div>
 	    </div>
@@ -299,10 +302,10 @@ const Header = props => {
 	const loadedCheck = isLoaded ? 
 		<div>
 			<BrowserView>
-      	{loginTextBrowser}
+      			{loginTextBrowser}
 			</BrowserView>
 			<MobileView>
-      	{loginTextMobile}
+      			{loginTextMobile}
 			</MobileView>
 		</div>
 		:
@@ -314,7 +317,7 @@ const Header = props => {
     	<div>
 			{loadedCheck}
 	    </div>
-  );
+  )
 }
 
 export default Header;

frontend/src/views/Admin.jsx

@@ -18,23 +18,16 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 
 import { useAlert } from "react-alert";
 
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
+import { Dialog, DialogTitle, DialogActions, DialogContent } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
+
 
-import AccessibilityNewIcon from '@material-ui/icons/AccessibilityNew';
 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 { globalUrl, } = props;
+	const { globalUrl } = props;
+
+	const theme = useTheme();
 	const [firstRequest, setFirstRequest] = React.useState(true);
 	const [modalUser, setModalUser] = React.useState({});
 	const [modalOpen, setModalOpen] = React.useState(false);
@@ -53,14 +46,14 @@ const Admin = (props) => {
 	const alert = useAlert()
 
 	const deleteAuthentication = (data) => {
-		alert.info("Deleting auth "+data.label)
+		alert.info("Deleting auth " + data.label)
 
 		// 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)
 		fetch(url, {
 			method: 'DELETE',
-	  	credentials: "include",
+			credentials: "include",
 			headers: {
 				'Content-Type': 'application/json',
 			},
@@ -86,34 +79,35 @@ const Admin = (props) => {
 		console.log("INPUT: ", data)
 
 		// 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)
 		fetch(url, {
 			method: 'DELETE',
-	  	credentials: "include",
+			credentials: "include",
 			headers: {
 				'Content-Type': 'application/json',
 			},
 		})
-		.then(response =>
-			response.json().then(responseJson => {
-				console.log("RESP: ", responseJson)
-				if (responseJson["success"] === false) {
-					alert.error("Failed stopping schedule")
-				} else {
-					getSchedules()
-					alert.success("Successfully stopped schedule!")
-				}
-			}),
-		)
-		.catch(error => {
-			console.log("Error in userdata: ", error)
-		});
+			.then(response =>
+				response.json().then(responseJson => {
+					console.log("RESP: ", responseJson)
+					if (responseJson["success"] === false) {
+						alert.error("Failed stopping schedule")
+					} else {
+						getSchedules()
+						alert.success("Successfully stopped schedule!")
+					}
+				}),
+			)
+			.catch(error => {
+				console.log("Error in userdata: ", error)
+			});
 	}
 
 	const onPasswordChange = () => {
-		const data = {"username": selectedUser.username, "newpassword": newPassword}
-		const url = globalUrl+'/api/v1/users/passwordchange';
+		const data = { "username": selectedUser.username, "newpassword": newPassword }
+		const url = globalUrl + '/api/v1/users/passwordchange';
+
 		fetch(url, {
 			mode: 'cors',
 			method: 'POST',
@@ -125,26 +119,26 @@ const Admin = (props) => {
 				'Content-Type': 'application/json; charset=utf-8',
 			},
 		})
-		.then(response =>
-			response.json().then(responseJson => {
-				if (responseJson["success"] === false) {
-					alert.error("Failed setting new password")
-				} else {
-					alert.success("Changed password!")
-				}
-			}),
-		)
-		.catch(error => {
-			alert.error("Err: "+error.toString())
-		});
+			.then(response =>
+				response.json().then(responseJson => {
+					if (responseJson["success"] === false) {
+						alert.error("Failed setting new password")
+					} else {
+						alert.success("Changed password!")
+					}
+				}),
+			)
+			.catch(error => {
+				alert.error("Err: " + error.toString())
+			});
 	}
 
 	const deleteUser = (data) => {
 		// Just use this one?
-		const url = globalUrl+'/api/v1/users/'+data.id
+		const url = globalUrl + '/api/v1/users/' + data.id
 		fetch(url, {
 			method: 'DELETE',
-	  	credentials: "include",
+			credentials: "include",
 			headers: {
 				'Content-Type': 'application/json',
 			},
@@ -174,36 +168,36 @@ const Admin = (props) => {
 		console.log("INPUT: ", data)
 
 		// Just use this one?
-		var data = {"username": data.Username, "password": data.Password}
+		var data = { "username": data.Username, "password": data.Password }
 		var baseurl = globalUrl
-		const url = baseurl+'/api/v1/users/register';
+		const url = baseurl + '/api/v1/users/register';
 		fetch(url, {
 			method: 'POST',
-	  	credentials: "include",
+			credentials: "include",
 			body: JSON.stringify(data),
 			headers: {
 				'Content-Type': 'application/json',
 			},
 		})
-		.then(response =>
-			response.json().then(responseJson => {
-				if (responseJson["success"] === false) {
-					setLoginInfo("Error in input: "+responseJson.reason)
-				} else {
-					setLoginInfo("")
-					setModalOpen(false)
-					getUsers()
-				}
-			}),
-		)
-		.catch(error => {
-			console.log("Error in userdata: ", error)
-		});
+			.then(response =>
+				response.json().then(responseJson => {
+					if (responseJson["success"] === false) {
+						setLoginInfo("Error in input: " + responseJson.reason)
+					} else {
+						setLoginInfo("")
+						setModalOpen(false)
+						getUsers()
+					}
+				}),
+			)
+			.catch(error => {
+				console.log("Error in userdata: ", error)
+			});
 	}
 
 	const deleteEnvironment = (name) => {
 		// FIXME - add some check here ROFL
-		alert.info("Deleting environment "+name)
+		alert.info("Deleting environment " + name)
 		var newEnv = []
 		for (var key in environments) {
 			if (environments[key].Name == name) {
@@ -214,26 +208,26 @@ const Admin = (props) => {
 		}
 
 		// Just use this one?
-		const url = globalUrl+'/api/v1/setenvironments';
+		const url = globalUrl + '/api/v1/setenvironments';
 		fetch(url, {
 			method: 'PUT',
-	  	credentials: "include",
+			credentials: "include",
 			body: JSON.stringify(newEnv),
 			headers: {
 				'Content-Type': 'application/json',
 			},
 		})
-		.then(response =>
-			response.json().then(responseJson => {
-				if (responseJson["success"] === false) {
-					alert.error(responseJson.reason)
-				} else {
-					setLoginInfo("")
-					setModalOpen(false)
-					getEnvironments()
-				}
-			}),
-		)
+			.then(response =>
+				response.json().then(responseJson => {
+					if (responseJson["success"] === false) {
+						alert.error(responseJson.reason)
+					} else {
+						setLoginInfo("")
+						setModalOpen(false)
+						getEnvironments()
+					}
+				}),
+			)
 		//.catch(error => {
 		//	console.log("Error in userdata: ", error)
 		//});
@@ -241,140 +235,140 @@ const Admin = (props) => {
 
 	const submitEnvironment = (data) => {
 		// FIXME - add some check here ROFL
-		environments.push({"name": data.environment, "type": "onprem"})
+		environments.push({ "name": data.environment, "type": "onprem" })
 
 		// Just use this one?
 		var baseurl = globalUrl
-		const url = baseurl+'/api/v1/setenvironments';
+		const url = baseurl + '/api/v1/setenvironments';
 		fetch(url, {
 			method: 'PUT',
-	  	credentials: "include",
+			credentials: "include",
 			body: JSON.stringify(environments),
 			headers: {
 				'Content-Type': 'application/json',
 			},
 		})
-		.then(response =>
-			response.json().then(responseJson => {
-				if (responseJson["success"] === false) {
-					setLoginInfo("Error in input: "+responseJson.reason)
-				} else {
-					setLoginInfo("")
-					setModalOpen(false)
-					getEnvironments()
-				}
-			}),
-		)
-		.catch(error => {
-			console.log("Error in userdata: ", error)
-		});
+			.then(response =>
+				response.json().then(responseJson => {
+					if (responseJson["success"] === false) {
+						setLoginInfo("Error in input: " + responseJson.reason)
+					} else {
+						setLoginInfo("")
+						setModalOpen(false)
+						getEnvironments()
+					}
+				}),
+			)
+			.catch(error => {
+				console.log("Error in userdata: ", error)
+			});
 	}
 
 	const getSchedules = () => {
-		fetch(globalUrl+"/api/v1/workflows/schedules", {
+		fetch(globalUrl + "/api/v1/workflows/schedules", {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',
 				'Accept': 'application/json',
 			},
 			credentials: "include",
-    })
-		.then((response) => {
-			if (response.status !== 200) {
-				console.log("Status not 200 for apps :O!")
-				return
-			}
+		})
+			.then((response) => {
+				if (response.status !== 200) {
+					console.log("Status not 200 for apps :O!")
+					return
+				}
 
-			return response.json()
-		})
-    .then((responseJson) => {
-			setSchedules(responseJson)
-		})
-		.catch(error => {
-			alert.error(error.toString())
-		});
+				return response.json()
+			})
+			.then((responseJson) => {
+				setSchedules(responseJson)
+			})
+			.catch(error => {
+				alert.error(error.toString())
+			});
 	}
 
 	const getAppAuthentication = () => {
-		fetch(globalUrl+"/api/v1/apps/authentication", {
+		fetch(globalUrl + "/api/v1/apps/authentication", {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',
 				'Accept': 'application/json',
 			},
 			credentials: "include",
-    })
-		.then((response) => {
-			if (response.status !== 200) {
-				console.log("Status not 200 for apps :O!")
-				return
-			}
+		})
+			.then((response) => {
+				if (response.status !== 200) {
+					console.log("Status not 200 for apps :O!")
+					return
+				}
 
-			return response.json()
-		})
-    .then((responseJson) => {
-			if (responseJson.success) {
-				console.log(responseJson.data)
-				setAuthentication(responseJson.data)
-			} else {
-				alert.error("Failed getting authentications")
-			}
-		})
-		.catch(error => {
-			alert.error(error.toString())
-		});
+				return response.json()
+			})
+			.then((responseJson) => {
+				if (responseJson.success) {
+					console.log(responseJson.data)
+					setAuthentication(responseJson.data)
+				} else {
+					alert.error("Failed getting authentications")
+				}
+			})
+			.catch(error => {
+				alert.error(error.toString())
+			});
 	}
 
 	const getEnvironments = () => {
-		fetch(globalUrl+"/api/v1/getenvironments", {
+		fetch(globalUrl + "/api/v1/getenvironments", {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',
 				'Accept': 'application/json',
 			},
 			credentials: "include",
-    })
-		.then((response) => {
-			if (response.status !== 200) {
-				console.log("Status not 200 for apps :O!")
-				return
-			}
+		})
+			.then((response) => {
+				if (response.status !== 200) {
+					console.log("Status not 200 for apps :O!")
+					return
+				}
 
-			return response.json()
-		})
-    .then((responseJson) => {
-			console.log(responseJson)
-			setEnvironments(responseJson)
-		})
-		.catch(error => {
-			alert.error(error.toString())
-		});
+				return response.json()
+			})
+			.then((responseJson) => {
+				console.log(responseJson)
+				setEnvironments(responseJson)
+			})
+			.catch(error => {
+				alert.error(error.toString())
+			});
 	}
 
 	const getUsers = () => {
-		fetch(globalUrl+"/api/v1/getusers", {
-				method: 'GET',
-				headers: {
-					'Content-Type': 'application/json',
-					'Accept': 'application/json',
-				},
-	  			credentials: "include",
-    		})
-		.then((response) => {
-			if (response.status !== 200) {
-				console.log("Status not 200 for apps :O!")
-				return
-			}
+		fetch(globalUrl + "/api/v1/getusers", {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+			},
+			credentials: "include",
+		})
+			.then((response) => {
+				if (response.status !== 200) {
+					console.log("Status not 200 for apps :O!")
+					return
+				}
 
-			return response.json()
-		})
-    .then((responseJson) => {
-			console.log(responseJson)
-			setUsers(responseJson)
-		})
-		.catch(error => {
-			alert.error(error.toString())
-		});
+				return response.json()
+			})
+			.then((responseJson) => {
+				console.log(responseJson)
+				setUsers(responseJson)
+			})
+			.catch(error => {
+				alert.error(error.toString())
+			});
 	}
 
 	if (firstRequest) {
@@ -386,7 +380,7 @@ const Admin = (props) => {
 		maxWidth: 1250,
 		margin: "auto",
 		color: "white",
-		backgroundColor: surfaceColor,
+		backgroundColor: theme.palette.surfaceColor,
 		marginBottom: 10,
 		padding: 20,
 	}
@@ -396,11 +390,11 @@ const Admin = (props) => {
 	}
 
 	const setUser = (userId, field, value) => {
-		const data = {"user_id": userId}
+		const data = { "user_id": userId }
 		data[field] = value
 		console.log("DATA: ", data)
 
-		fetch(globalUrl+"/api/v1/users/updateuser", {
+		fetch(globalUrl + "/api/v1/users/updateuser", {
 			method: 'PUT',
 			headers: {
 				'Content-Type': 'application/json',
@@ -409,33 +403,33 @@ const Admin = (props) => {
 			body: JSON.stringify(data),
 			credentials: "include",
 		})
-		.then((response) => {
-			if (response.status !== 200) {
-				console.log("Status not 200 for WORKFLOW EXECUTION :O!")
-			} else {
-				getUsers()
-			}
+			.then((response) => {
+				if (response.status !== 200) {
+					console.log("Status not 200 for WORKFLOW EXECUTION :O!")
+				} else {
+					getUsers()
+				}
 
-			return response.json()
-		})
-  	.then((responseJson) => {
-			if (!responseJson.success && responseJson.reason !== undefined) {
-				alert.error("Failed setting user: "+responseJson.reason)
-			} else {
-				alert.success("Set the user field "+field+" to "+value)
-			}
-    })
-		.catch(error => {
-    		console.log(error)
-		});
+				return response.json()
+			})
+			.then((responseJson) => {
+				if (!responseJson.success && responseJson.reason !== undefined) {
+					alert.error("Failed setting user: " + responseJson.reason)
+				} else {
+					alert.success("Set the user field " + field + " to " + value)
+				}
+			})
+			.catch(error => {
+				console.log(error)
+			});
 	}
 
 
 
 	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',
 			headers: {
 				'Content-Type': 'application/json',
@@ -444,48 +438,48 @@ const Admin = (props) => {
 			body: JSON.stringify(data),
 			credentials: "include",
 		})
-		.then((response) => {
-			if (response.status !== 200) {
-				console.log("Status not 200 for WORKFLOW EXECUTION :O!")
-			} else {
-				getUsers()
-			}
+			.then((response) => {
+				if (response.status !== 200) {
+					console.log("Status not 200 for WORKFLOW EXECUTION :O!")
+				} else {
+					getUsers()
+				}
 
-			return response.json()
-		})
-  	.then((responseJson) => {
-			console.log("RESP: ", responseJson)
-			if (!responseJson.success && responseJson.reason !== undefined) {
-				alert.error("Failed getting new: "+responseJson.reason)
-			} else {
-				alert.success("Got new API key")
-			}
-    })
-		.catch(error => {
-    		console.log(error)
-		});
+				return response.json()
+			})
+			.then((responseJson) => {
+				console.log("RESP: ", responseJson)
+				if (!responseJson.success && responseJson.reason !== undefined) {
+					alert.error("Failed getting new: " + responseJson.reason)
+				} else {
+					alert.success("Got new API key")
+				}
+			})
+			.catch(error => {
+				console.log(error)
+			});
 	}
 
 	const editAuthenticationModal =
-		<Dialog 
+		<Dialog modal
 			open={selectedAuthenticationModalOpen}
-			onClose={() => {setSelectedAuthenticationModalOpen(false)}}
+			onClose={() => { setSelectedAuthenticationModalOpen(false) }}
 			PaperProps={{
 				style: {
-					backgroundColor: surfaceColor,
+					backgroundColor: theme.palette.surfaceColor,
 					color: "white",
 					minWidth: "800px",
 					minHeight: "320px",
 				},
 			}}
 		>
-			<DialogTitle><span style={{color: "white"}}>Edit authentication</span></DialogTitle>
+			<DialogTitle><span style={{ color: "white" }}>Edit authentication</span></DialogTitle>
 			<DialogContent>
-				<div style={{display: "flex"}}>
+				<div style={{ display: "flex" }}>
 					<TextField
-						style={{backgroundColor: inputColor, flex: 3}}
+						style={{ backgroundColor: theme.palette.inputColor, flex: 3 }}
 						InputProps={{
-							style:{
+							style: {
 								height: 50,
 								color: "white",
 							},
@@ -502,7 +496,7 @@ const Admin = (props) => {
 						onChange={e => setNewPassword(e.target.value)}
 					/>
 					<Button
-						style={{maxHeight: 50, flex: 1}}
+						style={{ maxHeight: 50, flex: 1 }}
 						variant="outlined"
 						color="primary"
 						onClick={() => onPasswordChange()}
@@ -510,7 +504,7 @@ const Admin = (props) => {
 						Submit
 					</Button>
 				</div>
-				<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+				<Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
 				<Button
 					style={{}}
 					variant="outlined"
@@ -531,25 +525,25 @@ const Admin = (props) => {
 		</Dialog>
 
 	const editUserModal =
-		<Dialog 
+		<Dialog modal
 			open={selectedUserModalOpen}
-			onClose={() => {setSelectedUserModalOpen(false)}}
+			onClose={() => { setSelectedUserModalOpen(false) }}
 			PaperProps={{
 				style: {
-					backgroundColor: surfaceColor,
+					backgroundColor: theme.palette.surfaceColor,
 					color: "white",
 					minWidth: "800px",
 					minHeight: "320px",
 				},
 			}}
 		>
-			<DialogTitle><span style={{color: "white"}}>Edit user</span></DialogTitle>
+			<DialogTitle><span style={{ color: "white" }}>Edit user</span></DialogTitle>
 			<DialogContent>
-				<div style={{display: "flex"}}>
+				<div style={{ display: "flex" }}>
 					<TextField
-						style={{marginTop: 0, backgroundColor: inputColor, flex: 3}}
+						style={{ marginTop: 0, backgroundColor: theme.palette.inputColor, flex: 3 }}
 						InputProps={{
-							style:{
+							style: {
 								height: 50,
 								color: "white",
 							},
@@ -566,7 +560,7 @@ const Admin = (props) => {
 						onChange={e => setNewPassword(e.target.value)}
 					/>
 					<Button
-						style={{maxHeight: 50, flex: 1}}
+						style={{ maxHeight: 50, flex: 1 }}
 						variant="outlined"
 						color="primary"
 						onClick={() => onPasswordChange()}
@@ -574,7 +568,7 @@ const Admin = (props) => {
 						Submit
 					</Button>
 				</div>
-				<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+				<Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
 				<Button
 					style={{}}
 					variant="outlined"
@@ -595,20 +589,20 @@ const Admin = (props) => {
 		</Dialog>
 
 	const modalView =
-		<Dialog 
+		<Dialog modal
 			open={modalOpen}
-			onClose={() => {setModalOpen(false)}}
+			onClose={() => { setModalOpen(false) }}
 			PaperProps={{
 				style: {
-					backgroundColor: surfaceColor,
+					backgroundColor: theme.palette.surfaceColor,
 					color: "white",
 					minWidth: "800px",
 					minHeight: "320px",
 				},
 			}}
 		>
-			<DialogTitle><span style={{color: "white"}}>
-				{curTab === 0 ? "Add user" : curTab === 2 ? "Add environment" : "Add organization"}
+			<DialogTitle><span style={{ color: "white" }}>
+				{curTab === 0 ? "Add user" : "Add environment"}
 			</span></DialogTitle>
 			<DialogContent>
 				{curTab === 0 ?
@@ -616,10 +610,10 @@ const Admin = (props) => {
 						Username
 						<TextField
 							color="primary"
-							style={{backgroundColor: inputColor}}
+							style={{ backgroundColor: theme.palette.inputColor }}
 							autoFocus
 							InputProps={{
-								style:{
+								style: {
 									height: "50px",
 									color: "white",
 									fontSize: "1em",
@@ -637,9 +631,9 @@ const Admin = (props) => {
 						Password
 						<TextField
 							color="primary"
-							style={{backgroundColor: inputColor}}
+							style={{ backgroundColor: theme.palette.inputColor }}
 							InputProps={{
-								style:{
+								style: {
 									height: "50px",
 									color: "white",
 									fontSize: "1em",
@@ -656,60 +650,37 @@ const Admin = (props) => {
 							onChange={(event) => changeModalData("Password", event.target.value)}
 						/>
 					</div>
-				: curTab === 2 ?
-				<div>
-					Environment Name	
+					: curTab === 2 ?
+						<div>
+							Environment 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("environment", event.target.value)}
-					/>
-					</div>
-				: 
-					<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>
-				}
+								color="primary"
+								style={{ backgroundColor: theme.palette.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("environment", event.target.value)}
+							/>
+						</div>
+						: null}
 				{loginInfo}
 			</DialogContent>
 			<DialogActions>
-				<Button style={{borderRadius: "0px"}} onClick={() => setModalOpen(false)} color="primary">
+				<Button style={{ borderRadius: "0px" }} onClick={() => setModalOpen(false)} color="primary">
 					Cancel
 				</Button>
-				<Button variant="contained" style={{borderRadius: "0px"}} onClick={() => {
+				<Button variant="contained" style={{ borderRadius: "0px" }} onClick={() => {
 					if (curTab === 0) {
 						submitUser(modalUser)
 					} else if (curTab === 2) {
@@ -723,11 +694,11 @@ const Admin = (props) => {
 
 	const usersView = curTab === 0 ?
 		<div>
-			<div style={{marginTop: 20, marginBottom: 20,}}>
-				<h2 style={{display: "inline",}}>User management</h2>
-				<span style={{marginLeft: 25}}>Add, edit, block or change passwords</span>
+			<div style={{ marginTop: 20, marginBottom: 20, }}>
+				<h2 style={{ display: "inline", }}>User management</h2>
+				<span style={{ marginLeft: 25 }}>Add, edit, block or change passwords</span>
 			</div>
-			<div/>
+			<div />
 			<Button
 				style={{}}
 				variant="contained"
@@ -736,83 +707,87 @@ const Admin = (props) => {
 			>
 				Add user
 			</Button>
-			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
 			<List>
 				<ListItem>
 					<ListItemText
 						primary="Username"
-						style={{minWidth: 200, maxWidth: 200}}
+						style={{ minWidth: 200, maxWidth: 200 }}
 					/>
 					<ListItemText
 						primary="API key"
-						style={{minWidth: 350, maxWidth: 350, overflow: "hidden"}}
+						style={{ minWidth: 350, maxWidth: 350, overflow: "hidden" }}
 					/>
 					<ListItemText
 						primary="Role"
-						style={{minWidth: 150, maxWidth: 150}}
+						style={{ minWidth: 150, maxWidth: 150 }}
 					/>
 					<ListItemText
 						primary="Active"
-						style={{minWidth: 180, maxWidth: 180}}
+						style={{ minWidth: 180, maxWidth: 180 }}
 					/>
 					<ListItemText
 						primary="Actions"
-						style={{minWidth: 180, maxWidth: 180}}
+						style={{ minWidth: 180, maxWidth: 180 }}
 					/>
 				</ListItem>
 				{users === undefined ? null : users.map(data => {
 					return (
-						<ListItem key={data.id}>
+						<ListItem>
 							<ListItemText
 								primary={data.username}
-								style={{minWidth: 200, maxWidth: 200}}
+								style={{ minWidth: 200, maxWidth: 200 }}
 							/>
 							<ListItemText
 								primary={data.apikey === undefined || data.apikey.length === 0 ? "" : data.apikey}
-								style={{maxWidth: 350, minWidth: 350,}}
+								style={{ maxWidth: 350, minWidth: 350, }}
 							/>
 							<ListItemText
 								primary=
-									<Select
+									{<Select
+										PaperProps={{
+								style: {
+								}
+							}}
 										SelectDisplayProps={{
-											style: {
-												marginLeft: 10,
-											}
-										}}
+								style: {
+									marginLeft: 10,
+								}
+							}}
 										value={data.role}
 										fullWidth
 										onChange={(e) => {
-											console.log("VALUE: ", e.target.value)
-											setUser(data.id, "role", e.target.value)
-										}}
-										style={{backgroundColor: surfaceColor, color: "white", height: "50px"}}
+								console.log("VALUE: ", e.target.value)
+								setUser(data.id, "role", e.target.value)
+							}}
+										style={{ backgroundColor: theme.palette.surfaceColor, color: "white", height: "50px" }}
 										>
-										<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={"admin"}>
-											Admin
+							<MenuItem style={{ backgroundColor: theme.palette.inputColor, color: "white" }} value={"admin"}>
+								Admin
 										</MenuItem>
-										<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={"user"}>
-											User
+							<MenuItem style={{ backgroundColor: theme.palette.inputColor, color: "white" }} value={"user"}>
+								User
 										</MenuItem>
-									</Select>
-								style={{minWidth: 150, maxWidth: 150}}
+									</Select>}
+								style = {{ minWidth: 150, maxWidth: 150}}
 							/>
 							<ListItemText
-								primary={data.active ? "True" : "False"}
-								style={{minWidth: 180, maxWidth: 180}}
-							/>
-							<ListItemText style={{display: "flex"}}>
-								<Button 
-									style={{}} 
-									variant="outlined"
-									color="primary"
-									onClick={() => {
-										setSelectedUserModalOpen(true)
-										setSelectedUser(data)
-									}}
-								>
-									Edit user
+					primary={data.active ? "True" : "False"}
+					style={{ minWidth: 180, maxWidth: 180 }}
+				/>
+				<ListItemText style={{ display: "flex" }}>
+					<Button
+						style={{}}
+						variant="outlined"
+						color="primary"
+						onClick={() => {
+							setSelectedUserModalOpen(true)
+							setSelectedUser(data)
+						}}
+					>
+						Edit user
 								</Button>
-							</ListItemText>
+				</ListItemText>
 						</ListItem>
 					)
 				})}