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 const url = userdata.licensed === true
? "https://book.stripe.com/6oEeY23fw2T84M06oq" ? "https://buy.stripe.com/aEU3fk17o0L092g5kt"
: "https://book.stripe.com/00g6rw3fw9hwguI289" : "https://buy.stripe.com/aEU3fk17o0L092g5kt"
window.open(url, "_blank") window.open(url, "_blank")
}} }}
> >
frontend/src/components/ssoTab.jsx
+81 -34
View File
@@ -7,11 +7,7 @@ import {
Tooltip, Tooltip,
TextField, TextField,
Grid, Grid,
Skeleton, Checkbox
Dialog,
DialogTitle,
DialogContent,
Box,
} from "@mui/material"; } from "@mui/material";
import { makeStyles } from "@mui/styles"; import { makeStyles } from "@mui/styles";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@@ -30,6 +26,8 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
const classes = useStyles(); const classes = useStyles();
const [show2faSetup, setShow2faSetup] = React.useState(false); const [show2faSetup, setShow2faSetup] = React.useState(false);
const [autoPrivision, setAutoProvision] = React.useState(selectedOrganization?.sso_config?.auto_provision) 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( const [ssoEntrypoint, setSsoEntrypoint] = React.useState(
selectedOrganization.sso_config === undefined selectedOrganization.sso_config === undefined
? "" ? ""
@@ -393,7 +391,27 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
</span> </span>
<Typography style={{ textAlign: "left", fontSize: 16, marginTop: 8, color: "rgba(158, 158, 158, 1)", fontWeight: 400 }}> <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> 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 container style={{ marginTop: 8, }} spacing={2}>
<Grid item xs={6} style={{}}> <Grid item xs={6} style={{}}>
<span> <span>
@@ -407,30 +425,29 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor, backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}} }}
fullWidth={true} fullWidth={true}
type="name"
multiline={true} multiline={true}
rows={2} rows={2}
id="outlined-with-placeholder" id="outlined-with-placeholder"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
placeholder="The OpenID client ID from the identity provider" placeholder="The OpenID client ID from the identity provider"
value={openidClientId} value={showOpenIdCred ? openidClientId : openidClientId?.length > 0 ? "•".repeat(50) : ""}
onChange={(e) => { onChange={(e) => setOpenidClientId(e.target.value)}
setOpenidClientId(e.target.value); onFocus={(e) => setShowOpenIdCred(true)}
}} onBlur={(e) => setShowOpenIdCred(false)}
InputProps={{ InputProps={{
classes: { classes: {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline, notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
}, },
style: { style: {
color: "white", color: "white",
fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)", fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
fontWeight: 400, fontWeight: 400,
fontSize: 16, fontSize: 16,
borderRadius: 4, borderRadius: 4,
}, },
}} }}
/> />
</span> </span>
</Grid> </Grid>
<Grid item xs={6} style={{}}> <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, backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}} }}
fullWidth={true} fullWidth={true}
type="name" type={showOpenIdCred ? "text" : "password"}
multiline={true} multiline={true}
rows={2} rows={2}
id="outlined-with-placeholder" id="outlined-with-placeholder"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
placeholder="The OpenID client secret - DONT use this if dealing with implicit auth / PKCE" 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) => { onChange={(e) => {
setOpenidClientSecret(e.target.value); setOpenidClientSecret(e.target.value);
}} }}
onFocus={(e) => setShowOpenIdCred(true)}
onBlur={(e) => setShowOpenIdCred(false)}
InputProps={{ InputProps={{
classes: { classes: {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline, 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, backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}} }}
fullWidth={true} fullWidth={true}
type="name" type={showOpenIdCred ? "text" : "password"}
id="outlined-with-placeholder" id="outlined-with-placeholder"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
multiline={true} multiline={true}
rows={2} rows={2}
placeholder="The OpenID authorization URL (usually ends with /authorize)" placeholder="The OpenID authorization URL (usually ends with /authorize)"
value={openidAuthorization} value={showOpenIdCred ? openidAuthorization : openidAuthorization?.length > 0 ? "•".repeat(50) : ""}
onChange={(e) => { onChange={(e) => {
setOpenidAuthorization(e.target.value) setOpenidAuthorization(e.target.value)
}} }}
onFocus={(e) => setShowOpenIdCred(true)}
onBlur={(e) => setShowOpenIdCred(false)}
InputProps={{ InputProps={{
classes: { classes: {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline, 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, backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}} }}
fullWidth={true} fullWidth={true}
type="name" type={showOpenIdCred ? "text" : "password"}
id="outlined-with-placeholder" id="outlined-with-placeholder"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
multiline={true} multiline={true}
rows={2} rows={2}
placeholder="The OpenID token URL (usually ends with /token)" placeholder="The OpenID token URL (usually ends with /token)"
value={openidToken} value={showOpenIdCred ? openidToken : openidToken?.length > 0 ? "•".repeat(50) : ""}
onChange={(e) => { onChange={(e) => {
setOpenidToken(e.target.value) setOpenidToken(e.target.value)
}} }}
onFocus={(e) => setShowOpenIdCred(true)}
onBlur={(e) => setShowOpenIdCred(false)}
InputProps={{ InputProps={{
classes: { classes: {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline, 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="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"> <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> 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 container style={{ marginTop: 10, }} spacing={2}>
<Grid item xs={6} style={{}}> <Grid item xs={6} style={{}}>
<span> <span>
@@ -571,17 +614,19 @@ const SSOTab = ({selectedOrganization, userdata, isEditOrgTab, globalUrl, handle
backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor, backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}} }}
fullWidth={true} fullWidth={true}
type="name" type={showSamlCred ? "text" : "password"}
multiline={true} multiline={true}
rows={2} rows={2}
id="outlined-with-placeholder" id="outlined-with-placeholder"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
placeholder="The entrypoint URL from your provider" placeholder="The entrypoint URL from your provider"
value={ssoEntrypoint} value={showSamlCred ? ssoEntrypoint : ssoEntrypoint?.length > 0 ? "•".repeat(50) : ""}
onChange={(e) => { onChange={(e) => {
setSsoEntrypoint(e.target.value); setSsoEntrypoint(e.target.value);
}} }}
onFocus={(e) => setShowSamlCred(true)}
onBlur={(e) => setShowSamlCred(false)}
InputProps={{ InputProps={{
classes: { classes: {
notchedOutline: isEditOrgTab ? null : classes.notchedOutline, 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, backgroundColor: isEditOrgTab ? "rgba(33, 33, 33, 1)" : theme.palette.inputColor,
}} }}
fullWidth={true} fullWidth={true}
type="name" type={showSamlCred ? "text" : "password"}
id="outlined-with-placeholder" id="outlined-with-placeholder"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
multiline={true} multiline={true}
rows={2} rows={2}
placeholder="The X509 certificate to use" 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) => { onChange={(e) => {
setSsoCertificate(e.target.value); 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 { isMobile } from "react-device-detect";
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import { useInterval } from "react-powerhooks"; import { useInterval } from "react-powerhooks";
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
import { import {
ConnectingAirportsOutlined, ConnectingAirportsOutlined,
ConstructionOutlined, ConstructionOutlined,
@@ -81,21 +81,6 @@ const useStyles = makeStyles({
notchedOutline: { notchedOutline: {
borderColor: "#f85a3e !important" 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: { marketplaceIcon: {
width: 28, width: 28,
height: 28, height: 28,
@@ -174,6 +159,14 @@ const FreePlanCard = ({ classes }) => {
const MarketplaceCard = ({ classes }) => { const MarketplaceCard = ({ classes }) => {
const marketplaceOptions = [ 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", name: "Amazon Web Services",
logo: "https://cdn.cdnlogo.com/logos/a/19/aws.svg", logo: "https://cdn.cdnlogo.com/logos/a/19/aws.svg",
@@ -213,31 +206,50 @@ const MarketplaceCard = ({ classes }) => {
Self Host Self Host
</h2> </h2>
{marketplaceOptions.map((option, index) => ( {marketplaceOptions.map((option, index) => {
<Tooltip return (
key={index} <Tooltip
title={option.tooltipText} key={index}
placement="top" title={option.tooltipText}
arrow placement="top"
> arrow
<button
className={classes.marketplaceButton}
disabled
> >
<img <button
src={option.logo} onClick={() => {
alt={option.name} if (option.valid === true) {
className={classes.marketplaceIcon} window.open(option.link, "_blank")
style={{ }
filter: option.valid === true ? null : "grayscale(1)",
}} }}
/> style={{
<Typography className={classes.marketplaceText}> width: "100%",
{option.name} justifyContent: "flex-start",
</Typography> padding: "12px",
</button> marginBottom: "12px",
</Tooltip> 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={{ <div style={{
marginTop: "0.5rem", marginTop: "0.5rem",
@@ -256,7 +268,7 @@ const MarketplaceCard = ({ classes }) => {
</a> </a>
*/} */}
<a <a
href="/docs/configuration#installing-shuffle" href="/docs/configuration#installation"
target="_blank" target="_blank"
style={{ color: "rgba(255, 132, 68, 1)", textDecoration: "underline" }} style={{ color: "rgba(255, 132, 68, 1)", textDecoration: "underline" }}
> >
@@ -282,7 +294,7 @@ const LoginPage = props => {
const [register, setRegister] = useState(inregister); const [register, setRegister] = useState(inregister);
const [checkboxClicked, setCheckboxClicked] = useState(false); const [checkboxClicked, setCheckboxClicked] = useState(false);
const [loginWithSSO, setLoginWithSSO] = useState(false) const [loginWithSSO, setLoginWithSSO] = useState(false)
const [showPassword, setShowPassword] = useState(false)
const [ssoUrl, setSSOUrl] = useState(""); const [ssoUrl, setSSOUrl] = useState("");
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "migration.shuffler.io"; 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 { } else {
document.title = "Register to Shuffle SaaS" 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 // Just a way to force location loading properly
// Register & login should be split :3 // Register & login should be split :3
@@ -354,7 +374,8 @@ const LoginPage = props => {
color: "white", color: "white",
padding: "40px", padding: "40px",
flex: 1, flex: 1,
maxWidth: isMobile ? "100%" : "550px", maxWidth: isMobile ? "100%" : 410,
minWidth: 410,
background: "#212121", background: "#212121",
borderRadius: "12px", borderRadius: "12px",
display: "flex", display: "flex",
@@ -649,26 +670,16 @@ const LoginPage = props => {
setLoginWithSSO(true) 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 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> : <> 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> <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> //<Link to={`/login${parsedsearch}`} style={hrefStyle}><div>Click here to Login</div></Link>
// <DialogTitle>{formtitle}</DialogTitle> // <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" } 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}> //<Button variant="contained" type="submit" fullWidth style={buttonStyle} disabled={!handleValidateForm() || loginLoading}>
@@ -774,15 +785,29 @@ const LoginPage = props => {
color: "white", color: "white",
fontSize: "1em", 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 required
id="outlined-password-input" id="outlined-password-input"
fullWidth={true} fullWidth={true}
type="password"
autoComplete="current-password" autoComplete="current-password"
placeholder="at least 10 characters" placeholder="at least 10 characters"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
type={showPassword ? "text" : "password"}
onChange={onChangePass} onChange={onChangePass}
helperText={ helperText={
handleValidateForm(username, password) handleValidateForm(username, password)
@@ -906,7 +931,10 @@ const LoginPage = props => {
{loginInfo} {loginInfo}
</div> </div>
{ssoUrl !== undefined && ssoUrl !== null && ssoUrl.length > 0 ? ( {(
ssoUrl !== undefined && ssoUrl !== null && ssoUrl.length) > 0
//|| (isCloud && !loginWithSSO && window?.location?.pathname !== "/register")
? (
<div> <div>
<Typography style={{ textAlign: "center" }}>Or</Typography> <Typography style={{ textAlign: "center" }}>Or</Typography>
<div style={{ textAlign: "center", margin: 10 }}> <div style={{ textAlign: "center", margin: 10 }}>
@@ -916,11 +944,17 @@ const LoginPage = props => {
color="secondary" color="secondary"
variant="outlined" variant="outlined"
type="button" type="button"
style={{ flex: "1", marginTop: 5 }} style={{ flex: "1", marginTop: 5, textTransform: 'none', fontSize: 16 }}
onClick={() => { onClick={(e) => {
//console.log("CLICK SSO"); //console.log("CLICK SSO");
window.location.href = ssoUrl e.preventDefault();
//navigate(ssoUrl) //navigate(ssoUrl)
if (isCloud) {
setLoginWithSSO(true)
setPassword("")
}else {
window.location.href = ssoUrl
}
}} }}
> >
Use SSO Use SSO
@@ -928,6 +962,19 @@ const LoginPage = props => {
</div> </div>
</div> </div>
) : null} ) : 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> </form>
</Paper> </Paper>
@@ -951,7 +998,7 @@ const LoginPage = props => {
</div> </div>
return ( return (
<div style={{zoom: 0.8, paddingTop: 75, paddingBottom: 90 }}> <div style={{zoom: 0.8, minHeight: "75vh", paddingTop: 75, paddingBottom: 90 }}>
{loadedCheck} {loadedCheck}
</div> </div>
) )