add security form, begin work on routing

interface/src/containers/ManageUsers.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { USERS_ENDPOINT } from '../constants/Endpoints';
 import { restComponent } from '../components/RestComponent';
 import ManageUsersForm from '../forms/ManageUsersForm';
+import SectionContent from '../components/SectionContent';
 
 class ManageUsers extends Component {
 
@@ -13,15 +14,17 @@ class ManageUsers extends Component {
   render() {
     const { data, fetched, errorMessage } = this.props;
     return (
-      <ManageUsersForm
-        userData={data}
-        userDataFetched={fetched}
-        errorMessage={errorMessage}
-        onSubmit={this.props.saveData}
-        onReset={this.props.loadData}
-        setData={this.props.setData}
-        handleValueChange={this.props.handleValueChange}
-      />
+      <SectionContent title="Manage Users">
+        <ManageUsersForm
+          userData={data}
+          userDataFetched={fetched}
+          errorMessage={errorMessage}
+          onSubmit={this.props.saveData}
+          onReset={this.props.loadData}
+          setData={this.props.setData}
+          handleValueChange={this.props.handleValueChange}
+        />
+      </SectionContent>
     )
   }
 

interface/src/containers/Security.js

@@ -1,15 +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 ManageUsers from './ManageUsers';
+import SecuritySettings from './SecuritySettings';
 
 class Security extends Component {
+
+  handleTabChange = (event, path) => {
+    this.props.history.push(path);
+  };
+
   render() {
     return (
-        <MenuAppBar sectionTitle="Security">
-          <ManageUsers />
-        </MenuAppBar>
+      <MenuAppBar sectionTitle="Security">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
+          <Tab value="/security/users" label="Manage Users" />
+          <Tab value="/security/settings" label="Security Settings" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact={true} path="/security/users" component={ManageUsers} />
+          <AuthenticatedRoute exact={true} path="/security/settings" component={SecuritySettings} />
+          <Redirect to="/security/users" />
+        </Switch>
+      </MenuAppBar>
     )
   }
 }
 
-export default Security
+export default Security;

interface/src/containers/SecuritySettings.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+
+import { USERS_ENDPOINT } from '../constants/Endpoints';
+import { restComponent } from '../components/RestComponent';
+import SecuritySettingsForm from '../forms/SecuritySettingsForm';
+import SectionContent from '../components/SectionContent';
+
+class SecuritySettings extends Component {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    const { data, fetched, errorMessage } = this.props;
+    return (
+      <SectionContent title="Security Settings">
+        <SecuritySettingsForm
+          securitySettings={data}
+          securitySettingsFetched={fetched}
+          errorMessage={errorMessage}
+          onSubmit={this.props.saveData}
+          onReset={this.props.loadData}
+          handleValueChange={this.props.handleValueChange}
+        />
+      </SectionContent>
+    )
+  }
+
+}
+
+export default restComponent(USERS_ENDPOINT, SecuritySettings);