sso_2.0.0

This commit is contained in:
lalitdeore
2024-10-04 13:17:52 +05:30
parent f2a0aac31d
commit acc039623f
4 changed files with 627 additions and 444 deletions
+3 -3
View File
@@ -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 {
continue
}
// if len(org.ManagerOrgs) > 0 || len(org.CreatorOrg) > 0 {
// continue
// }
// Should run calculations
if len(org.SSOConfig.OpenIdAuthorization) > 0 {
+60 -29
View File
@@ -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)",
textTransform: 'none'
backgroundColor: "#f86743",
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>
+25 -13
View File
@@ -296,38 +296,50 @@ const Header = (props) => {
if (response.status !== 200) {
console.log("Error in response");
} else {
localStorage.removeItem("apps")
localStorage.removeItem("workflows")
localStorage.removeItem("userinfo")
localStorage.removeItem("apps");
localStorage.removeItem("workflows");
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.")
window.location.href = responseJson["url"]
return
}, 2000)
toast.info(
"Redirecting to SSO login page as SSO is required for this organization."
);
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."
);
}
}
})
+157 -17
View File
@@ -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%', }}>
<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
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>
<Grid container style={{ marginTop: 10, }}>
<Typography variant="h6" style={{ textAlign: "center" }}>
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, }}>
<Typography variant="h6" style={{ textAlign: "center", }}>SAML SSO (v1.1)</Typography>
<Grid container style={{ marginTop: 20, }}>
<Grid item xs={12} style={{ marginTop: 50 }}>
<Typography variant="h6" style={{ textAlign: "center" }}>
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 ?
<Typography variant="body2" style={{ textAlign: "left", }} color="textSecondary">
{isCloud ? (
<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;