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

Fixed oauth2, docs and popups for onboarding

Browse Source
This commit is contained in:
Frikky
2023-11-19 18:03:53 +01:00
parent a0711dd453
commit c1bfb159c6
10 changed files with 367 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/AngularWorkflow.jsx
+12 -7
View File
@@ -11,7 +11,7 @@ import { useNavigate, Link, useParams } from "react-router-dom";
import { useBeforeunload } from "react-beforeunload";
import ReactJson from "react-json-view";
import { NestedMenuItem } from 'mui-nested-menu';
import ReactMarkdown from "react-markdown";
import Markdown from "react-markdown";
//import { useAlert
import { ToastContainer, toast } from "react-toastify"
import { isMobile } from "react-device-detect"
@@ -635,7 +635,11 @@ const AngularWorkflow = (defaultprops) => {
if (responseJson.success === true) {
if (responseJson.reason !== undefined && responseJson.reason !== undefined && responseJson.reason.length > 0) {
if (!responseJson.reason.includes("404: Not Found") && responseJson.reason.length > 25) {
selectedApp.documentation = responseJson.reason
// Translate <img> into markdown ![]()
const imgRegex = /<img.*?src="(.*?)"/g;
const newdata = responseJson.reason.replace(imgRegex, '![]($1)');
selectedApp.documentation = newdata
setSelectedApp(selectedApp)
setUpdate(Math.random())
}
@@ -978,8 +982,6 @@ const AngularWorkflow = (defaultprops) => {
tmpView = execution_id;
}
console.log("TMPVIEW: ", tmpView);
// Compare with currently selected item
if (tmpView !== undefined && tmpView !== null && tmpView.length > 0) {
// Don't clean up if it's already open
@@ -1669,7 +1671,7 @@ const AngularWorkflow = (defaultprops) => {
if (hasSaved === false) {
setExecutionRequestStarted(true);
saveWorkflow(workflow, executionArgument, startNode);
console.log("FIXME: Might have forgotten to save before executing.");
//console.log("FIXME: Might have forgotten to save before executing.");
return;
}
@@ -3783,6 +3785,8 @@ const AngularWorkflow = (defaultprops) => {
//}
curaction.app_id = curapp.id
console.log("CURAPP: ", curapp.authentication)
setAuthenticationType(
curapp.authentication.type === "oauth2" && curapp.authentication.redirect_uri !== undefined && curapp.authentication.redirect_uri !== null ? {
type: "oauth2",
@@ -3792,6 +3796,7 @@ const AngularWorkflow = (defaultprops) => {
scope: curapp.authentication.scope,
client_id: curapp.authentication.client_id,
client_secret: curapp.authentication.client_secret,
grant_type: curapp.authentication.grant_type,
} : {
type: "",
}
@@ -16955,7 +16960,7 @@ const AngularWorkflow = (defaultprops) => {
)}
</span>
) : (
<ReactMarkdown
<Markdown
components={{
img: Img,
code: CodeHandler,
@@ -16974,7 +16979,7 @@ const AngularWorkflow = (defaultprops) => {
}}
>
{selectedApp.documentation}
</ReactMarkdown>
</Markdown>
)}
</div>
</div>
frontend/src/views/AppCreator.jsx
+81 -32
View File
@@ -398,7 +398,6 @@ const AppCreator = (defaultprops) => {
apikeySelection.length > 0 ? apikeySelection[0] : ""
);
const [refreshUrl, setRefreshUrl] = useState("");
const [oauth2Scopes, setOauth2Scopes] = useState([]);
const [projectCategories, setProjectCategories] = useState([]);
const [selectedCategory, setSelectedCategory] = useState("");
@@ -411,7 +410,10 @@ const AppCreator = (defaultprops) => {
const [appBuilding, setAppBuilding] = useState(false);
const [fileDownloadEnabled, setFileDownloadEnabled] = useState(false);
const [actionAmount, setActionAmount] = useState(increaseAmount);
const [oauth2Type, setOauth2Type] = useState("application");
const [oauth2Scopes, setOauth2Scopes] = useState([]);
const [oauth2Type, setOauth2Type] = useState("delegated");
const [oauth2GrantType, setOauth2GrantType] = useState("client_credentials");
const defaultAuth = {
name: "",
type: "header",
@@ -1748,17 +1750,25 @@ const AppCreator = (defaultprops) => {
//console.log("FLOW-1: ", value)
const flowkey = value.flow === undefined ? "flows" : "flow";
//console.log("FLOW: ", value[flowkey])
const basekey = value[flowkey].authorizationCode !== undefined
? "authorizationCode"
: "implicit";
// Doesn't seem to be used for now
const basekey = value[flowkey].authorizationCode !== undefined ? "authorizationCode" : "implicit";
// Kind of fucked up, but it works for now?
if (value["x-grant-type"] !== undefined && value["x-grant-type"] !== null && value["x-grant-type"].length !== 0) {
setOauth2Type(value["x-grant-type"])
}
//console.log("FLOW2: ", value[flowkey][basekey])
if (value[flowkey] !== undefined && value[flowkey][basekey] !== undefined
) {
if (value[flowkey][basekey].authorizationUrl !== undefined && parameterName.length === 0) {
var newparamname = parameterName
if (value[flowkey][basekey].authorizationUrl !== undefined && value[flowkey][basekey].authorizationUrl !== null && value[flowkey][basekey].authorizationUrl.length !== 0 && parameterName.length === 0) {
setParameterName(value[flowkey][basekey].authorizationUrl);
// } else {
// setOauth2Type("application")
} else {
setOauth2Type("application")
}
var tokenUrl = "";
@@ -2519,6 +2529,14 @@ const AppCreator = (defaultprops) => {
},
},
};
//if (value[flowkey][basekey]["x-grant-type"] !== undefined && value[flowkey][basekey]["x-grant-type"] !== null && value[flowkey][basekey]["x-grant-type"].length !== 0) {
if (oauth2GrantType.length > 0) {
data.components.securitySchemes["Oauth2"]["x-grant-type"] = oauth2GrantType;
}
console.log("SECURITYSCHEMES: ", data.components);
}
if (setExtraAuth.length > 0) {
@@ -3082,7 +3100,7 @@ const AppCreator = (defaultprops) => {
},
}}
style={{ maxHeight: 80, overflowX: "hidden", overflowY: "auto" }}
placeholder="Available Oauth2 Scopes (enter to add)"
placeholder="Available Oauth2 Scopes"
color="primary"
fullWidth
value={oauth2Scopes}
@@ -5957,36 +5975,67 @@ const AppCreator = (defaultprops) => {
</Select>
</FormControl>
{authenticationOption === "Oauth2" ?
<FormControl style={{ marginLeft: 350, maxWidth: 200, }} variant="outlined">
<FormControl style={{ marginLeft: 310, maxWidth: 240, }} variant="outlined">
{/*
<Typography variant="body2">
- Delegated: The user will get a popup for access their personal data.
- Application: Permissions are set by the app creator in the 3rd party platform.
</Typography>
*/}
<Select
fullWidth
label="Oauth2 type"
onChange={(e) => {
setOauth2Type(e.target.value);
}}
value={oauth2Type}
style={{
backgroundColor: inputColor,
color: "white",
height: "50px",
}}
>
{["delegated", "application"].map((data, index) => (
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
value={data}
<div style={{display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", }}>
<Typography variant="body2" style={{ marginTop: 10, marginRight: 10, }} color="textSecondary">Oauth2 type</Typography>
<Select
fullWidth
onChange={(e) => {
setOauth2Type(e.target.value);
}}
value={oauth2Type}
style={{
backgroundColor: inputColor,
color: "white",
height: "50px",
}}
>
{["delegated", "application"].map((data, index) => (
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
value={data}
>
{data}
</MenuItem>
))}
</Select>
</div>
{oauth2Type === "application" ?
<div style={{display: "flex", }}>
<Typography variant="body2" style={{ marginTop: 10, marginRight: 10, }} color="textSecondary">Grant Type</Typography>
<Select
fullWidth
label="Grant Type"
onChange={(e) => {
setOauth2GrantType(e.target.value);
}}
value={oauth2GrantType}
style={{
backgroundColor: inputColor,
color: "white",
height: "50px",
}}
>
{data}
</MenuItem>
))}
</Select>
{["client_credentials", "password"].map((data, index) => (
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
value={data}
>
{data}
</MenuItem>
))}
</Select>
</div>
: null}
</FormControl>
: null}
</span>
frontend/src/views/Dashboard.jsx
+72 -40
View File
@@ -102,6 +102,8 @@ const UsecaseListComponent = (props) => {
const [expandedItem, setExpandedItem] = useState(-1);
const [inputUsecase, setInputUsecase] = useState({});
const [prevSubcase, setPrevSubcase] = useState({})
const [editing, setEditing] = useState(false);
const [description, setDescription] = useState("");
const [video, setVideo] = useState("");
@@ -117,6 +119,42 @@ const UsecaseListComponent = (props) => {
const [mitreTags, setMitreTags] = useState([]);
const parseUsecase = (subcase) => {
const srcdata = findSpecificApp(frameworkData, subcase.type)
const dstdata = findSpecificApp(frameworkData, subcase.last)
if (srcdata !== undefined && srcdata !== null) {
subcase.srcimg = srcdata.large_image
subcase.srcapp = srcdata.name
}
if (dstdata !== undefined && dstdata !== null) {
subcase.dstimg = dstdata.large_image
subcase.dstapp = dstdata.name
}
return subcase
}
useEffect(() => {
console.log("In frameworkData useEffect: frameworkData: ", frameworkData)
if (frameworkData === undefined || prevSubcase === undefined) {
return
}
console.log("PAST!")
var parsedUsecase = inputUsecase
const subcase = parseUsecase(prevSubcase)
parsedUsecase.srcimg = subcase.srcimg
parsedUsecase.srcapp = subcase.srcapp
parsedUsecase.dstimg = subcase.dstimg
parsedUsecase.dstapp = subcase.dstapp
setInputUsecase(parsedUsecase)
}, [frameworkData])
const loadApps = () => {
fetch(`${globalUrl}/api/v1/apps`, {
method: "GET",
@@ -163,35 +201,14 @@ const UsecaseListComponent = (props) => {
if (keys === undefined || keys === null || keys.length === 0) {
return null
}
const parseUsecase = (subcase) => {
//console.log("parseUsecase: ", subcase)
const srcdata = findSpecificApp(frameworkData, subcase.type)
const dstdata = findSpecificApp(frameworkData, subcase.last)
if (srcdata !== undefined && srcdata !== null) {
subcase.srcimg = srcdata.large_image
subcase.srcapp = srcdata.name
}
if (dstdata !== undefined && dstdata !== null) {
subcase.dstimg = dstdata.large_image
subcase.dstapp = dstdata.name
}
return subcase
}
}
// Timeout 50ms to delay it slightly
const getUsecase = (subcase, index, subindex) => {
subcase = parseUsecase(subcase)
// Timeout 50ms to delay it slightly
//setTimeout(() => {
// setInputUsecase(subcase)
//}, 50)
setPrevSubcase(subcase)
fetch(`${globalUrl}/api/v1/workflows/usecases/${escape(subcase.name.replaceAll(" ", "_"))}`, {
method: "GET",
@@ -214,8 +231,6 @@ const UsecaseListComponent = (props) => {
if (responseJson.success === false) {
parsedUsecase = subcase
} else {
console.log("FOUND: ", JSON.parse(JSON.stringify(responseJson)))
parsedUsecase = responseJson
parsedUsecase.srcimg = subcase.srcimg
@@ -314,7 +329,7 @@ const UsecaseListComponent = (props) => {
})
.catch((error) => {
//toast(error.toString());
//setFrameworkLoaded(true)
//setFrameworkLoaded(true)
})
}
@@ -416,15 +431,16 @@ const UsecaseListComponent = (props) => {
return (
<Grid id={fixedName} item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
if (fixedName === "increase authentication") {
getUsecase(subcase, index, subindex)
return
}
//setSelectedWorkflows([])
if (selectedItem) {
} else {
getUsecase(subcase, index, subindex)
navigate(`/usecases?selected_object=${fixedName}`)
//const newitem = removeParam("selected_object", cursearch);
//navigate(curpath + newitem)
}
}}>
<Paper style={{padding: 25, minHeight: isCloud ? 75 : 122, cursor: !selectedItem ? "pointer" : "default", border: itemBorder, backgroundColor: backgroundColor,}} onClick={() => {
@@ -594,11 +610,12 @@ const UsecaseListComponent = (props) => {
>
<IconButton
style={{}}
index="close_selection"
onClick={(e) => {
setExpandedItem(-1)
setExpandedIndex(-1)
setEditing(false)
setInputUsecase({})
setExpandedItem(-1)
setExpandedIndex(-1)
setEditing(false)
setInputUsecase({})
}}
>
<CloseIcon style={{ color: "white" }} />
@@ -1172,13 +1189,28 @@ const Dashboard = (props) => {
if (foundQuery !== null && foundQuery !== undefined) {
setSelectedUsecaseCategory(foundQuery)
const newitem = removeParam("selected", cursearch);
const newitem = removeParam("selected", cursearch);
navigate(curpath + newitem)
}
const baseItem = document.getElementById("increase authentication")
if (baseItem !== undefined && baseItem !== null) {
baseItem.click()
// Find close window button -> go to top
const foundButton = document.getElementById("close_selection")
if (foundButton !== undefined && foundButton !== null) {
foundButton.click()
}
// Scroll back to top
window.scrollTo(0, 0)
}
const foundQuery2 = params["selected_object"]
if (foundQuery2 !== null && foundQuery2 !== undefined) {
//console.log("Got selected_object: ", foundQuery2)
// Take a random object, quickly click it, then go to this one
// Something is weird with loading apps without it
const queryName = foundQuery2.toLowerCase().replaceAll("_", " ")
// Waiting a bit for it to render
@@ -1198,7 +1230,7 @@ const Dashboard = (props) => {
} else {
//console.log("Couldn't find item with name ", queryName)
}
}, 100);
}, 1000);
}
}
@@ -1251,6 +1283,7 @@ const Dashboard = (props) => {
})
}
const getAvailableWorkflows = () => {
fetch(globalUrl + "/api/v1/workflows", {
method: "GET",
@@ -1385,8 +1418,7 @@ const Dashboard = (props) => {
useEffect(() => {
getAvailableWorkflows()
getFramework()
//fetchUsecases()
getFramework()
}, []);
const fetchdata = (stats_id) => {
frontend/src/views/Docs.jsx
+31 -95
View File
@@ -1,13 +1,11 @@
import React, { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import Markdown from 'react-markdown'
import { BrowserView, MobileView } from "react-device-detect";
import { useParams, useNavigate, Link } from "react-router-dom";
import { isMobile } from "react-device-detect";
import theme from '../theme.jsx';
import remarkGfm from 'remark-gfm'
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import {
Grid,
@@ -29,6 +27,8 @@ import {
import {
Link as LinkIcon,
Edit as EditIcon,
KeyboardArrowRight as KeyboardArrowRightIcon,
ExpandMore as ExpandMoreIcon,
} from "@mui/icons-material";
const Body = {
@@ -166,8 +166,11 @@ const Docs = (defaultprops) => {
})
.then((response) => response.json())
.then((responseJson) => {
if (responseJson.success) {
setData(responseJson.reason);
if (responseJson.success && responseJson.reason !== undefined) {
// Find <img> tags and translate them into ![]() format
const imgRegex = /<img.*?src="(.*?)"/g;
const newdata = responseJson.reason.replace(imgRegex, '![]($1)');
setData(newdata)
if (docId === undefined) {
document.title = "Shuffle documentation introduction";
} else {
@@ -376,7 +379,6 @@ const Docs = (defaultprops) => {
};
function OuterLink(props) {
console.log("Link: ", props.href)
if (props.href.includes("http") || props.href.includes("mailto")) {
return (
<a
@@ -402,7 +404,7 @@ const Docs = (defaultprops) => {
}
function CodeHandler(props) {
console.log("PROPS: ", props)
//console.log("Codehandler PROPS: ", props)
const propvalue = props.value !== undefined && props.value !== null ? props.value : props.children !== undefined && props.children !== null && props.children.length > 0 ? props.children[0] : ""
@@ -603,7 +605,6 @@ const Docs = (defaultprops) => {
const [hover, setHover] = useState(false);
console.log("Link: ", link)
if (link === undefined || link === null) {
return null
}
@@ -681,60 +682,20 @@ const Docs = (defaultprops) => {
<b>Organize.</b> Whether an organization of 1000 or 1, management tools are necessary. In Shuffle we offer full user management, MFA and single-signon options, multi-tenancy and a lot more - for free!
</Typography>
</div>
{/*
<Grid container spacing={2} style={{marginTop: 50, }}>
{list.map((data, index) => {
const item = data.name;
if (item === undefined) {
return null;
}
const path = "/docs/" + item;
const newname =
item.charAt(0).toUpperCase() +
item.substring(1).split("_").join(" ").split("-").join(" ");
const itemMatching = props.match.params.key === undefined ? false :
props.match.params.key.toLowerCase() === item.toLowerCase();
return (
<Grid key={index} item xs={4}>
<DocumentationButton key={index} item={newname} link={"/docs/"+data.name} />
</Grid>
)
})}
</Grid>
*/}
{/*
<TextField
required
style={{
flex: "1",
backgroundColor: theme.palette.inputColor,
height: 50,
}}
InputProps={{
style:{
color: "white",
height: 50,
},
}}
placeholder={"Search Knowledgebase"}
color="primary"
fullWidth={true}
type="firstname"
id={"Searchfield"}
margin="normal"
variant="outlined"
onChange={(event) => {
console.log("Change: ", event.target.value)
}}
/>
*/}
</div>
const markdownComponents = {
img: Img,
code: CodeHandler,
h1: Heading,
h2: Heading,
h3: Heading,
h4: Heading,
h5: Heading,
h6: Heading,
a: OuterLink,
}
// PostDataBrowser Section
const postDataBrowser =
list === undefined || list === null ? null : (
@@ -812,32 +773,22 @@ const Docs = (defaultprops) => {
mainpageInfo
:
<div id="markdown_wrapper_outer" style={markdownStyle}>
<ReactMarkdown
components={{
img: Img,
code: CodeHandler,
h1: Heading,
h2: Heading,
h3: Heading,
h4: Heading,
h5: Heading,
h6: Heading,
a: OuterLink,
}}
<Markdown
components={markdownComponents}
id="markdown_wrapper"
escapeHtml={false}
skipHtml={false}
style={{
maxWidth: "100%", minWidth: "100%",
}}
>
{data}
</ReactMarkdown>
</Markdown>
</div>
}
</div>
</div>
);
// remarkPlugins={[remarkGfm]}
const mobileStyle = {
color: "white",
@@ -849,6 +800,7 @@ const Docs = (defaultprops) => {
flexDirection: "column",
};
const postDataMobile =
list === undefined || list === null ? null : (
<div style={mobileStyle}>
@@ -899,18 +851,8 @@ const Docs = (defaultprops) => {
mainpageInfo
:
<div id="markdown_wrapper_outer" style={markdownStyle}>
<ReactMarkdown
components={{
img: Img,
code: CodeHandler,
h1: Heading,
h2: Heading,
h3: Heading,
h4: Heading,
h5: Heading,
h6: Heading,
a: OuterLink,
}}
<Markdown
components={markdownComponents}
id="markdown_wrapper"
escapeHtml={false}
style={{
@@ -918,7 +860,7 @@ const Docs = (defaultprops) => {
}}
>
{data}
</ReactMarkdown>
</Markdown>
</div>
}
<Divider
@@ -941,15 +883,9 @@ const Docs = (defaultprops) => {
</div>
);
//const imageModal =
// <Dialog modal
// open={imageModalOpen}
// </Dialog>
// {imageModal}
// Padding and zIndex etc set because of footer in cloud.
const loadedCheck = (
<div style={{ minHeight: 1000, paddingBottom: 100, zIndex: 50000, }}>
<div style={{ minHeight: 1000, paddingBottom: 100, zIndex: 50000, maxWidth: 1920, minWidth: 1366, margin: "auto", }}>
<BrowserView>{postDataBrowser}</BrowserView>
<MobileView>{postDataMobile}</MobileView>
</div>