Housekeeping. Refer to PR for specifics
This commit is contained in:
Miles
@@ -0,0 +1,26 @@
|
||||
import React, { useEffect} from 'react';
|
||||
|
||||
const Popup = (props) => {
|
||||
const { data } = props;
|
||||
|
||||
const popupStyle = {
|
||||
position: "fixed",
|
||||
width: "300px",
|
||||
height: "50px",
|
||||
backgroundColor: "black",
|
||||
color: "white",
|
||||
}
|
||||
|
||||
const popupData =
|
||||
<div>
|
||||
HEY
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div>
|
||||
{popupData}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Popup
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from 'react'
|
||||
import InfoIcon from './icons/InfoIcon'
|
||||
import SuccessIcon from './icons/SuccessIcon'
|
||||
import ErrorIcon from './icons/ErrorIcon'
|
||||
import CloseIcon from './icons/CloseIcon'
|
||||
|
||||
const alertStyle = {
|
||||
backgroundColor: '#151515',
|
||||
color: 'white',
|
||||
padding: '10px',
|
||||
textTransform: 'uppercase',
|
||||
borderRadius: '3px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0px 2px 2px 2px rgba(0, 0, 0, 0.03)',
|
||||
fontFamily: 'Arial',
|
||||
width: '300px',
|
||||
boxSizing: 'border-box'
|
||||
}
|
||||
|
||||
const buttonStyle = {
|
||||
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 />}
|
||||
{options.type === 'success' && <SuccessIcon />}
|
||||
{options.type === 'error' && <ErrorIcon />}
|
||||
<span style={{ flex: 2 }}>{message}</span>
|
||||
<button onClick={close} style={buttonStyle}>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AlertTemplate
|
||||
@@ -0,0 +1,54 @@
|
||||
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)',
|
||||
};
|
||||
|
||||
const FooterInfo = {
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
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;
|
||||
@@ -0,0 +1,293 @@
|
||||
import React, {useState} from 'react';
|
||||
import {BrowserView, MobileView} from "react-device-detect";
|
||||
|
||||
import {Link} from 'react-router-dom';
|
||||
|
||||
import List from '@material-ui/core/List';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
|
||||
import Button from '@material-ui/core/Button';
|
||||
import HomeIcon from '@material-ui/icons/Home';
|
||||
import PolymerIcon from '@material-ui/icons/Polymer';
|
||||
import AppsIcon from '@material-ui/icons/Apps';
|
||||
import DescriptionIcon from '@material-ui/icons/Description';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
|
||||
const hoverColor = "#f85a3e"
|
||||
const hoverOutColor = "#e8eaf6"
|
||||
|
||||
const Header = props => {
|
||||
const { globalUrl, isLoggedIn, removeCookie, homePage, isLoaded } = props;
|
||||
|
||||
const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
|
||||
const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
|
||||
const [LoginHoverColor, setLoginHoverColor] = useState(hoverOutColor);
|
||||
const [DocsHoverColor, setDocsHoverColor] = useState(hoverOutColor);
|
||||
const [HelpHoverColor, setHelpHoverColor] = useState(hoverOutColor);
|
||||
|
||||
const hrefStyle = {
|
||||
color: hoverOutColor,
|
||||
textDecoration: "none",
|
||||
}
|
||||
|
||||
// DEBUG HERE
|
||||
const handleClickLogout = () => {
|
||||
console.log("SHOULD LOG OUT")
|
||||
console.log(isLoggedIn)
|
||||
|
||||
// Don't really care about the logout
|
||||
fetch(globalUrl+"/api/v1/logout", {
|
||||
credentials: "include",
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
// Log out anyway
|
||||
console.log("Hey")
|
||||
removeCookie("session_token", {path: "/"})
|
||||
window.location.pathname = "/"
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
});
|
||||
}
|
||||
|
||||
// Rofl this is weird
|
||||
const handleDocsHover = () => {
|
||||
setDocsHoverColor(hoverColor)
|
||||
}
|
||||
|
||||
const handleDocsHoverOut = () => {
|
||||
setDocsHoverColor(hoverOutColor)
|
||||
}
|
||||
|
||||
const handleHomeHover = () => {
|
||||
setHomeHoverColor(hoverColor)
|
||||
}
|
||||
|
||||
const handleHelpHover = () => {
|
||||
setHelpHoverColor(hoverColor)
|
||||
}
|
||||
|
||||
const handleHelpHoverOut = () => {
|
||||
setHelpHoverColor(hoverOutColor)
|
||||
}
|
||||
|
||||
const handleSoarHover = () => {
|
||||
setSoarHoverColor(hoverColor)
|
||||
}
|
||||
|
||||
const handleSoarHoverOut = () => {
|
||||
setSoarHoverColor(hoverOutColor)
|
||||
}
|
||||
|
||||
const handleHomeHoverOut = () => {
|
||||
setHomeHoverColor(hoverOutColor)
|
||||
}
|
||||
|
||||
const handleLoginHover = () => {
|
||||
setLoginHoverColor(hoverColor)
|
||||
}
|
||||
|
||||
const handleLoginHoverOut = () => {
|
||||
setLoginHoverColor(hoverOutColor)
|
||||
}
|
||||
|
||||
// Should be based on some path
|
||||
const logoCheck = !homePage ? null : null
|
||||
|
||||
|
||||
// Handle top bar or something
|
||||
const loginTextBrowser = !isLoggedIn ?
|
||||
<div style={{display: "flex"}}>
|
||||
<List style={{display: "flex", flexDirect: "row"}} component="nav">
|
||||
<ListItem style={{textAlign: "center", marginLeft: "0px"}}>
|
||||
<Link to ="/docs/about" style={hrefStyle}>
|
||||
<div onMouseOver={handleSoarHover} onMouseOut={handleSoarHoverOut} style={{color: SoarHoverColor, cursor: "pointer"}}>
|
||||
About
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
</List>
|
||||
<div style={{flex: "7", display: "flex", flexDirection: "row-reverse"}}>
|
||||
<List style={{display: 'flex', flexDirection: 'row-reverse'}} component="nav">
|
||||
<ListItem style={{flex: "1", textAlign: "center"}}>
|
||||
<Link to="/login" style={hrefStyle}>
|
||||
<div onMouseOver={handleLoginHover} onMouseOut={handleLoginHoverOut} style={{color: LoginHoverColor, cursor: "pointer"}}>Login</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div style={{display: "flex"}}>
|
||||
<div style={{flex: "1", flexDirection: "row"}}>
|
||||
<List style={{display: "flex", flexDirect: "row", flex: "1"}} component="nav">
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/workflows" style={hrefStyle}>
|
||||
<div onMouseOver={handleSoarHover} onMouseOut={handleSoarHoverOut} style={{color: SoarHoverColor, cursor: "pointer", display: "flex"}}>
|
||||
<PolymerIcon style={{marginRight: "5px"}} />
|
||||
<span style={{marginTop: 2}}>Workflows</span>
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/apps" style={hrefStyle}>
|
||||
<div onMouseOver={handleHelpHover} onMouseOut={handleHelpHoverOut} style={{color: HelpHoverColor, cursor: "pointer", display: "flex",}}>
|
||||
<AppsIcon style={{marginRight: "5px"}} />
|
||||
<span style={{marginTop: 2}}>Apps</span>
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
{/*
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/dashboard" style={hrefStyle}>
|
||||
<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer"}}>Dashboard</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
*/}
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/docs/about" style={hrefStyle}>
|
||||
<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer", display: "flex"}}>
|
||||
<DescriptionIcon style={{marginRight: "5px"}} />
|
||||
<span style={{marginTop: 2}}>Docs</span>
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
{/*
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/configurations" style={hrefStyle}>
|
||||
<div onMouseOver={handleCredentialHover} onMouseOut={handleCredentialHoverOut} style={{color: CredentialHoverColor, cursor: "pointer"}}>Configure</div>
|
||||
</a>
|
||||
</ListItem>
|
||||
*/}
|
||||
</List>
|
||||
</div>
|
||||
<div style={{flex: "10", display: "flex", flexDirection: "row-reverse"}}>
|
||||
<List style={{display: 'flex', flexDirection: 'row-reverse'}} component="nav">
|
||||
<ListItem style={{flex: "1", textAlign: "center"}}>
|
||||
<div onMouseOver={handleLoginHover} onMouseOut={handleLoginHoverOut} onClick={handleClickLogout} style={{color: LoginHoverColor, cursor: "pointer"}}>
|
||||
Logout
|
||||
</div>
|
||||
</ListItem>
|
||||
{logoCheck}
|
||||
<ListItem style={{flex: "1", textAlign: "center"}}>
|
||||
<Link to="/settings" style={hrefStyle}>
|
||||
<Button
|
||||
style={{}}
|
||||
variant="outlined"
|
||||
color="primary"> Settings</Button>
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Link to="/admin" style={hrefStyle}>
|
||||
<Button
|
||||
style={{}}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
Admin
|
||||
</Button>
|
||||
</Link>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
const loginTextMobile = !isLoggedIn ?
|
||||
<div style={{display: "flex"}}>
|
||||
<List style={{display: "flex", flexDirection: "row"}} component="nav">
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/" style={hrefStyle}>
|
||||
<div onMouseOver={handleHomeHover} onMouseOut={handleHomeHoverOut} style={{color: HomeHoverColor, cursor: "pointer"}}>
|
||||
<Grid container direction="row" alignItems="center">
|
||||
<Grid item>
|
||||
<HomeIcon style={{marginTop: "3px", marginRight: "5px"}} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/docs/about" style={hrefStyle}>
|
||||
<div onMouseOver={handleSoarHover} onMouseOut={handleSoarHoverOut} style={{color: SoarHoverColor, cursor: "pointer"}}>
|
||||
About
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
:
|
||||
<div style={{display: "flex"}}>
|
||||
<div style={{flex: "1", flexDirection: "row"}}>
|
||||
<List style={{display: "flex", flexDirect: "row", flex: "1"}} component="nav">
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/" style={hrefStyle}>
|
||||
<div onMouseOver={handleHomeHover} onMouseOut={handleHomeHoverOut} style={{color: HomeHoverColor, cursor: "pointer"}}>Shuffle</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/workflows" style={hrefStyle}>
|
||||
<div onMouseOver={handleSoarHover} onMouseOut={handleSoarHoverOut} style={{color: SoarHoverColor, cursor: "pointer"}}>Workflows</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/apps" style={hrefStyle}>
|
||||
<div onMouseOver={handleHelpHover} onMouseOut={handleHelpHoverOut} style={{color: HelpHoverColor, cursor: "pointer"}}>Apps</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
{/*
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/configurations" style={hrefStyle}>
|
||||
<div onMouseOver={handleCredentialHover} onMouseOut={handleCredentialHoverOut} style={{color: CredentialHoverColor, cursor: "pointer"}}>Configure</div>
|
||||
</a>
|
||||
</ListItem>
|
||||
*/}
|
||||
</List>
|
||||
</div>
|
||||
<div style={{flex: "10", display: "flex", flexDirection: "row-reverse"}}>
|
||||
<List style={{display: 'flex', flexDirection: 'row-reverse'}} component="nav">
|
||||
<ListItem style={{flex: "1", textAlign: "center"}}>
|
||||
<div onMouseOver={handleLoginHover} onMouseOut={handleLoginHoverOut} onClick={handleClickLogout} style={{color: LoginHoverColor, cursor: "pointer"}}>
|
||||
Logout
|
||||
</div>
|
||||
</ListItem>
|
||||
{logoCheck}
|
||||
<ListItem style={{flex: "1", textAlign: "center"}}>
|
||||
<Link to="/settings" style={hrefStyle}>
|
||||
<Button
|
||||
style={{}}
|
||||
variant="contained"
|
||||
color="primary"> Settings</Button>
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem></ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// <Divider style={{height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
|
||||
const loadedCheck = isLoaded ?
|
||||
<div>
|
||||
<BrowserView>
|
||||
{loginTextBrowser}
|
||||
</BrowserView>
|
||||
<MobileView>
|
||||
{loginTextMobile}
|
||||
</MobileView>
|
||||
</div>
|
||||
:
|
||||
<div>
|
||||
</div>
|
||||
|
||||
// <div style={{backgroundImage: "linear-gradient(-90deg,#342f78 0,#29255e 50%,#1b1947 100%"}}>
|
||||
return (
|
||||
<div>
|
||||
{loadedCheck}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,139 @@
|
||||
/* eslint-disable react/no-multi-comp */
|
||||
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';
|
||||
|
||||
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);
|
||||
|
||||
// Used to swap from login to register. True = login, false = register
|
||||
const [loginCheck, setLoginCheck] = useState(true);
|
||||
|
||||
// Error messages etc
|
||||
const [loginInfo, setLoginInfo] = useState("");
|
||||
|
||||
const handleValidateForm = () => {
|
||||
return (username.length > 1 && password.length > 8);
|
||||
}
|
||||
|
||||
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")
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const onChangeUser = (e) => {
|
||||
setUsername(e.target.value)
|
||||
}
|
||||
|
||||
const onChangePass = (e) => {
|
||||
setPassword(e.target.value)
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
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;
|
||||
@@ -0,0 +1,141 @@
|
||||
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';
|
||||
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const onChangePass1 = (e) => {
|
||||
setPassword1(e.target.value)
|
||||
}
|
||||
|
||||
const onChangePass2 = (e) => {
|
||||
setPassword2(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+'"}'
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default SettingsDialog;
|
||||
Reference in New Issue
Block a user