sso_2.0.0

backend/go-app/main.go

@@ -1131,9 +1131,9 @@ func checkAdminLogin(resp http.ResponseWriter, request *http.Request) {
 		}
 
 		// No childorg setup, only parent org
-		if len(org.ManagerOrgs) > 0 || len(org.CreatorOrg) > 0 {
+		// if len(org.ManagerOrgs) > 0 || len(org.CreatorOrg) > 0 {
-			continue
+		// 	continue
-		}
+		// }
 
 		// Should run calculations
 		if len(org.SSOConfig.OpenIdAuthorization) > 0 {

frontend/src/components/Billing.jsx

@@ -42,6 +42,7 @@ import {
 	Delete,
 	RestaurantRounded,
 	Cloud,
+	CheckCircle
 } from "@mui/icons-material";
 
 //import { useAlert 
@@ -71,6 +72,7 @@ const Billing = (props) => {
 	const [currentAppRunsInNumber, setCurrentAppRunsInNumber] = useState(0);
 	const [alertThresholds, setAlertThresholds] = useState(selectedOrganization.Billing !== undefined && selectedOrganization.Billing.AlertThreshold !== undefined && selectedOrganization.Billing.AlertThreshold !== null ? selectedOrganization.Billing.AlertThreshold : [{ percentage: '', count: '', Email_send: false }]);
 	const [currentIndex, setCurrentIndex] = useState(0);
+	const [deleteAlertVerification, setDeleteAlertVerification] = useState(false);
 
 	useEffect(() => {
 		if (userdata.app_execution_limit !== undefined && userdata.app_execution_usage !== undefined) {
@@ -353,13 +355,13 @@ const Billing = (props) => {
 		if (subscription.name === "Enterprise" && subscription.active === true) {
 			top_text = "Current Plan"
 
-			newPaperstyle.border = "1px solid #f85a3e"
+			// newPaperstyle.border = "1px solid #f85a3e"
 		}
 
 		var showSupport = false
 		if (subscription.name.includes("default")) {
 			top_text = "Custom Contract"
-			newPaperstyle.border = "1px solid #f85a3e"
+			newPaperstyle.border = "1px solid rgba(255,255,255,0.3)"
 			showSupport = true
 		}
 
@@ -379,7 +381,7 @@ const Billing = (props) => {
 
 		if (highlight === true) {
 			// Add an "Upgrade now" button
-			newPaperstyle.border = "1px solid #f85a3e"
+			newPaperstyle.border = "1px solid rgba(255,255,255,0.3)"
 		}
 
 		if (hovered) {
@@ -820,7 +822,8 @@ const Billing = (props) => {
 								height: 40,
 								fontSize: 16,
 								color: "white",
-								backgroundImage: userdata.has_card_available ? null : "linear-gradient(to right, #f86a3e, #f34079)",
+								backgroundColor: userdata.has_card_available ? null : "#f86743",
+								// backgroundImage: userdata.has_card_available ? null : "linear-gradient(to right, #f86a3e, #f34079)",
 								textTransform: "none",
 
 							}}
@@ -852,7 +855,7 @@ const Billing = (props) => {
 									height: 40,
 									fontSize: 16,
 									color: "white",
-									backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)",
+									backgroundColor: "#f86743",
 									textTransform: 'none'
 								}}
 								onClick={() => {
@@ -1036,11 +1039,11 @@ const Billing = (props) => {
 			<Paper style={{
 				padding: 20,
 				// maxWidth: 400,
-				minWidth: 340,
+				width: 340,
 				height: 480,
 				backgroundColor: hovered ? "#232427" : theme.palette.platformColor,
 				borderRadius: theme.palette.borderRadius * 2,
-				border: "1px solid #f85a3e",
+				border: "1px solid rgba(255,255,255,0.3)",
 				marginRight: 10,
 				marginTop: 15,
 			}}
@@ -1133,8 +1136,8 @@ const Billing = (props) => {
 							height: 40,
 							fontSize: 16,
 							color: "white",
-							backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)",
+							backgroundColor: "#f86743",
-							textTransform: 'none'
+							textTransform: 'none',
 						}}
 						onClick={() => {
 							if (Cloud) {
@@ -1188,7 +1191,7 @@ const Billing = (props) => {
 									height: 40,
 									fontSize: 16,
 									color: "white",
-									backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)",
+									backgroundColor: "#f86743",
 									textTransform: 'none',
 									cursor: getProfessionalServices ? 'pointer' : 'not-allowed',
 									opacity: getProfessionalServices ? 1 : 0.6,
@@ -1315,7 +1318,7 @@ const Billing = (props) => {
 					width: 340,
 					backgroundColor: hovered ? "#232427" : theme.palette.platformColor,
 					borderRadius: theme.palette.borderRadius * 2,
-					border: "1px solid #f85a3e",
+					border: "1px solid rgba(255,255,255,0.3)",
 					marginRight: 10,
 					marginTop: 15,
 				}}
@@ -1373,7 +1376,7 @@ const Billing = (props) => {
 							height: 40,
 							fontSize: 16,
 							color: "white",
-							backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)",
+							backgroundColor: "#f86743",
 							textTransform: 'none'
 						}}
 						onClick={() => {
@@ -1381,6 +1384,8 @@ const Billing = (props) => {
 								ReactGA.event({
 									category: "Billing",
 									action: "click_public_training_button",
+									label: "Public Training",
+									userId: userdata?.id
 								});
 							}
 							navigate("/training")
@@ -1399,21 +1404,24 @@ const Billing = (props) => {
 							height: 40,
 							fontSize: 16,
 							color: "white",
-							backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)",
+							backgroundColor: "#f86743",
 							textTransform: 'none'
 						}}
 						onClick={() => {
 							if (Cloud) {
 								ReactGA.event({
 									category: "Billing",
-									action: "click_public_training_button",
+									action: "click_private_training_button",
+									label: "Private Training",
+									userId: userdata?.id,
 								});
 							}
-							setOpenPrivateTraining(true)
+							setOpenPrivateTraining(true);
 						}}
 					>
 						Private Training
 					</Button>
+
 					<Dialog open={openPrivateTraining}
 						onClose={() => setOpenPrivateTraining(false)}
 						fullWidth
@@ -1818,6 +1826,7 @@ const Billing = (props) => {
 		// Update currentIndex based on remaining elements
 		const findCurrentIndex = newAlertThresholds.some(threshold => threshold.Email_send === false);
 		setCurrentIndex(findCurrentIndex ? newAlertThresholds.findIndex(threshold => threshold.Email_send === false) : - 1);
+		toast.info("Alert Threshold deleted successfully. Don't forget to save your changes.");
 	};
 
 	const HandleEditOrgForAlertThreshold = (orgId) => {
@@ -1997,15 +2006,6 @@ const Billing = (props) => {
 							/>
 						</span>
 						: null}
-				{isCloud && billingInfo.subscription !== undefined && billingInfo.subscription !== null ? isChildOrg ? null :
-					<ConsultationManagement
-						globalUrl={globalUrl}
-						userdata={userdata}
-						selectedOrganization={selectedOrganization}
-					/> : null}
-
-
-				<TrainingService />
 
 				{isCloud &&
 					selectedOrganization.subscriptions !== undefined &&
@@ -2261,7 +2261,29 @@ const Billing = (props) => {
 
 			  </div>
             ) : null*/}
-			<div style={{ marginTop: 20, marginLeft: 10 }}>
+			{!isChildOrg && isCloud && (
+				<div style={{ display: 'flex', flexDirection: 'column', marginTop: 10 }}>
+					<Typography style={{ marginBottom: 5 }} variant="h4">
+						Professional Services
+					</Typography>
+					<Typography color="textSecondary">
+						We offer priority support through consultations and training to help you make the most of our product. If you have any questions, please reach out to us at support@shuffler.io.
+					</Typography>
+					<div style={{ display: 'flex', flexDirection: 'row', marginTop: 5 }}>
+						{billingInfo.subscription !== undefined && billingInfo.subscription !== null ? (
+							isChildOrg ? null : (
+								<ConsultationManagement
+									globalUrl={globalUrl}
+									userdata={userdata}
+									selectedOrganization={selectedOrganization}
+								/>
+							)
+						) : null}
+						<TrainingService />
+					</div>
+				</div>
+			)}
+			<div style={{ marginTop: isCloud && 40, marginLeft: 10 }}>
 				<Typography
 					style={{ marginBottom: 5 }}
 					variant="h4"
@@ -2303,7 +2325,9 @@ const Billing = (props) => {
 							: " " + 0 + " "}
 						app runs.
 					</Typography>
-
+					<Typography variant="body1" color="textSecondary" style={{ marginTop: 10 }}>
+						Please note: Once your app runs reach the set alert threshold, all admins in the organization will receive an email notification.
+					</Typography>
 					<div style={{ marginTop: 15 }}>
 						{alertThresholds.map((threshold, index) => (
 							<div key={index} style={{ display: 'flex', alignItems: 'center' }}>
@@ -2354,6 +2378,7 @@ const Billing = (props) => {
 									margin="normal"
 									variant="outlined"
 								/>
+								<span style={{ marginLeft: alertThresholds[index].Email_send === true ? 10 : 35, color: 'green' }}>{alertThresholds[index].Email_send === true && <Tooltip title="We have already sent alert for this threshold."><CheckCircle /></Tooltip>}</span>
 								{
 									alertThresholds.length > 1 &&
 									(
@@ -2362,18 +2387,24 @@ const Billing = (props) => {
 											disableElevation
 											sx={{
 												padding: 0,
-												color: 'red',
 												'&:hover': {
 													backgroundColor: 'transparent',
 												},
 											}}
 
-											onClick={() => { handleDeleteAlertThreshold(index) }}
+											onClick={() => { setDeleteAlertVerification(true) }}
 										>
-											<DeleteIcon />
+											<DeleteIcon sx={{ color: theme.palette.secondary.main }} />
 										</Button>
 									)
 								}
+								<Dialog open={deleteAlertVerification} onClose={() => setDeleteAlertVerification(false)} sx={{ '& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.3)', }, }}>
+									<DialogTitle>Are you sure you want to delete this threshold?</DialogTitle>
+									<DialogActions>
+										<Button style={{ textTransform: 'none', fontSize: 16 }} color="primary" onClick={() => setDeleteAlertVerification(false)}>Cancel</Button>
+										<Button style={{ textTransform: 'none', fontSize: 16 }} color="secondary" onClick={() => { handleDeleteAlertThreshold(index); setDeleteAlertVerification(false) }} >Delete</Button>
+									</DialogActions>
+								</Dialog>
 							</div>
 						))}
 					</div>

frontend/src/components/NewHeader.jsx

@@ -296,38 +296,50 @@ const Header = (props) => {
         if (response.status !== 200) {
           console.log("Error in response");
         } else {
-          localStorage.removeItem("apps")
+          localStorage.removeItem("apps");
-          localStorage.removeItem("workflows")
+          localStorage.removeItem("workflows");
-          localStorage.removeItem("userinfo")
+          localStorage.removeItem("userinfo");
         }
 
         return response.json();
       })
       .then(function (responseJson) {
-        console.log("In here?")
+        console.log("In here?");
         if (responseJson.success === true) {
-          if (responseJson.region_url !== undefined && responseJson.region_url !== null && responseJson.region_url.length > 0) {
+          if (
+            responseJson.region_url !== undefined &&
+            responseJson.region_url !== null &&
+            responseJson.region_url.length > 0
+          ) {
             console.log("Region Change: ", responseJson.region_url);
             localStorage.setItem("globalUrl", responseJson.region_url);
             //globalUrl = responseJson.region_url
           }
           if (responseJson["reason"] === "SSO_REDIRECT") {
             setTimeout(() => {
-              toast.info("Redirecting to SSO login page as SSO is required for this organization.")
+              toast.info(
-              window.location.href = responseJson["url"]
+                "Redirecting to SSO login page as SSO is required for this organization."
-              return
+              );
-            }, 2000)
+              window.location.href = responseJson["url"];
+              return;
+            }, 2000);
           } else {
+            toast("Successfully changed active organization - refreshing!");
             setTimeout(() => {
-              window.location.reload()
+              window.location.reload();
             }, 2000);
           }
-          toast("Successfully changed active organization - refreshing!");
         } else {
-          if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason.length > 0) {
+          if (
+            responseJson.reason !== undefined &&
+            responseJson.reason !== null &&
+            responseJson.reason.length > 0
+          ) {
             toast(responseJson.reason);
           } else {
-            toast("Failed changing org. Try again or contact support@shuffler.io if this persists.");
+            toast(
+              "Failed changing org. Try again or contact support@shuffler.io if this persists."
+            );
           }
         }
       })

frontend/src/components/OrgHeaderexpanded.jsx

@@ -320,9 +320,71 @@ const OrgHeaderexpanded = (props) => {
 	);
 
   const toggleBetweenRequiredOrOptional = (event) => {
+    if (
+      ssoEntrypoint === "" &&
+      openidAuthorization === "" &&
+      openidToken === ""
+    ) {
+      if (!SSORequired) {
+        toast.error(
+          "Please fill in fields for either OpenID connect or SSO before continuing. "
+        );
+        return;
+      }
+    } else {
+      toast.info("Toggled SSO. Remember to save.");
+    }
+
     setSSORequired(event.target.checked);
   };
 
+  const HandleTestSSO = () => {
+    const url = `${globalUrl}/api/v1/orgs/${selectedOrganization?.id}/change`;
+    const data = {
+      org_id: selectedOrganization?.id,
+      sso_test: true,
+    };
+
+    fetch(url, {
+      mode: "cors",
+      credentials: "include",
+      crossDomain: true,
+      method: "POST",
+      body: JSON.stringify(data),
+      withCredentials: true,
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          toast.error(
+            "Failed to test sso. Please try again later or contact support@shuffler.io if issue persist."
+          );
+          return;
+        }
+        return response.json();
+      })
+      .then((responjson) => {
+        if (responjson["reason"] === "SSO_REDIRECT") {
+          setTimeout(() => {
+            toast.info(
+              "Redirecting to SSO login page as SSO is required for this organization."
+            );
+            window.location.href = responjson["url"];
+            return;
+          }, 2000);
+        } else {
+          toast.error(
+            "No SSO found for this org. Please set up sso for this org."
+          );
+        }
+      })
+      .catch((err) => {
+        console.log("error for sso test is: ", err);
+      });
+  };
+
 	return (
 		<div style={{ textAlign: "center" }}>
 			<Grid container spacing={3} style={{ textAlign: "left" }}>
@@ -664,8 +726,22 @@ const OrgHeaderexpanded = (props) => {
 					SSO Configuration
 				</Typography>
 
-				<div style={{ display: 'flex', flexDirection: 'column', marginLeft: 10, width: '100%', }}>
+        <div
-					<Typography variant="body2" color="textSecondary" style={{ margin: '5px 0px 5px 10px' }}>Make SAML SSO or OpenID Authentication Required or Optional for Your Organization.</Typography>
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            marginLeft: 10,
+            width: "100%",
+          }}
+        >
+          <Typography
+            variant="body2"
+            color="textSecondary"
+            style={{ margin: "5px 0px 5px 10px" }}
+          >
+            Make SAML SSO or OpenID Authentication Required or Optional for Your
+            Organization.
+          </Typography>
           <div>
             <Switch
               checked={SSORequired}
@@ -674,12 +750,63 @@ const OrgHeaderexpanded = (props) => {
               color="primary"
               title="Make SAML SSO or OpenID Authentication Required or Optional for Your Organization"
             />
-						{SSORequired ? 'Required' : 'Optional'}
+            {SSORequired ? "Required" : "Optional"}
           </div>
         </div>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            marginTop: 20,
+            marginLeft: 10,
+            width: "100%",
+            borderBottom: "1px solid #414347",
+            paddingBottom: 10,
+          }}
+        >
+          <Typography variant="body1" style={{ margin: "5px 0px 5px 10px" }}>
+            You can test your SSO configuration by clicking the button below.
+            Before testing, ensure you have set Open ID Connect or SAML SSO
+            credentials.
+          </Typography>
+          <Tooltip
+            title={
+              !(
+                ssoEntrypoint.length > 0 ||
+                ssoCertificate.length > 0 ||
+                openidAuthorization.length > 0 ||
+                openidClientId.length > 0
+              )
+                ? "Please ensure all SSO credentials are set before testing."
+                : ""
+            }
+          >
+            <span style={{ width: 100 }}>
+              <Button
+                variant="outlined"
+                color="primary"
+                style={{ width: 100, textTransform: "none", margin: 10 }}
+                disabled={
+                  !(
+                    ssoEntrypoint.length > 0 ||
+                    ssoCertificate.length > 0 ||
+                    openidAuthorization.length > 0 ||
+                    openidClientId.length > 0
+                  )
+                }
+                onClick={HandleTestSSO}
+              >
+                Test SSO
+              </Button>
+            </span>
+          </Tooltip>
+        </div>
+        <div></div>
         <Grid item xs={12} style={{}}>
-					<Typography variant="h6" style={{ textAlign: "center", }}>OpenID connect</Typography>
+          <Typography variant="h6" style={{ textAlign: "center" }}>
-					<Grid container style={{ marginTop: 10, }}>
+            OpenID connect
+          </Typography>
+          <Grid container style={{ marginTop: 10 }}>
             <Grid item xs={6} style={{}}>
               <span>
                 <Typography>Client ID</Typography>
@@ -759,7 +886,7 @@ const OrgHeaderexpanded = (props) => {
               </span>
             </Grid>
           </Grid>
-					<Grid container style={{ marginTop: 10, }}>
+          <Grid container style={{ marginTop: 10 }}>
             <Grid item xs={6} style={{}}>
               <span>
                 <Typography>Authorization URL</Typography>
@@ -781,7 +908,7 @@ const OrgHeaderexpanded = (props) => {
                   placeholder="The OpenID authorization URL (usually ends with /authorize)"
                   value={openidAuthorization}
                   onChange={(e) => {
-										setOpenidAuthorization(e.target.value)
+                    setOpenidAuthorization(e.target.value);
                   }}
                   InputProps={{
                     classes: {
@@ -815,7 +942,7 @@ const OrgHeaderexpanded = (props) => {
                   placeholder="The OpenID token URL (usually ends with /token)"
                   value={openidToken}
                   onChange={(e) => {
-										setOpenidToken(e.target.value)
+                    setOpenidToken(e.target.value);
                   }}
                   InputProps={{
                     classes: {
@@ -832,9 +959,11 @@ const OrgHeaderexpanded = (props) => {
         </Grid>
         {/* } */}
         {/*isCloud ? null : */}
-				<Grid item xs={12} style={{ marginTop: 50, }}>
+        <Grid item xs={12} style={{ marginTop: 50 }}>
-					<Typography variant="h6" style={{ textAlign: "center", }}>SAML SSO (v1.1)</Typography>
+          <Typography variant="h6" style={{ textAlign: "center" }}>
-					<Grid container style={{ marginTop: 20, }}>
+            SAML SSO (v1.1)
+          </Typography>
+          <Grid container style={{ marginTop: 20 }}>
             <Grid item xs={6} style={{}}>
               <span>
                 <Typography>SSO Entrypoint (IdP)</Typography>
@@ -909,11 +1038,15 @@ const OrgHeaderexpanded = (props) => {
               </span>
             </Grid>
           </Grid>
-					{isCloud ?
+          {isCloud ? (
-						<Typography variant="body2" style={{ textAlign: "left", }} color="textSecondary">
+            <Typography
+              variant="body2"
+              style={{ textAlign: "left" }}
+              color="textSecondary"
+            >
               IdP URL for Shuffle: https://shuffler.io/api/v1/login_sso
             </Typography>
-						: null}
+          ) : null}
         </Grid>
         {isCloud ? null : (
           <Grid item xs={6} style={{}}>
@@ -1052,7 +1185,14 @@ const OrgHeaderexpanded = (props) => {
           </Grid>
         )}
 
-				<div style={{ margin: "auto", textalign: "center", marginTop: 15, marginBottom: 15, }}>
+        <div
+          style={{
+            margin: "auto",
+            textalign: "center",
+            marginTop: 15,
+            marginBottom: 15,
+          }}
+        >
           {orgSaveButton}
         </div>
         {/*
@@ -1066,7 +1206,7 @@ const OrgHeaderexpanded = (props) => {
 					*/}
       </Grid>
     </div>
-	)
+  );
-}
+};
 
 export default OrgHeaderexpanded;