Added more info and control to settings page
This commit is contained in:
frikky
@@ -276,7 +276,7 @@ const Header = props => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
}}>
|
||||
<Badge badgeContent={notifications.length} color="primary">
|
||||
<NotificationsIcon color="secondary" style={{height: 35, width: 35,}} alt="Your username here" src="" />
|
||||
<NotificationsIcon color="secondary" style={{height: 30, width: 30,}} alt="Your username here" src="" />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<Menu
|
||||
@@ -325,7 +325,7 @@ const Header = props => {
|
||||
<IconButton color="primary" style={{zIndex: 10001, marginRight: 15, }} aria-controls="simple-menu" aria-haspopup="true" onClick={(event) => {
|
||||
setAnchorElAvatar(event.currentTarget);
|
||||
}}>
|
||||
<Avatar style={{height: 35, width: 35,}} alt="Your username here" src="" />
|
||||
<Avatar style={{height: 30, width: 30,}} alt="Your username here" src="" />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="simple-menu"
|
||||
@@ -439,7 +439,7 @@ const Header = props => {
|
||||
{notificationMenu}
|
||||
{userdata === undefined || userdata.admin === undefined || userdata.admin === null || !userdata.admin ? null :
|
||||
<Link to="/admin" style={hrefStyle}>
|
||||
<Button color="primary" variant="contained" style={{marginRight: 15, marginTop: 12}}>
|
||||
<Button color="primary" variant="outlined" style={{marginRight: 15, marginTop: 12}}>
|
||||
Admin
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
@@ -6091,12 +6091,12 @@ const AngularWorkflow = (props) => {
|
||||
<div>
|
||||
<Divider style={{marginTop: "20px", height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
|
||||
<div style={{marginTop: "20px", marginBottom: "7px", display: "flex"}}>
|
||||
<Button style={{flex: "1",}} disabled={selectedTrigger.status === "running"} onClick={() => {
|
||||
<Button variant="contained" style={{flex: "1",}} disabled={selectedTrigger.status === "running" || triggerFolders === undefined || triggerFolders === null || triggerFolders.length === 0} onClick={() => {
|
||||
startMailSub(selectedTrigger, selectedTriggerIndex)
|
||||
}} color="primary">
|
||||
Start
|
||||
</Button>
|
||||
<Button style={{flex: "1",}} disabled={selectedTrigger.status !== "running" } onClick={() => {
|
||||
<Button variant="outlined" style={{flex: "1",}} disabled={selectedTrigger.status !== "running" } onClick={() => {
|
||||
stopMailSub(selectedTrigger, selectedTriggerIndex)
|
||||
}} color="primary">
|
||||
Stop
|
||||
|
||||
@@ -20,6 +20,8 @@ const Settings = (props) => {
|
||||
const [currentPassword, setCurrentPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [newPassword2, setNewPassword2] = useState("");
|
||||
const [file, setFile] = React.useState("")
|
||||
const [fileBase64, setFileBase64] = React.useState(userdata.image === undefined || userdata.image === null ? theme.palette.defaultImage : userdata.image)
|
||||
|
||||
// Used for error messages etc
|
||||
const [formMessage, ] = useState("");
|
||||
@@ -40,6 +42,7 @@ const Settings = (props) => {
|
||||
const boxStyle = {
|
||||
flex: "1",
|
||||
color: "white",
|
||||
position: "relative",
|
||||
marginLeft: "10px",
|
||||
marginRight: "10px",
|
||||
paddingLeft: "30px",
|
||||
@@ -168,9 +171,81 @@ const Settings = (props) => {
|
||||
})
|
||||
|
||||
// Random names for type & autoComplete. Didn't research :^)
|
||||
var imageData = file.length > 0 ? file : fileBase64
|
||||
imageData = imageData === undefined || imageData.length === 0 ? theme.palette.defaultImage : imageData
|
||||
const imageInfo = <img src={imageData} alt="Click to upload an image (174x174)" id="logo" style={{maxWidth: 100, maxHeight: 100, minWidth: 100, minHeight: 100, position: "absolute", top: -80, left: 1020/2-25, borderRadius: 50, objectFit: "contain", border: "2px solid rgba(255,255,255,0.7)"}} />
|
||||
const landingpageData =
|
||||
<div style={{display: "flex", marginTop: "80px"}}>
|
||||
<div style={{display: "flex", marginTop: 120}}>
|
||||
<Paper style={boxStyle}>
|
||||
{imageInfo}
|
||||
<h2>Settings</h2>
|
||||
<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
|
||||
<TextField
|
||||
style={{backgroundColor: theme.palette.inputColor, flex: "1"}}
|
||||
InputProps={{
|
||||
style:{
|
||||
height: "50px",
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
color="primary"
|
||||
required
|
||||
disabled
|
||||
fullWidth={true}
|
||||
value={username}
|
||||
placeholder="Username"
|
||||
type="username"
|
||||
id="standard-required"
|
||||
autoComplete="username"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
//onChange={e => setUsername(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
|
||||
<TextField
|
||||
style={{backgroundColor: theme.palette.inputColor, flex: "1", marginRight: "15px"}}
|
||||
InputProps={{
|
||||
style:{
|
||||
height: "50px",
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
color="primary"
|
||||
required
|
||||
fullWidth={true}
|
||||
value={firstname}
|
||||
placeholder="First Name"
|
||||
type="firstname"
|
||||
disabled
|
||||
id="standard-required"
|
||||
autoComplete="firstname"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={e => setFirstname(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
style={{backgroundColor: theme.palette.inputColor, flex: "1", marginLeft: "15px"}}
|
||||
InputProps={{
|
||||
style:{
|
||||
height: "50px",
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
color="primary"
|
||||
required
|
||||
value={lastname}
|
||||
fullWidth={true}
|
||||
placeholder="Last Name"
|
||||
disabled
|
||||
type="lastname"
|
||||
id="standard-required"
|
||||
autoComplete="lastname"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={e => setLastname(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<h2>APIKEY</h2>
|
||||
<a target="_blank" href="/docs/API#authentication" style={{textDecoration: "none", color: "#f85a3e"}}>What is the API key used for?</a>
|
||||
<TextField
|
||||
@@ -193,78 +268,12 @@ const Settings = (props) => {
|
||||
/>
|
||||
<Button
|
||||
style={{width: "100%", height: "40px", marginTop: "10px"}}
|
||||
variant="contained"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={() => generateApikey()}
|
||||
>Re-Generate APIKEY</Button>
|
||||
<Divider style={{marginTop: "40px"}}/>
|
||||
{/*
|
||||
<h2>Settings</h2>
|
||||
<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
|
||||
<TextField
|
||||
style={{backgroundColor: theme.palette.inputColor, flex: "1"}}
|
||||
InputProps={{
|
||||
style:{
|
||||
height: "50px",
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
color="primary"
|
||||
required
|
||||
fullWidth={true}
|
||||
value={username}
|
||||
placeholder="Username"
|
||||
type="username"
|
||||
id="standard-required"
|
||||
autoComplete="username"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
|
||||
<TextField
|
||||
style={{backgroundColor: theme.palette.inputColor, flex: "1", marginRight: "15px"}}
|
||||
InputProps={{
|
||||
style:{
|
||||
height: "50px",
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
color="primary"
|
||||
required
|
||||
fullWidth={true}
|
||||
value={firstname}
|
||||
placeholder="First Name"
|
||||
type="firstname"
|
||||
id="standard-required"
|
||||
autoComplete="firstname"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={e => setFirstname(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
style={{backgroundColor: theme.palette.inputColor, flex: "1", marginLeft: "15px"}}
|
||||
InputProps={{
|
||||
style:{
|
||||
height: "50px",
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
color="primary"
|
||||
required
|
||||
value={lastname}
|
||||
fullWidth={true}
|
||||
placeholder="Last Name"
|
||||
type="lastname"
|
||||
id="standard-required"
|
||||
autoComplete="lastname"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={e => setLastname(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
|
||||
<TextField
|
||||
style={{backgroundColor: theme.palette.inputColor, flex: "1", marginRight: "15px",}}
|
||||
InputProps={{
|
||||
|
||||
@@ -1769,7 +1769,7 @@ const Workflows = (props) => {
|
||||
}
|
||||
|
||||
return obj;
|
||||
});
|
||||
})
|
||||
workflowData =
|
||||
<DataGrid
|
||||
color="primary"
|
||||
@@ -2113,14 +2113,19 @@ const Workflows = (props) => {
|
||||
</div>
|
||||
<div style={{marginTop: 15,}} />
|
||||
{view === "grid" ?
|
||||
<Grid container spacing={4} style={paperAppContainer}>
|
||||
<NewWorkflowPaper />
|
||||
{filteredWorkflows.map((data, index) => {
|
||||
return (
|
||||
<WorkflowPaper key={index} data={data} />
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
<span>
|
||||
<div style={{display: "flex"}}>
|
||||
<img style={{height: 50, width: 50}} alt="" src="" />
|
||||
</div>
|
||||
<Grid container spacing={4} style={paperAppContainer}>
|
||||
<NewWorkflowPaper />
|
||||
{filteredWorkflows.map((data, index) => {
|
||||
return (
|
||||
<WorkflowPaper key={index} data={data} />
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
</span>
|
||||
:
|
||||
<WorkflowListView />
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user