Ran prettier on frontend
This commit is contained in:
Isoporhode
@@ -1,26 +1,19 @@
|
||||
import React, { useEffect} from 'react';
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
const Popup = (props) => {
|
||||
const { data } = props;
|
||||
const { data } = props;
|
||||
|
||||
const popupStyle = {
|
||||
position: "fixed",
|
||||
width: "300px",
|
||||
height: "50px",
|
||||
backgroundColor: "black",
|
||||
color: "white",
|
||||
}
|
||||
const popupStyle = {
|
||||
position: "fixed",
|
||||
width: "300px",
|
||||
height: "50px",
|
||||
backgroundColor: "black",
|
||||
color: "white",
|
||||
};
|
||||
|
||||
const popupData =
|
||||
<div>
|
||||
HEY
|
||||
</div>
|
||||
const popupData = <div>HEY</div>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{popupData}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <div>{popupData}</div>;
|
||||
};
|
||||
|
||||
export default Popup
|
||||
export default Popup;
|
||||
|
||||
@@ -1,46 +1,48 @@
|
||||
import React from 'react'
|
||||
import InfoIcon from '@material-ui/icons/Info';
|
||||
import CheckIcon from '@material-ui/icons/Check';
|
||||
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
|
||||
import CloseIcon from '@material-ui/icons/Close';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import React from "react";
|
||||
import InfoIcon from "@material-ui/icons/Info";
|
||||
import CheckIcon from "@material-ui/icons/Check";
|
||||
import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
|
||||
import CloseIcon from "@material-ui/icons/Close";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
const alertStyle = {
|
||||
backgroundColor: 'rgba(0,0,0,0.9)',
|
||||
color: 'white',
|
||||
backgroundColor: "rgba(0,0,0,0.9)",
|
||||
color: "white",
|
||||
padding: 15,
|
||||
textTransform: 'uppercase',
|
||||
borderRadius: '3px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0px 2px 2px 2px rgba(0, 0, 0, 0.03)',
|
||||
textTransform: "uppercase",
|
||||
borderRadius: "3px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
boxShadow: "0px 2px 2px 2px rgba(0, 0, 0, 0.03)",
|
||||
width: 300,
|
||||
boxSizing: 'border-box',
|
||||
zIndex: 100001,
|
||||
overflow: "hidden",
|
||||
}
|
||||
boxSizing: "border-box",
|
||||
zIndex: 100001,
|
||||
overflow: "hidden",
|
||||
};
|
||||
|
||||
const buttonStyle = {
|
||||
marginLeft: '20px',
|
||||
border: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
marginLeft: "20px",
|
||||
border: "none",
|
||||
backgroundColor: "transparent",
|
||||
cursor: "pointer",
|
||||
color: "#FFFFFF",
|
||||
};
|
||||
|
||||
const AlertTemplate = ({ message, options, style, close }) => {
|
||||
return (
|
||||
<div style={{ ...alertStyle, ...style }}>
|
||||
{options.type === 'info' && <InfoIcon style={{color: "white"}} />}
|
||||
{options.type === 'success' && <CheckIcon style={{color: "green", }}/>}
|
||||
{options.type === 'error' && <ErrorOutlineIcon style={{color: "red"}} />}
|
||||
<Typography style={{marginLeft: 15, flex: 2 }}>{message}</Typography>
|
||||
{options.type === "info" && <InfoIcon style={{ color: "white" }} />}
|
||||
{options.type === "success" && <CheckIcon style={{ color: "green" }} />}
|
||||
{options.type === "error" && (
|
||||
<ErrorOutlineIcon style={{ color: "red" }} />
|
||||
)}
|
||||
<Typography style={{ marginLeft: 15, flex: 2 }}>{message}</Typography>
|
||||
<button onClick={close} style={buttonStyle}>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default AlertTemplate
|
||||
export default AlertTemplate;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,19 +1,19 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import BackupIcon from '@material-ui/icons/Backup';
|
||||
import React, { useRef, useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import BackupIcon from "@material-ui/icons/Backup";
|
||||
|
||||
const dragOverStyle = {
|
||||
backgroundColor: 'rgba(0,0,0,0.8)',
|
||||
border: '5px dashed white',
|
||||
borderRadius: '8px',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: "rgba(0,0,0,0.8)",
|
||||
border: "5px dashed white",
|
||||
borderRadius: "8px",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
overflow: "hidden",
|
||||
zIndex: 100,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
};
|
||||
|
||||
const Dropzone = ({ children, style, onDrop }) => {
|
||||
@@ -56,21 +56,21 @@ const Dropzone = ({ children, style, onDrop }) => {
|
||||
useEffect(() => {
|
||||
if (!dropzoneRef.current) return;
|
||||
|
||||
dropzoneRef.current.addEventListener('dragover', handleDragOver);
|
||||
dropzoneRef.current.addEventListener('dragenter', handleDragEnter);
|
||||
dropzoneRef.current.addEventListener('dragleave', handleDragLeave);
|
||||
dropzoneRef.current.addEventListener('drop', handleDrop);
|
||||
dropzoneRef.current.addEventListener("dragover", handleDragOver);
|
||||
dropzoneRef.current.addEventListener("dragenter", handleDragEnter);
|
||||
dropzoneRef.current.addEventListener("dragleave", handleDragLeave);
|
||||
dropzoneRef.current.addEventListener("drop", handleDrop);
|
||||
|
||||
return () => {
|
||||
dropzoneRef.current.removeEventListener('dragover', handleDragOver);
|
||||
dropzoneRef.current.removeEventListener('dragenter', handleDragEnter);
|
||||
dropzoneRef.current.removeEventListener('dragleave', handleDragLeave);
|
||||
dropzoneRef.current.removeEventListener('drop', handleDrop);
|
||||
dropzoneRef.current.removeEventListener("dragover", handleDragOver);
|
||||
dropzoneRef.current.removeEventListener("dragenter", handleDragEnter);
|
||||
dropzoneRef.current.removeEventListener("dragleave", handleDragLeave);
|
||||
dropzoneRef.current.removeEventListener("drop", handleDrop);
|
||||
};
|
||||
}, [dropzoneRef]);
|
||||
|
||||
return (
|
||||
<div ref={dropzoneRef} style={{ position: 'relative', ...style }}>
|
||||
<div ref={dropzoneRef} style={{ position: "relative", ...style }}>
|
||||
{dragging && (
|
||||
<div style={dragOverStyle}>
|
||||
<BackupIcon fontSize="large" />
|
||||
|
||||
@@ -1,54 +1,54 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
|
||||
//import List from '@material-ui/core/List';
|
||||
//import ListItem from '@material-ui/core/ListItem';
|
||||
|
||||
//borderTop: "1px solid #385F71"
|
||||
const FooterStyle = {
|
||||
right: "0",
|
||||
left: "0",
|
||||
bottom: "0",
|
||||
height: "130px",
|
||||
backgroundColor: 'rgba(15, 14, 31, 1)',
|
||||
right: "0",
|
||||
left: "0",
|
||||
bottom: "0",
|
||||
height: "130px",
|
||||
backgroundColor: "rgba(15, 14, 31, 1)",
|
||||
};
|
||||
|
||||
const FooterInfo = {
|
||||
maxWidth: '1150px',
|
||||
minWidth: '768px',
|
||||
textAlign: 'center',
|
||||
margin: 'auto',
|
||||
maxWidth: "1150px",
|
||||
minWidth: "768px",
|
||||
textAlign: "center",
|
||||
margin: "auto",
|
||||
};
|
||||
|
||||
const hrefStyle = {
|
||||
color: "#bdbdbd",
|
||||
textDecoration: "none"
|
||||
}
|
||||
|
||||
const Footer = props => {
|
||||
return (
|
||||
<div style={FooterStyle}>
|
||||
<div style={FooterInfo}>
|
||||
<Box />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
color: "#bdbdbd",
|
||||
textDecoration: "none",
|
||||
};
|
||||
|
||||
const Box = props => {
|
||||
return(
|
||||
<div style={{display: "flex"}}>
|
||||
<div style={{flex: "1"}}>
|
||||
<a style={hrefStyle} href="/about">
|
||||
<h1>About</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div style={{flex: "1"}}>
|
||||
<a style={hrefStyle} href="/privacy-policy">
|
||||
<h1>Privacy Policy</h1>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const Footer = (props) => {
|
||||
return (
|
||||
<div style={FooterStyle}>
|
||||
<div style={FooterInfo}>
|
||||
<Box />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Box = (props) => {
|
||||
return (
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ flex: "1" }}>
|
||||
<a style={hrefStyle} href="/about">
|
||||
<h1>About</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div style={{ flex: "1" }}>
|
||||
<a style={hrefStyle} href="/privacy-policy">
|
||||
<h1>Privacy Policy</h1>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
||||
+709
-471
File diff suppressed because it is too large
Load Diff
@@ -1,139 +1,176 @@
|
||||
/* eslint-disable react/no-multi-comp */
|
||||
import React, {useState} from 'react';
|
||||
import React, { useState } from "react";
|
||||
|
||||
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import Dialog from "@material-ui/core/Dialog";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Button from "@material-ui/core/Button";
|
||||
|
||||
const LoginDialog = props => {
|
||||
const { classes, onClose, open, globalUrl, isLoggedIn, setIsLoggedIn, ...other } = props;
|
||||
const LoginDialog = (props) => {
|
||||
const {
|
||||
classes,
|
||||
onClose,
|
||||
open,
|
||||
globalUrl,
|
||||
isLoggedIn,
|
||||
setIsLoggedIn,
|
||||
...other
|
||||
} = props;
|
||||
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
//const [selectedValue, setSelectedValue] = useState(false);
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
//const [selectedValue, setSelectedValue] = useState(false);
|
||||
|
||||
// Used to swap from login to register. True = login, false = register
|
||||
const [loginCheck, setLoginCheck] = useState(true);
|
||||
// Used to swap from login to register. True = login, false = register
|
||||
const [loginCheck, setLoginCheck] = useState(true);
|
||||
|
||||
// Error messages etc
|
||||
const [loginInfo, setLoginInfo] = useState("");
|
||||
// Error messages etc
|
||||
const [loginInfo, setLoginInfo] = useState("");
|
||||
|
||||
const handleValidateForm = () => {
|
||||
return (username.length > 1 && password.length > 8);
|
||||
}
|
||||
const handleValidateForm = () => {
|
||||
return username.length > 1 && password.length > 8;
|
||||
};
|
||||
|
||||
const onSubmit = (e) => {
|
||||
e.preventDefault()
|
||||
const onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Just use this one?
|
||||
var data = '{"username": "' + username + '", "password": "' + password + '"}';
|
||||
var baseurl = globalUrl
|
||||
if (loginCheck) {
|
||||
var url = baseurl+'/login';
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(response =>
|
||||
response.json().then(responseJson => {
|
||||
console.log(responseJson)
|
||||
//console.log(e)
|
||||
if (responseJson["success"] === false) {
|
||||
setLoginInfo(responseJson["reason"])
|
||||
} else {
|
||||
setLoginInfo("Successful login :)")
|
||||
onClose()
|
||||
setIsLoggedIn(true)
|
||||
}
|
||||
}),
|
||||
)
|
||||
.catch(error => {
|
||||
setLoginInfo("Error in userdata")
|
||||
});
|
||||
} else {
|
||||
url = baseurl+'/register';
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(response =>
|
||||
response.json().then(responseJson => {
|
||||
if (responseJson["success"] === false) {
|
||||
setLoginInfo(responseJson["reason"])
|
||||
} else {
|
||||
setLoginInfo("Successful register :)")
|
||||
onClose()
|
||||
setIsLoggedIn(true)
|
||||
}
|
||||
}),
|
||||
)
|
||||
.catch(error => {
|
||||
setLoginInfo("Error in userdata")
|
||||
});
|
||||
}
|
||||
}
|
||||
// Just use this one?
|
||||
var data =
|
||||
'{"username": "' + username + '", "password": "' + password + '"}';
|
||||
var baseurl = globalUrl;
|
||||
if (loginCheck) {
|
||||
var url = baseurl + "/login";
|
||||
fetch(url, {
|
||||
method: "POST",
|
||||
body: data,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) =>
|
||||
response.json().then((responseJson) => {
|
||||
console.log(responseJson);
|
||||
//console.log(e)
|
||||
if (responseJson["success"] === false) {
|
||||
setLoginInfo(responseJson["reason"]);
|
||||
} else {
|
||||
setLoginInfo("Successful login :)");
|
||||
onClose();
|
||||
setIsLoggedIn(true);
|
||||
}
|
||||
})
|
||||
)
|
||||
.catch((error) => {
|
||||
setLoginInfo("Error in userdata");
|
||||
});
|
||||
} else {
|
||||
url = baseurl + "/register";
|
||||
fetch(url, {
|
||||
method: "POST",
|
||||
body: data,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) =>
|
||||
response.json().then((responseJson) => {
|
||||
if (responseJson["success"] === false) {
|
||||
setLoginInfo(responseJson["reason"]);
|
||||
} else {
|
||||
setLoginInfo("Successful register :)");
|
||||
onClose();
|
||||
setIsLoggedIn(true);
|
||||
}
|
||||
})
|
||||
)
|
||||
.catch((error) => {
|
||||
setLoginInfo("Error in userdata");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onChangeUser = (e) => {
|
||||
setUsername(e.target.value)
|
||||
}
|
||||
const onChangeUser = (e) => {
|
||||
setUsername(e.target.value);
|
||||
};
|
||||
|
||||
const onChangePass = (e) => {
|
||||
setPassword(e.target.value)
|
||||
}
|
||||
const onChangePass = (e) => {
|
||||
setPassword(e.target.value);
|
||||
};
|
||||
|
||||
const onClickRegister = () => {
|
||||
setLoginCheck(!loginCheck)
|
||||
}
|
||||
const onClickRegister = () => {
|
||||
setLoginCheck(!loginCheck);
|
||||
};
|
||||
|
||||
//var loginChange = loginCheck ? (<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 = loginCheck ? <div>Login</div> : <div>Register</div>
|
||||
var formButton = loginCheck ? <div>Click to Register</div> : <div>Click to Login</div>
|
||||
//var loginChange = loginCheck ? (<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 = loginCheck ? <div>Login</div> : <div>Register</div>;
|
||||
var formButton = loginCheck ? (
|
||||
<div>Click to Register</div>
|
||||
) : (
|
||||
<div>Click to Login</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog modal open={open} onClose={onClose} {...other}>
|
||||
<DialogTitle>{formtitle}</DialogTitle>
|
||||
<form onSubmit={onSubmit} style={{margin: "15px 15px 15px 15px"}}>
|
||||
Username
|
||||
<div>
|
||||
<TextField
|
||||
required
|
||||
id="standard-required"
|
||||
autoComplete="username"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={onChangeUser}
|
||||
/>
|
||||
</div>
|
||||
Password
|
||||
<div>
|
||||
<TextField
|
||||
id="outlined-password-input"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={onChangePass}
|
||||
/>
|
||||
</div>
|
||||
<div style={{display: "flex", marginTop: "15px"}}>
|
||||
<Button color="secondary" variant="contained" type="submit" style={{flex: "1", marginRight: "5px"}} disabled={!handleValidateForm()}>SUBMIT</Button>
|
||||
|
||||
<Button color="primary" variant="contained" type="button" style={{flex: "1"}} onClick={onClose}>Cancel</Button>
|
||||
</div>
|
||||
{loginInfo}
|
||||
</form>
|
||||
<div style={{display: "flex"}}>
|
||||
<Button color="secondary" variant="contained" onClick={onClickRegister} type="button" style={{flex: "1"}}>{formButton}</Button>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Dialog modal open={open} onClose={onClose} {...other}>
|
||||
<DialogTitle>{formtitle}</DialogTitle>
|
||||
<form onSubmit={onSubmit} style={{ margin: "15px 15px 15px 15px" }}>
|
||||
Username
|
||||
<div>
|
||||
<TextField
|
||||
required
|
||||
id="standard-required"
|
||||
autoComplete="username"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={onChangeUser}
|
||||
/>
|
||||
</div>
|
||||
Password
|
||||
<div>
|
||||
<TextField
|
||||
id="outlined-password-input"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={onChangePass}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", marginTop: "15px" }}>
|
||||
<Button
|
||||
color="secondary"
|
||||
variant="contained"
|
||||
type="submit"
|
||||
style={{ flex: "1", marginRight: "5px" }}
|
||||
disabled={!handleValidateForm()}
|
||||
>
|
||||
SUBMIT
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
type="button"
|
||||
style={{ flex: "1" }}
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
{loginInfo}
|
||||
</form>
|
||||
<div style={{ display: "flex" }}>
|
||||
<Button
|
||||
color="secondary"
|
||||
variant="contained"
|
||||
onClick={onClickRegister}
|
||||
type="button"
|
||||
style={{ flex: "1" }}
|
||||
>
|
||||
{formButton}
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginDialog;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React, {useState, useRef, useImperativeHandle} from 'react'
|
||||
import {makeStyles} from '@material-ui/core/styles'
|
||||
import Menu, {MenuProps} from '@material-ui/core/Menu'
|
||||
import MenuItem, {MenuItemProps} from '@material-ui/core/MenuItem'
|
||||
import ArrowRight from '@material-ui/icons/ArrowRight'
|
||||
import clsx from 'clsx'
|
||||
import React, { useState, useRef, useImperativeHandle } from "react";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Menu, { MenuProps } from "@material-ui/core/Menu";
|
||||
import MenuItem, { MenuItemProps } from "@material-ui/core/MenuItem";
|
||||
import ArrowRight from "@material-ui/icons/ArrowRight";
|
||||
import clsx from "clsx";
|
||||
|
||||
//<MenuItemProps, 'button'>
|
||||
|
||||
@@ -39,15 +39,15 @@ import clsx from 'clsx'
|
||||
// /**
|
||||
// * @see https://material-ui.com/api/list-item/
|
||||
// */
|
||||
// button: true;
|
||||
// button: true;
|
||||
//}
|
||||
|
||||
const TRANSPARENT = 'rgba(0,0,0,0)'
|
||||
const TRANSPARENT = "rgba(0,0,0,0)";
|
||||
const useMenuItemStyles = makeStyles((theme) => ({
|
||||
root: (props: any) => ({
|
||||
backgroundColor: props.open ? theme.palette.action.hover : TRANSPARENT
|
||||
})
|
||||
}))
|
||||
backgroundColor: props.open ? theme.palette.action.hover : TRANSPARENT,
|
||||
}),
|
||||
}));
|
||||
|
||||
/**
|
||||
* Use as a drop-in replacement for `<MenuItem>` when you need to add cascading
|
||||
@@ -55,11 +55,11 @@ const useMenuItemStyles = makeStyles((theme) => ({
|
||||
*/
|
||||
//const NestedMenuItem = React.forwardRef<NestedMenuItemProps>(
|
||||
const NestedMenuItem = (props, ref) => {
|
||||
console.log(props, ref)
|
||||
//function NestedMenuItem(props, ref) {
|
||||
console.log(props, ref);
|
||||
//function NestedMenuItem(props, ref) {
|
||||
const {
|
||||
parentMenuOpen,
|
||||
component = 'div',
|
||||
component = "div",
|
||||
label,
|
||||
rightIcon = <ArrowRight />,
|
||||
children,
|
||||
@@ -68,94 +68,100 @@ const NestedMenuItem = (props, ref) => {
|
||||
MenuProps = {},
|
||||
ContainerProps: ContainerPropsProp = {},
|
||||
...MenuItemProps
|
||||
} = props
|
||||
} = props;
|
||||
|
||||
const [isSubMenuOpen, setIsSubMenuOpen] = useState(false)
|
||||
const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
|
||||
|
||||
const {ref: containerRefProp, ...ContainerProps} = ContainerPropsProp
|
||||
const { ref: containerRefProp, ...ContainerProps } = ContainerPropsProp;
|
||||
|
||||
const menuItemRef = useRef < HTMLLIElement > null;
|
||||
useImperativeHandle(ref, () => menuItemRef.current);
|
||||
const containerRef = useRef < HTMLDivElement > null;
|
||||
useImperativeHandle(containerRefProp, () => containerRef.current);
|
||||
const menuContainerRef = useRef < HTMLDivElement > null;
|
||||
|
||||
const menuItemRef = useRef<HTMLLIElement>(null)
|
||||
useImperativeHandle(ref, () => menuItemRef.current)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
useImperativeHandle(containerRefProp, () => containerRef.current)
|
||||
const menuContainerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
console.log("PAST THIS: ", containerRefProp, menuItemRef, containerRef, menuContainerRef, ContainerProps)
|
||||
console.log(
|
||||
"PAST THIS: ",
|
||||
containerRefProp,
|
||||
menuItemRef,
|
||||
containerRef,
|
||||
menuContainerRef,
|
||||
ContainerProps
|
||||
);
|
||||
|
||||
const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setIsSubMenuOpen(true)
|
||||
setIsSubMenuOpen(true);
|
||||
|
||||
if (ContainerProps?.onMouseEnter) {
|
||||
ContainerProps.onMouseEnter(event)
|
||||
ContainerProps.onMouseEnter(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setIsSubMenuOpen(false)
|
||||
setIsSubMenuOpen(false);
|
||||
|
||||
if (ContainerProps?.onMouseLeave) {
|
||||
ContainerProps.onMouseLeave(event)
|
||||
ContainerProps.onMouseLeave(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Check if any immediate children are active
|
||||
const isSubmenuFocused = () => {
|
||||
const active = containerRef.current?.ownerDocument?.activeElement
|
||||
const active = containerRef.current?.ownerDocument?.activeElement;
|
||||
for (const child of menuContainerRef.current?.children ?? []) {
|
||||
if (child === active) {
|
||||
return true
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
|
||||
if (event.target === containerRef.current) {
|
||||
setIsSubMenuOpen(true)
|
||||
setIsSubMenuOpen(true);
|
||||
}
|
||||
|
||||
if (ContainerProps?.onFocus) {
|
||||
ContainerProps.onFocus(event)
|
||||
ContainerProps.onFocus(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key === 'Escape') {
|
||||
return
|
||||
if (event.key === "Escape") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSubmenuFocused()) {
|
||||
event.stopPropagation()
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
const active = containerRef.current?.ownerDocument?.activeElement
|
||||
const active = containerRef.current?.ownerDocument?.activeElement;
|
||||
|
||||
if (event.key === 'ArrowLeft' && isSubmenuFocused()) {
|
||||
containerRef.current?.focus()
|
||||
if (event.key === "ArrowLeft" && isSubmenuFocused()) {
|
||||
containerRef.current?.focus();
|
||||
}
|
||||
|
||||
if (
|
||||
event.key === 'ArrowRight' &&
|
||||
event.key === "ArrowRight" &&
|
||||
event.target === containerRef.current &&
|
||||
event.target === active
|
||||
) {
|
||||
console.log("MENU: ", menuContainerRef)
|
||||
const firstChild = menuContainerRef.current.children[0]
|
||||
console.log("FIRST: ", firstChild)
|
||||
firstChild.focus()
|
||||
console.log("MENU: ", menuContainerRef);
|
||||
const firstChild = menuContainerRef.current.children[0];
|
||||
console.log("FIRST: ", firstChild);
|
||||
firstChild.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const open = isSubMenuOpen && parentMenuOpen
|
||||
const menuItemClasses = useMenuItemStyles({open})
|
||||
const open = isSubMenuOpen && parentMenuOpen;
|
||||
const menuItemClasses = useMenuItemStyles({ open });
|
||||
|
||||
// Root element must have a `tabIndex` attribute for keyboard navigation
|
||||
let tabIndex
|
||||
let tabIndex;
|
||||
if (!props.disabled) {
|
||||
tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1
|
||||
tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
|
||||
}
|
||||
|
||||
console.log("PAST 2! ", tabIndex)
|
||||
console.log("PAST 2! ", tabIndex);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -178,30 +184,30 @@ const NestedMenuItem = (props, ref) => {
|
||||
<Menu
|
||||
// Set pointer events to 'none' to prevent the invisible Popover div
|
||||
// from capturing events for clicks and hovers
|
||||
style={{pointerEvents: 'none'}}
|
||||
style={{ pointerEvents: "none" }}
|
||||
anchorEl={menuItemRef.current}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right'
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left'
|
||||
vertical: "top",
|
||||
horizontal: "left",
|
||||
}}
|
||||
open={open}
|
||||
autoFocus={false}
|
||||
disableAutoFocus
|
||||
disableEnforceFocus
|
||||
onClose={() => {
|
||||
setIsSubMenuOpen(false)
|
||||
setIsSubMenuOpen(false);
|
||||
}}
|
||||
>
|
||||
<div ref={menuContainerRef} style={{pointerEvents: 'auto'}}>
|
||||
<div ref={menuContainerRef} style={{ pointerEvents: "auto" }}>
|
||||
{children}
|
||||
</div>
|
||||
</Menu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default NestedMenuItem
|
||||
export default NestedMenuItem;
|
||||
|
||||
@@ -1,224 +1,332 @@
|
||||
import React, {useRef, useState, useEffect, useLayoutEffect} from 'react';
|
||||
import { useTheme } from '@material-ui/core/styles';
|
||||
import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
|
||||
import { useTheme } from "@material-ui/core/styles";
|
||||
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { ListItemText, 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 { LockOpen as LockOpenIcon } from '@material-ui/icons';
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import {
|
||||
ListItemText,
|
||||
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 { LockOpen as LockOpenIcon } from "@material-ui/icons";
|
||||
|
||||
const ITEM_HEIGHT = 55
|
||||
const ITEM_PADDING_TOP = 8
|
||||
const ITEM_HEIGHT = 55;
|
||||
const ITEM_PADDING_TOP = 8;
|
||||
const MenuProps = {
|
||||
PaperProps: {
|
||||
style: {
|
||||
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
||||
minWidth: 500,
|
||||
minWidth: 500,
|
||||
maxWidth: 500,
|
||||
scrollX: "auto",
|
||||
scrollX: "auto",
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
const AuthenticationOauth2 = (props) => {
|
||||
const { saveWorkflow, selectedApp, workflow, selectedAction, authenticationType, getAppAuthentication, appAuthentication, setSelectedAction, setNewAppAuth, setAuthenticationModalOpen} = props;
|
||||
const theme = useTheme();
|
||||
const {
|
||||
saveWorkflow,
|
||||
selectedApp,
|
||||
workflow,
|
||||
selectedAction,
|
||||
authenticationType,
|
||||
getAppAuthentication,
|
||||
appAuthentication,
|
||||
setSelectedAction,
|
||||
setNewAppAuth,
|
||||
setAuthenticationModalOpen,
|
||||
} = props;
|
||||
const theme = useTheme();
|
||||
|
||||
//const [update, setUpdate] = 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 [clientId, setClientId] = React.useState(defaultConfigSet ? authenticationType.client_id : "")
|
||||
const [clientSecret, setClientSecret] = React.useState(defaultConfigSet ? authenticationType.client_secret : "")
|
||||
const [oauthUrl, setOauthUrl] = React.useState("")
|
||||
const [buttonClicked, setButtonClicked] = React.useState(false)
|
||||
const [selectedScopes, setSelectedScopes] = React.useState([])
|
||||
const allscopes = authenticationType.scope !== undefined ? authenticationType.scope: []
|
||||
//const [update, setUpdate] = 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 [clientId, setClientId] = React.useState(
|
||||
defaultConfigSet ? authenticationType.client_id : ""
|
||||
);
|
||||
const [clientSecret, setClientSecret] = React.useState(
|
||||
defaultConfigSet ? authenticationType.client_secret : ""
|
||||
);
|
||||
const [oauthUrl, setOauthUrl] = React.useState("");
|
||||
const [buttonClicked, setButtonClicked] = React.useState(false);
|
||||
const [selectedScopes, setSelectedScopes] = React.useState([]);
|
||||
const allscopes =
|
||||
authenticationType.scope !== undefined ? authenticationType.scope : [];
|
||||
|
||||
const [manuallyConfigure, setManuallyConfigure] = React.useState(defaultConfigSet ? false : true)
|
||||
const [authenticationOption, setAuthenticationOptions] = React.useState({
|
||||
app: JSON.parse(JSON.stringify(selectedApp)),
|
||||
fields: {},
|
||||
label: "",
|
||||
usage: [{
|
||||
workflow_id: workflow.id,
|
||||
}],
|
||||
id: uuidv4(),
|
||||
active: true,
|
||||
})
|
||||
const [manuallyConfigure, setManuallyConfigure] = React.useState(
|
||||
defaultConfigSet ? false : true
|
||||
);
|
||||
const [authenticationOption, setAuthenticationOptions] = React.useState({
|
||||
app: JSON.parse(JSON.stringify(selectedApp)),
|
||||
fields: {},
|
||||
label: "",
|
||||
usage: [
|
||||
{
|
||||
workflow_id: workflow.id,
|
||||
},
|
||||
],
|
||||
id: uuidv4(),
|
||||
active: true,
|
||||
});
|
||||
|
||||
if (selectedApp.authentication === undefined) {
|
||||
return null
|
||||
}
|
||||
if (selectedApp.authentication === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleOauth2Request = (client_id, client_secret, oauth_url, scopes) => {
|
||||
setButtonClicked(true)
|
||||
console.log("SCOPES: ", scopes)
|
||||
const handleOauth2Request = (client_id, client_secret, oauth_url, scopes) => {
|
||||
setButtonClicked(true);
|
||||
console.log("SCOPES: ", scopes);
|
||||
|
||||
var resources = ""
|
||||
if (scopes !== undefined && scopes !== null & scopes.length > 0) {
|
||||
//scopes.push("offline_access")
|
||||
resources = scopes.join(",")
|
||||
}
|
||||
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`
|
||||
var state = `workflow_id%3D${workflow.id}%26reference_action_id%3d${selectedAction.app_id}%26app_name%3d${selectedAction.app_name}%26app_id%3d${selectedAction.app_id}%26app_version%3d${selectedAction.app_version}%26authentication_url%3d${authentication_url}%26scope%3d${resources}%26client_id%3d${client_id}%26client_secret%3d${client_secret}`
|
||||
if (oauth_url !== undefined && oauth_url !== null && oauth_url.length > 0) {
|
||||
state += `%26oauth_url%3d${oauth_url}`
|
||||
console.log("ADDING OAUTH2 URL: ", state)
|
||||
}
|
||||
const authentication_url = authenticationType.token_uri;
|
||||
//console.log("AUTH: ", authenticationType)
|
||||
//console.log("SCOPES2: ", resources)
|
||||
const redirectUri = `${window.location.protocol}//${window.location.host}/set_authentication`;
|
||||
var state = `workflow_id%3D${workflow.id}%26reference_action_id%3d${selectedAction.app_id}%26app_name%3d${selectedAction.app_name}%26app_id%3d${selectedAction.app_id}%26app_version%3d${selectedAction.app_version}%26authentication_url%3d${authentication_url}%26scope%3d${resources}%26client_id%3d${client_id}%26client_secret%3d${client_secret}`;
|
||||
if (oauth_url !== undefined && oauth_url !== null && oauth_url.length > 0) {
|
||||
state += `%26oauth_url%3d${oauth_url}`;
|
||||
console.log("ADDING OAUTH2 URL: ", 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}`
|
||||
}
|
||||
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 = `${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)
|
||||
//console.log("Redirect Uri: ", redirectUri)
|
||||
// &resource=https%3A%2F%2Fgraph.microsoft.com&
|
||||
|
||||
// FIXME: Awful, but works for prototyping
|
||||
// How can we get a callback properly realtime?
|
||||
// How can we properly try-catch without breaks on error?
|
||||
try {
|
||||
//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)
|
||||
//console.log("Redirect Uri: ", redirectUri)
|
||||
// &resource=https%3A%2F%2Fgraph.microsoft.com&
|
||||
|
||||
var newwin = window.open(url, "", "width=800,height=600")
|
||||
//console.log(newwin)
|
||||
|
||||
var open = true
|
||||
const timer = setInterval(() => {
|
||||
if (newwin.closed) {
|
||||
setButtonClicked(false)
|
||||
clearInterval(timer);
|
||||
//alert('"Secure Payment" window closed!');
|
||||
// FIXME: Awful, but works for prototyping
|
||||
// How can we get a callback properly realtime?
|
||||
// How can we properly try-catch without breaks on error?
|
||||
try {
|
||||
var newwin = window.open(url, "", "width=800,height=600");
|
||||
//console.log(newwin)
|
||||
|
||||
getAppAuthentication(true, true)
|
||||
}
|
||||
}, 1000);
|
||||
//do {
|
||||
// setTimeout(() => {
|
||||
// console.log(newwin)
|
||||
// console.log("CLOSED", newwin.closed)
|
||||
// if (newwin.closed) {
|
||||
var open = true;
|
||||
const timer = setInterval(() => {
|
||||
if (newwin.closed) {
|
||||
setButtonClicked(false);
|
||||
clearInterval(timer);
|
||||
//alert('"Secure Payment" window closed!');
|
||||
|
||||
// open = false
|
||||
// }
|
||||
// }, 1000)
|
||||
//}
|
||||
//while(open === true)
|
||||
} catch (e) {
|
||||
alert.error("Failed authentication - probably bad credentials. Try again")
|
||||
setButtonClicked(false)
|
||||
}
|
||||
getAppAuthentication(true, true);
|
||||
}
|
||||
}, 1000);
|
||||
//do {
|
||||
// setTimeout(() => {
|
||||
// console.log(newwin)
|
||||
// console.log("CLOSED", newwin.closed)
|
||||
// if (newwin.closed) {
|
||||
|
||||
return
|
||||
//do {
|
||||
//} while (
|
||||
}
|
||||
// open = false
|
||||
// }
|
||||
// }, 1000)
|
||||
//}
|
||||
//while(open === true)
|
||||
} catch (e) {
|
||||
alert.error(
|
||||
"Failed authentication - probably bad credentials. Try again"
|
||||
);
|
||||
setButtonClicked(false);
|
||||
}
|
||||
|
||||
return;
|
||||
//do {
|
||||
//} while (
|
||||
};
|
||||
|
||||
authenticationOption.app.actions = []
|
||||
authenticationOption.app.actions = [];
|
||||
|
||||
for (var key in selectedApp.authentication.parameters) {
|
||||
if (authenticationOption.fields[selectedApp.authentication.parameters[key].name] === undefined) {
|
||||
authenticationOption.fields[selectedApp.authentication.parameters[key].name] = ""
|
||||
}
|
||||
}
|
||||
for (var key in selectedApp.authentication.parameters) {
|
||||
if (
|
||||
authenticationOption.fields[
|
||||
selectedApp.authentication.parameters[key].name
|
||||
] === undefined
|
||||
) {
|
||||
authenticationOption.fields[
|
||||
selectedApp.authentication.parameters[key].name
|
||||
] = "";
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmitCheck = () => {
|
||||
console.log("NEW AUTH: ", authenticationOption)
|
||||
if (authenticationOption.label.length === 0) {
|
||||
authenticationOption.label = `Auth for ${selectedApp.name}`
|
||||
//alert.info("Label can't be empty")
|
||||
//return
|
||||
}
|
||||
const handleSubmitCheck = () => {
|
||||
console.log("NEW AUTH: ", authenticationOption);
|
||||
if (authenticationOption.label.length === 0) {
|
||||
authenticationOption.label = `Auth for ${selectedApp.name}`;
|
||||
//alert.info("Label can't be empty")
|
||||
//return
|
||||
}
|
||||
|
||||
// Automatically mapping fields that already exist (predefined).
|
||||
// Warning if fields are NOT filled
|
||||
for (var key in selectedApp.authentication.parameters) {
|
||||
if (authenticationOption.fields[selectedApp.authentication.parameters[key].name].length === 0) {
|
||||
if (selectedApp.authentication.parameters[key].value !== undefined && selectedApp.authentication.parameters[key].value !== null && selectedApp.authentication.parameters[key].value.length > 0) {
|
||||
authenticationOption.fields[selectedApp.authentication.parameters[key].name] = selectedApp.authentication.parameters[key].value
|
||||
} else {
|
||||
if (selectedApp.authentication.parameters[key].schema.type === "bool") {
|
||||
authenticationOption.fields[selectedApp.authentication.parameters[key].name] = "false"
|
||||
} else {
|
||||
alert.info("Field "+selectedApp.authentication.parameters[key].name+" can't be empty")
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Automatically mapping fields that already exist (predefined).
|
||||
// Warning if fields are NOT filled
|
||||
for (var key in selectedApp.authentication.parameters) {
|
||||
if (
|
||||
authenticationOption.fields[
|
||||
selectedApp.authentication.parameters[key].name
|
||||
].length === 0
|
||||
) {
|
||||
if (
|
||||
selectedApp.authentication.parameters[key].value !== undefined &&
|
||||
selectedApp.authentication.parameters[key].value !== null &&
|
||||
selectedApp.authentication.parameters[key].value.length > 0
|
||||
) {
|
||||
authenticationOption.fields[
|
||||
selectedApp.authentication.parameters[key].name
|
||||
] = selectedApp.authentication.parameters[key].value;
|
||||
} else {
|
||||
if (
|
||||
selectedApp.authentication.parameters[key].schema.type === "bool"
|
||||
) {
|
||||
authenticationOption.fields[
|
||||
selectedApp.authentication.parameters[key].name
|
||||
] = "false";
|
||||
} else {
|
||||
alert.info(
|
||||
"Field " +
|
||||
selectedApp.authentication.parameters[key].name +
|
||||
" can't be empty"
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Action: ", selectedAction)
|
||||
selectedAction.authentication_id = authenticationOption.id
|
||||
selectedAction.selectedAuthentication = authenticationOption
|
||||
if (selectedAction.authentication === undefined || selectedAction.authentication === null) {
|
||||
selectedAction.authentication = [authenticationOption]
|
||||
} else {
|
||||
selectedAction.authentication.push(authenticationOption)
|
||||
}
|
||||
console.log("Action: ", selectedAction);
|
||||
selectedAction.authentication_id = authenticationOption.id;
|
||||
selectedAction.selectedAuthentication = authenticationOption;
|
||||
if (
|
||||
selectedAction.authentication === undefined ||
|
||||
selectedAction.authentication === null
|
||||
) {
|
||||
selectedAction.authentication = [authenticationOption];
|
||||
} else {
|
||||
selectedAction.authentication.push(authenticationOption);
|
||||
}
|
||||
|
||||
setSelectedAction(selectedAction)
|
||||
setSelectedAction(selectedAction);
|
||||
|
||||
var newAuthOption = JSON.parse(JSON.stringify(authenticationOption))
|
||||
var newFields = []
|
||||
for (const key in newAuthOption.fields) {
|
||||
const value = newAuthOption.fields[key]
|
||||
newFields.push({
|
||||
key: key,
|
||||
value: value,
|
||||
})
|
||||
}
|
||||
var newAuthOption = JSON.parse(JSON.stringify(authenticationOption));
|
||||
var newFields = [];
|
||||
for (const key in newAuthOption.fields) {
|
||||
const value = newAuthOption.fields[key];
|
||||
newFields.push({
|
||||
key: key,
|
||||
value: value,
|
||||
});
|
||||
}
|
||||
|
||||
console.log("FIELDS: ", newFields)
|
||||
newAuthOption.fields = newFields
|
||||
setNewAppAuth(newAuthOption)
|
||||
//appAuthentication.push(newAuthOption)
|
||||
//setAppAuthentication(appAuthentication)
|
||||
//
|
||||
|
||||
//if (configureWorkflowModalOpen) {
|
||||
// setSelectedAction({})
|
||||
//}
|
||||
//setUpdate(authenticationOption.id)
|
||||
console.log("FIELDS: ", newFields);
|
||||
newAuthOption.fields = newFields;
|
||||
setNewAppAuth(newAuthOption);
|
||||
//appAuthentication.push(newAuthOption)
|
||||
//setAppAuthentication(appAuthentication)
|
||||
//
|
||||
|
||||
/*
|
||||
//if (configureWorkflowModalOpen) {
|
||||
// setSelectedAction({})
|
||||
//}
|
||||
//setUpdate(authenticationOption.id)
|
||||
|
||||
/*
|
||||
{selectedAction.authentication.map(data => (
|
||||
<MenuItem key={data.id} style={{backgroundColor: inputColor, color: "white"}} value={data}>
|
||||
*/
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const handleScopeChange = (event) => {
|
||||
const {
|
||||
target: { value },
|
||||
} = event;
|
||||
} = event;
|
||||
|
||||
console.log("VALUE: ", value)
|
||||
console.log("VALUE: ", value);
|
||||
|
||||
// On autofill we get a the stringified value.
|
||||
setSelectedScopes(typeof value === 'string' ? value.split(',') : value)
|
||||
setSelectedScopes(typeof value === "string" ? value.split(",") : value);
|
||||
};
|
||||
|
||||
if (
|
||||
authenticationOption.label === null ||
|
||||
authenticationOption.label === undefined
|
||||
) {
|
||||
authenticationOption.label = selectedApp.name + " authentication";
|
||||
}
|
||||
|
||||
|
||||
if (authenticationOption.label === null || authenticationOption.label === undefined) {
|
||||
authenticationOption.label = selectedApp.name+" authentication"
|
||||
}
|
||||
|
||||
//console.log(
|
||||
return (
|
||||
<div>
|
||||
<DialogTitle><div style={{color: "white"}}>Authentication for {selectedApp.name}</div></DialogTitle>
|
||||
<DialogContent>
|
||||
<span style={{}}>
|
||||
<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 with Shuffle</a><div/>
|
||||
</span>
|
||||
{/*<TextField
|
||||
//console.log(
|
||||
return (
|
||||
<div>
|
||||
<DialogTitle>
|
||||
<div style={{ color: "white" }}>
|
||||
Authentication for {selectedApp.name}
|
||||
</div>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<span style={{}}>
|
||||
<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 with Shuffle
|
||||
</a>
|
||||
<div />
|
||||
</span>
|
||||
{/*<TextField
|
||||
style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}}
|
||||
InputProps={{
|
||||
style:{
|
||||
@@ -240,186 +348,243 @@ const AuthenticationOauth2 = (props) => {
|
||||
<Divider style={{marginTop: 15, marginBottom: 15, backgroundColor: "rgb(91, 96, 100)"}}/>
|
||||
*/}
|
||||
|
||||
{!manuallyConfigure ? null :
|
||||
<span>
|
||||
{selectedApp.authentication.parameters.map((data, index) => {
|
||||
//console.log(data, index)
|
||||
if (data.name === "client_id" || data.name === "client_secret") {
|
||||
return null
|
||||
}
|
||||
{!manuallyConfigure ? null : (
|
||||
<span>
|
||||
{selectedApp.authentication.parameters.map((data, index) => {
|
||||
//console.log(data, index)
|
||||
if (data.name === "client_id" || data.name === "client_secret") {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (data.name !== "url") {
|
||||
return null
|
||||
}
|
||||
if (data.name !== "url") {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (oauthUrl.length === 0) {
|
||||
setOauthUrl(data.value)
|
||||
}
|
||||
if (oauthUrl.length === 0) {
|
||||
setOauthUrl(data.value);
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={index} style={{marginTop: 10}}>
|
||||
<LockOpenIcon style={{marginRight: 10}}/>
|
||||
<b>{data.name}</b>
|
||||
return (
|
||||
<div key={index} style={{ marginTop: 10 }}>
|
||||
<LockOpenIcon style={{ marginRight: 10 }} />
|
||||
<b>{data.name}</b>
|
||||
|
||||
{data.schema !== undefined && data.schema !== null && data.schema.type === "bool" ?
|
||||
<Select
|
||||
SelectDisplayProps={{
|
||||
style: {
|
||||
marginLeft: 10,
|
||||
}
|
||||
}}
|
||||
defaultValue={"false"}
|
||||
fullWidth
|
||||
onChange={(e) => {
|
||||
console.log("Value: ", e.target.value)
|
||||
authenticationOption.fields[data.name] = e.target.value
|
||||
}}
|
||||
style={{backgroundColor: theme.palette.surfaceColor, color: "white", height: 50}}
|
||||
>
|
||||
<MenuItem key={"false"} style={{backgroundColor: theme.palette.inputColor, color: "white"}} value={"false"}>
|
||||
false
|
||||
</MenuItem>
|
||||
<MenuItem key={"true"} style={{backgroundColor: theme.palette.inputColor, color: "white"}} value={"true"}>
|
||||
true
|
||||
</MenuItem>
|
||||
</Select>
|
||||
:
|
||||
<TextField
|
||||
style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}}
|
||||
InputProps={{
|
||||
style:{
|
||||
color: "white",
|
||||
marginLeft: "5px",
|
||||
maxWidth: "95%",
|
||||
height: 50,
|
||||
fontSize: "1em",
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
type={data.example !== undefined && data.example.includes("***") ? "password" : "text"}
|
||||
color="primary"
|
||||
defaultValue={data.value !== undefined && data.value !== null ? data.value : ""}
|
||||
placeholder={data.example}
|
||||
onChange={(event) => {
|
||||
authenticationOption.fields[data.name] = event.target.value
|
||||
console.log("Setting oauth url")
|
||||
setOauthUrl(event.target.value)
|
||||
//const [oauthUrl, setOauthUrl] = React.useState("")
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{allscopes.length === 0 ? null :
|
||||
<Select
|
||||
multiple
|
||||
value={selectedScopes}
|
||||
style={{backgroundColor: theme.palette.inputColor, color: "white", }}
|
||||
onChange={(e) => {
|
||||
handleScopeChange(e)
|
||||
}}
|
||||
fullWidth
|
||||
input={<Input id="select-multiple-native" />}
|
||||
renderValue={(selected) => selected.join(', ')}
|
||||
MenuProps={MenuProps}
|
||||
>
|
||||
{allscopes.map((data, index) => {
|
||||
return (
|
||||
<MenuItem key={index} value={data}>
|
||||
<Checkbox checked={selectedScopes.indexOf(data) > -1} />
|
||||
<ListItemText primary={data} />
|
||||
</MenuItem>
|
||||
)
|
||||
})}
|
||||
</Select>
|
||||
}
|
||||
<TextField
|
||||
style={{marginTop: 20, backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}}
|
||||
InputProps={{
|
||||
style:{
|
||||
color: "white",
|
||||
marginLeft: "5px",
|
||||
maxWidth: "95%",
|
||||
height: 50,
|
||||
fontSize: "1em",
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
color="primary"
|
||||
placeholder={"Client ID"}
|
||||
onChange={(event) => {
|
||||
setClientId(event.target.value)
|
||||
//authenticationOption.label = event.target.value
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}}
|
||||
InputProps={{
|
||||
style:{
|
||||
color: "white",
|
||||
marginLeft: "5px",
|
||||
maxWidth: "95%",
|
||||
height: 50,
|
||||
fontSize: "1em",
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
color="primary"
|
||||
placeholder={"Client Secret"}
|
||||
onChange={(event) => {
|
||||
setClientSecret(event.target.value)
|
||||
//authenticationOption.label = event.target.value
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
}
|
||||
<Button
|
||||
style={{marginBottom: 40, marginTop: 20, borderRadius: theme.palette.borderRadius}}
|
||||
disabled={clientSecret.length === 0 || clientId.length === 0 || buttonClicked}
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={() => {
|
||||
handleOauth2Request(clientId, clientSecret, oauthUrl, selectedScopes)
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
{buttonClicked ?
|
||||
<CircularProgress style={{color: "white", }} />
|
||||
:
|
||||
"Oauth2 request"
|
||||
}
|
||||
</Button>
|
||||
{data.schema !== undefined &&
|
||||
data.schema !== null &&
|
||||
data.schema.type === "bool" ? (
|
||||
<Select
|
||||
SelectDisplayProps={{
|
||||
style: {
|
||||
marginLeft: 10,
|
||||
},
|
||||
}}
|
||||
defaultValue={"false"}
|
||||
fullWidth
|
||||
onChange={(e) => {
|
||||
console.log("Value: ", e.target.value);
|
||||
authenticationOption.fields[data.name] = e.target.value;
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: theme.palette.surfaceColor,
|
||||
color: "white",
|
||||
height: 50,
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
key={"false"}
|
||||
style={{
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
color: "white",
|
||||
}}
|
||||
value={"false"}
|
||||
>
|
||||
false
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
key={"true"}
|
||||
style={{
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
color: "white",
|
||||
}}
|
||||
value={"true"}
|
||||
>
|
||||
true
|
||||
</MenuItem>
|
||||
</Select>
|
||||
) : (
|
||||
<TextField
|
||||
style={{
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
}}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
marginLeft: "5px",
|
||||
maxWidth: "95%",
|
||||
height: 50,
|
||||
fontSize: "1em",
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
type={
|
||||
data.example !== undefined &&
|
||||
data.example.includes("***")
|
||||
? "password"
|
||||
: "text"
|
||||
}
|
||||
color="primary"
|
||||
defaultValue={
|
||||
data.value !== undefined && data.value !== null
|
||||
? data.value
|
||||
: ""
|
||||
}
|
||||
placeholder={data.example}
|
||||
onChange={(event) => {
|
||||
authenticationOption.fields[data.name] =
|
||||
event.target.value;
|
||||
console.log("Setting oauth url");
|
||||
setOauthUrl(event.target.value);
|
||||
//const [oauthUrl, setOauthUrl] = React.useState("")
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{allscopes.length === 0 ? null : (
|
||||
<Select
|
||||
multiple
|
||||
value={selectedScopes}
|
||||
style={{
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
color: "white",
|
||||
}}
|
||||
onChange={(e) => {
|
||||
handleScopeChange(e);
|
||||
}}
|
||||
fullWidth
|
||||
input={<Input id="select-multiple-native" />}
|
||||
renderValue={(selected) => selected.join(", ")}
|
||||
MenuProps={MenuProps}
|
||||
>
|
||||
{allscopes.map((data, index) => {
|
||||
return (
|
||||
<MenuItem key={index} value={data}>
|
||||
<Checkbox checked={selectedScopes.indexOf(data) > -1} />
|
||||
<ListItemText primary={data} />
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
)}
|
||||
<TextField
|
||||
style={{
|
||||
marginTop: 20,
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
}}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
marginLeft: "5px",
|
||||
maxWidth: "95%",
|
||||
height: 50,
|
||||
fontSize: "1em",
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
color="primary"
|
||||
placeholder={"Client ID"}
|
||||
onChange={(event) => {
|
||||
setClientId(event.target.value);
|
||||
//authenticationOption.label = event.target.value
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
style={{
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
}}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
marginLeft: "5px",
|
||||
maxWidth: "95%",
|
||||
height: 50,
|
||||
fontSize: "1em",
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
color="primary"
|
||||
placeholder={"Client Secret"}
|
||||
onChange={(event) => {
|
||||
setClientSecret(event.target.value);
|
||||
//authenticationOption.label = event.target.value
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
<Button
|
||||
style={{
|
||||
marginBottom: 40,
|
||||
marginTop: 20,
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
}}
|
||||
disabled={
|
||||
clientSecret.length === 0 || clientId.length === 0 || buttonClicked
|
||||
}
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={() => {
|
||||
handleOauth2Request(
|
||||
clientId,
|
||||
clientSecret,
|
||||
oauthUrl,
|
||||
selectedScopes
|
||||
);
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
{buttonClicked ? (
|
||||
<CircularProgress style={{ color: "white" }} />
|
||||
) : (
|
||||
"Oauth2 request"
|
||||
)}
|
||||
</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)
|
||||
{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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthenticationOauth2
|
||||
export default AuthenticationOauth2;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+2371
-1612
File diff suppressed because it is too large
Load Diff
@@ -1,79 +1,82 @@
|
||||
import React, {useState, useEffect, useLayoutEffect} from 'react';
|
||||
import * as cytoscape from 'cytoscape';
|
||||
import CytoscapeComponent from 'react-cytoscapejs';
|
||||
import cystyle from '../defaultCytoscapeStyle';
|
||||
import React, { useState, useEffect, useLayoutEffect } from "react";
|
||||
import * as cytoscape from "cytoscape";
|
||||
import CytoscapeComponent from "react-cytoscapejs";
|
||||
import cystyle from "../defaultCytoscapeStyle";
|
||||
|
||||
const surfaceColor = "#27292D"
|
||||
const surfaceColor = "#27292D";
|
||||
const CytoscapeWrapper = (props) => {
|
||||
const { globalUrl, inworkflow } = props;
|
||||
|
||||
const [elements, setElements] = useState([])
|
||||
const [workflow, setWorkflow] = useState(inworkflow)
|
||||
const [cy, setCy] = React.useState()
|
||||
const bodyWidth = 200
|
||||
const bodyHeight = 150
|
||||
const [elements, setElements] = useState([]);
|
||||
const [workflow, setWorkflow] = useState(inworkflow);
|
||||
const [cy, setCy] = React.useState();
|
||||
const bodyWidth = 200;
|
||||
const bodyHeight = 150;
|
||||
|
||||
const setupGraph = () => {
|
||||
const actions = workflow.actions.map(action => {
|
||||
const node = {}
|
||||
node.position = action.position
|
||||
node.data = action
|
||||
const setupGraph = () => {
|
||||
const actions = workflow.actions.map((action) => {
|
||||
const node = {};
|
||||
node.position = action.position;
|
||||
node.data = action;
|
||||
|
||||
node.data._id = action["id"]
|
||||
node.data.type = "ACTION"
|
||||
node.isStartNode = action["id"] === workflow.start
|
||||
node.data._id = action["id"];
|
||||
node.data.type = "ACTION";
|
||||
node.isStartNode = action["id"] === workflow.start;
|
||||
|
||||
var example = "";
|
||||
if (
|
||||
action.example !== undefined &&
|
||||
action.example !== null &&
|
||||
action.example.length > 0
|
||||
) {
|
||||
example = action.example;
|
||||
}
|
||||
|
||||
var example = ""
|
||||
if (action.example !== undefined && action.example !== null && action.example.length > 0) {
|
||||
example = action.example
|
||||
}
|
||||
node.data.example = example;
|
||||
return node;
|
||||
});
|
||||
|
||||
node.data.example = example
|
||||
return node;
|
||||
})
|
||||
const triggers = workflow.triggers.map((trigger) => {
|
||||
const node = {};
|
||||
node.position = trigger.position;
|
||||
node.data = trigger;
|
||||
|
||||
const triggers = workflow.triggers.map(trigger => {
|
||||
const node = {}
|
||||
node.position = trigger.position
|
||||
node.data = trigger
|
||||
node.data._id = trigger["id"];
|
||||
node.data.type = "TRIGGER";
|
||||
|
||||
node.data._id = trigger["id"]
|
||||
node.data.type = "TRIGGER"
|
||||
return node;
|
||||
});
|
||||
|
||||
return node;
|
||||
})
|
||||
// FIXME - tmp branch update
|
||||
var insertedNodes = [].concat(actions, triggers);
|
||||
const edges = workflow.branches.map((branch, index) => {
|
||||
//workflow.branches[index].conditions = [{
|
||||
|
||||
// FIXME - tmp branch update
|
||||
var insertedNodes = [].concat(actions, triggers)
|
||||
const edges = workflow.branches.map((branch, index) => {
|
||||
//workflow.branches[index].conditions = [{
|
||||
const edge = {};
|
||||
var conditions = workflow.branches[index].conditions;
|
||||
if (conditions === undefined || conditions === null) {
|
||||
conditions = [];
|
||||
}
|
||||
|
||||
const edge = { };
|
||||
var conditions = workflow.branches[index].conditions
|
||||
if (conditions === undefined || conditions === null) {
|
||||
conditions = []
|
||||
}
|
||||
var label = "";
|
||||
if (conditions.length === 1) {
|
||||
label = conditions.length + " condition";
|
||||
} else if (conditions.length > 1) {
|
||||
label = conditions.length + " conditions";
|
||||
}
|
||||
|
||||
var label = ""
|
||||
if (conditions.length === 1) {
|
||||
label = conditions.length+" condition"
|
||||
} else if (conditions.length > 1) {
|
||||
label = conditions.length+" conditions"
|
||||
}
|
||||
edge.data = {
|
||||
id: branch.id,
|
||||
_id: branch.id,
|
||||
source: branch.source_id,
|
||||
target: branch.destination_id,
|
||||
label: label,
|
||||
conditions: conditions,
|
||||
hasErrors: branch.has_errors,
|
||||
};
|
||||
|
||||
edge.data = {
|
||||
id: branch.id,
|
||||
_id: branch.id,
|
||||
source: branch.source_id,
|
||||
target: branch.destination_id,
|
||||
label: label,
|
||||
conditions: conditions,
|
||||
hasErrors: branch.has_errors
|
||||
};
|
||||
|
||||
// This is an attempt at prettier edges. The numbers are weird to work with.
|
||||
/*
|
||||
// This is an attempt at prettier edges. The numbers are weird to work with.
|
||||
/*
|
||||
//http://manual.graphspace.org/projects/graphspace-python/en/latest/demos/edge-types.html
|
||||
const sourcenode = actions.find(node => node.data._id === branch.source_id)
|
||||
const destinationnode = actions.find(node => node.data._id === branch.destination_id)
|
||||
@@ -96,51 +99,59 @@ const CytoscapeWrapper = (props) => {
|
||||
}
|
||||
*/
|
||||
|
||||
return edge;
|
||||
})
|
||||
return edge;
|
||||
});
|
||||
|
||||
setWorkflow(workflow)
|
||||
setWorkflow(workflow);
|
||||
|
||||
// Verifies if a branch is valid and skips others
|
||||
var newedges = []
|
||||
for (var key in edges) {
|
||||
var item = edges[key]
|
||||
// Verifies if a branch is valid and skips others
|
||||
var newedges = [];
|
||||
for (var key in edges) {
|
||||
var item = edges[key];
|
||||
|
||||
const sourcecheck = insertedNodes.find(data => data.data.id === item.data.source)
|
||||
const destcheck = insertedNodes.find(data => data.data.id === item.data.target)
|
||||
if (sourcecheck === undefined || destcheck === undefined) {
|
||||
continue
|
||||
}
|
||||
const sourcecheck = insertedNodes.find(
|
||||
(data) => data.data.id === item.data.source
|
||||
);
|
||||
const destcheck = insertedNodes.find(
|
||||
(data) => data.data.id === item.data.target
|
||||
);
|
||||
if (sourcecheck === undefined || destcheck === undefined) {
|
||||
continue;
|
||||
}
|
||||
|
||||
newedges.push(item)
|
||||
}
|
||||
newedges.push(item);
|
||||
}
|
||||
|
||||
insertedNodes = insertedNodes.concat(newedges)
|
||||
setElements(insertedNodes)
|
||||
}
|
||||
insertedNodes = insertedNodes.concat(newedges);
|
||||
setElements(insertedNodes);
|
||||
};
|
||||
|
||||
if (elements.length === 0) {
|
||||
setupGraph()
|
||||
}
|
||||
if (elements.length === 0) {
|
||||
setupGraph();
|
||||
}
|
||||
|
||||
return (
|
||||
<CytoscapeComponent
|
||||
elements={elements}
|
||||
minZoom={0.35}
|
||||
maxZoom={2.00}
|
||||
style={{width: bodyWidth-15, height: bodyHeight-5, backgroundColor: surfaceColor}}
|
||||
stylesheet={cystyle}
|
||||
boxSelectionEnabled={true}
|
||||
autounselectify={false}
|
||||
showGrid={true}
|
||||
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)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<CytoscapeComponent
|
||||
elements={elements}
|
||||
minZoom={0.35}
|
||||
maxZoom={2.0}
|
||||
style={{
|
||||
width: bodyWidth - 15,
|
||||
height: bodyHeight - 5,
|
||||
backgroundColor: surfaceColor,
|
||||
}}
|
||||
stylesheet={cystyle}
|
||||
boxSelectionEnabled={true}
|
||||
autounselectify={false}
|
||||
showGrid={true}
|
||||
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);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default CytoscapeWrapper
|
||||
export default CytoscapeWrapper;
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
import { useEffect } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { useEffect } from "react";
|
||||
import { withRouter } from "react-router-dom";
|
||||
|
||||
function ScrollToTop({getUserNotifications, setCurpath, history }) {
|
||||
function ScrollToTop({ getUserNotifications, setCurpath, history }) {
|
||||
useEffect(() => {
|
||||
const unlisten = history.listen(() => {
|
||||
window.scroll({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
|
||||
setCurpath(window.location.pathname)
|
||||
getUserNotifications()
|
||||
setCurpath(window.location.pathname);
|
||||
getUserNotifications();
|
||||
});
|
||||
return () => {
|
||||
unlisten();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (null);
|
||||
return null;
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/questions/36904185/react-router-scroll-to-top-on-every-transition
|
||||
|
||||
@@ -1,141 +1,177 @@
|
||||
import React, {useState} from 'react';
|
||||
import React, { useState } from "react";
|
||||
|
||||
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Divider from '@material-ui/core/Divider';
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import Dialog from "@material-ui/core/Dialog";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
|
||||
const SettingsDialog = (props) => {
|
||||
const {
|
||||
classes,
|
||||
onClose,
|
||||
settingsOpen,
|
||||
settingsData,
|
||||
globalUrl,
|
||||
isLoggedIn,
|
||||
setIsLoggedIn,
|
||||
...other
|
||||
} = props;
|
||||
|
||||
const SettingsDialog = props => {
|
||||
const { classes, onClose, settingsOpen, settingsData, globalUrl, isLoggedIn, setIsLoggedIn, ...other } = props;
|
||||
|
||||
const [password1, setPassword1] = useState("");
|
||||
const [password2, setPassword2] = useState("");
|
||||
const [password3, setPassword3] = useState("");
|
||||
|
||||
const handleValidateForm = () => {
|
||||
var passlength = 10
|
||||
if (password1 === password2 && password1.length >= passlength && password3.length >= passlength) {
|
||||
return true
|
||||
}
|
||||
const handleValidateForm = () => {
|
||||
var passlength = 10;
|
||||
if (
|
||||
password1 === password2 &&
|
||||
password1.length >= passlength &&
|
||||
password3.length >= passlength
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const onChangePass1 = (e) => {
|
||||
setPassword1(e.target.value)
|
||||
}
|
||||
const onChangePass1 = (e) => {
|
||||
setPassword1(e.target.value);
|
||||
};
|
||||
|
||||
const onChangePass2 = (e) => {
|
||||
setPassword2(e.target.value)
|
||||
}
|
||||
const onChangePass2 = (e) => {
|
||||
setPassword2(e.target.value);
|
||||
};
|
||||
|
||||
const onChangePass3 = (e) => {
|
||||
setPassword3(e.target.value)
|
||||
}
|
||||
const onChangePass3 = (e) => {
|
||||
setPassword3(e.target.value);
|
||||
};
|
||||
|
||||
const onSubmitPassReset = () => {
|
||||
console.log("Should change password")
|
||||
// Rofl, this can't possibly be typesafe
|
||||
var data = '{"password1": "'+password1+'", "password2": "'+password2+'", "password3": "'+password3+'"}'
|
||||
const onSubmitPassReset = () => {
|
||||
console.log("Should change password");
|
||||
// Rofl, this can't possibly be typesafe
|
||||
var data =
|
||||
'{"password1": "' +
|
||||
password1 +
|
||||
'", "password2": "' +
|
||||
password2 +
|
||||
'", "password3": "' +
|
||||
password3 +
|
||||
'"}';
|
||||
|
||||
fetch(globalUrl+"/passwordreset", {
|
||||
body: data,
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
fetch(globalUrl + "/passwordreset", {
|
||||
body: data,
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((responseJson) => {
|
||||
console.log(responseJson)
|
||||
if (responseJson.status === true) {
|
||||
console.log("SUCCESS")
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
});
|
||||
}
|
||||
|
||||
//PaperProps={{style: {minWidth: "500px"}}
|
||||
return(
|
||||
<Dialog open={settingsOpen} onClose={() => onClose()} {...other}>
|
||||
<DialogTitle>Settings</DialogTitle>
|
||||
<Divider />
|
||||
<div style={{marginLeft: "15px", marginRight: "15px"}}>
|
||||
<h3>
|
||||
Username
|
||||
</h3>
|
||||
{settingsData.username}
|
||||
</div>
|
||||
<div style={{marginLeft: "15px", marginRight: "15px", marginBottom: "15px"}}>
|
||||
<h3>
|
||||
ApiKey
|
||||
</h3>
|
||||
<TextField
|
||||
id="outlined-read-only-input"
|
||||
defaultValue={settingsData.apikey}
|
||||
value={settingsData.apikey}
|
||||
style={{width: 320}}
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
variant="outlined"
|
||||
/>
|
||||
</div>
|
||||
<Divider />
|
||||
<form style={{margin: "15px 15px 15px 15px"}}>
|
||||
<h3>
|
||||
Change password
|
||||
</h3>
|
||||
<div>
|
||||
<TextField
|
||||
id="standard-password-input"
|
||||
label="Current password"
|
||||
type="password"
|
||||
name="password"
|
||||
style={{width: 320}}
|
||||
placeholder="********************************"
|
||||
autoComplete="current-password"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={onChangePass1}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<TextField
|
||||
label="Confirm current password"
|
||||
type="password"
|
||||
placeholder="********************************"
|
||||
name="password"
|
||||
style={{width: 320}}
|
||||
autoComplete="current-password"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={onChangePass2}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<TextField
|
||||
label="New password"
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="********************************"
|
||||
style={{width: 320}}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={onChangePass3}
|
||||
/>
|
||||
</div>
|
||||
<div style={{display: "flex", marginTop: "10px"}}>
|
||||
<Button color="secondary" variant="contained" onClick={onSubmitPassReset} type="button" style={{flex: "1", marginRight: "5px"}} disabled={!handleValidateForm()}>SUBMIT</Button>
|
||||
<Button color="primary" variant="contained" type="button" style={{flex: "1"}} onClick={onClose}>Cancel</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
.then((response) => response.json())
|
||||
.then((responseJson) => {
|
||||
console.log(responseJson);
|
||||
if (responseJson.status === true) {
|
||||
console.log("SUCCESS");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
//PaperProps={{style: {minWidth: "500px"}}
|
||||
return (
|
||||
<Dialog open={settingsOpen} onClose={() => onClose()} {...other}>
|
||||
<DialogTitle>Settings</DialogTitle>
|
||||
<Divider />
|
||||
<div style={{ marginLeft: "15px", marginRight: "15px" }}>
|
||||
<h3>Username</h3>
|
||||
{settingsData.username}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: "15px",
|
||||
marginRight: "15px",
|
||||
marginBottom: "15px",
|
||||
}}
|
||||
>
|
||||
<h3>ApiKey</h3>
|
||||
<TextField
|
||||
id="outlined-read-only-input"
|
||||
defaultValue={settingsData.apikey}
|
||||
value={settingsData.apikey}
|
||||
style={{ width: 320 }}
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
variant="outlined"
|
||||
/>
|
||||
</div>
|
||||
<Divider />
|
||||
<form style={{ margin: "15px 15px 15px 15px" }}>
|
||||
<h3>Change password</h3>
|
||||
<div>
|
||||
<TextField
|
||||
id="standard-password-input"
|
||||
label="Current password"
|
||||
type="password"
|
||||
name="password"
|
||||
style={{ width: 320 }}
|
||||
placeholder="********************************"
|
||||
autoComplete="current-password"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={onChangePass1}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<TextField
|
||||
label="Confirm current password"
|
||||
type="password"
|
||||
placeholder="********************************"
|
||||
name="password"
|
||||
style={{ width: 320 }}
|
||||
autoComplete="current-password"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={onChangePass2}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<TextField
|
||||
label="New password"
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="********************************"
|
||||
style={{ width: 320 }}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={onChangePass3}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", marginTop: "10px" }}>
|
||||
<Button
|
||||
color="secondary"
|
||||
variant="contained"
|
||||
onClick={onSubmitPassReset}
|
||||
type="button"
|
||||
style={{ flex: "1", marginRight: "5px" }}
|
||||
disabled={!handleValidateForm()}
|
||||
>
|
||||
SUBMIT
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
type="button"
|
||||
style={{ flex: "1" }}
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsDialog;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { createBrowserHistory } from 'history';
|
||||
import { createBrowserHistory } from "history";
|
||||
|
||||
var localExport
|
||||
if (typeof window !== 'undefined') {
|
||||
localExport = createBrowserHistory({forceRefresh: true});
|
||||
var localExport;
|
||||
if (typeof window !== "undefined") {
|
||||
localExport = createBrowserHistory({ forceRefresh: true });
|
||||
}
|
||||
|
||||
export default localExport
|
||||
export default localExport;
|
||||
|
||||
Reference in New Issue
Block a user