Merging changes from 1.2.0 for cleanup

frontend/src/views/SetAuthentication.jsx

@@ -1,147 +1,331 @@
-import React, {useRef, useState, useEffect, useLayoutEffect} from 'react';
+import React, { useState } from "react";
 
-import { Typography, CircularProgress } from '@material-ui/core';
+import { Typography, CircularProgress } from "@material-ui/core";
+import theme from '../theme.jsx';
 
 const SetAuthentication = (props) => {
-  const { globalUrl, isLoggedIn, isLoaded, userdata } = props;
-
-	const [firstRequest, setFirstRequest] = useState(true) 
-	const [finished, setFinished] = useState(false) 
-	const [response, setResponse] = useState("") 
-	const [failed, setFailed] = useState(false) 
-
-	if (firstRequest) {
-		setFirstRequest(false)
-
-		//code
-		//session_state
-		const urlSearchParams = new URLSearchParams(window.location.search);
-		const params = Object.fromEntries(urlSearchParams.entries());
-
-		const authenticationStore = []
-		var appAuthData = {
-			"label": "",
-			"app": {
-				"name": "",
-				"id": "",
-				"app_version": "",
-			},
-			"fields": [],
-			"type": "oauth2",
-		}
-
-		if (window !== undefined && window !== null) {
-			console.log(window.location)
-			appAuthData.fields.push({"key": "redirect_uri", "value": window.location.origin+window.location.pathname})
-		}
-
-		if (params.code !== undefined && params.code !== null) {
-				appAuthData.fields.push({"key": "code", "value": params.code})
-		}
-
-		if (params.session_state !== undefined && params.session_state !== null) {
-				appAuthData.fields.push({"key": "session_state", "value": params.session_state})
-		}
-
-		if (params.state !== undefined && params.state !== null) {
-			const paramsplit = params.state.split("&")
-			console.log(paramsplit)
-			for (var key in paramsplit) {
-				const query = paramsplit[key].split("=")
-				console.log(query)
-
-				if (query.length !== 2) {
-					console.log("INVALID QUERY: ", query)
-					continue
-				}
-
-				if (query[0] === "workflow_id") {
-					appAuthData.reference_workflow = query[1]
-				}
-
-				if (query[0] === "reference_action_id") {
-					//appAuthData.ReferenceWorkflow = query[1]
-				}
-
-				if (query[0] === "app_name") {
-					appAuthData.app.name = query[1]
-					appAuthData.label = "Oauth2 for "+query[1]
-				}
-
-				if (query[0] === "app_id") {
-					appAuthData.app.id = query[1]
-				}
-
-				if (query[0] === "app_version") {
-					appAuthData.app.app_version = query[1]
-				}
-
-				if (query[0] === "authentication_url") {
-					appAuthData.fields.push({"key": "authentication_url", "value": query[1]})
-				}
-
-				if (query[0] === "scope") {
-					appAuthData.fields.push({"key": "scope", "value": query[1]})
-				}
-
-				if (query[0] === "client_id") {
-					appAuthData.fields.push({"key": "client_id", "value": query[1]})
-				}
-
-				if (query[0] === "client_secret") {
-					appAuthData.fields.push({"key": "client_secret", "value": query[1]})
-				}
-
-				if (query[0] === "oauth_url") {
-					appAuthData.fields.push({"key": "oauth_url", "value": query[1]})
-				}
-			}
-		}
-
-		console.log(appAuthData)
-
-		fetch(globalUrl+"/api/v1/apps/authentication", {
-    	  method: 'PUT',
-				headers: {
-					'Content-Type': 'application/json',
-					'Accept': 'application/json',
-				},
-	  		credentials: "include",
-				body: JSON.stringify(appAuthData),
-    })
-		.then((response) => {
-			if (response.status !== 200) {
-				console.log("Status not 200 for oauth2 authentication")
-				setFailed(true)
-			}
-
-			return response.json()
-		})
-    .then((responseJson) => {
-			//setUserSettings(responseJson)
-			console.log("Resp: ", responseJson)
-			setFinished(true)
-			setResponse(responseJson.reason)
-
-			setTimeout(() => {
-				window.close()
-			}, 1000)
-    })
-		.catch(error => {
-    		console.log(error)
-		});
+  const { globalUrl } = props;
 
+	var headers = {
+		"Content-Type": "application/json",
+		"Accept": "application/json",
 	}
 
-	return (
-		<div style={{width: 1000, margin: "auto", itemAlign: "center",}}>
-			<Typography variant="h6" style={{marginLeft: "auto", marginRight: "auto", marginTop: 200, }}>
-				{!finished ? <CircularProgress />	: "DONE WITH AUTH - this will close soon!!"}
-				<div />
-				{failed ? "Failed setup. Error: " : ""} {response}
-			</Typography>
-		</div>
-	)
-}
+  const [firstRequest, setFirstRequest] = useState(true);
+  const [finished, setFinished] = useState(false);
+  const [response, setResponse] = useState("");
+  const [failed, setFailed] = useState(false);
+  const [requestHeaders, setRequestHeaders] = useState(headers);
+
+  if (firstRequest) {
+    setFirstRequest(false);
+
+    //code
+    //session_state
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+		console.log("PARAMS: ", params)
+
+
+
+    //const authenticationStore = [];
+    var appAuthData = {
+      label: "",
+      app: {
+        name: "",
+        id: "",
+        app_version: "",
+      },
+      fields: [],
+      type: "oauth2",
+    }
+
+    if (window !== undefined && window !== null) {
+      //console.log(window.location);
+      appAuthData.fields.push({
+        key: "redirect_uri",
+        value: window.location.origin + window.location.pathname,
+      });
+    }
+
+    if (params.session_state !== undefined && params.session_state !== null) {
+      appAuthData.fields.push({
+        key: "session_state",
+        value: params.session_state,
+      });
+    }
+
+		var externalData = {
+			handleExternal: false,
+			user: "",
+			type: "",
+			code: "",
+		}
+
+    if (params.code !== undefined && params.code !== null) {
+      appAuthData.fields.push({ key: "code", value: params.code });
+			externalData.code = params.code
+    }
+
+		var foundScope = ""
+    if (params.state !== undefined && params.state !== null) {
+      const paramsplit = params.state.split("&");
+      console.log(paramsplit);
+      for (var key in paramsplit) {
+        const query = paramsplit[key].split("=");
+        console.log("K:V: ", key, query);
+				if (query.length > 1) {
+					if (query[0] === "type" && query[1] === "github"){ 
+						externalData.handleExternal = true 
+						externalData.type = "github" 
+					}
+
+					if (query[0] === "username" || query[0] === "user"){ 
+						externalData.user = query[1] 
+					}
+				}
+
+        if (query.length !== 2) {
+          console.log("INVALID QUERY: ", query);
+          continue;
+        }
+
+				if (query[0] === "org_id") {
+					headers["Org-Id"] = query[1]
+				}
+
+				if (query[0] === "authorization") {
+					headers["Authorization"] = "Bearer " + query[1]
+				}
+
+        if (query[0] === "workflow_id") {
+          appAuthData.reference_workflow = query[1];
+        }
+
+        if (query[0] === "reference_action_id") {
+          //appAuthData.ReferenceWorkflow = query[1]
+        }
+
+        if (query[0] === "app_name") {
+          appAuthData.app.name = query[1];
+          appAuthData.label = "Oauth2 for " + query[1];
+        }
+
+        if (query[0] === "app_id") {
+          appAuthData.app.id = query[1];
+        }
+
+        if (query[0] === "app_version") {
+          appAuthData.app.app_version = query[1];
+        }
+
+        if (query[0] === "authentication_url") {
+          appAuthData.fields.push({
+            key: "authentication_url",
+            value: query[1],
+          });
+        }
+
+        if (query[0] === "scope") {
+          appAuthData.fields.push({ key: "scope", value: query[1] });
+					foundScope = query[1]
+        }
+
+        if (query[0] === "client_id") {
+          appAuthData.fields.push({ key: "client_id", value: query[1] });
+        }
+
+        if (query[0] === "client_secret") {
+          appAuthData.fields.push({ key: "client_secret", value: query[1] });
+        }
+
+        if (query[0] === "oauth_url") {
+          appAuthData.fields.push({ key: "oauth_url", value: query[1] });
+        }
+
+        if (query[0] === "refresh_uri") {
+          appAuthData.fields.push({ key: "refresh_uri", value: query[1] });
+        }
+
+        if (query[0] === "refresh_url") {
+          appAuthData.fields.push({ key: "refresh_url", value: query[1] });
+        }
+      }
+
+  		setRequestHeaders(headers)
+    }
+
+		if (foundScope !== undefined && foundScope !== null && foundScope.length > 0) {
+			appAuthData.label = `${foundScope}`
+		}
+
+		var foundTab = params["error"];
+		if (foundTab !== null && foundTab !== undefined && foundTab.length > 0) {
+			console.log("Found error: ", foundTab, "! Skipping Shuffle requests to validate Oauth2")
+			var errorDesc = params["error_description"]
+			if (errorDesc !== null && errorDesc !== undefined && errorDesc.length > 0) {
+				foundTab += "\n\n"+errorDesc
+			}
+
+			setFailed(true)
+			setResponse(`${foundTab}`)
+		} else {
+
+			if (externalData.handleExternal) {
+					console.log("RUN EXTERNAL!!: ", externalData)
+					
+					fetch(globalUrl + "/api/v1/triggers/github/register", {
+						method: "PUT",
+						headers: requestHeaders,
+						credentials: "include",
+						body: JSON.stringify(externalData),
+					})
+					.then((response) => {
+							const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
+							const tmpView = new URLSearchParams(cursearch).get("state");
+							if (
+								tmpView !== undefined &&
+								tmpView !== null &&
+								tmpView.length > 0
+							) {
+								console.log("State to find app name from: ", tmpView)
+							}
+
+						if (response.status !== 200) {
+							console.log("Status not 200 for oauth2 authentication");
+							setFailed(true);
+						} else {
+							setFinished(true);
+							//setTimeout(() => {
+							//	window.close();
+							//}, 2500);
+						}
+
+						return response.json();
+					})
+					.then((responseJson) => {
+						//setUserSettings(responseJson)
+						console.log("Resp: ", responseJson);
+
+						if (responseJson.reason !== undefined) {
+							setResponse(responseJson.reason);
+							setFinished(true);
+
+						} else {
+							const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
+							var tmpView = new URLSearchParams(cursearch).get("error_description");
+							if (
+								tmpView !== undefined &&
+								tmpView !== null &&
+								tmpView.length > 0
+							) {
+								setResponse(tmpView)
+							} else {
+								tmpView = new URLSearchParams(cursearch).get("error");
+								if (
+									tmpView !== undefined &&
+									tmpView !== null &&
+									tmpView.length > 0
+								) {
+									setResponse(tmpView)
+								}
+							}
+						}
+
+					})
+					.catch((error) => {
+						console.log(error);
+					});
+
+				return
+			}
+
+    	fetch(globalUrl + "/api/v1/apps/authentication", {
+    	  method: "PUT",
+    	  headers: requestHeaders,
+    	  credentials: "include",
+    	  body: JSON.stringify(appAuthData),
+    	})
+    	  .then((response) => {
+					const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
+					const tmpView = new URLSearchParams(cursearch).get("state");
+					if (tmpView !== undefined && tmpView !== null && tmpView.length > 0) {
+						console.log("State to find app name from: ", tmpView)
+					}
+
+    	    if (response.status !== 200) {
+    	      console.log("Status not 200 for oauth2 authentication");
+    	      setFailed(true);
+    	    } else {
+    	    	setFinished(true);
+						setTimeout(() => {
+							window.close();
+						}, 2500);
+					}
+
+    	    return response.json();
+    	  })
+    	  .then((responseJson) => {
+    	    //setUserSettings(responseJson)
+					if (responseJson.reason !== undefined) {
+    	    	setResponse(responseJson.reason);
+    	    	setFinished(true);
+
+					} else {
+    	      const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
+						var tmpView = new URLSearchParams(cursearch).get("error_description");
+    	  		if (
+    	  		  tmpView !== undefined &&
+    	  		  tmpView !== null &&
+    	  		  tmpView.length > 0
+    	  		) {
+							setResponse(tmpView)
+    	  		} else {
+							tmpView = new URLSearchParams(cursearch).get("error");
+    	  			if (
+    	  			  tmpView !== undefined &&
+    	  			  tmpView !== null &&
+    	  			  tmpView.length > 0
+    	  			) {
+								setResponse(tmpView)
+							}
+						}
+					}
+
+    	  })
+    	  .catch((error) => {
+    	    console.log(error);
+    	  });
+			}
+  }
+
+  return (
+    <div style={{ maringTop: 50, padding: 50, border: "1px solid rgba(255,255,255,0.6)", borderRadius: theme.palette.borderRadius,  width: 500, margin: "auto", itemAlign: "center", textAlign: "center",}}>
+      <Typography
+        variant="h4"
+        style={{ marginLeft: "auto", marginRight: "auto", marginTop: 50}}
+      >
+				Oauth2 setup
+      </Typography>
+      <Typography
+        variant="h6"
+        style={{ marginLeft: "auto", marginRight: "auto", marginTop: 50}}
+      >
+        {!finished ? (
+					failed ? 
+						null :
+          	<CircularProgress />
+        ) : (
+          "Done - this window should close within 3 seconds."
+        )}
+        <div />
+        {failed ? "Failed setup. Error: " : ""} {response}
+				<br/>
+				<br/>
+        {failed ? "If the error persists, try to use fewer scopes. Contact our support at support@shuffler.io if you need further assistance. You may close this window." : ""}
+      </Typography>
+    </div>
+  );
+};
 
 export default SetAuthentication;

frontend/src/views/SetAuthenticationSSO.jsx

@@ -1,143 +1,158 @@
-import React, {useRef, useState, useEffect, useLayoutEffect} from 'react';
+import React, {  useState } from "react";
 
-import { Typography, CircularProgress } from '@material-ui/core';
+import { Typography, CircularProgress } from "@material-ui/core";
 
 const SetAuthentication = (props) => {
-  const { globalUrl, isLoggedIn, isLoaded, userdata } = props;
+  const { globalUrl } = props;
 
-	const [firstRequest, setFirstRequest] = useState(true) 
-	const [finished, setFinished] = useState(false) 
-	const [response, setResponse] = useState("") 
-	const [failed, setFailed] = useState(false) 
+  const [firstRequest, setFirstRequest] = useState(true);
+  const [finished, setFinished] = useState(false);
+  const [response, setResponse] = useState("");
+  const [failed, setFailed] = useState(false);
 
-	if (firstRequest) {
-		setFirstRequest(false)
+  if (firstRequest) {
+    setFirstRequest(false);
 
-		//code
-		//session_state
-		const urlSearchParams = new URLSearchParams(window.location.search);
-		const params = Object.fromEntries(urlSearchParams.entries());
+    //code
+    //session_state
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
 
-		const authenticationStore = []
-		var appAuthData = {
-			"label": "",
-			"app": {
-				"name": "",
-				"id": "",
-				"app_version": "",
-			},
-			"fields": [],
-			"type": "oauth2",
-		}
+    // const authenticationStore = [];
+    var appAuthData = {
+      label: "",
+      app: {
+        name: "",
+        id: "",
+        app_version: "",
+      },
+      fields: [],
+      type: "oauth2",
+    };
 
-		if (window !== undefined && window !== null) {
-			console.log(window.location)
-			appAuthData.fields.push({"key": "redirect_uri", "value": window.location.origin+window.location.pathname})
-		}
+    if (window !== undefined && window !== null) {
+      console.log(window.location);
+      appAuthData.fields.push({
+        key: "redirect_uri",
+        value: window.location.origin + window.location.pathname,
+      });
+    }
 
-		if (params.code !== undefined && params.code !== null) {
-				appAuthData.fields.push({"key": "code", "value": params.code})
-		}
+    if (params.code !== undefined && params.code !== null) {
+      appAuthData.fields.push({ key: "code", value: params.code });
+    }
 
-		if (params.session_state !== undefined && params.session_state !== null) {
-				appAuthData.fields.push({"key": "session_state", "value": params.session_state})
-		}
+    if (params.session_state !== undefined && params.session_state !== null) {
+      appAuthData.fields.push({
+        key: "session_state",
+        value: params.session_state,
+      });
+    }
 
-		if (params.state !== undefined && params.state !== null) {
-			const paramsplit = params.state.split("&")
-			console.log(paramsplit)
-			for (var key in paramsplit) {
-				const query = paramsplit[key].split("=")
-				console.log(query)
+    if (params.state !== undefined && params.state !== null) {
+      const paramsplit = params.state.split("&");
+      console.log(paramsplit);
+      for (var key in paramsplit) {
+        const query = paramsplit[key].split("=");
+        console.log(query);
 
-				if (query.length !== 2) {
-					console.log("INVALID QUERY: ", query)
-					continue
-				}
+        if (query.length !== 2) {
+          console.log("INVALID QUERY: ", query);
+          continue;
+        }
 
-				if (query[0] === "workflow_id") {
-					appAuthData.reference_workflow = query[1]
-				}
+        if (query[0] === "workflow_id") {
+          appAuthData.reference_workflow = query[1];
+        }
 
-				if (query[0] === "reference_action_id") {
-					//appAuthData.ReferenceWorkflow = query[1]
-				}
+        if (query[0] === "reference_action_id") {
+          //appAuthData.ReferenceWorkflow = query[1]
+        }
 
-				if (query[0] === "app_name") {
-					appAuthData.app.name = query[1]
-					appAuthData.label = "Oauth2 for "+query[1]
-				}
+        if (query[0] === "app_name") {
+          appAuthData.app.name = query[1];
+          appAuthData.label = "Oauth2 for " + query[1];
+        }
 
-				if (query[0] === "app_id") {
-					appAuthData.app.id = query[1]
-				}
+        if (query[0] === "app_id") {
+          appAuthData.app.id = query[1];
+        }
 
-				if (query[0] === "app_version") {
-					appAuthData.app.app_version = query[1]
-				}
+        if (query[0] === "app_version") {
+          appAuthData.app.app_version = query[1];
+        }
 
-				if (query[0] === "authentication_url") {
-					appAuthData.fields.push({"key": "authentication_url", "value": query[1]})
-				}
+        if (query[0] === "authentication_url") {
+          appAuthData.fields.push({
+            key: "authentication_url",
+            value: query[1],
+          });
+        }
 
-				if (query[0] === "scope") {
-					appAuthData.fields.push({"key": "scope", "value": query[1]})
-				}
+        if (query[0] === "scope") {
+          appAuthData.fields.push({ key: "scope", value: query[1] });
+        }
 
-				if (query[0] === "client_id") {
-					appAuthData.fields.push({"key": "client_id", "value": query[1]})
-				}
+        if (query[0] === "client_id") {
+          appAuthData.fields.push({ key: "client_id", value: query[1] });
+        }
 
-				if (query[0] === "client_secret") {
-					appAuthData.fields.push({"key": "client_secret", "value": query[1]})
-				}
-			}
-		}
+        if (query[0] === "client_secret") {
+          appAuthData.fields.push({ key: "client_secret", value: query[1] });
+        }
+      }
+    }
 
-		console.log(appAuthData)
+    console.log(appAuthData);
 
-		fetch(globalUrl+"/api/v1/apps/authentication", {
-    	  method: 'PUT',
-				headers: {
-					'Content-Type': 'application/json',
-					'Accept': 'application/json',
-				},
-	  		credentials: "include",
-				body: JSON.stringify(appAuthData),
+    fetch(globalUrl + "/api/v1/apps/authentication", {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify(appAuthData),
     })
-		.then((response) => {
-			if (response.status !== 200) {
-				console.log("Status not 200 for oauth2 authentication")
-				setFailed(true)
-			}
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for oauth2 authentication");
+          setFailed(true);
+        }
 
-			return response.json()
-		})
-    .then((responseJson) => {
-			//setUserSettings(responseJson)
-			console.log("Resp: ", responseJson)
-			setFinished(true)
-			setResponse(responseJson.reason)
+        return response.json();
+      })
+      .then((responseJson) => {
+        //setUserSettings(responseJson)
+        console.log("Resp: ", responseJson);
+        setFinished(true);
+        setResponse(responseJson.reason);
 
-			setTimeout(() => {
-				window.close()
-			}, 1000)
-    })
-		.catch(error => {
-    		console.log(error)
-		});
+        setTimeout(() => {
+          window.close();
+        }, 1000);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
 
-	}
-
-	return (
-		<div style={{width: 1000, margin: "auto", itemAlign: "center",}}>
-			<Typography variant="h6" style={{marginLeft: "auto", marginRight: "auto", marginTop: 200, }}>
-				{!finished ? <CircularProgress />	: "DONE WITH AUTH - this will close soon!!"}
-				<div />
-				{failed ? "Failed setup. Error: " : ""} {response}
-			</Typography>
-		</div>
-	)
-}
+  return (
+    <div style={{ width: 1000, margin: "auto", itemAlign: "center" }}>
+      <Typography
+        variant="h6"
+        style={{ marginLeft: "auto", marginRight: "auto", marginTop: 200 }}
+      >
+        {!finished ? (
+          <CircularProgress />
+        ) : (
+          "DONE WITH AUTH - this will close soon!!"
+        )}
+        <div />
+        {failed ? "Failed setup. Error: " : ""} {response}
+      </Typography>
+    </div>
+  );
+};
 
 export default SetAuthentication;