Rework routing

interface/src/AppRouting.js

@@ -2,19 +2,18 @@ import React, { Component } from 'react';
 
 import { Redirect, Switch } from 'react-router';
 
-// authentication
 import * as Authentication from './authentication/Authentication';
 import AuthenticationWrapper from './authentication/AuthenticationWrapper';
 import AuthenticatedRoute from './authentication/AuthenticatedRoute';
 import UnauthenticatedRoute from './authentication/UnauthenticatedRoute';
 
-import NTPConfiguration from './containers/NTPConfiguration';
 import OTAConfiguration from './containers/OTAConfiguration';
-import APConfiguration from './containers/APConfiguration';
 import SignInPage from './containers/SignInPage';
 
-import Security from './sections/Security';
 import WiFiConnection from './sections/WiFiConnection';
+import AccessPoint from './sections/AccessPoint';
+import NetworkTime from './sections/NetworkTime';
+import Security from './sections/Security';
 
 class AppRouting extends Component {
 
@@ -28,8 +27,8 @@ class AppRouting extends Component {
         <Switch>
           <UnauthenticatedRoute exact path="/" component={SignInPage} />
           <AuthenticatedRoute exact path="/wifi/*" component={WiFiConnection} />
-          <AuthenticatedRoute exact path="/ap-configuration" component={APConfiguration} />
-          <AuthenticatedRoute exact path="/ntp-configuration" component={NTPConfiguration} />
+          <AuthenticatedRoute exact path="/ap/*" component={AccessPoint} />
+          <AuthenticatedRoute exact path="/ntp/*" component={NetworkTime} />
           <AuthenticatedRoute exact path="/ota-configuration" component={OTAConfiguration} />
           <AuthenticatedRoute exact path="/security/*" component={Security} />
           <Redirect to="/" />

interface/src/components/MenuAppBar.js

@@ -119,13 +119,13 @@ class MenuAppBar extends React.Component {
             </ListItemIcon>
             <ListItemText primary="WiFi Connection" />
           </ListItem>
-          <ListItem button component={Link} to='/ap-configuration'>
+          <ListItem button component={Link} to='/ap/'>
             <ListItemIcon>
               <SettingsInputAntennaIcon />
             </ListItemIcon>
             <ListItemText primary="Access Point" />
           </ListItem>
-          <ListItem button component={Link} to='/ntp-configuration'>
+          <ListItem button component={Link} to='/ntp/'>
             <ListItemIcon>
               <AccessTimeIcon />
             </ListItemIcon>

interface/src/containers/APConfiguration.js

@@ -1,39 +0,0 @@
-import React, { Component } from 'react';
-
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-
-import MenuAppBar from '../components/MenuAppBar';
-import APSettings from './APSettings';
-import APStatus from './APStatus';
-
-class APConfiguration extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-        selectedTab: "apStatus",
-        selectedNetwork: null
-    };
-  }
-
-  handleTabChange = (event, selectedTab) => {
-    this.setState({ selectedTab });
-  };
-
-  render() {
-    const { selectedTab } = this.state;
-    return (
-      <MenuAppBar sectionTitle="AP Configuration">
-        <Tabs value={selectedTab} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
-           <Tab value="apStatus" label="AP Status" />
-           <Tab value="apSettings" label="AP Settings" />
-         </Tabs>
-         {selectedTab === "apStatus" && <APStatus />}
-         {selectedTab === "apSettings" && <APSettings />}
-      </MenuAppBar>
-    )
-  }
-}
-
-export default APConfiguration;

interface/src/containers/NTPConfiguration.js

@@ -1,37 +0,0 @@
-import React, { Component } from 'react';
-import MenuAppBar from '../components/MenuAppBar';
-import NTPSettings from './NTPSettings';
-import NTPStatus from './NTPStatus';
-
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-
-class NTPConfiguration extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-        selectedTab: "ntpStatus"
-    };
-  }
-
-  handleTabChange = (event, selectedTab) => {
-    this.setState({ selectedTab });
-  };
-
-  render() {
-    const { selectedTab } = this.state;
-    return (
-        <MenuAppBar sectionTitle="NTP Configuration">
-        <Tabs value={selectedTab} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
-           <Tab value="ntpStatus" label="NTP Status" />
-           <Tab value="ntpSettings" label="NTP Settings" />
-         </Tabs>
-         {selectedTab === "ntpStatus" && <NTPStatus />}
-         {selectedTab === "ntpSettings" && <NTPSettings />}
-        </MenuAppBar>
-    )
-  }
-}
-
-export default NTPConfiguration

interface/src/forms/UserForm.js

@@ -43,12 +43,12 @@ class UserForm extends React.Component {
     const { classes, user, creating, handleValueChange, handleCheckboxChange, onDoneEditing, onCancelEditing } = this.props;
     return (
       <ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
-        <Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open={true} scroll="paper">
+        <Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open={true}>
           <DialogTitle id="user-form-dialog-title">{creating ? 'Add' : 'Modify'} User</DialogTitle>
           <DialogContent dividers={true}>
             <TextValidator
               validators={creating ? ['required', 'uniqueUsername', 'matchRegexp:^[a-zA-Z0-9_\\.]{1,24}$'] : []}
-              errorMessages={creating ? ['Username is required', "That username already exists", "Must be 1-24 characters: alpha numberic, '_' or '.'"] : []}
+              errorMessages={creating ? ['Username is required', "Username already exists", "Must be 1-24 characters: alpha numberic, '_' or '.'"] : []}
               name="username"
               label="Username"
               className={classes.textField}

interface/src/sections/AccessPoint.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { Redirect, Switch } from 'react-router-dom'
+
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
+import MenuAppBar from '../components/MenuAppBar';
+import APSettings from '../containers/APSettings';
+import APStatus from '../containers/APStatus';
+
+class AccessPoint extends Component {
+
+  handleTabChange = (event, path) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    return (
+      <MenuAppBar sectionTitle="AP Configuration">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
+          <Tab value="/ap/status" label="AP Status" />
+          <Tab value="/ap/settings" label="AP Settings" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact={true} path="/ap/status" component={APStatus} />
+          <AuthenticatedRoute exact={true} path="/ap/settings" component={APSettings} />
+          <Redirect to="/ap/status" />
+        </Switch>        
+      </MenuAppBar>
+    )
+  }
+}
+
+export default AccessPoint;

interface/src/sections/NetworkTime.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { Redirect, Switch } from 'react-router-dom'
+
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
+import MenuAppBar from '../components/MenuAppBar';
+import NTPSettings from '../containers/NTPSettings';
+import NTPStatus from '../containers/NTPStatus';
+
+class NetworkTime extends Component {
+
+  handleTabChange = (event, path) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    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" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact={true} path="/ntp/status" component={NTPStatus} />
+          <AuthenticatedRoute exact={true} path="/ntp/settings" component={NTPSettings} />
+          <Redirect to="/ntp/status" />
+        </Switch>
+      </MenuAppBar>
+    )
+  }
+}
+
+export default NetworkTime