From 9ff574623ec93f347bc3a2b06ebe8cc772af022b Mon Sep 17 00:00:00 2001
From: frikky <fredrik_9490@hotmail.com>
Date: Sat, 23 Oct 2021 16:59:08 +0200
Subject: [PATCH] Added more info and control to settings page

---
 frontend/src/components/Header.js      |   6 +-
 frontend/src/views/AngularWorkflow.jsx |   4 +-
 frontend/src/views/SettingsPage.jsx    | 145 +++++++++++++------------
 frontend/src/views/Workflows.jsx       |  23 ++--
 4 files changed, 96 insertions(+), 82 deletions(-)

diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index 449c057b..113ba374 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -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>
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index 6d5f8a22..7267bf20 100644
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -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	
diff --git a/frontend/src/views/SettingsPage.jsx b/frontend/src/views/SettingsPage.jsx
index 6a1cdd4a..ea871569 100644
--- a/frontend/src/views/SettingsPage.jsx
+++ b/frontend/src/views/SettingsPage.jsx
@@ -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={{
diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx
index 120dd735..f2a530af 100644
--- a/frontend/src/views/Workflows.jsx
+++ b/frontend/src/views/Workflows.jsx
@@ -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 />
 					}