marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed some minor tracker issues

Browse Source
This commit is contained in:
Frikky
2025-03-18 19:03:13 +01:00
parent 06c8fb5a46
commit 219f8158b8
3 changed files with 192 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Billing.jsx
+2 -2
View File
@@ -1210,8 +1210,8 @@ const Billing = memo((props) => {
}
const url = userdata.licensed === true
? "https://book.stripe.com/6oEeY23fw2T84M06oq"
: "https://book.stripe.com/00g6rw3fw9hwguI289"
? "https://buy.stripe.com/aEU3fk17o0L092g5kt"
: "https://buy.stripe.com/aEU3fk17o0L092g5kt"
window.open(url, "_blank")
}}
>
frontend/src/components/ssoTab.jsx
+81 -34
View File
@@ -7,11 +7,7 @@ import {
Tooltip,
TextField,
Grid,
Skeleton,
Dialog,
DialogTitle,
DialogContent,
Box,
Checkbox
} from "@mui/material";
import { makeStyles } from "@mui/styles";
import { Link } from "react-router-dom";
@@ -30,6 +26,8 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
const classes = useStyles();
const [show2faSetup, setShow2faSetup] = React.useState(false);
const [autoPrivision, setAutoProvision] = React.useState(selectedOrganization?.sso_config?.auto_provision)
const [showOpenIdCred, setShowOpenIdCred] = React.useState(false);
const [showSamlCred, setShowSamlCred] = React.useState(false);
const [ssoEntrypoint, setSsoEntrypoint] = React.useState(
selectedOrganization.sso_config === undefined
? ""
@@ -393,7 +391,27 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
</span>
<Typography style={{ textAlign: "left", fontSize: 16, marginTop: 8, color: "rgba(158, 158, 158, 1)", fontWeight: 400 }}>
IdP URL for Shuffle OpenID: <Link to={`${globalUrl}/api/v1/login_openid`} target="_blank" style={{ color: "rgba(241, 241, 241, 1)", textDecoration: "none", fontSize: 16,}}>{`${globalUrl}/api/v1/login_openid`}</Link>
</Typography>
</Typography>
<div style={{ display: 'flex', marginTop: 10, }}>
<Typography
style={{
textAlign: "left",
fontSize: 16,
marginTop: 8,
color: "rgba(158, 158, 158, 1)",
fontWeight: 400,
}}
>
Show OpenID Credentials
</Typography>
<Checkbox
checked={showOpenIdCred}
onChange={(e) => setShowOpenIdCred(e.target.checked)}
name="showOpenIdCred"
color="primary"
style={{ color: "rgba(255, 255, 255, 1)", }}
/>
</div>
<Grid container style={{ marginTop: 8, }} spacing={2}>
<Grid item xs={6} style={{}}>
<span>
@@ -407,30 +425,29 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}}
fullWidth={true}
type="name"
multiline={true}
rows={2}
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);
}}
value={showOpenIdCred ? openidClientId : openidClientId?.length > 0 ? "•".repeat(50) : ""}
onChange={(e) => setOpenidClientId(e.target.value)}
onFocus={(e) => setShowOpenIdCred(true)}
onBlur={(e) => setShowOpenIdCred(false)}
InputProps={{
classes: {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
},
style: {
color: "white",
fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
fontWeight: 400,
fontSize: 16,
borderRadius: 4,
color: "white",
fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
fontWeight: 400,
fontSize: 16,
borderRadius: 4,
},
}}
/>
/>
</span>
</Grid>
<Grid item xs={6} style={{}}>
@@ -445,17 +462,19 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}}
fullWidth={true}
type="name"
type={showOpenIdCred ? "text" : "password"}
multiline={true}
rows={2}
id="outlined-with-placeholder"
margin="normal"
variant="outlined"
placeholder="The OpenID client secret - DONT use this if dealing with implicit auth / PKCE"
value={openidClientSecret}
value={showOpenIdCred ? openidClientSecret : openidClientSecret?.length > 0 ? "•".repeat(50) : ""}
onChange={(e) => {
setOpenidClientSecret(e.target.value);
}}
}}
onFocus={(e) => setShowOpenIdCred(true)}
onBlur={(e) => setShowOpenIdCred(false)}
InputProps={{
classes: {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
@@ -485,17 +504,19 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}}
fullWidth={true}
type="name"
type={showOpenIdCred ? "text" : "password"}
id="outlined-with-placeholder"
margin="normal"
variant="outlined"
multiline={true}
rows={2}
placeholder="The OpenID authorization URL (usually ends with /authorize)"
value={openidAuthorization}
value={showOpenIdCred ? openidAuthorization : openidAuthorization?.length > 0 ? "•".repeat(50) : ""}
onChange={(e) => {
setOpenidAuthorization(e.target.value)
}}
}}
onFocus={(e) => setShowOpenIdCred(true)}
onBlur={(e) => setShowOpenIdCred(false)}
InputProps={{
classes: {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
@@ -523,17 +544,19 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}}
fullWidth={true}
type="name"
type={showOpenIdCred ? "text" : "password"}
id="outlined-with-placeholder"
margin="normal"
variant="outlined"
multiline={true}
rows={2}
placeholder="The OpenID token URL (usually ends with /token)"
value={openidToken}
value={showOpenIdCred ? openidToken : openidToken?.length > 0 ? "•".repeat(50) : ""}
onChange={(e) => {
setOpenidToken(e.target.value)
}}
}}
onFocus={(e) => setShowOpenIdCred(true)}
onBlur={(e) => setShowOpenIdCred(false)}
InputProps={{
classes: {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
@@ -557,7 +580,27 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
<Typography variant="h4" style={{ textAlign: "left", color: "rgba(241, 241, 241, 1)", fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontSize: 24, fontWeight: 600, }}>SAML SSO (v1.1)</Typography>
<Typography variant="body2" style={{ textAlign: "left", marginTop: 8, color: "rgba(241, 241, 241, 1)", fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontSize: 16, fontWeight: 400, color: "rgba(158, 158, 158, 1)" }} color="textSecondary">
IdP URL for Shuffle SAML/SSO: <Link to={`${globalUrl}/api/v1/login_sso`} target="_blank" style={{ color: "rgba(241, 241, 241, 1)", textDecoration: "none" }}>{`${globalUrl}/api/v1/login_sso`}</Link>
</Typography>
</Typography>
<div style={{ display: 'flex', marginTop: 10, }}>
<Typography
style={{
textAlign: "left",
fontSize: 16,
marginTop: 8,
color: "rgba(158, 158, 158, 1)",
fontWeight: 400,
}}
>
Show SAML Credentials
</Typography>
<Checkbox
checked={showSamlCred}
onChange={(e) => setShowSamlCred(e.target.checked)}
name="showSamlCred"
color="primary"
style={{ color: "rgba(255, 255, 255, 1)", }}
/>
</div>
<Grid container style={{ marginTop: 10, }} spacing={2}>
<Grid item xs={6} style={{}}>
<span>
@@ -571,17 +614,19 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}}
fullWidth={true}
type="name"
type={showSamlCred ? "text" : "password"}
multiline={true}
rows={2}
id="outlined-with-placeholder"
margin="normal"
variant="outlined"
placeholder="The entrypoint URL from your provider"
value={ssoEntrypoint}
value={showSamlCred ? ssoEntrypoint : ssoEntrypoint?.length > 0 ? "•".repeat(50) : ""}
onChange={(e) => {
setSsoEntrypoint(e.target.value);
}}
}}
onFocus={(e) => setShowSamlCred(true)}
onBlur={(e) => setShowSamlCred(false)}
InputProps={{
classes: {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
@@ -609,14 +654,16 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}}
fullWidth={true}
type="name"
type={showSamlCred ? "text" : "password"}
id="outlined-with-placeholder"
margin="normal"
variant="outlined"
multiline={true}
rows={2}
placeholder="The X509 certificate to use"
value={ssoCertificate}
value={showSamlCred ? ssoCertificate : ssoCertificate?.length > 0 ? "•".repeat(50) : ""}
onFocus={(e) => setShowSamlCred(true)}
onBlur={(e) => setShowSamlCred(false)}
onChange={(e) => {
setSsoCertificate(e.target.value);
}}
@@ -646,4 +693,4 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
)
}
export default SSOTab
export default SSOTab
frontend/src/views/LoginPage.jsx
+109 -62
View File
@@ -5,8 +5,8 @@ import { useNavigate, Link, useParams } from "react-router-dom";
import { isMobile } from "react-device-detect";
import { toast } from 'react-toastify';
import { useInterval } from "react-powerhooks";
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
import {
ConnectingAirportsOutlined,
ConstructionOutlined,
@@ -81,21 +81,6 @@ const useStyles = makeStyles({
notchedOutline: {
borderColor: "#f85a3e !important"
},
marketplaceButton: {
width: "100%",
justifyContent: "flex-start",
padding: "12px",
marginBottom: "12px",
backgroundColor: "#1A1A1A",
border: "1px solid #494949",
borderRadius: "8px",
color: "white",
opacity: 0.7,
'&:hover': {
opacity: 1,
cursor: "not-allowed",
},
},
marketplaceIcon: {
width: 28,
height: 28,
@@ -174,6 +159,14 @@ const FreePlanCard = ({ classes }) => {
const MarketplaceCard = ({ classes }) => {
const marketplaceOptions = [
{
name: "Open Source Install",
logo: "https://static.cdnlogo.com/logos/g/69/github-icon.svg",
tooltipText: "Click to install!",
valid: true,
link: "https://github.com/shuffle/shuffle/blob/main/.github/install-guide.md"
},
{
name: "Amazon Web Services",
logo: "https://cdn.cdnlogo.com/logos/a/19/aws.svg",
@@ -213,31 +206,50 @@ const MarketplaceCard = ({ classes }) => {
Self Host
</h2>
{marketplaceOptions.map((option, index) => (
<Tooltip
key={index}
title={option.tooltipText}
placement="top"
arrow
>
<button
className={classes.marketplaceButton}
disabled
{marketplaceOptions.map((option, index) => {
return (
<Tooltip
key={index}
title={option.tooltipText}
placement="top"
arrow
>
<img
src={option.logo}
alt={option.name}
className={classes.marketplaceIcon}
style={{
filter: option.valid === true ? null : "grayscale(1)",
<button
onClick={() => {
if (option.valid === true) {
window.open(option.link, "_blank")
}
}}
/>
<Typography className={classes.marketplaceText}>
{option.name}
</Typography>
</button>
</Tooltip>
))}
style={{
width: "100%",
justifyContent: "flex-start",
padding: "12px",
marginBottom: "12px",
backgroundColor: "#1A1A1A",
border: "1px solid #494949",
borderRadius: "8px",
color: "white",
opacity: 0.7,
cursor: option.valid === true ? "pointer" : "not-allowed",
}}
disabled={option.valid === false}
>
<img
src={option.logo}
alt={option.name}
className={classes.marketplaceIcon}
style={{
filter: option.valid === true ? null : "grayscale(1)",
}}
/>
<Typography className={classes.marketplaceText}>
{option.name}
</Typography>
</button>
</Tooltip>
)
})}
<div style={{
marginTop: "0.5rem",
@@ -256,7 +268,7 @@ const MarketplaceCard = ({ classes }) => {
</a>
*/}
<a
href="/docs/configuration#installing-shuffle"
href="/docs/configuration#installation"
target="_blank"
style={{ color: "rgba(255, 132, 68, 1)", textDecoration: "underline" }}
>
@@ -282,7 +294,7 @@ const LoginPage = props => {
const [register, setRegister] = useState(inregister);
const [checkboxClicked, setCheckboxClicked] = useState(false);
const [loginWithSSO, setLoginWithSSO] = useState(false)
const [showPassword, setShowPassword] = useState(false)
const [ssoUrl, setSSOUrl] = useState("");
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "migration.shuffler.io";
@@ -315,7 +327,15 @@ const LoginPage = props => {
} else {
document.title = "Register to Shuffle SaaS"
}
}
}
useEffect(() => {
if (loginWithSSO && window?.location?.pathname === "/register") {
setLoginWithSSO(false)
}
},[window?.location?.pathname])
// Just a way to force location loading properly
// Register & login should be split :3
@@ -354,7 +374,8 @@ const LoginPage = props => {
color: "white",
padding: "40px",
flex: 1,
maxWidth: isMobile ? "100%" : "550px",
maxWidth: isMobile ? "100%" : 410,
minWidth: 410,
background: "#212121",
borderRadius: "12px",
display: "flex",
@@ -649,26 +670,16 @@ const LoginPage = props => {
setLoginWithSSO(true)
}
//const onClickRegister = () => {
// if (props.location.pathname === "/login") {
// window.location.pathname = "/register"
// } else {
// window.location.pathname = "/login"
// }
// setLoginCheck(!register)
//}
//var loginChange = register ? (<div><p onClick={setLoginCheck(false)}>Want to register? Click here.</p></div>) : (<div><p onClick={setLoginCheck(true)}>Go back to login? Click here.</p></div>);
var formtitle = register ? <div>Welcome Back!</div> : <div>Create your account</div>
var formButton = !isCloud ? "" : register ? <div style={{ display: "flex" }}> <div style={{ fontSize: "14px", paddingRight: "7px", textDecoration: "none", }}>Don’t have an account yet?</div> <Link style={hrefStyle} to={`/register${parsedsearch}`}><div>Register here</div></Link></div> : <>
<div style={{ display: "flex", marginTop: 40, marginBottom: -10 }}> <div style={{ fontSize: "14px", paddingRight: "7px", textDecoration: "none", }}>Already have an account?</div> <Link style={hrefStyle} to={`/login${parsedsearch}`}><div>Login here</div></Link></div>
</>
//<Link to={`/login${parsedsearch}`} style={hrefStyle}><div>Click here to Login</div></Link>
// <DialogTitle>{formtitle}</DialogTitle>
const buttonBackground = "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)"
const buttonBackground = "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)"
const buttonStyle = { borderRadius: 25, height: 50, fontSize: 18, backgroundImage: handleValidateForm(username, password) || loginLoading || (checkboxClicked && register) ? buttonBackground : "grey", color: "white" }
//<Button variant="contained" type="submit" fullWidth style={buttonStyle} disabled={!handleValidateForm() || loginLoading}>
@@ -774,15 +785,29 @@ const LoginPage = props => {
color: "white",
fontSize: "1em",
},
endAdornment: (
<Tooltip title={showPassword ? "Hide password" : "Show password"} arrow>
<div
style={{
cursor: "pointer",
marginRight: 10,
color: "white"
}}
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? <VisibilityOutlinedIcon /> : <VisibilityOffOutlinedIcon />}
</div>
</Tooltip>
)
}}
required
id="outlined-password-input"
fullWidth={true}
type="password"
autoComplete="current-password"
placeholder="at least 10 characters"
margin="normal"
variant="outlined"
type={showPassword ? "text" : "password"}
onChange={onChangePass}
helperText={
handleValidateForm(username, password)
@@ -906,7 +931,10 @@ const LoginPage = props => {
{loginInfo}
</div>
{ssoUrl !== undefined && ssoUrl !== null && ssoUrl.length > 0 ? (
{(
ssoUrl !== undefined && ssoUrl !== null && ssoUrl.length) > 0
//|| (isCloud && !loginWithSSO && window?.location?.pathname !== "/register")
? (
<div>
<Typography style={{ textAlign: "center" }}>Or</Typography>
<div style={{ textAlign: "center", margin: 10 }}>
@@ -916,11 +944,17 @@ const LoginPage = props => {
color="secondary"
variant="outlined"
type="button"
style={{ flex: "1", marginTop: 5 }}
onClick={() => {
style={{ flex: "1", marginTop: 5, textTransform: 'none', fontSize: 16 }}
onClick={(e) => {
//console.log("CLICK SSO");
window.location.href = ssoUrl
e.preventDefault();
//navigate(ssoUrl)
if (isCloud) {
setLoginWithSSO(true)
setPassword("")
}else {
window.location.href = ssoUrl
}
}}
>
Use SSO
@@ -928,6 +962,19 @@ const LoginPage = props => {
</div>
</div>
) : null}
{isCloud && loginWithSSO && (
<Button
variant="outlined"
color="secondary"
onClick={() => {
setLoginWithSSO(false)
setLoginInfo("")
}}
style={{ width: '100%', marginTop: 5, flex: "1", textTransform: 'none', fontSize: 16 }}
>
Back to login
</Button>
)}
</form>
</Paper>
@@ -951,7 +998,7 @@ const LoginPage = props => {
</div>
return (
<div style={{zoom: 0.8, paddingTop: 75, paddingBottom: 90 }}>
<div style={{zoom: 0.8, minHeight: "75vh", paddingTop: 75, paddingBottom: 90 }}>
{loadedCheck}
</div>
)