From d7d33a50c81da7354eeeaea52876049b4cdd72a2 Mon Sep 17 00:00:00 2001
From: Rick Watson <rjwats@gmail.com>
Date: Fri, 31 May 2019 21:33:12 +0100
Subject: [PATCH] disable buttons which are not accessable when non-admin user
 is authenticated

---
 interface/src/components/MenuAppBar.js   | 14 +++++++-------
 interface/src/sections/AccessPoint.js    |  8 +++++---
 interface/src/sections/NetworkTime.js    |  6 ++++--
 interface/src/sections/System.js         |  6 ++++--
 interface/src/sections/WiFiConnection.js |  8 +++++---
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/interface/src/components/MenuAppBar.js b/interface/src/components/MenuAppBar.js
index 593cd49..f3f0f15 100644
--- a/interface/src/components/MenuAppBar.js
+++ b/interface/src/components/MenuAppBar.js
@@ -74,7 +74,7 @@ const styles = theme => ({
   },
   authMenuActions: {
     padding: theme.spacing(2),
-    "& > * + *" :{
+    "& > * + *": {
       marginLeft: theme.spacing(2),
     }
   },
@@ -118,31 +118,31 @@ class MenuAppBar extends React.Component {
         </Toolbar>
         <Divider />
         <List>
-          <ListItem button component={Link} to='/wifi/' selected={path.startsWith('/wifi/')}>
+          <ListItem to='/wifi/' selected={path.startsWith('/wifi/')} button component={Link}>
             <ListItemIcon>
               <WifiIcon />
             </ListItemIcon>
             <ListItemText primary="WiFi Connection" />
           </ListItem>
-          <ListItem button component={Link} to='/ap/' selected={path.startsWith('/ap/')}>
+          <ListItem to='/ap/' selected={path.startsWith('/ap/')} button component={Link}>
             <ListItemIcon>
               <SettingsInputAntennaIcon />
             </ListItemIcon>
             <ListItemText primary="Access Point" />
           </ListItem>
-          <ListItem button component={Link} to='/ntp/' selected={path.startsWith('/ntp/')}>
+          <ListItem to='/ntp/' selected={path.startsWith('/ntp/')} button component={Link}>
             <ListItemIcon>
               <AccessTimeIcon />
             </ListItemIcon>
             <ListItemText primary="Network Time" />
           </ListItem>
-          <ListItem button component={Link} to='/security/' selected={path.startsWith('/security/')}>
+          <ListItem to='/security/' selected={path.startsWith('/security/')} button component={Link} disabled={!authenticationContext.isAdmin()}>
             <ListItemIcon>
               <LockIcon />
             </ListItemIcon>
             <ListItemText primary="Security" />
           </ListItem>
-          <ListItem button component={Link} to='/system/' selected={path.startsWith('/system/')}>
+          <ListItem to='/system/' selected={path.startsWith('/system/')} button component={Link} >
             <ListItemIcon>
               <SettingsIcon />
             </ListItemIcon>
@@ -189,7 +189,7 @@ class MenuAppBar extends React.Component {
                               <AccountCircleIcon />
                             </Avatar>
                           </ListItemAvatar>
-                          <ListItemText primary={"Signed in as: " + authenticationContext.user.username} secondary={ authenticationContext.isAdmin() ? "Admin User" : undefined} />
+                          <ListItemText primary={"Signed in as: " + authenticationContext.user.username} secondary={authenticationContext.isAdmin() ? "Admin User" : undefined} />
                         </ListItem>
                       </List>
                     </CardContent>
diff --git a/interface/src/sections/AccessPoint.js b/interface/src/sections/AccessPoint.js
index 36ef1a1..011b673 100644
--- a/interface/src/sections/AccessPoint.js
+++ b/interface/src/sections/AccessPoint.js
@@ -8,6 +8,7 @@ import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
 import MenuAppBar from '../components/MenuAppBar';
 import APSettings from '../containers/APSettings';
 import APStatus from '../containers/APStatus';
+import { withAuthenticationContext } from '../authentication/Context.js';
 
 class AccessPoint extends Component {
 
@@ -16,20 +17,21 @@ class AccessPoint extends Component {
   };
 
   render() {
+    const { authenticationContext } = this.props;
     return (
       <MenuAppBar sectionTitle="Access Point">
         <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
           <Tab value="/ap/status" label="Access Point Status" />
-          <Tab value="/ap/settings" label="Access Point Settings" />
+          <Tab value="/ap/settings" label="Access Point Settings" disabled={!authenticationContext.isAdmin()} />
         </Tabs>
         <Switch>
           <AuthenticatedRoute exact={true} path="/ap/status" component={APStatus} />
           <AuthenticatedRoute exact={true} path="/ap/settings" component={APSettings} />
           <Redirect to="/ap/status" />
-        </Switch>        
+        </Switch>
       </MenuAppBar>
     )
   }
 }
 
-export default AccessPoint;
+export default withAuthenticationContext(AccessPoint);
diff --git a/interface/src/sections/NetworkTime.js b/interface/src/sections/NetworkTime.js
index 0e36b27..d695859 100644
--- a/interface/src/sections/NetworkTime.js
+++ b/interface/src/sections/NetworkTime.js
@@ -8,6 +8,7 @@ import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
 import MenuAppBar from '../components/MenuAppBar';
 import NTPSettings from '../containers/NTPSettings';
 import NTPStatus from '../containers/NTPStatus';
+import { withAuthenticationContext } from '../authentication/Context.js';
 
 class NetworkTime extends Component {
 
@@ -16,11 +17,12 @@ class NetworkTime extends Component {
   };
 
   render() {
+    const { authenticationContext } = this.props;
     return (
       <MenuAppBar sectionTitle="Network Time">
         <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
           <Tab value="/ntp/status" label="NTP Status" />
-          <Tab value="/ntp/settings" label="NTP Settings" />
+          <Tab value="/ntp/settings" label="NTP Settings" disabled={!authenticationContext.isAdmin()} />
         </Tabs>
         <Switch>
           <AuthenticatedRoute exact={true} path="/ntp/status" component={NTPStatus} />
@@ -32,4 +34,4 @@ class NetworkTime extends Component {
   }
 }
 
-export default NetworkTime
+export default withAuthenticationContext(NetworkTime)
diff --git a/interface/src/sections/System.js b/interface/src/sections/System.js
index f34c9b6..2aca1cd 100644
--- a/interface/src/sections/System.js
+++ b/interface/src/sections/System.js
@@ -8,6 +8,7 @@ import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
 import MenuAppBar from '../components/MenuAppBar';
 import OTASettings from '../containers/OTASettings';
 import SystemStatus from '../containers/SystemStatus';
+import { withAuthenticationContext } from '../authentication/Context.js';
 
 class System extends Component {
 
@@ -16,11 +17,12 @@ class System extends Component {
   };
 
   render() {
+    const { authenticationContext } = this.props;
     return (
       <MenuAppBar sectionTitle="System">
         <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
           <Tab value="/system/status" label="System Status" />
-          <Tab value="/system/ota" label="OTA Settings" />
+          <Tab value="/system/ota" label="OTA Settings" disabled={!authenticationContext.isAdmin()} />
         </Tabs>
         <Switch>
           <AuthenticatedRoute exact={true} path="/system/status" component={SystemStatus} />
@@ -32,4 +34,4 @@ class System extends Component {
   }
 }
 
-export default System
+export default withAuthenticationContext(System);
diff --git a/interface/src/sections/WiFiConnection.js b/interface/src/sections/WiFiConnection.js
index a40a788..1bb2b9b 100644
--- a/interface/src/sections/WiFiConnection.js
+++ b/interface/src/sections/WiFiConnection.js
@@ -9,6 +9,7 @@ import MenuAppBar from '../components/MenuAppBar';
 import WiFiNetworkScanner from '../containers/WiFiNetworkScanner';
 import WiFiSettings from '../containers/WiFiSettings';
 import WiFiStatus from '../containers/WiFiStatus';
+import { withAuthenticationContext } from '../authentication/Context.js';
 
 class WiFiConnection extends Component {
 
@@ -35,6 +36,7 @@ class WiFiConnection extends Component {
   };
 
   render() {
+    const { authenticationContext } = this.props;
     const ConfiguredWiFiNetworkScanner = (props) => {
       return (
         <WiFiNetworkScanner
@@ -55,8 +57,8 @@ class WiFiConnection extends Component {
       <MenuAppBar sectionTitle="WiFi Connection">
         <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
           <Tab value="/wifi/status" label="WiFi Status" />
-          <Tab value="/wifi/scan" label="Scan Networks" />
-          <Tab value="/wifi/settings" label="WiFi Settings" />
+          <Tab value="/wifi/scan" label="Scan Networks" disabled={!authenticationContext.isAdmin()} />
+          <Tab value="/wifi/settings" label="WiFi Settings" disabled={!authenticationContext.isAdmin()} />
         </Tabs>
         <Switch>
           <AuthenticatedRoute exact={true} path="/wifi/status" component={WiFiStatus} />
@@ -69,4 +71,4 @@ class WiFiConnection extends Component {
   }
 }
 
-export default WiFiConnection;
+export default withAuthenticationContext(WiFiConnection);