Started adding optional cloud features

frontend/src/views/Admin.jsx

@@ -36,6 +36,12 @@ const Admin = (props) => {
 	const [firstRequest, setFirstRequest] = React.useState(true);
 	const [modalUser, setModalUser] = React.useState({});
 	const [modalOpen, setModalOpen] = React.useState(false);
+
+	const [cloudSyncModalOpen, setCloudSyncModalOpen] = React.useState(false);
+	const [cloudSyncApikey, setCloudSyncApikey] = React.useState("");
+	const [loading, setLoading] = React.useState(false);
+
+	const [selectedOrganization, setSelectedOrganization] = React.useState({});
 	const [loginInfo, setLoginInfo] = React.useState("");
 	const [curTab, setCurTab] = React.useState(0);
 	const [users, setUsers] = React.useState([]);
@@ -175,6 +181,41 @@ const Admin = (props) => {
 			});
 	}
 
+	const enableCloudSync = (apikey, organization) => {
+		const data = { 
+			apikey: apikey,
+			organization: organization,
+		}
+
+		const url = globalUrl + '/api/v1/cloud/setup';
+		fetch(url, {
+			mode: 'cors',
+			method: 'POST',
+			body: JSON.stringify(data),
+			credentials: 'include',
+			crossDomain: true,
+			withCredentials: true,
+			headers: {
+				'Content-Type': 'application/json; charset=utf-8',
+			},
+		})
+			.then(response =>
+				response.json().then(responseJson => {
+					setLoading(false)
+					console.log(responseJson)
+					if (responseJson["success"] === false) {
+						alert.error("Failed setting up cloud sync")
+					} else {
+						alert.success("Set up cloud sync!")
+					}
+				}),
+			)
+			.catch(error => {
+				setLoading(false)
+				alert.error("Err: " + error.toString())
+			});
+	}
+
 	const onPasswordChange = () => {
 		const data = { "username": selectedUser.username, "newpassword": newPassword }
 		const url = globalUrl + '/api/v1/users/passwordchange';
@@ -713,8 +754,69 @@ const Admin = (props) => {
 			</DialogContent>
 		</Dialog>
 
+	const cloudSyncModal =
+		<Dialog 
+			open={cloudSyncModalOpen}
+			onClose={() => { setCloudSyncModalOpen(false) }}
+			PaperProps={{
+				style: {
+					backgroundColor: theme.palette.surfaceColor,
+					color: "white",
+					minWidth: "800px",
+					minHeight: "320px",
+				},
+			}}
+		>
+			<DialogTitle><span style={{ color: "white" }}>
+				Enable cloud features
+			</span></DialogTitle>
+			<DialogContent>
+				What does <a href="https://shuffler.io/docs/workflows#workflow_variables" target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>cloud sync</a> do?
+				<div style={{marginTop: 5}}/>
+				Cloud Apikey
+				<div style={{display: "flex", marginBottom: 20, }}>
+					<TextField
+						color="primary"
+						style={{backgroundColor: theme.palette.inputColor, marginRight: 10, }}
+						InputProps={{
+							style: {
+								height: "50px",
+								color: "white",
+								fontSize: "1em",
+							},
+						}}
+						required
+						fullWidth={true}
+						autoComplete="cloud apikey"
+						id="apikey_field"
+						margin="normal"
+						placeholder="Cloud Apikey"
+						variant="outlined"
+						onChange={(event) => {
+							setCloudSyncApikey(event.target.value)
+						}}
+					/>
+					<Button disabled={cloudSyncApikey.length === 0 || loading} variant="contained" style={{ marginLeft: 15, height: 60, margin: "auto", borderRadius: "0px" }} onClick={() => {
+						setLoading(true)
+						enableCloudSync(
+							cloudSyncApikey,
+							selectedOrganization,
+						)
+					}} color="primary">
+						Test sync	
+					</Button>
+				</div>
+
+				* New triggers (userinput, hotmail realtime)<div/>
+				* Execute in the cloud rather than onprem<div/>
+				* Apps can be built in the cloud<div/>
+				*	Easily share apps and workflows<div/>
+				*	Access to powerful cloud search
+			</DialogContent>
+		</Dialog>
+
 	const modalView =
-		<Dialog modal
+		<Dialog 
 			open={modalOpen}
 			onClose={() => { setModalOpen(false) }}
 			PaperProps={{
@@ -1219,6 +1321,7 @@ const Admin = (props) => {
 		</div>
 		: null
 
+	console.log("Userdata: ", props.userdata)
 	const organizationsTab = curTab === 5 ?
 		<div>
 			<div style={{marginTop: 20, marginBottom: 20,}}>
@@ -1229,7 +1332,10 @@ const Admin = (props) => {
 				style={{}} 
 				variant="contained"
 				color="primary"
-				onClick={() => setModalOpen(true)}
+				disabled
+				onClick={() => {
+					setModalOpen(true)
+				}}
 			> 
 				Add organization 
 			</Button>
@@ -1241,28 +1347,61 @@ const Admin = (props) => {
 						style={{minWidth: 150, maxWidth: 150}}
 					/>
 					<ListItemText
-						primary="Orborus running (TBD)"
+						primary="id"
 						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")}} />
+						primary="Your role"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="Selected"
+						style={{minWidth: 150, maxWidth: 150}}
+					/>
+					<ListItemText
+						primary="Cloud Sync"
 						style={{minWidth: 150, maxWidth: 150}}
 					/>
 				</ListItem>
+				{props.userdata !== undefined && props.userdata.orgs !== null && props.userdata.orgs !== undefined && props.userdata.orgs.length > 0 ? 
+					<span>
+						{props.userdata.orgs.map((data, index) => {
+							const isSelected = props.userdata.selected_org === undefined ? "False" : props.userdata.selected_org.id === data.id ? "True" : "False"
+
+							return (
+								<ListItem key={index}>
+									<ListItemText
+										primary={data.name}
+										style={{minWidth: 150, maxWidth: 150}}
+									/>
+									<ListItemText
+										primary={data.id}
+										style={{minWidth: 200, maxWidth: 200}}
+									/>
+									<ListItemText
+										primary={data.role}
+										style={{minWidth: 150, maxWidth: 150}}
+									/>
+									<ListItemText
+										primary={isSelected}
+										style={{minWidth: 150, maxWidth: 150}}
+									/>
+									<ListItemText
+										primary=<Switch checked={data.cloud_sync} onChange={() => {
+											setCloudSyncModalOpen(true)
+											setSelectedOrganization(data)
+											console.log("INVERT CLOUD SYNC")
+										}} />
+										style={{minWidth: 150, maxWidth: 150}}
+									/>
+								</ListItem>
+							)
+						
+					})}
+				</span>
+				: 
+				null
+				}
 			</List>
 		</div>
 		: null
@@ -1360,6 +1499,7 @@ const Admin = (props) => {
 	return (
 		<div>
 			{modalView}
+			{cloudSyncModal}
 			{editUserModal}
 			{editAuthenticationModal}
 			{data}