Fixed some search issues and Oauth2 Application perms + JWT problems

frontend/src/components/Oauth2Auth.jsx

@@ -297,6 +297,65 @@ const AuthenticationOauth2 = (props) => {
 
 
   const handleOauth2Request = (client_id, client_secret, oauth_url, scopes, admin_consent, prompt) => {
+
+	  if ((authenticationType.redirect_uri === undefined || authenticationType.redirect_uri === null || authenticationType.redirect_uri.length === 0) && (authenticationType.token_uri !== undefined && authenticationType.token_uri !== null && authenticationType.token_uri.length > 0)) {
+		  console.log("No redirect URI found, and token URI found. Assuming client credentials flow and saving directly in the database")
+
+		  	// Find app.configuration=true fields in the app.paramters
+			var parsedFields = [{
+				"key": "client_id",
+				"value": client_id,
+			},
+			{
+				"key": "client_secret",
+				"value": client_secret,
+			},
+			{
+				"key": "scope",
+				"value": scopes.join(","),
+			},
+			{
+				"key": "token_uri",
+				"value": authenticationType.token_uri,
+			}]
+
+		  	// Not necessary yet to do something like this due to not showing the fields anyway
+		  	/*
+		  	if (selectedApp.parameters !== undefined && selectedApp.parameters !== null && selectedApp.parameters.length > 0) {
+
+		  		for (var i = 0; i < selectedApp.parameters.length; i++) {
+					if (selectedApp.parameters[i].configuration !== true) {
+						continue
+					}
+
+					console.log("Found configuration field: ", selectedApp.parameters[i].key, " with example: ", selectedApp.parameters[i].example)
+					parsedFields.push({
+						"key": selectedApp.parameters[i].key,
+						"value": selectedApp.parameters[i].example,
+					})
+				}
+			}
+			*/
+
+  
+		  	const appAuthData = {
+				"label": "OAuth2 for " + selectedApp.name,
+				"app": {
+					"id": selectedApp.id,
+					"name": selectedApp.name,
+					"version": selectedApp.version,
+					"large_image": selectedApp.large_image,
+				},
+				"fields": parsedFields,
+				"type": "oauth2-app",
+				"reference_workflow": workflowId,
+			}
+			setNewAppAuth(appAuthData) 
+
+		  return
+	  }
+
+
 		setButtonClicked(true);
 		//console.log("SCOPES: ", scopes);
 
@@ -798,6 +857,7 @@ const AuthenticationOauth2 = (props) => {
               }}
               fullWidth
               color="primary"
+			  label={"Client ID"}
               placeholder={"Client ID"}
               onChange={(event) => {
                 setClientId(event.target.value);
@@ -816,20 +876,22 @@ const AuthenticationOauth2 = (props) => {
               }}
               fullWidth
               color="primary"
+			  label={"Client Secret"}
               placeholder={"Client Secret"}
               onChange={(event) => {
                 setClientSecret(event.target.value);
                 //authenticationOption.label = event.target.value
               }}
             />
+            {allscopes.length === 0 ? null : "Scopes"}
             {allscopes.length === 0 ? null : (
 							<div style={{width: "100%", marginTop: 10, display: "flex"}}>
 								<span>
-									Scopes
 									<Select
 										multiple
 										underline={false}
 										value={selectedScopes}
+										label="Scopes"
 										style={{
 											backgroundColor: theme.palette.inputColor,
 											color: "white",
@@ -855,6 +917,8 @@ const AuthenticationOauth2 = (props) => {
 										})}
 									</Select>
 								</span>
+
+								{((authenticationType.redirect_uri === undefined || authenticationType.redirect_uri === null || authenticationType.redirect_uri.length === 0) && (authenticationType.token_uri !== undefined && authenticationType.token_uri !== null && authenticationType.token_uri.length > 0)) ? null : 
 									<span>
 										<Tooltip
 											color="primary"
@@ -866,6 +930,7 @@ const AuthenticationOauth2 = (props) => {
 											}}/>
 										</Tooltip>
 									</span>
+								}
 							</div>
             )}
           </span>
@@ -882,19 +947,14 @@ const AuthenticationOauth2 = (props) => {
           variant="contained"
           fullWidth
           onClick={() => {
-            handleOauth2Request(
+            handleOauth2Request(clientId, clientSecret, oauthUrl, selectedScopes);
-              clientId,
-              clientSecret,
-              oauthUrl,
-              selectedScopes
-            );
           }}
           color="primary"
         >
           {buttonClicked ? (
             <CircularProgress style={{ color: "white" }} />
           ) : (
-            "Manually Authenticate"
+            "Authenticate"
           )}
         </Button>
 

frontend/src/components/Searchfield.jsx

@@ -81,7 +81,7 @@ const SearchField = props => {
 				style: {
 					color: "white",
 					minWidth: 750,
-					height: 685,
+					height: 785,
 					borderRadius: 16,
 					border: "1px solid var(--Container-Stroke, #494949)",
 					background: "var(--Container, #000000)",

frontend/src/views/AngularWorkflow.jsx

@@ -4593,7 +4593,6 @@ const AngularWorkflow = (defaultprops) => {
       }
     }
 
-	console.log("NODE: ", nodedata)
 	if (nodedata.decorator !== true && nodedata.attachedTo === undefined) {
 		var newdata = JSON.parse(JSON.stringify(nodedata))
 		newdata.large_image = "" 

frontend/src/views/AppCreator.jsx

@@ -374,8 +374,8 @@ const AppCreator = (defaultprops) => {
     "API key",
     "Bearer auth",
     "Basic auth",
-    "Oauth2",
     "JWT",
+    "Oauth2",
   ];
   const apikeySelection = ["Header", "Query"];
 
@@ -411,6 +411,7 @@ const AppCreator = (defaultprops) => {
   const [appBuilding, setAppBuilding] = useState(false);
   const [fileDownloadEnabled, setFileDownloadEnabled] = useState(false);
   const [actionAmount, setActionAmount] = useState(increaseAmount);
+  const [oauth2Type, setOauth2Type] = useState("application");
   const defaultAuth = {
     name: "",
     type: "header",
@@ -1754,11 +1755,10 @@ const AppCreator = (defaultprops) => {
       	    //console.log("FLOW2: ", value[flowkey][basekey])
       	    if (value[flowkey] !== undefined && value[flowkey][basekey] !== undefined
       	    ) {
-      	      if (
+      	      if (value[flowkey][basekey].authorizationUrl !== undefined && parameterName.length === 0) {
-      	        value[flowkey][basekey].authorizationUrl !== undefined &&
-      	        parameterName.length === 0
-      	      ) {
       	          setParameterName(value[flowkey][basekey].authorizationUrl);
+      	      } else {
+				  setOauth2Type("application")
 			  }
 
       	      var tokenUrl = "";
@@ -2846,7 +2846,6 @@ const AppCreator = (defaultprops) => {
           style={{ margin: 0, flex: "1", backgroundColor: inputColor }}
           fullWidth={true}
           placeholder="/security/user/authenticate"
-          type="name"
           id="standard-required"
           margin="normal"
           variant="outlined"
@@ -2866,6 +2865,40 @@ const AppCreator = (defaultprops) => {
             },
           }}
         />
+        <Typography
+          variant="body2"
+          color="textSecondary"
+          style={{ marginTop: 10 }}
+        >
+			Optional: Authentication queries 
+        </Typography>
+		{/*
+        <TextField
+          style={{ margin: 0, flex: "1", backgroundColor: inputColor }}
+          fullWidth={true}
+          placeholder="grant_type=client_credentials&scope=connect.api.read"
+          id=""
+          margin="normal"
+          variant="outlined"
+          defaultValue={parameterName}
+          helperText={
+            <span style={{ color: "white", marginBottom: "2px" }}>
+			  Must use 'key=value&key=value' format
+            </span>
+          }
+          onBlur={(e) => {
+			  //setParameterName(e.target.value)
+		  }}
+          InputProps={{
+            classes: {
+              notchedOutline: classes.notchedOutline,
+            },
+            style: {
+              color: "white",
+            },
+          }}
+        />
+		*/}
       </div>
     ) : null;
 
@@ -2878,9 +2911,15 @@ const AppCreator = (defaultprops) => {
           color="textSecondary"
           style={{ marginTop: 10 }}
         >
-					Find the Authorization URL, Token URL and scopes in question for the API. Ensure the app in question is pointed at https://shuffler.io/set_authentication
+			{oauth2Type === "delegated" ?
+				"Find the Authorization URL, Token URL and scopes in question for the API. Ensure your app in the service uses redirect url https://shuffler.io/set_authentication"
+				:
+				"Find the Token URL and scopes in question for the API"
+			}
         </Typography>
 
+		{oauth2Type === "delegated" ? 
+			<span>
         		<Typography
         		  variant="body2"
         		  color="textSecondary"
@@ -2928,6 +2967,8 @@ const AppCreator = (defaultprops) => {
         		    },
         		  }}
         		/>
+			</span>
+		: null}
         <Typography
           variant="body2"
           color="textSecondary"
@@ -2977,6 +3018,8 @@ const AppCreator = (defaultprops) => {
             },
           }}
         />
+		{oauth2Type === "delegated" ? 
+			<span>
         		<Typography
         		  variant="body2"
         		  color="textSecondary"
@@ -3020,6 +3063,8 @@ const AppCreator = (defaultprops) => {
         		    },
         		  }}
         		/>
+			</span>
+		: null}
 		<Typography
 		  variant="body2"
 		  color="textSecondary"
@@ -3037,7 +3082,7 @@ const AppCreator = (defaultprops) => {
 			},
 		  }}
 		  style={{ maxHeight: 80, overflowX: "hidden", overflowY: "auto" }}
-          placeholder="Available Oauth2 Scopes"
+		  placeholder="Available Oauth2 Scopes (enter to add)"
 		  color="primary"
 		  fullWidth
 		  value={oauth2Scopes}
@@ -5865,6 +5910,7 @@ const AppCreator = (defaultprops) => {
           }}
         />
 				<div style={{padding: 25, border: "2px solid rgba(255,255,255,0.7)", borderRadius: theme.palette.borderRadius, }}>
+	  				<span style={{display: "flex", }}>
 					<FormControl style={{ }} variant="outlined">
 						<Typography variant="h6">Authentication</Typography>
 						<a
@@ -5910,6 +5956,42 @@ const AppCreator = (defaultprops) => {
 							))}
 						</Select>
 					</FormControl>
+					{authenticationOption === "Oauth2" ? 
+						<FormControl style={{ marginLeft: 350, maxWidth: 200, }} variant="outlined">
+							{/*
+							<Typography variant="body2">
+								- Delegated: The user will get a popup for access their personal data.
+								- Application: Permissions are set by the app creator in the 3rd party platform. 
+							</Typography>
+							*/}
+							<Select
+								fullWidth
+								label="Oauth2 type"
+								onChange={(e) => {
+									setOauth2Type(e.target.value);
+								}}
+								value={oauth2Type}
+								style={{
+									backgroundColor: inputColor,
+									color: "white",
+									height: "50px",
+								}}
+							>
+								{["delegated", "application"].map((data, index) => (
+									<MenuItem
+										key={index}
+										style={{ backgroundColor: inputColor, color: "white" }}
+										value={data}
+									>
+										{data}
+									</MenuItem>
+								))}
+							</Select>
+						</FormControl>
+					: null}
+	  				</span> 
+
+
 					<div style={{marginTop: 15 }} />
 					{basicAuth}
 					{bearerAuth}