Merge branch '1.0.0' into master

frontend/src/App.jsx

@@ -11,22 +11,18 @@ import Webhooks from "./views/Webhooks";
 import Workflows from "./views/Workflows";
 import EditWebhook from "./views/EditWebhook";
 import AngularWorkflow from "./views/AngularWorkflow";
-// import ForgotPassword from "./views/ForgotPassword";
-// import ForgotPasswordLink from "./components/ForgotPasswordLink";
 
 import Header from './components/Header';
 import Apps from './views/Apps';
 import AppCreator from './views/AppCreator';
 import Contact from './views/Contact';
 import Oauth2 from './views/Oauth2';
-// import About from "./views/About";
-// import Post from "./views/Post";
+
 import Dashboard from "./views/Dashboard";
 import AdminSetup from "./views/AdminSetup";
 import Admin from "./views/Admin";
 import Docs from "./views/Docs";
-// import RegisterLink from "./views/RegisterLink";
-// import LandingPage from "./views/Landingpage";
+
 import LandingPageNew from "./views/LandingpageNew";
 import LoginPage from "./views/LoginPage";
 import SettingsPage from "./views/SettingsPage";
@@ -165,4 +161,3 @@ const App = (message, props) => {
 };
 
 export default App;
-

frontend/src/components/Header.js

@@ -6,6 +6,9 @@ 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';
 import HomeIcon from '@material-ui/icons/Home';
 import PolymerIcon from '@material-ui/icons/Polymer';
@@ -17,7 +20,8 @@ const hoverColor = "#f85a3e"
 const hoverOutColor = "#e8eaf6"
 
 const Header = props => {
-  	const { globalUrl, isLoggedIn, removeCookie, homePage, isLoaded } = props;
+
+  const { globalUrl, isLoggedIn, removeCookie, homePage, isLoaded } = props;
 
 	const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
 	const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
@@ -100,7 +104,7 @@ const Header = props => {
 
 
 	// Handle top bar or something
-  	const loginTextBrowser = !isLoggedIn ? 
+  const loginTextBrowser = !isLoggedIn ? 
     	<div style={{display: "flex"}}>
 			<List style={{display: "flex", flexDirect: "row"}} component="nav">
 				<ListItem style={{textAlign: "center", marginLeft: "0px"}}>
@@ -192,6 +196,32 @@ const Header = props => {
 							</Button>
 						</Link>
 					</ListItem>
+					{userdata === undefined || userdata.orgs.length <= 1 ? null :
+						<ListItem>
+							<Select
+								SelectDisplayProps={{
+									style: {
+										marginLeft: 10,
+									}
+								}}
+								value={userdata.selected_org}
+								fullWidth
+								style={{backgroundColor: surfaceColor, color: "white", height: "50px"}}
+								onChange={(e) => {
+									console.log("SET ORG TO ", e.target.value)
+								}}
+								>
+								{userdata.orgs.map(data => {
+									return (
+										<MenuItem key={data.id} style={{backgroundColor: inputColor, color: "white"}} value={data}>
+											{data.name}
+										</MenuItem>
+									)
+								})}
+							</Select>
+						</ListItem>
+					}
+
 				</List>
 			</div>
 	    </div>
@@ -287,7 +317,7 @@ const Header = props => {
     	<div>
 			{loadedCheck}
 	    </div>
-  );
-};
+  )
+}
 
 export default Header;

frontend/src/views/Admin.jsx

@@ -1,7 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useEffect} from 'react';
 
-import { Link } from 'react-router-dom';
+import {Link} from 'react-router-dom';
 import Paper from '@material-ui/core/Paper';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import List from '@material-ui/core/List';
@@ -26,7 +28,6 @@ const Admin = (props) => {
 	const { globalUrl } = props;
 
 	const theme = useTheme();
-
 	const [firstRequest, setFirstRequest] = React.useState(true);
 	const [modalUser, setModalUser] = React.useState({});
 	const [modalOpen, setModalOpen] = React.useState(false);
@@ -57,20 +58,20 @@ const Admin = (props) => {
 				'Content-Type': 'application/json',
 			},
 		})
-			.then(response =>
-				response.json().then(responseJson => {
-					console.log("RESP: ", responseJson)
-					if (responseJson["success"] === false) {
-						alert.error("Failed stopping schedule")
-					} else {
-						getAppAuthentication()
-						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 {
+					getAppAuthentication() 
+					alert.success("Successfully stopped schedule!")
+				}
+			}),
+		)
+		.catch(error => {
+			console.log("Error in userdata: ", error)
+		});
 	}
 
 	const deleteSchedule = (data) => {
@@ -106,6 +107,7 @@ const Admin = (props) => {
 	const onPasswordChange = () => {
 		const data = { "username": selectedUser.username, "newpassword": newPassword }
 		const url = globalUrl + '/api/v1/users/passwordchange';
+
 		fetch(url, {
 			mode: 'cors',
 			method: 'POST',
@@ -141,24 +143,24 @@ const Admin = (props) => {
 				'Content-Type': 'application/json',
 			},
 		})
-			.then(response => {
-				if (response.status === 200) {
-					getUsers()
-				}
+		.then(response => {
+			if (response.status === 200) {
+				getUsers()
+			}
 
-				return response.json()
-			})
-			.then((responseJson) => {
-				if (!responseJson.success && responseJson.reason !== undefined) {
-					alert.error("Failed to deactivate user: " + responseJson.reason)
-				} else {
-					alert.success("Deactivated user " + data.id)
-				}
-			})
+			return response.json()
+		})
+    .then((responseJson) => {
+			if (!responseJson.success && responseJson.reason !== undefined) {
+				alert.error("Failed to deactivate user: "+responseJson.reason)
+			} else {
+				alert.success("Deactivated user "+data.id)
+			}
+		})
 
-			.catch(error => {
-				console.log("Error in userdata: ", error)
-			});
+		.catch(error => {
+			console.log("Error in userdata: ", error)
+		});
 	}
 
 	const submitUser = (data) => {
@@ -790,250 +792,342 @@ const Admin = (props) => {
 					)
 				})}
 			</List>
-		</div >
+		</div>
 		: null
 
-const schedulesView = curTab === 3 ?
-	<div>
-		<div style={{ marginTop: 20, marginBottom: 20, }}>
-			<h2 style={{ display: "inline", }}>Schedules</h2>
-			<span style={{ marginLeft: 25 }}>Schedules used in Workflows. Makes locating and control easier.</span>
-		</div>
-		<Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
-		<List>
-			<ListItem>
-				<ListItemText
-					primary="Interval (seconds)"
-					style={{ maxWidth: 200 }}
-				/>
-				<ListItemText
-					primary="Argument"
-					style={{ maxWidth: 400, overflow: "hidden" }}
-				/>
-				<ListItemText
-					primary="Actions"
-				/>
-			</ListItem>
-			{schedules === undefined || schedules === null ? null : schedules.map(schedule => {
-				return (
-					<ListItem>
-						<ListItemText
-							style={{ maxWidth: 200 }}
-							primary={schedule.seconds}
-						/>
-						<ListItemText
-							primary={schedule.argument}
-							style={{ maxWidth: 400, overflow: "hidden" }}
-						/>
-						<ListItemText>
-							<Button
-								style={{}}
-								variant="contained"
-								color="primary"
-								onClick={() => deleteSchedule(schedule)}
-							>
-								Delete
-								</Button>
-						</ListItemText>
-					</ListItem>
-				)
-			})}
-		</List>
-	</div>
-	: null
-
-const authenticationView = curTab === 1 ?
-	<div>
-		<div style={{ marginTop: 20, marginBottom: 20, }}>
-			<h2 style={{ display: "inline", }}>App Authentication</h2>
-			<span style={{ marginLeft: 25 }}>Control the authentication options for individual apps. <b>Actions can be destructive!</b></span>
-		</div>
-		<Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
-		<List>
-			<ListItem>
-				<ListItemText
-					primary="Icon"
-					style={{ minWidth: 150, maxWidth: 150 }}
-				/>
-				<ListItemText
-					primary="Label"
-					style={{ minWidth: 250, maxWidth: 250 }}
-				/>
-				<ListItemText
-					primary="App Name"
-					style={{ minWidth: 150, maxWidth: 150 }}
-				/>
-				<ListItemText
-					primary="Workflows"
-					style={{ minWidth: 150, maxWidth: 150, overflow: "hidden" }}
-				/>
-				<ListItemText
-					primary="Action amount"
-					style={{ minWidth: 150, maxWidth: 150, overflow: "hidden" }}
-				/>
-				<ListItemText
-					primary="Fields"
-					style={{ minWidth: 200, maxWidth: 200, overflow: "hidden" }}
-				/>
-				<ListItemText
-					primary="Actions"
-				/>
-			</ListItem>
-			{authentication === undefined ? null : authentication.map(data => {
-				return (
-					<ListItem>
-						<ListItemText
-							primary={<img alt="" src={data.app.large_image} style={{ maxWidth: 50, }} />}
-								style={{ minWidth: 150, maxWidth: 150 }}
+	const schedulesView = curTab === 3 ?
+		<div>
+			<div style={{marginTop: 20, marginBottom: 20,}}>
+				<h2 style={{display: "inline",}}>Schedules</h2>
+				<span style={{marginLeft: 25}}>Schedules used in Workflows. Makes locating and control easier.</span>
+			</div>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<List>
+				<ListItem>
+					<ListItemText
+						primary="Interval (seconds)"
+						style={{maxWidth: 200}}
+					/>
+					<ListItemText
+						primary="Argument"
+						style={{maxWidth: 400, overflow: "hidden"}}
+					/>
+					<ListItemText
+						primary="Actions"
+					/>
+				</ListItem>
+				{schedules === undefined || schedules === null ? null : schedules.map(schedule => {
+					return (
+						<ListItem>
+							<ListItemText
+								style={{maxWidth: 200}}
+								primary={schedule.seconds}
 							/>
-						<ListItemText
-							primary={data.label}
-							style={{ minWidth: 250, maxWidth: 250 }}
-						/>
-						<ListItemText
-							primary={data.app.name}
-							style={{ minWidth: 150, maxWidth: 150 }}
-						/>
-						<ListItemText
-							primary={data.usage.length}
-							style={{ minWidth: 150, maxWidth: 150, overflow: "hidden" }}
-						/>
-						<ListItemText
-							primary={data.node_count}
-							style={{ minWidth: 150, maxWidth: 150, overflow: "hidden" }}
-						/>
-						<ListItemText
-							primary={data.fields.map(data => {
-								return data.key
-							}).join(", ")}
-							style={{ minWidth: 200, maxWidth: 200, overflow: "hidden" }}
-						/>
-						<ListItemText>
-							<Button
-								style={{}}
-								variant="outlined"
-								color="primary"
-								onClick={() => {
-									deleteAuthentication(data)
-								}}
-							>
-								Delete
+							<ListItemText
+								primary={schedule.argument}
+								style={{maxWidth: 400, overflow: "hidden"}}
+							/>
+							<ListItemText>
+								<Button 
+									style={{}} 
+									variant="contained"
+									color="primary"
+									onClick={() => deleteSchedule(schedule)}
+								>
+									Delete	
 								</Button>
-						</ListItemText>
-					</ListItem>
-				)
-			})}
-		</List>
-	</div>
-	: null
-
-const environmentView = curTab === 2 ?
-	<div>
-		<div style={{ marginTop: 20, marginBottom: 20, }}>
-			<h2 style={{ display: "inline", }}>Environments</h2>
-			<span style={{ marginLeft: 25 }}>Decides what Orborus environment to execute an action in a workflow in.</span>
+							</ListItemText>
+						</ListItem>
+					)
+				})}
+			</List>
 		</div>
-		<Button
-			style={{}}
-			variant="contained"
-			color="primary"
-			onClick={() => setModalOpen(true)}
-		>
-			Add environment
+		: null
+
+	const authenticationView = curTab === 1 ?
+		<div>
+			<div style={{marginTop: 20, marginBottom: 20,}}>
+				<h2 style={{display: "inline",}}>App Authentication</h2>
+				<span style={{marginLeft: 25}}>Control the authentication options for individual apps. <b>Actions can be destructive!</b></span>
+			</div>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<List>
+				<ListItem>
+					<ListItemText
+						primary="Icon"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="Label"
+						style={{minWidth: 250, maxWidth: 250}}
+					/>
+					<ListItemText
+						primary="App Name"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="Workflows"
+						style={{minWidth: 150, maxWidth: 150, overflow: "hidden"}}
+					/>
+					<ListItemText
+						primary="Action amount"
+						style={{minWidth: 150, maxWidth: 150, overflow: "hidden"}}
+					/>
+					<ListItemText
+						primary="Fields"
+						style={{minWidth: 200, maxWidth: 200, overflow: "hidden"}}
+					/>
+					<ListItemText
+						primary="Actions"
+					/>
+				</ListItem>
+				{authentication === undefined ? null : authentication.map(data => {
+					return (
+						<ListItem>
+							<ListItemText
+								primary=<img alt="" src={data.app.large_image} style={{maxWidth: 50,}} />
+								style={{minWidth: 150, maxWidth: 150}}
+							/>
+							<ListItemText
+								primary={data.label}
+								style={{minWidth: 250, maxWidth: 250}}
+							/>
+							<ListItemText
+								primary={data.app.name}
+								style={{minWidth: 150, maxWidth: 150}}
+							/>
+							<ListItemText
+								primary={data.usage.length}
+								style={{minWidth: 150, maxWidth: 150, overflow: "hidden"}}
+							/>
+							<ListItemText
+								primary={data.node_count}
+								style={{minWidth: 150, maxWidth: 150, overflow: "hidden"}}
+							/>
+							<ListItemText
+								primary={data.fields.map(data => {
+									return data.key
+								}).join(", ")}
+								style={{minWidth: 200, maxWidth: 200, overflow: "hidden"}}
+							/>
+							<ListItemText>
+								<Button 
+									style={{}} 
+									variant="outlined"
+									color="primary"
+									onClick={() => {
+										deleteAuthentication(data)
+									}}
+								>
+									Delete	
+								</Button>
+							</ListItemText>
+						</ListItem>
+					)
+				})}
+			</List>
+		</div>
+		: null
+
+	const environmentView = curTab === 2 ?
+		<div>
+			<div style={{marginTop: 20, marginBottom: 20,}}>
+				<h2 style={{display: "inline",}}>Environments</h2>
+				<span style={{marginLeft: 25}}>Decides what Orborus environment to execute an action in a workflow in.</span>
+			</div>
+			<Button 
+				style={{}} 
+				variant="contained"
+				color="primary"
+				onClick={() => setModalOpen(true)}
+			> 
+				Add environment 
 			</Button>
-		<Button
-			style={{ marginLeft: 5, }}
-			variant="contained"
-			color="primary"
-			onClick={() => getEnvironments()}
-		>
-			<CachedIcon />
-		</Button>
-		<Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
-		<List>
-			<ListItem>
-				<ListItemText
-					primary="Name"
-					style={{ minWidth: 150, maxWidth: 150 }}
-				/>
-				<ListItemText
-					primary="Orborus running (TBD)"
-					style={{ minWidth: 200, maxWidth: 200 }}
-				/>
-				<ListItemText
-					primary="Actions"
-					style={{ minWidth: 150, maxWidth: 150 }}
-				/>
-			</ListItem>
-			{environments === undefined ? null : environments.map(environment => {
-				return (
-					<ListItem>
-						<ListItemText
-							primary={environment.Name}
-							style={{ minWidth: 150, maxWidth: 150, overflow: "hidden" }}
-						/>
-						<ListItemText
-							primary={"TBD"}
-							style={{ minWidth: 200, maxWidth: 200, overflow: "hidden" }}
-						/>
-						<ListItemText>
-							<Button type="outlined" style={{ borderRadius: "0px" }} onClick={() => deleteEnvironment(environment.Name)} color="primary">Delete</Button>
-						</ListItemText>
-					</ListItem>
-				)
-			})}
-		</List>
-	</div>
-	: null
+			<Button 
+				style={{marginLeft: 5, }} 
+				variant="contained"
+				color="primary"
+				onClick={() => getEnvironments()}
+			> 
+				<CachedIcon />
+			</Button>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<List>
+				<ListItem>
+					<ListItemText
+						primary="Name"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="Orborus running (TBD)"
+						style={{minWidth: 200, maxWidth: 200}}
+					/>
+					<ListItemText
+						primary="Actions"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+				</ListItem>
+				{environments === undefined ? null : environments.map(environment => {
+					return (
+						<ListItem>
+							<ListItemText
+								primary={environment.Name}
+								style={{minWidth: 150, maxWidth: 150, overflow: "hidden"}}
+							/>
+							<ListItemText
+								primary={"TBD"}
+								style={{minWidth: 200, maxWidth: 200, overflow: "hidden"}}
+							/>
+							<ListItemText>
+								<Button variant="outlined" style={{borderRadius: "0px"}} onClick={() => deleteEnvironment(environment.Name)} color="primary">Delete</Button>
+							</ListItemText>
+						</ListItem>
+					)
+				})}
+			</List>
+		</div>
+		: null
 
-// primary={environment.Registered ? "true" : "false"}
+	const organizationsTab = curTab === 5 ?
+		<div>
+			<div style={{marginTop: 20, marginBottom: 20,}}>
+				<h2 style={{display: "inline",}}>Organizations</h2>
+				<span style={{marginLeft: 25}}>Global admin: control organizations</span>
+			</div>
+			<Button 
+				style={{}} 
+				variant="contained"
+				color="primary"
+				onClick={() => setModalOpen(true)}
+			> 
+				Add organization 
+			</Button>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<List>
+				<ListItem>
+					<ListItemText
+						primary="Name"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="Orborus running (TBD)"
+						style={{minWidth: 200, maxWidth: 200}}
+					/>
+					<ListItemText
+						primary="Actions"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+				</ListItem>
+				<ListItem>
+					<ListItemText
+						primary="Enabled"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="false"
+						style={{minWidth: 200, maxWidth: 200}}
+					/>
+					<ListItemText
+						primary=<Switch checked={false} onChange={() => {console.log("INVERT")}} />
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+				</ListItem>
+			</List>
+		</div>
+		: null
 
-const setConfig = (event, newValue) => {
-	if (newValue === 1) {
-		getAppAuthentication()
-	} else if (newValue === 2) {
-		getEnvironments()
-	} else if (newValue === 3) {
-		getSchedules()
+	const hybridTab = curTab === 4 ?
+		<div>
+			<div style={{marginTop: 20, marginBottom: 20,}}>
+				<h2 style={{display: "inline",}}>Hybrid</h2>
+				<span style={{marginLeft: 25}}></span>
+			</div>
+			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<List>
+				<ListItem>
+					<ListItemText
+						primary="Name"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="Orborus running (TBD)"
+						style={{minWidth: 200, maxWidth: 200}}
+					/>
+					<ListItemText
+						primary="Actions"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+				</ListItem>
+				<ListItem>
+					<ListItemText
+						primary="Enabled"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="false"
+						style={{minWidth: 200, maxWidth: 200}}
+					/>
+					<ListItemText
+						primary=<Switch checked={false} onChange={() => {console.log("INVERT")}} />
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+				</ListItem>
+			</List>
+		</div>
+		: null
+
+		// primary={environment.Registered ? "true" : "false"}
+
+	const setConfig = (event, newValue) => {
+		if (newValue === 1) {
+			getAppAuthentication()
+		} else if (newValue === 2) {
+			getEnvironments()
+		} else if (newValue === 3) {
+			getSchedules()
+		}
+
+		setModalUser({})
+		setCurTab(newValue)
 	}
 
-	setModalUser({})
-	setCurTab(newValue)
+	const iconStyle = {marginRight: 10}
+	const data = 
+		<div style={{minWidth: 1366, margin: "auto"}}>
+			<Paper style={paperStyle}>
+				<Tabs
+					value={curTab}
+					indicatorColor="primary"
+					onChange={setConfig}
+					aria-label="disabled tabs example"
+				>
+					<Tab label=<span><AccessibilityNewIcon style={iconStyle} />Users</span> />
+					<Tab label=<span><LockIcon style={iconStyle} />App Authentication</span>/>
+					<Tab label=<span><EcoIcon style={iconStyle} />Environments</span>/>
+					<Tab label=<span><ScheduleIcon style={iconStyle} />Schedules</span> />
+					{window.location.protocol == "http:" && window.location.port === "3000" ? <Tab label=<span><CloudIcon style={iconStyle} /> Hybrid</span>/> : null}
+					{window.location.protocol == "http:" && window.location.port === "3000" ? <Tab label=<span><BusinessIcon style={iconStyle} /> Organizations</span>/> : null}
+				</Tabs>
+				<Divider style={{marginTop: 0, marginBottom: 10, backgroundColor: "rgb(91, 96, 100)"}} />
+				<div style={{padding: 15}}>
+					{authenticationView}
+					{usersView}	
+					{environmentView}
+					{schedulesView}
+					{hybridTab}
+					{organizationsTab}
+				</div>
+			</Paper>
+		</div>
+
+	return (
+		<div>
+			{modalView}
+			{editUserModal}
+			{editAuthenticationModal}
+			{data}
+		</div>
+	)
 }
 
-const data =
-	<div style={{ minWidth: 1366, margin: "auto" }}>
-		<Paper style={paperStyle}>
-			<Tabs
-				value={curTab}
-				indicatorColor="primary"
-				textColor="white"
-				onChange={setConfig}
-				aria-label="disabled tabs example"
-			>
-				<Tab label="Users" />
-				<Tab label="App Authentication" />
-				<Tab label="Environments" />
-				<Tab label="Schedules" />
-			</Tabs>
-			<Divider style={{ marginTop: 0, marginBottom: 10, backgroundColor: "rgb(91, 96, 100)" }} />
-			<div style={{ padding: 15 }}>
-				{authenticationView}
-				{usersView}
-				{environmentView}
-				{schedulesView}
-			</div>
-		</Paper>
-	</div>
-
-return (
-	<div>
-		{modalView}
-		{editUserModal}
-		{editAuthenticationModal}
-		{data}
-	</div>
-)
-}
-
-export default Admin;
+export default Admin 

frontend/src/views/AngularWorkflow.jsx

@@ -949,6 +949,10 @@ const AngularWorkflow = (props) => {
 				if (curaction.selectedAuthentication === null || curaction.selectedAuthentication === undefined || curaction.selectedAuthentication.length === "") {
 					curaction.selectedAuthentication = {}
 				}
+			} else {
+				curaction.authentication = []
+				curaction.authentication_id = ""
+				curaction.selectedAuthentication = {}
 			}
 
 			setSelectedApp(curapp)
@@ -2997,7 +3001,7 @@ const AngularWorkflow = (props) => {
 		paddingLeft: 10,
 		minHeight: "100%",
 		zIndex: 1000,
-		resize: "horizontal",
+		resize: "vertical",
 		overflow: "auto",
 	}
 
@@ -3512,14 +3516,6 @@ const AngularWorkflow = (props) => {
 					<div style={{flex: "10"}}> 
 						<b>{data.name} </b> 
 					</div>
-					<Tooltip color="primary" title="Static data" placement="top">
-						<div style={{cursor: "pointer", color: staticcolor}} onClick={(e) => {
-								e.preventDefault()
-								changeActionParameterVariant("STATIC_VALUE") 
-							}}>
-							<CreateIcon />
-						</div>
-					</Tooltip>
 				</div>	
 				{datafield}
 			</div>
@@ -3552,11 +3548,21 @@ const AngularWorkflow = (props) => {
 		<FormControl>
 			<DialogTitle><div style={{color:"white"}}>Condition</div></DialogTitle>
 				<DialogContent style={{display: "flex"}}>
+					<Tooltip color="primary" title={conditionValue.configuration ? "Negated" : "Default"} placement="top">
+						<Button color="primary" variant={conditionValue.configuration ? "contained" : "outlined"} style={{margin: "auto", height: 50, marginBottom: 0, marginRight: 5}} onClick={(e) => {
+							console.log("VALUE: ", conditionValue.configuration)
+							conditionValue.configuration = !conditionValue.configuration
+							setConditionValue(conditionValue)
+							setUpdate("condition "+conditionValue.configuration)
+						}}>
+							{conditionValue.configuration ? "!" : "="}
+						</Button>
+					</Tooltip>
 					<div style={{flex: "2"}}>
 						<AppConditionHandler tmpdata={sourceValue} setData={setSourceValue} type={"source"} />
 					</div>
-					<div style={{flex: "1", margin: "auto", marginBottom: "0px"}}>
-					    <Button color="primary" variant="outlined" style={{height: "50px",}} fullWidth aria-haspopup="true" onClick={(e) => {setVariableAnchorEl(e.currentTarget)}}>
+					<div style={{flex: "1", margin: "auto", marginBottom: 0, marginLeft: 5, marginRight: 5,}}>
+					  <Button color="primary" variant="outlined" style={{height: "50px",}} fullWidth aria-haspopup="true" onClick={(e) => {setVariableAnchorEl(e.currentTarget)}}>
 							{conditionValue.value}	
 						</Button>
 						<Menu
@@ -3620,8 +3626,7 @@ const AngularWorkflow = (props) => {
 								setVariableAnchorEl(null)
 							}} key={"less than"}>less than</MenuItem>
 						</Menu>
-
-					</div>
+					</div>	
 					<div style={{flex: "2"}}>
 						<AppConditionHandler tmpdata={destinationValue} setData={setDestinationValue} type={"destination"} />
 					</div>

frontend/src/views/Apps.jsx

@@ -286,7 +286,7 @@ const Apps = (props) => {
 		}
 
 		return (
-			<Paper square style={paperAppStyle} onClick={() => {
+			<Paper square key={data.id} style={paperAppStyle} onClick={() => {
 				if (selectedApp.id !== data.id) {
 					setSelectedApp(data)
 					console.log(data)
@@ -515,7 +515,7 @@ const Apps = (props) => {
 									newActionname = newActionname.replace("_", " ")
 									newActionname = newActionname.charAt(0).toUpperCase()+newActionname.substring(1)
 									return (
-										<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data}>
+										<MenuItem key={data.name} style={{backgroundColor: inputColor, color: "white"}} value={data}>
 											{newActionname}
 
 										</MenuItem>
@@ -540,7 +540,7 @@ const Apps = (props) => {
 
 								const circleSize = 10
 								return (
-									<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data}>
+									<MenuItem key={data.name} style={{backgroundColor: inputColor, color: "white"}} value={data}>
 										<div style={{width: circleSize, height: circleSize, borderRadius: circleSize / 2, backgroundColor: itemColor, marginRight: "10px"}}/>
 										{data.name}
 
@@ -743,7 +743,7 @@ const Apps = (props) => {
 		null
 
 	// Load data e.g. from github
-	const getSpecificApps = (url) => {
+	const getSpecificApps = (url, forceUpdate) => {
 		setValidation(true)
 
 		setIsLoading(true)
@@ -761,6 +761,8 @@ const Apps = (props) => {
 			parsedData["field_2"] = field2
 		}
 
+		parsedData["force_update"] = forceUpdate
+
 		alert.success("Getting specific apps from your URL.")
 		var cors = "cors"
 		fetch(globalUrl+"/api/v1/apps/get_existing", {
@@ -977,8 +979,8 @@ const Apps = (props) => {
 		window.location.href = "/apps/new?id="+appValidation
 	}
 
-	const handleGithubValidation = () => {
-		getSpecificApps(openApi)
+	const handleGithubValidation = (forceUpdate) => {
+		getSpecificApps(openApi, forceUpdate)
 		setLoadAppsModalOpen(false)
 	}
 
@@ -1034,7 +1036,7 @@ const Apps = (props) => {
 		>
 			<DialogTitle>
 				<div style={{color: "rgba(255,255,255,0.9)"}}>
-					Load from github repo
+					Load from github repo 
 				</div>
 			</DialogTitle>
 			<DialogContent style={{color: "rgba(255,255,255,0.65)"}}>
@@ -1098,7 +1100,12 @@ const Apps = (props) => {
 					Cancel
 				</Button>
 	      <Button style={{borderRadius: "0px"}} disabled={openApi.length === 0 || !openApi.includes("http")} onClick={() => {
-					handleGithubValidation() 
+					handleGithubValidation(true) 
+				}} color="primary">
+	      	Force update	
+	      </Button>
+	      <Button variant="outlined" style={{float: "left", borderRadius: "0px"}} disabled={openApi.length === 0 || !openApi.includes("http")} onClick={() => {
+					handleGithubValidation(false) 
 				}} color="primary">
 	        Submit	
 	      </Button>

frontend/src/views/LoginPage.jsx

@@ -163,6 +163,7 @@ const LoginDialog = props => {
 
 	//	<DialogTitle>{formtitle}</DialogTitle>
 
+	console.log("THEME: ", theme.palette.surfaceColor)
 	const basedata =
 		<div style={bodyDivStyle}>
 			<Paper style={{

frontend/src/views/SettingsPage.jsx

@@ -7,23 +7,11 @@ import {Link} from 'react-router-dom';
 
 import TextField from '@material-ui/core/TextField';
 import { useAlert } from "react-alert";
+import { useTheme } from '@material-ui/core/styles';
 
-
-//const tmpdata = {
-//	"username": "frikky",
-//	"firstname": "fred",
-//	"lastname": "ode",
-//	"title": "topkek",
-//	"companyname": "company here",
-//	"email": "your email pls",
-//	"phone": "PHONE!!",
-//}
-
-// FIXME - add fetch for data fields
-// FIXME - remove tmpdata
-// FIXME: Use isLoggedIn :)
 const Settings = (props) => {
-  const { globalUrl, isLoaded, userdata, surfaceColor, inputColor } = props;
+  const { globalUrl, isLoaded, userdata, } = props;
+	const theme = useTheme();
 	const alert = useAlert()
 
 	const [username, setUsername] = useState("");
@@ -61,7 +49,7 @@ const Settings = (props) => {
 		paddingRight: "30px",
 		paddingBottom: "30px",
 		paddingTop: "30px",
-		backgroundColor: surfaceColor,
+		backgroundColor: theme.palette.surfaceColor,
 		display: "flex", 
 		flexDirection: "column"
 	}
@@ -190,7 +178,7 @@ const Settings = (props) => {
 					<h2>APIKEY</h2>
 					<Link to="/docs/API#authentication" style={{textDecoration: "none", color: "#f85a3e"}}>What is the API key used for?</Link>
 					<TextField
-						style={{backgroundColor: inputColor, flex: "1"}}
+						style={{backgroundColor: theme.palette.inputColor, flex: "1"}}
 						InputProps={{
 							style:{
 								height: "50px", 
@@ -218,7 +206,7 @@ const Settings = (props) => {
 					<h2>Settings</h2>
 					<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
 						<TextField
-							style={{backgroundColor: inputColor, flex: "1"}}
+							style={{backgroundColor: theme.palette.inputColor, flex: "1"}}
 							InputProps={{
 								style:{
 									height: "50px", 
@@ -240,7 +228,7 @@ const Settings = (props) => {
 					</div>
 					<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
 						<TextField
-							style={{backgroundColor: inputColor, flex: "1", marginRight: "15px"}}
+							style={{backgroundColor: theme.palette.inputColor, flex: "1", marginRight: "15px"}}
 							InputProps={{
 								style:{
 									height: "50px", 
@@ -260,7 +248,7 @@ const Settings = (props) => {
       	 					onChange={e => setFirstname(e.target.value)}
 						/>
 						<TextField
-							style={{backgroundColor: inputColor, flex: "1", marginLeft: "15px"}}
+							style={{backgroundColor: theme.palette.inputColor, flex: "1", marginLeft: "15px"}}
 							InputProps={{
 								style:{
 									height: "50px", 
@@ -282,7 +270,7 @@ const Settings = (props) => {
 					</div>
 					<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
 						<TextField
-							style={{backgroundColor: inputColor, flex: "1", marginRight: "15px",}}
+							style={{backgroundColor: theme.palette.inputColor, flex: "1", marginRight: "15px",}}
 							InputProps={{
 								style:{
 									height: "50px", 
@@ -302,7 +290,7 @@ const Settings = (props) => {
       	 					onChange={e => setTitle(e.target.value)}
 						/>
 						<TextField
-							style={{backgroundColor: inputColor, flex: "1", marginLeft: "15px"}}
+							style={{backgroundColor: theme.palette.inputColor, flex: "1", marginLeft: "15px"}}
 							InputProps={{
 								style:{
 									height: "50px", 
@@ -324,7 +312,7 @@ const Settings = (props) => {
 					</div>
 					<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
 						<TextField
-							style={{backgroundColor: inputColor, flex: "1", marginRight: "15px",}}
+							style={{backgroundColor: theme.palette.inputColor, flex: "1", marginRight: "15px",}}
 							InputProps={{
 								style:{
 									height: "50px", 
@@ -344,7 +332,7 @@ const Settings = (props) => {
       	 					onChange={e => setEmail(e.target.value)}
 						/>
 						<TextField
-							style={{backgroundColor: inputColor, flex: "1", marginLeft: "15px",}}
+							style={{backgroundColor: theme.palette.inputColor, flex: "1", marginLeft: "15px",}}
 							InputProps={{
 								style:{
 									height: "50px", 
@@ -379,7 +367,7 @@ const Settings = (props) => {
 					<h2>Password</h2>
 					<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
 						<TextField
-							style={{backgroundColor: inputColor, flex: "1"}}
+							style={{backgroundColor: theme.palette.inputColor, flex: "1"}}
 							InputProps={{
 								style:{
 									height: "50px", 
@@ -400,7 +388,7 @@ const Settings = (props) => {
 					</div>
 					<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
 						<TextField
-							style={{backgroundColor: inputColor, flex: "1", marginRight: "15px",}}
+							style={{backgroundColor: theme.palette.inputColor, flex: "1", marginRight: "15px",}}
 							InputProps={{
 								style:{
 									height: "50px", 
@@ -419,7 +407,7 @@ const Settings = (props) => {
       	 					onChange={e => setNewPassword(e.target.value)}
 						/>
 						<TextField
-							style={{backgroundColor: inputColor, flex: "1", marginLeft: "15px",}}
+							style={{backgroundColor: theme.palette.inputColor, flex: "1", marginLeft: "15px",}}
 							InputProps={{
 								style:{
 									height: "50px", 

frontend/src/views/Workflows.jsx

@@ -563,7 +563,7 @@ const Workflows = (props) => {
 		}
 
 		return (
-			<Paper square style={resultPaperAppStyle} onClick={() => {}}>
+			<Paper key={data.id} square style={resultPaperAppStyle} onClick={() => {}}>
 				<div style={{marginLeft: "10px", marginTop: "5px", marginBottom: "5px", marginRight: "5px", width: boxWidth, backgroundColor: boxColor}}>
 				</div>
 				<Grid container style={{margin: "10px 10px 10px 10px", flex: "1"}}>