disable buttons which are not accessable when non-admin user is authenticated

interface/src/components/MenuAppBar.js

@@ -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>

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,11 +17,12 @@ 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} />
@@ -32,4 +34,4 @@ class AccessPoint extends Component {
   }
 }
 
-export default AccessPoint;
+export default withAuthenticationContext(AccessPoint);

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)

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);

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/scan" label="Scan Networks" disabled={!authenticationContext.isAdmin()} />
-          <Tab value="/wifi/settings" label="WiFi Settings" />
+          <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);