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

#168: Allow ability to switch between autoconfigure or not from oauth2 app

Browse Source
This commit is contained in:
frikky
2021-08-24 01:39:59 +02:00
parent e9419eb7a8
commit c4a06c92b9
2 changed files with 92 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Oauth2Auth.jsx
+81 -51
View File
@@ -10,9 +10,12 @@ const AuthenticationOauth2 = (props) => {
const theme = useTheme(); const theme = useTheme();
//const [update, setUpdate] = React.useState("|") //const [update, setUpdate] = React.useState("|")
const [clientId, setClientId] = React.useState("") const [defaultConfigSet, setDefaultConfigSet] = React.useState(authenticationType.client_id !== undefined && authenticationType.client_id !== null && authenticationType.client_id.length > 0 && authenticationType.client_secret !== undefined && authenticationType.client_secret !== null && authenticationType.client_secret.length > 0)
const [clientSecret, setClientSecret] = React.useState("") const [clientId, setClientId] = React.useState(defaultConfigSet ? authenticationType.client_id : "")
const [clientSecret, setClientSecret] = React.useState(defaultConfigSet ? authenticationType.client_secret : "")
const [buttonClicked, setButtonClicked] = React.useState(false) const [buttonClicked, setButtonClicked] = React.useState(false)
const [manuallyConfigure, setManuallyConfigure] = React.useState(false)
const [authenticationOption, setAuthenticationOptions] = React.useState({ const [authenticationOption, setAuthenticationOptions] = React.useState({
app: JSON.parse(JSON.stringify(selectedApp)), app: JSON.parse(JSON.stringify(selectedApp)),
fields: {}, fields: {},
@@ -24,6 +27,10 @@ const AuthenticationOauth2 = (props) => {
active: true, active: true,
}) })
if (selectedApp.authentication === undefined) {
return null
}
const handleOauth2Request = (client_id, client_secret) => { const handleOauth2Request = (client_id, client_secret) => {
setButtonClicked(true) setButtonClicked(true)
//if (authenticationType.type === "oauth2" && authenticationType.redirect_uri !== undefined && authenticationType.redirect_uri !== null) { //if (authenticationType.type === "oauth2" && authenticationType.redirect_uri !== undefined && authenticationType.redirect_uri !== null) {
@@ -81,13 +88,6 @@ const AuthenticationOauth2 = (props) => {
//} while ( //} while (
} }
if (selectedApp.authentication === undefined) {
return null
}
if (selectedApp.authentication.parameters === null || selectedApp.authentication.parameters === undefined || selectedApp.authentication.parameters.length === 0) {
return null
}
authenticationOption.app.actions = [] authenticationOption.app.actions = []
@@ -172,7 +172,7 @@ const AuthenticationOauth2 = (props) => {
<DialogContent> <DialogContent>
<span style={{}}> <span style={{}}>
<b>Oauth2 requires a client ID and secret to authenticate. This is usually made in the remote system.</b> <b>Oauth2 requires a client ID and secret to authenticate. This is usually made in the remote system.</b>
<a target="_blank" rel="norefferer" href="https://shuffler.io/docs/apps#authentication" style={{textDecoration: "none", color: "#f85a3e"}}>Learn more about Oauth2</a><div/> <a target="_blank" rel="norefferer" href="https://shuffler.io/docs/apps#authentication" style={{textDecoration: "none", color: "#f85a3e"}}> Learn more about Oauth2 with Shuffle</a><div/>
</span> </span>
{/*<TextField {/*<TextField
style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}} style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}}
@@ -195,48 +195,53 @@ const AuthenticationOauth2 = (props) => {
/> />
<Divider style={{marginTop: 15, marginBottom: 15, backgroundColor: "rgb(91, 96, 100)"}}/> <Divider style={{marginTop: 15, marginBottom: 15, backgroundColor: "rgb(91, 96, 100)"}}/>
*/} */}
<TextField
style={{marginTop: 20, backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}} {!manuallyConfigure ? null :
InputProps={{ <span>
style:{ <TextField
color: "white", style={{marginTop: 20, backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}}
marginLeft: "5px", InputProps={{
maxWidth: "95%", style:{
height: 50, color: "white",
fontSize: "1em", marginLeft: "5px",
}, maxWidth: "95%",
}} height: 50,
fullWidth fontSize: "1em",
color="primary" },
placeholder={"Client ID"} }}
onChange={(event) => { fullWidth
setClientId(event.target.value) color="primary"
//authenticationOption.label = event.target.value placeholder={"Client ID"}
}} onChange={(event) => {
/> setClientId(event.target.value)
<TextField //authenticationOption.label = event.target.value
style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}} }}
InputProps={{ />
style:{ <TextField
color: "white", style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}}
marginLeft: "5px", InputProps={{
maxWidth: "95%", style:{
height: 50, color: "white",
fontSize: "1em", marginLeft: "5px",
}, maxWidth: "95%",
}} height: 50,
fullWidth fontSize: "1em",
color="primary" },
placeholder={"Client Secret"} }}
onChange={(event) => { fullWidth
setClientSecret(event.target.value) color="primary"
//authenticationOption.label = event.target.value placeholder={"Client Secret"}
}} onChange={(event) => {
/> setClientSecret(event.target.value)
//authenticationOption.label = event.target.value
}}
/>
</span>
}
<Button <Button
style={{marginTop: 20, borderRadius: theme.palette.borderRadius}} style={{marginBottom: 40, marginTop: 20, borderRadius: theme.palette.borderRadius}}
disabled={clientSecret.length === 0 || clientId.length === 0} disabled={clientSecret.length === 0 || clientId.length === 0}
variant="outlined" variant="contained"
fullWidth fullWidth
onClick={() => { onClick={() => {
//setAuthenticationModalOpen(false) //setAuthenticationModalOpen(false)
@@ -245,11 +250,36 @@ const AuthenticationOauth2 = (props) => {
color="primary" color="primary"
> >
{buttonClicked ? {buttonClicked ?
<CircularProgress style={{}} /> <CircularProgress style={{color: "white", }} />
: :
"Oauth2 request" "Oauth2 request"
} }
</Button> </Button>
{defaultConfigSet ?
<span style={{}}>
... or
<Button
style={{marginLeft: 10, borderRadius: theme.palette.borderRadius}}
disabled={clientSecret.length === 0 || clientId.length === 0}
variant="text"
onClick={() => {
setManuallyConfigure(!manuallyConfigure)
if (manuallyConfigure) {
setClientId(authenticationType.client_id)
setClientSecret(authenticationType.client_secret)
} else {
setClientId("")
setClientSecret("")
}
}}
color="primary"
>
{manuallyConfigure ? "Use auto-config" : "Manually configure Oauth2"}
</Button>
</span>
: null}
</DialogContent> </DialogContent>
</div> </div>
) )
frontend/src/views/AngularWorkflow.jsx
+11 -10
View File
@@ -1172,7 +1172,7 @@ const AngularWorkflow = (props) => {
if (updateAction === true) { if (updateAction === true) {
//console.log("Should update authentication for selectedAction!!") //console.log("Should update authentication for selectedAction!!")
console.log(responseJson) //console.log(responseJson)
if (selectedApp.authentication.required) { if (selectedApp.authentication.required) {
//console.log("App requires auth!!") //console.log("App requires auth!!")
@@ -1184,7 +1184,7 @@ const AngularWorkflow = (props) => {
} }
var tmpAuth = JSON.parse(JSON.stringify(responseJson.data)) var tmpAuth = JSON.parse(JSON.stringify(responseJson.data))
console.log("FOUND AUTH: ", tmpAuth) //console.log("FOUND AUTH: ", tmpAuth)
//console.log("Checking authentication: ", tmpAuth) //console.log("Checking authentication: ", tmpAuth)
var latest = 0 var latest = 0
@@ -1211,8 +1211,7 @@ const AngularWorkflow = (props) => {
//if (item.id === findAuthId) { //if (item.id === findAuthId) {
// selectedAction.selectedAuthentication = item // selectedAction.selectedAuthentication = item
//} //}
//console.log("ACTION: ", selectedAction)
console.log("ACTION: ", selectedAction)
//console.log("OPTIONS: ", authenticationOptions) //console.log("OPTIONS: ", authenticationOptions)
selectedAction.authentication = authenticationOptions selectedAction.authentication = authenticationOptions
@@ -2007,14 +2006,16 @@ const AngularWorkflow = (props) => {
setSelectedAction(curaction) setSelectedAction(curaction)
//return //return
} else { } else {
//console.log("AUTHENTICATION: ", curapp.authentication) console.log("AUTHENTICATION: ", curapp.authentication)
//console.log(curapp.authentication) console.log(curapp.authentication)
setAuthenticationType(curapp.authentication.type === "oauth2" && curapp.authentication.redirect_uri !== undefined && curapp.authentication.redirect_uri !== null ? setAuthenticationType(curapp.authentication.type === "oauth2" && curapp.authentication.redirect_uri !== undefined && curapp.authentication.redirect_uri !== null ?
{ {
"type": "oauth2", "type": "oauth2",
"redirect_uri": curapp.authentication.redirect_uri, "redirect_uri": curapp.authentication.redirect_uri,
"token_uri": curapp.authentication.token_uri, "token_uri": curapp.authentication.token_uri,
"scope": curapp.authentication.scope, "scope": curapp.authentication.scope,
"client_id": curapp.authentication.client_id,
"client_secret": curapp.authentication.client_secret,
} : { } : {
"type": "" "type": ""
} }