Merge pull request #106 from milesflo/master

Frontend Housekeeping

frontend/src/App.jsx

@@ -17,10 +17,12 @@ import Apps from './views/Apps';
 import AppCreator from './views/AppCreator';
 import Contact from './views/Contact';
 import Oauth2 from './views/Oauth2';
+
 import Dashboard from "./views/Dashboard";
 import AdminSetup from "./views/AdminSetup";
 import Admin from "./views/Admin";
 import Docs from "./views/Docs";
+
 import LandingPageNew from "./views/LandingpageNew";
 import LoginPage from "./views/LoginPage";
 import SettingsPage from "./views/SettingsPage";

frontend/src/components/Header.js

@@ -6,6 +6,7 @@ import {Link} from 'react-router-dom';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 
+
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import Button from '@material-ui/core/Button';
@@ -19,7 +20,8 @@ const hoverColor = "#f85a3e"
 const hoverOutColor = "#e8eaf6"
 
 const Header = props => {
-  const { surfaceColor, inputColor, globalUrl, isLoggedIn, removeCookie, homePage, isLoaded, userdata} = props;
+
+  const { globalUrl, isLoggedIn, removeCookie, homePage, isLoaded } = props;
 
 	const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
 	const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
@@ -219,6 +221,7 @@ const Header = props => {
 							</Select>
 						</ListItem>
 					}
+
 				</List>
 			</div>
 	    </div>
@@ -314,7 +317,7 @@ const Header = props => {
     	<div>
 			{loadedCheck}
 	    </div>
-  );
+  )
 }
 
 export default Header;

frontend/src/views/Admin.jsx

@@ -18,23 +18,16 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 
 import { useAlert } from "react-alert";
 
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
+import { Dialog, DialogTitle, DialogActions, DialogContent } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
+
 
-import AccessibilityNewIcon from '@material-ui/icons/AccessibilityNew';
 import CachedIcon from '@material-ui/icons/Cached';
-import LockIcon from '@material-ui/icons/Lock';
-import BusinessIcon from '@material-ui/icons/Business';
-import EcoIcon from '@material-ui/icons/Eco';
-import ScheduleIcon from '@material-ui/icons/Schedule';
-import CloudIcon from '@material-ui/icons/Cloud';
 
-const surfaceColor = "#27292D"
-const inputColor = "#383B40"
 const Admin = (props) => {
-  const { globalUrl, } = props;
+	const { globalUrl } = props;
+
+	const theme = useTheme();
 	const [firstRequest, setFirstRequest] = React.useState(true);
 	const [modalUser, setModalUser] = React.useState({});
 	const [modalOpen, setModalOpen] = React.useState(false);
@@ -114,6 +107,7 @@ const Admin = (props) => {
 	const onPasswordChange = () => {
 		const data = { "username": selectedUser.username, "newpassword": newPassword }
 		const url = globalUrl + '/api/v1/users/passwordchange';
+
 		fetch(url, {
 			mode: 'cors',
 			method: 'POST',
@@ -386,7 +380,7 @@ const Admin = (props) => {
 		maxWidth: 1250,
 		margin: "auto",
 		color: "white",
-		backgroundColor: surfaceColor,
+		backgroundColor: theme.palette.surfaceColor,
 		marginBottom: 10,
 		padding: 20,
 	}
@@ -467,12 +461,12 @@ const Admin = (props) => {
 	}
 
 	const editAuthenticationModal =
-		<Dialog 
+		<Dialog modal
 			open={selectedAuthenticationModalOpen}
 			onClose={() => { setSelectedAuthenticationModalOpen(false) }}
 			PaperProps={{
 				style: {
-					backgroundColor: surfaceColor,
+					backgroundColor: theme.palette.surfaceColor,
 					color: "white",
 					minWidth: "800px",
 					minHeight: "320px",
@@ -483,7 +477,7 @@ const Admin = (props) => {
 			<DialogContent>
 				<div style={{ display: "flex" }}>
 					<TextField
-						style={{backgroundColor: inputColor, flex: 3}}
+						style={{ backgroundColor: theme.palette.inputColor, flex: 3 }}
 						InputProps={{
 							style: {
 								height: 50,
@@ -510,7 +504,7 @@ const Admin = (props) => {
 						Submit
 					</Button>
 				</div>
-				<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+				<Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
 				<Button
 					style={{}}
 					variant="outlined"
@@ -531,12 +525,12 @@ const Admin = (props) => {
 		</Dialog>
 
 	const editUserModal =
-		<Dialog 
+		<Dialog modal
 			open={selectedUserModalOpen}
 			onClose={() => { setSelectedUserModalOpen(false) }}
 			PaperProps={{
 				style: {
-					backgroundColor: surfaceColor,
+					backgroundColor: theme.palette.surfaceColor,
 					color: "white",
 					minWidth: "800px",
 					minHeight: "320px",
@@ -547,7 +541,7 @@ const Admin = (props) => {
 			<DialogContent>
 				<div style={{ display: "flex" }}>
 					<TextField
-						style={{marginTop: 0, backgroundColor: inputColor, flex: 3}}
+						style={{ marginTop: 0, backgroundColor: theme.palette.inputColor, flex: 3 }}
 						InputProps={{
 							style: {
 								height: 50,
@@ -574,7 +568,7 @@ const Admin = (props) => {
 						Submit
 					</Button>
 				</div>
-				<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+				<Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
 				<Button
 					style={{}}
 					variant="outlined"
@@ -595,12 +589,12 @@ const Admin = (props) => {
 		</Dialog>
 
 	const modalView =
-		<Dialog 
+		<Dialog modal
 			open={modalOpen}
 			onClose={() => { setModalOpen(false) }}
 			PaperProps={{
 				style: {
-					backgroundColor: surfaceColor,
+					backgroundColor: theme.palette.surfaceColor,
 					color: "white",
 					minWidth: "800px",
 					minHeight: "320px",
@@ -608,7 +602,7 @@ const Admin = (props) => {
 			}}
 		>
 			<DialogTitle><span style={{ color: "white" }}>
-				{curTab === 0 ? "Add user" : curTab === 2 ? "Add environment" : "Add organization"}
+				{curTab === 0 ? "Add user" : "Add environment"}
 			</span></DialogTitle>
 			<DialogContent>
 				{curTab === 0 ?
@@ -616,7 +610,7 @@ const Admin = (props) => {
 						Username
 						<TextField
 							color="primary"
-							style={{backgroundColor: inputColor}}
+							style={{ backgroundColor: theme.palette.inputColor }}
 							autoFocus
 							InputProps={{
 								style: {
@@ -637,7 +631,7 @@ const Admin = (props) => {
 						Password
 						<TextField
 							color="primary"
-							style={{backgroundColor: inputColor}}
+							style={{ backgroundColor: theme.palette.inputColor }}
 							InputProps={{
 								style: {
 									height: "50px",
@@ -661,7 +655,7 @@ const Admin = (props) => {
 							Environment Name
 					<TextField
 								color="primary"
-						style={{backgroundColor: inputColor}}
+								style={{ backgroundColor: theme.palette.inputColor }}
 								autoFocus
 								InputProps={{
 									style: {
@@ -679,30 +673,7 @@ const Admin = (props) => {
 								onChange={(event) => changeModalData("environment", event.target.value)}
 							/>
 						</div>
-				: 
-					<div>
-						Org Name	
-						<TextField
-							color="primary"
-							style={{backgroundColor: inputColor}}
-							autoFocus
-							InputProps={{
-								style:{
-									height: "50px", 
-									color: "white",
-									fontSize: "1em",
-								},
-							}}
-							required
-							fullWidth={true}
-							placeholder="datacenter froglantern"
-							id="environment_name"
-							margin="normal"
-							variant="outlined"
-							onChange={(event) => changeModalData("organization", event.target.value)}
-						/>
-					</div>
-				}
+						: null}
 				{loginInfo}
 			</DialogContent>
 			<DialogActions>
@@ -736,7 +707,7 @@ const Admin = (props) => {
 			>
 				Add user
 			</Button>
-			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: inputColor}}/>
+			<Divider style={{ marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor }} />
 			<List>
 				<ListItem>
 					<ListItemText
@@ -762,7 +733,7 @@ const Admin = (props) => {
 				</ListItem>
 				{users === undefined ? null : users.map(data => {
 					return (
-						<ListItem key={data.id}>
+						<ListItem>
 							<ListItemText
 								primary={data.username}
 								style={{ minWidth: 200, maxWidth: 200 }}
@@ -773,7 +744,11 @@ const Admin = (props) => {
 							/>
 							<ListItemText
 								primary=
-									<Select
+									{<Select
+										PaperProps={{
+								style: {
+								}
+							}}
 										SelectDisplayProps={{
 								style: {
 									marginLeft: 10,
@@ -785,15 +760,15 @@ const Admin = (props) => {
 								console.log("VALUE: ", e.target.value)
 								setUser(data.id, "role", e.target.value)
 							}}
-										style={{backgroundColor: surfaceColor, color: "white", height: "50px"}}
+										style={{ backgroundColor: theme.palette.surfaceColor, color: "white", height: "50px" }}
 										>
-										<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={"admin"}>
+							<MenuItem style={{ backgroundColor: theme.palette.inputColor, color: "white" }} value={"admin"}>
 								Admin
 										</MenuItem>
-										<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={"user"}>
+							<MenuItem style={{ backgroundColor: theme.palette.inputColor, color: "white" }} value={"user"}>
 								User
 										</MenuItem>
-									</Select>
+									</Select>}
 								style = {{ minWidth: 150, maxWidth: 150}}
 							/>
 							<ListItemText