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>
@@ -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,10 +46,10 @@ 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',
@@ -86,7 +79,7 @@ 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',
@@ -112,8 +105,9 @@ const Admin = (props) => {
 	}
 
 	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',
@@ -135,13 +129,13 @@ const Admin = (props) => {
 				}),
 			)
 			.catch(error => {
-			alert.error("Err: "+error.toString())
+				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",
@@ -174,9 +168,9 @@ 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",
@@ -188,7 +182,7 @@ const Admin = (props) => {
 			.then(response =>
 				response.json().then(responseJson => {
 					if (responseJson["success"] === false) {
-					setLoginInfo("Error in input: "+responseJson.reason)
+						setLoginInfo("Error in input: " + responseJson.reason)
 					} else {
 						setLoginInfo("")
 						setModalOpen(false)
@@ -203,7 +197,7 @@ const Admin = (props) => {
 
 	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,7 +208,7 @@ 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",
@@ -241,11 +235,11 @@ 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",
@@ -257,7 +251,7 @@ const Admin = (props) => {
 			.then(response =>
 				response.json().then(responseJson => {
 					if (responseJson["success"] === false) {
-					setLoginInfo("Error in input: "+responseJson.reason)
+						setLoginInfo("Error in input: " + responseJson.reason)
 					} else {
 						setLoginInfo("")
 						setModalOpen(false)
@@ -271,7 +265,7 @@ const Admin = (props) => {
 	}
 
 	const getSchedules = () => {
-		fetch(globalUrl+"/api/v1/workflows/schedules", {
+		fetch(globalUrl + "/api/v1/workflows/schedules", {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',
@@ -296,7 +290,7 @@ const Admin = (props) => {
 	}
 
 	const getAppAuthentication = () => {
-		fetch(globalUrl+"/api/v1/apps/authentication", {
+		fetch(globalUrl + "/api/v1/apps/authentication", {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',
@@ -326,7 +320,7 @@ const Admin = (props) => {
 	}
 
 	const getEnvironments = () => {
-		fetch(globalUrl+"/api/v1/getenvironments", {
+		fetch(globalUrl + "/api/v1/getenvironments", {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',
@@ -352,7 +346,7 @@ const Admin = (props) => {
 	}
 
 	const getUsers = () => {
-		fetch(globalUrl+"/api/v1/getusers", {
+		fetch(globalUrl + "/api/v1/getusers", {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',
@@ -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',
@@ -420,9 +414,9 @@ const Admin = (props) => {
 			})
 			.then((responseJson) => {
 				if (!responseJson.success && responseJson.reason !== undefined) {
-				alert.error("Failed setting user: "+responseJson.reason)
+					alert.error("Failed setting user: " + responseJson.reason)
 				} else {
-				alert.success("Set the user field "+field+" to "+value)
+					alert.success("Set the user field " + field + " to " + value)
 				}
 			})
 			.catch(error => {
@@ -433,9 +427,9 @@ const Admin = (props) => {
 
 
 	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',
@@ -456,7 +450,7 @@ const Admin = (props) => {
 			.then((responseJson) => {
 				console.log("RESP: ", responseJson)
 				if (!responseJson.success && responseJson.reason !== undefined) {
-				alert.error("Failed getting new: "+responseJson.reason)
+					alert.error("Failed getting new: " + responseJson.reason)
 				} else {
 					alert.success("Got new API key")
 				}
@@ -467,25 +461,25 @@ const Admin = (props) => {
 	}
 
 	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",
@@ -661,10 +655,10 @@ const Admin = (props) => {
 							Environment Name
 					<TextField
 								color="primary"
-						style={{backgroundColor: inputColor}}
+								style={{ backgroundColor: theme.palette.inputColor }}
 								autoFocus
 								InputProps={{
-							style:{
+									style: {
 										height: "50px",
 										color: "white",
 										fontSize: "1em",
@@ -679,37 +673,14 @@ const Admin = (props) => {
 								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>
-				}
+						: 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,44 +707,48 @@ 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,
@@ -785,22 +760,22 @@ const Admin = (props) => {
 								console.log("VALUE: ", 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
 										</MenuItem>
-										<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={"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}}
+					style={{ minWidth: 180, maxWidth: 180 }}
 				/>
-							<ListItemText style={{display: "flex"}}>
+				<ListItemText style={{ display: "flex" }}>
 					<Button
 						style={{}}
 						variant="outlined"