sso_2.0.0
This commit is contained in:
lalitdeore
@@ -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>
|
||||
@@ -2415,4 +2446,4 @@ const Billing = (props) => {
|
||||
)
|
||||
}
|
||||
|
||||
export default Billing;
|
||||
export default Billing;
|
||||
@@ -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."
|
||||
);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -319,9 +319,71 @@ const OrgHeaderexpanded = (props) => {
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
const toggleBetweenRequiredOrOptional = (event) => {
|
||||
setSSORequired(event.target.checked);
|
||||
};
|
||||
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" }}>
|
||||
@@ -664,398 +726,476 @@ 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>
|
||||
<Switch
|
||||
checked={SSORequired}
|
||||
onChange={toggleBetweenRequiredOrOptional}
|
||||
name="onOffSwitch"
|
||||
color="primary"
|
||||
title="Make SAML SSO or OpenID Authentication Required or Optional for Your Organization"
|
||||
/>
|
||||
{SSORequired ? 'Required' : 'Optional'}
|
||||
</div>
|
||||
</div>
|
||||
<Grid item xs={12} style={{}}>
|
||||
<Typography variant="h6" style={{ textAlign: "center", }}>OpenID connect</Typography>
|
||||
<Grid container style={{ marginTop: 10, }}>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Client ID</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
disabled={
|
||||
selectedOrganization.manager_orgs !== undefined &&
|
||||
selectedOrganization.manager_orgs !== null &&
|
||||
selectedOrganization.manager_orgs.length > 0
|
||||
}
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="The OpenID client ID from the identity provider"
|
||||
value={openidClientId}
|
||||
onChange={(e) => {
|
||||
setOpenidClientId(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Client Secret (optional)</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
disabled={
|
||||
selectedOrganization.manager_orgs !== undefined &&
|
||||
selectedOrganization.manager_orgs !== null &&
|
||||
selectedOrganization.manager_orgs.length > 0
|
||||
}
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="The OpenID client secret - DONT use this if dealing with implicit auth / PKCE"
|
||||
value={openidClientSecret}
|
||||
onChange={(e) => {
|
||||
setOpenidClientSecret(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container style={{ marginTop: 10, }}>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Authorization URL</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
placeholder="The OpenID authorization URL (usually ends with /authorize)"
|
||||
value={openidAuthorization}
|
||||
onChange={(e) => {
|
||||
setOpenidAuthorization(e.target.value)
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Token URL</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
placeholder="The OpenID token URL (usually ends with /token)"
|
||||
value={openidToken}
|
||||
onChange={(e) => {
|
||||
setOpenidToken(e.target.value)
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</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={6} style={{}}>
|
||||
<span>
|
||||
<Typography>SSO Entrypoint (IdP)</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
disabled={
|
||||
selectedOrganization.manager_orgs !== undefined &&
|
||||
selectedOrganization.manager_orgs !== null &&
|
||||
selectedOrganization.manager_orgs.length > 0
|
||||
}
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="The entrypoint URL from your provider"
|
||||
value={ssoEntrypoint}
|
||||
onChange={(e) => {
|
||||
setSsoEntrypoint(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>SSO Certificate (X509)</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
placeholder="The X509 certificate to use"
|
||||
value={ssoCertificate}
|
||||
onChange={(e) => {
|
||||
setSsoCertificate(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{isCloud ?
|
||||
<Typography variant="body2" style={{ textAlign: "left", }} color="textSecondary">
|
||||
IdP URL for Shuffle: https://shuffler.io/api/v1/login_sso
|
||||
</Typography>
|
||||
: null}
|
||||
</Grid>
|
||||
{isCloud ? null : (
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>App Download URL</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="A description for the organization"
|
||||
value={appDownloadUrl}
|
||||
onChange={(e) => {
|
||||
setAppDownloadUrl(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
)}
|
||||
{isCloud ? null : (
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>App Download Branch</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="A description for the organization"
|
||||
value={appDownloadBranch}
|
||||
onChange={(e) => {
|
||||
setAppDownloadBranch(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
)}
|
||||
{isCloud ? null : (
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Workflow Download URL</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="A description for the organization"
|
||||
value={workflowDownloadUrl}
|
||||
onChange={(e) => {
|
||||
setWorkflowDownloadUrl(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
)}
|
||||
{isCloud ? null : (
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Workflow Download Branch</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="A description for the organization"
|
||||
value={workflowDownloadBranch}
|
||||
onChange={(e) => {
|
||||
setWorkflowDownloadBranch(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
)}
|
||||
<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}
|
||||
onChange={toggleBetweenRequiredOrOptional}
|
||||
name="onOffSwitch"
|
||||
color="primary"
|
||||
title="Make SAML SSO or OpenID Authentication Required or Optional for Your Organization"
|
||||
/>
|
||||
{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 }}>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Client ID</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
disabled={
|
||||
selectedOrganization.manager_orgs !== undefined &&
|
||||
selectedOrganization.manager_orgs !== null &&
|
||||
selectedOrganization.manager_orgs.length > 0
|
||||
}
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="The OpenID client ID from the identity provider"
|
||||
value={openidClientId}
|
||||
onChange={(e) => {
|
||||
setOpenidClientId(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Client Secret (optional)</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
disabled={
|
||||
selectedOrganization.manager_orgs !== undefined &&
|
||||
selectedOrganization.manager_orgs !== null &&
|
||||
selectedOrganization.manager_orgs.length > 0
|
||||
}
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="The OpenID client secret - DONT use this if dealing with implicit auth / PKCE"
|
||||
value={openidClientSecret}
|
||||
onChange={(e) => {
|
||||
setOpenidClientSecret(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container style={{ marginTop: 10 }}>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Authorization URL</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
placeholder="The OpenID authorization URL (usually ends with /authorize)"
|
||||
value={openidAuthorization}
|
||||
onChange={(e) => {
|
||||
setOpenidAuthorization(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Token URL</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
placeholder="The OpenID token URL (usually ends with /token)"
|
||||
value={openidToken}
|
||||
onChange={(e) => {
|
||||
setOpenidToken(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</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={6} style={{}}>
|
||||
<span>
|
||||
<Typography>SSO Entrypoint (IdP)</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
disabled={
|
||||
selectedOrganization.manager_orgs !== undefined &&
|
||||
selectedOrganization.manager_orgs !== null &&
|
||||
selectedOrganization.manager_orgs.length > 0
|
||||
}
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="The entrypoint URL from your provider"
|
||||
value={ssoEntrypoint}
|
||||
onChange={(e) => {
|
||||
setSsoEntrypoint(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>SSO Certificate (X509)</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
multiline={true}
|
||||
rows={2}
|
||||
placeholder="The X509 certificate to use"
|
||||
value={ssoCertificate}
|
||||
onChange={(e) => {
|
||||
setSsoCertificate(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{isCloud ? (
|
||||
<Typography
|
||||
variant="body2"
|
||||
style={{ textAlign: "left" }}
|
||||
color="textSecondary"
|
||||
>
|
||||
IdP URL for Shuffle: https://shuffler.io/api/v1/login_sso
|
||||
</Typography>
|
||||
) : null}
|
||||
</Grid>
|
||||
{isCloud ? null : (
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>App Download URL</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="A description for the organization"
|
||||
value={appDownloadUrl}
|
||||
onChange={(e) => {
|
||||
setAppDownloadUrl(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
)}
|
||||
{isCloud ? null : (
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>App Download Branch</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="A description for the organization"
|
||||
value={appDownloadBranch}
|
||||
onChange={(e) => {
|
||||
setAppDownloadBranch(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
)}
|
||||
{isCloud ? null : (
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Workflow Download URL</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="A description for the organization"
|
||||
value={workflowDownloadUrl}
|
||||
onChange={(e) => {
|
||||
setWorkflowDownloadUrl(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
)}
|
||||
{isCloud ? null : (
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>Workflow Download Branch</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{
|
||||
flex: "1",
|
||||
marginTop: "5px",
|
||||
marginRight: "15px",
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}}
|
||||
fullWidth={true}
|
||||
type="name"
|
||||
id="outlined-with-placeholder"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
placeholder="A description for the organization"
|
||||
value={workflowDownloadBranch}
|
||||
onChange={(e) => {
|
||||
setWorkflowDownloadBranch(e.target.value);
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
<div style={{ margin: "auto", textalign: "center", marginTop: 15, marginBottom: 15, }}>
|
||||
{orgSaveButton}
|
||||
</div>
|
||||
{/*
|
||||
<div
|
||||
style={{
|
||||
margin: "auto",
|
||||
textalign: "center",
|
||||
marginTop: 15,
|
||||
marginBottom: 15,
|
||||
}}
|
||||
>
|
||||
{orgSaveButton}
|
||||
</div>
|
||||
{/*
|
||||
<span style={{textAlign: "center"}}>
|
||||
{expanded ?
|
||||
<ExpandLessIcon />
|
||||
@@ -1064,9 +1204,9 @@ const OrgHeaderexpanded = (props) => {
|
||||
}
|
||||
</span>
|
||||
*/}
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrgHeaderexpanded;
|
||||
|
||||
Reference in New Issue
Block a user