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

#168: Fixed Oauth2 refresh token cycle

Browse Source
This commit is contained in:
frikky
2021-10-21 00:35:47 +02:00
parent ba0dbb5354
commit a250788527
9 changed files with 171 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Oauth2Auth.jsx
+10 -1
View File
@@ -53,10 +53,12 @@ const AuthenticationOauth2 = (props) => {
var resources = ""
if (scopes !== undefined && scopes !== null & scopes.length > 0) {
//scopes.push("offline_access")
resources = scopes.join(",")
}
const authentication_url = authenticationType.token_uri
console.log("AUTH: ", authenticationType)
console.log("SCOPES2: ", resources)
const redirectUri = `${window.location.protocol}//${window.location.host}/set_authentication`
@@ -65,7 +67,14 @@ const AuthenticationOauth2 = (props) => {
state += `%26oauth_url%3d${oauth_url}`
console.log("ADDING OAUTH2 URL: ", state)
}
const url = `${authenticationType.redirect_uri}?client_id=${client_id}&redirect_uri=${redirectUri}&response_type=code&scope=${resources}&prompt=consent&state=${state}`
if (authenticationType.refresh_uri !== undefined && authenticationType.refresh_uri !== null && authenticationType.refresh_uri.length > 0) {
state += `%26refresh_uri%3d${authenticationType.refresh_uri}`
} else {
state += `%26refresh_uri%3d${authentication_url}`
}
const url = `${authenticationType.redirect_uri}?client_id=${client_id}&redirect_uri=${redirectUri}&response_type=code&scope=${resources}&prompt=consent&state=${state}&access_type=offline`
//const url = `https://accounts.zoho.com/oauth/v2/auth?response_type=code&client_id=${client_id}&scope=AaaServer.profile.Read&redirect_uri=${redirectUri}&prompt=consent`
console.log("Full URI: ", url)
frontend/src/defaultCytoscapeStyle.js
+11
View File
@@ -101,6 +101,7 @@ const data = [{
selector: `node[type="TRIGGER"]`,
css: {
'shape': 'octagon',
'border-radius': '5px',
'border-color': 'orange',
'background-color': '#213243',
'background-width': '100%',
@@ -203,6 +204,16 @@ const data = [{
'transition-duration': '0.5s',
},
},
{
selector: '.hover-highlight',
css: {
'background-color': '#5f9265',
'border-color': '#5f9265',
'border-width': '5px',
'transition-property': 'background-color',
'transition-duration': '0.5s',
},
},
{
selector: '.failure-highlight',
css: {
frontend/src/views/AngularWorkflow.jsx
+125 -95
View File
@@ -11,7 +11,7 @@ import NestedMenuItem from "material-ui-nested-menu-item";
import ReactMarkdown from 'react-markdown';
import {TextField, Drawer, Button, Paper, Grid, Tabs, InputAdornment, Tab, ButtonBase, Tooltip, Select, MenuItem, Divider, Dialog, Modal, DialogActions, DialogTitle, InputLabel, DialogContent, FormControl, IconButton, Menu, Input, FormGroup, FormControlLabel, Typography, Checkbox, Breadcrumbs, CircularProgress, Switch, Fade} from '@material-ui/core';
import {Slide, TextField, Drawer, Button, Paper, Grid, Tabs, InputAdornment, Tab, ButtonBase, Tooltip, Select, MenuItem, Divider, Dialog, Modal, DialogActions, DialogTitle, InputLabel, DialogContent, FormControl, IconButton, Menu, Input, FormGroup, FormControlLabel, Typography, Checkbox, Breadcrumbs, CircularProgress, Switch, Fade} from '@material-ui/core';
import {OpenInNew as OpenInNewIcon,Undo as UndoIcon, FileCopy as FileCopyIcon, GetApp as GetAppIcon, Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, Visibility as VisibilityIcon, Done as DoneIcon, Close as CloseIcon, Error as ErrorIcon, FindReplace as FindreplaceIcon, ArrowLeft as ArrowLeftIcon, Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, Add as AddIcon, Polymer as PolymerIcon, FormatListNumbered as FormatListNumberedIcon, Create as CreateIcon, PlayArrow as PlayArrowIcon, AspectRatio as AspectRatioIcon, MoreVert as MoreVertIcon, Apps as AppsIcon, Schedule as ScheduleIcon, FavoriteBorder as FavoriteBorderIcon, Pause as PauseIcon, Delete as DeleteIcon, AddCircleOutline as AddCircleOutlineIcon, Save as SaveIcon, KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, ArrowBack as ArrowBackIcon, Settings as SettingsIcon, LockOpen as LockOpenIcon, ExpandMore as ExpandMoreIcon, VpnKey as VpnKeyIcon} from '@material-ui/icons';
import * as cytoscape from 'cytoscape';
@@ -1260,9 +1260,9 @@ const AngularWorkflow = (props) => {
selectedAction.selectedAuthentication = item
for (var key in workflow.actions) {
console.log(workflow.actions[key].app_name)
//console.log(workflow.actions[key].app_name)
if (workflow.actions[key].app_name == selectedApp.name) {
console.log("Setting auth at: ", workflow.actions[key], item.id)
//console.log("Setting auth at: ", workflow.actions[key], item.id)
workflow.actions[key].selectedAuthentication = item
workflow.actions[key].authentication_id = item.id
appUpdates = true
@@ -3306,6 +3306,16 @@ const AngularWorkflow = (props) => {
}, {
duration: animationDuration,
})
const outgoingEdges = event.target.outgoers('edge')
const incomingEdges = event.target.incomers('edge')
if (outgoingEdges.length > 0) {
outgoingEdges.removeClass('hover-highlight')
}
if (incomingEdges.length > 0) {
outgoingEdges.removeClass('hover-highlight')
}
}
const buttonColor = "rgba(255,255,255,0.9)"
@@ -3481,6 +3491,16 @@ const AngularWorkflow = (props) => {
})
previousnodecolor = event.target.style("border-color")
const outgoingEdges = event.target.outgoers('edge')
const incomingEdges = event.target.incomers('edge')
if (outgoingEdges.length > 0) {
outgoingEdges.addClass('hover-highlight')
}
if (incomingEdges.length > 0) {
outgoingEdges.addClass('hover-highlight')
}
}
const onEdgeHoverOut = (event) => {
@@ -4668,9 +4688,9 @@ const AngularWorkflow = (props) => {
</div>
:
<div style={{textAlign: "center", width: leftBarSize}}>
<CircularProgress style={{marginTop: 25, height: 35, width: 35, marginLeft: "auto", marginRight: "auto", }} />
<CircularProgress style={{marginTop: "27vh", height: 35, width: 35, marginLeft: "auto", marginRight: "auto", }} />
<Typography variant="body1" color="textSecondary">
Loading apps
Loading Apps
</Typography>
</div>
}
@@ -7800,46 +7820,46 @@ const AngularWorkflow = (props) => {
}
return (
<div id="rightside_actions" style={rightsidebarStyle}>
<ParsedAction
id="rightside_subactions"
getAppAuthentication={getAppAuthentication}
appAuthentication={appAuthentication}
authenticationType={authenticationType}
scrollConfig={scrollConfig}
setScrollConfig={setScrollConfig}
selectedAction={selectedAction}
workflow={workflow}
setWorkflow={setWorkflow}
setSelectedAction={setSelectedAction}
setUpdate={setUpdate}
selectedApp={selectedApp}
workflowExecutions={workflowExecutions}
setSelectedResult={setSelectedResult}
setSelectedApp={setSelectedApp}
setSelectedTrigger={setSelectedTrigger}
setSelectedEdge={setSelectedEdge}
setCurrentView={setCurrentView}
cy={cy}
setAuthenticationModalOpen={setAuthenticationModalOpen}
<div id="rightside_actions" style={rightsidebarStyle}>
<ParsedAction
id="rightside_subactions"
getAppAuthentication={getAppAuthentication}
appAuthentication={appAuthentication}
authenticationType={authenticationType}
scrollConfig={scrollConfig}
setScrollConfig={setScrollConfig}
selectedAction={selectedAction}
workflow={workflow}
setWorkflow={setWorkflow}
setSelectedAction={setSelectedAction}
setUpdate={setUpdate}
selectedApp={selectedApp}
workflowExecutions={workflowExecutions}
setSelectedResult={setSelectedResult}
setSelectedApp={setSelectedApp}
setSelectedTrigger={setSelectedTrigger}
setSelectedEdge={setSelectedEdge}
setCurrentView={setCurrentView}
cy={cy}
setAuthenticationModalOpen={setAuthenticationModalOpen}
setVariablesModalOpen={setVariablesModalOpen}
setLastSaved={setLastSaved}
setCodeModalOpen={setCodeModalOpen}
selectedNameChange={selectedNameChange}
rightsidebarStyle={rightsidebarStyle}
showEnvironment={showEnvironment}
selectedActionEnvironment={selectedActionEnvironment}
environments={environments}
setNewSelectedAction={setNewSelectedAction}
sortByKey={sortByKey}
appApiViewStyle={appApiViewStyle}
globalUrl={globalUrl}
setSelectedActionEnvironment={setSelectedActionEnvironment}
requiresAuthentication={requiresAuthentication}
/>
</div>
setVariablesModalOpen={setVariablesModalOpen}
setLastSaved={setLastSaved}
setCodeModalOpen={setCodeModalOpen}
selectedNameChange={selectedNameChange}
rightsidebarStyle={rightsidebarStyle}
showEnvironment={showEnvironment}
selectedActionEnvironment={selectedActionEnvironment}
environments={environments}
setNewSelectedAction={setNewSelectedAction}
sortByKey={sortByKey}
appApiViewStyle={appApiViewStyle}
globalUrl={globalUrl}
setSelectedActionEnvironment={setSelectedActionEnvironment}
requiresAuthentication={requiresAuthentication}
/>
</div>
)
} else if (Object.getOwnPropertyNames(selectedTrigger).length > 0) {
@@ -8733,60 +8753,70 @@ const AngularWorkflow = (props) => {
<div style={{color: "white"}}>
<div style={{display: "flex", borderTop: "1px solid rgba(91, 96, 100, 1)"}}>
{leftView}
<CytoscapeComponent
elements={elements}
minZoom={0.35}
maxZoom={2.00}
wheelSensitivity={0.25}
style={{width: bodyWidth-leftBarSize-15, height: bodyHeight-appBarSize-5, backgroundColor: surfaceColor}}
stylesheet={cystyle}
boxSelectionEnabled={true}
autounselectify={false}
showGrid={true}
id="cytoscape_view"
cy={(incy) => {
// FIXME: There's something specific loading when
// you do the first hover of a node. Why is this different?
//console.log("CY: ", incy)
setCy(incy)
}}
/>
{workflow.id === undefined || workflow.id === null || apps.length === 0 ?
<div style={{width: bodyWidth-leftBarSize-15, height: 150, textAlign: "center"}}>
<CircularProgress style={{marginTop: "30vh", height: 35, width: 35, marginLeft: "auto", marginRight: "auto", }} />
<Typography variant="body1" color="textSecondary">
Loading Workflow
</Typography>
</div>
:
<CytoscapeComponent
elements={elements}
minZoom={0.35}
maxZoom={2.00}
wheelSensitivity={0.25}
style={{width: bodyWidth-leftBarSize-15, height: bodyHeight-appBarSize-5, backgroundColor: surfaceColor}}
stylesheet={cystyle}
boxSelectionEnabled={true}
autounselectify={false}
showGrid={true}
id="cytoscape_view"
cy={(incy) => {
// FIXME: There's something specific loading when
// you do the first hover of a node. Why is this different?
//console.log("CY: ", incy)
setCy(incy)
}}
/>
}
</div>
{executionModal}
<RightSideBar
scrollConfig={scrollConfig}
setScrollConfig={setScrollConfig}
selectedAction={selectedAction}
workflow={workflow}
setWorkflow={setWorkflow}
setSelectedAction={setSelectedAction}
setUpdate={setUpdate}
selectedApp={selectedApp}
workflowExecutions={workflowExecutions}
setSelectedResult={setSelectedResult}
setSelectedApp={setSelectedApp}
setSelectedTrigger={setSelectedTrigger}
setSelectedEdge={setSelectedEdge}
setCurrentView={setCurrentView}
cy={cy}
setAuthenticationModalOpen={setAuthenticationModalOpen}
{/*<Slide appear={true} direction="right" timeout={5000} in={true}>*/}
<RightSideBar
scrollConfig={scrollConfig}
setScrollConfig={setScrollConfig}
selectedAction={selectedAction}
workflow={workflow}
setWorkflow={setWorkflow}
setSelectedAction={setSelectedAction}
setUpdate={setUpdate}
selectedApp={selectedApp}
workflowExecutions={workflowExecutions}
setSelectedResult={setSelectedResult}
setSelectedApp={setSelectedApp}
setSelectedTrigger={setSelectedTrigger}
setSelectedEdge={setSelectedEdge}
setCurrentView={setCurrentView}
cy={cy}
setAuthenticationModalOpen={setAuthenticationModalOpen}
setVariablesModalOpen={setVariablesModalOpen}
setLastSaved={setLastSaved}
setCodeModalOpen={setCodeModalOpen}
selectedNameChange={selectedNameChange}
rightsidebarStyle={rightsidebarStyle}
showEnvironment={showEnvironment}
selectedActionEnvironment={selectedActionEnvironment}
environments={environments}
setNewSelectedAction={setNewSelectedAction}
sortByKey={sortByKey}
appApiViewStyle={appApiViewStyle}
globalUrl={globalUrl}
setSelectedActionEnvironment={setSelectedActionEnvironment}
requiresAuthentication={requiresAuthentication}
/>
setVariablesModalOpen={setVariablesModalOpen}
setLastSaved={setLastSaved}
setCodeModalOpen={setCodeModalOpen}
selectedNameChange={selectedNameChange}
rightsidebarStyle={rightsidebarStyle}
showEnvironment={showEnvironment}
selectedActionEnvironment={selectedActionEnvironment}
environments={environments}
setNewSelectedAction={setNewSelectedAction}
sortByKey={sortByKey}
appApiViewStyle={appApiViewStyle}
globalUrl={globalUrl}
setSelectedActionEnvironment={setSelectedActionEnvironment}
requiresAuthentication={requiresAuthentication}
/>
<BottomCytoscapeBar />
<TopCytoscapeBar />
</div>
frontend/src/views/Apps.jsx
+2 -2
View File
@@ -1073,10 +1073,10 @@ const Apps = (props) => {
<CircularProgress style={{width: 40, height: 40, margin: "auto"}}/>
:
<Paper square style={uploadViewPaperStyle}>
<Typography variant="body1" style={{margin: 10}}>
<Typography variant="body2" color="textSecondary" style={{margin: 10}}>
No apps have been created, uploaded or downloaded yet. Click "Load existing apps" above to get the baseline. This may take a while as its building docker images.
</Typography>
<Typography variant="body1" style={{margin: 10}}>
<Typography variant="body2" color="textSecondary" style={{margin: 10}}>
If you're still not able to see any apps, please follow our <a href={"https://shuffler.io/docs/troubleshooting#load_all_apps_locally"} style={{textDecoration: "none", color: "#f85a3e"}} target="_blank">troubleshooting guide for loading apps!</a>
</Typography>
</Paper>
frontend/src/views/SetAuthentication.jsx
+8
View File
@@ -95,6 +95,14 @@ const SetAuthentication = (props) => {
if (query[0] === "oauth_url") {
appAuthData.fields.push({"key": "oauth_url", "value": query[1]})
}
if (query[0] === "refresh_uri") {
appAuthData.fields.push({"key": "refresh_uri", "value": query[1]})
}
if (query[0] === "refresh_url") {
appAuthData.fields.push({"key": "refresh_url", "value": query[1]})
}
}
}
frontend/src/views/Workflows.jsx
+1 -1
View File
@@ -1555,7 +1555,7 @@ const Workflows = (props) => {
let workflowData = "";
if (workflows.length > 0) {
const columns = [
{ field: 'image', headerName: 'Logo', width: 42, renderCell: (params) => {
{ field: 'image', headerName: 'Logo', width: 50, sortable: false, renderCell: (params) => {
const data = params.row.record
var boxColor = "#FECC00"