add security form, begin work on routing

interface/src/forms/ManageUsersForm.js

@@ -21,7 +21,6 @@ import CloseIcon from '@material-ui/icons/Close';
 import CheckIcon from '@material-ui/icons/Check';
 import IconButton from '@material-ui/core/IconButton';
 
-import SectionContent from '../components/SectionContent';
 import UserForm from './UserForm';
 import { withAuthenticationContext } from '../authentication/Context';
 
@@ -138,108 +137,101 @@ class ManageUsersForm extends React.Component {
     const { classes, userData, userDataFetched, errorMessage, onReset } = this.props;
     const { user, creating } = this.state;
     return (
-      <SectionContent title="Manage Users">
-        {
-          !userDataFetched ?
-            <div className={classes.loadingSettings}>
-              <LinearProgress className={classes.loadingSettingsDetails} />
-              <Typography variant="h4" className={classes.loadingSettingsDetails}>
-                Loading...
-              </Typography>
-            </div>
-            :
-            userData ?
-              <Fragment>
-                <ValidatorForm onSubmit={this.onSubmit}>
-                  <Table className={classes.table}>
-                    <TableHead>
-                      <TableRow>
-                        <TableCell>Username</TableCell>
-                        <TableCell align="center">Admin?</TableCell>
-                        <TableCell />
-                      </TableRow>
-                    </TableHead>
-                    <TableBody>
-                      {userData.users.sort(compareUsers).map(user => (
-                        <TableRow key={user.username}>
-                          <TableCell component="th" scope="row">
-                            {user.username}
-                          </TableCell>
-                          <TableCell align="center">
-                            {
-                              user.admin ? <CheckIcon /> : <CloseIcon />
-                            }
-                          </TableCell>
-                          <TableCell align="center">
-                            <IconButton aria-label="Delete" onClick={() => this.removeUser(user)}>
-                              <DeleteIcon />
-                            </IconButton>
-                            <IconButton aria-label="Edit" onClick={() => this.startEditingUser(user)}>
-                              <EditIcon />
-                            </IconButton>
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                    <TableFooter>
-                      <TableRow>
-                        <TableCell colSpan={2} />
-                        <TableCell align="center">
-                          <Button variant="contained" color="secondary" className={classes.button} onClick={this.createUser}>
-                            Add User
-                          </Button>
-                        </TableCell>
-                      </TableRow>
-                    </TableFooter>
-                  </Table>
-                  {
-                    this.noAdminConfigured() &&
-                    <Typography component="div" variant="body1">
-                      <Box bgcolor="error.main" color="error.contrastText" p={2} m={1}>
-                        You must have at least one admin user configured.
-                      </Box>
-                    </Typography>
-                  }
-                  <Button variant="contained" color="primary" className={classes.button} type="submit" disabled={this.noAdminConfigured()}>
-                    Save
-                  </Button>
-                  <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
-                    Reset
-      		        </Button>
-                </ValidatorForm>
-                {
-                  user &&
-
-                  <UserForm
-                    user={user}
-                    creating={creating}
-                    onDoneEditing={this.doneEditingUser}
-                    onCancelEditing={this.cancelEditingUser}
-                    handleValueChange={this.handleUserValueChange}
-                    handleCheckboxChange={this.handleUserCheckboxChange}
-                    uniqueUsername={this.uniqueUsername}
-                  />
-
-                }
-              </Fragment>
-              :
-              <SectionContent title="Manage Users">
-                <Typography variant="h4" className={classes.loadingSettingsDetails}>
-                  {errorMessage}
+      !userDataFetched ?
+        <div className={classes.loadingSettings}>
+          <LinearProgress className={classes.loadingSettingsDetails} />
+          <Typography variant="h4" className={classes.loadingSettingsDetails}>
+            Loading...
+          </Typography>
+        </div>
+        :
+        userData ?
+          <Fragment>
+            <ValidatorForm onSubmit={this.onSubmit}>
+              <Table className={classes.table}>
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Username</TableCell>
+                    <TableCell align="center">Admin?</TableCell>
+                    <TableCell />
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {userData.users.sort(compareUsers).map(user => (
+                    <TableRow key={user.username}>
+                      <TableCell component="th" scope="row">
+                        {user.username}
+                      </TableCell>
+                      <TableCell align="center">
+                        {
+                          user.admin ? <CheckIcon /> : <CloseIcon />
+                        }
+                      </TableCell>
+                      <TableCell align="center">
+                        <IconButton aria-label="Delete" onClick={() => this.removeUser(user)}>
+                          <DeleteIcon />
+                        </IconButton>
+                        <IconButton aria-label="Edit" onClick={() => this.startEditingUser(user)}>
+                          <EditIcon />
+                        </IconButton>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+                <TableFooter>
+                  <TableRow>
+                    <TableCell colSpan={2} />
+                    <TableCell align="center">
+                      <Button variant="contained" color="secondary" onClick={this.createUser}>
+                        Add User
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                </TableFooter>
+              </Table>
+              {
+                this.noAdminConfigured() &&
+                <Typography component="div" variant="body1">
+                  <Box bgcolor="error.main" color="error.contrastText" p={2} m={2}>
+                    You must have at least one admin user configured.
+                  </Box>
                 </Typography>
-                <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
-                  Reset
-      		      </Button>
-              </SectionContent>
-        }
-      </SectionContent>
+              }
+              <Button variant="contained" color="primary" className={classes.button} type="submit" disabled={this.noAdminConfigured()}>
+                Save
+              </Button>
+              <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
+                Reset
+      		    </Button>
+            </ValidatorForm>
+            {
+              user &&
+              <UserForm
+                user={user}
+                creating={creating}
+                onDoneEditing={this.doneEditingUser}
+                onCancelEditing={this.cancelEditingUser}
+                handleValueChange={this.handleUserValueChange}
+                handleCheckboxChange={this.handleUserCheckboxChange}
+                uniqueUsername={this.uniqueUsername}
+              />
+            }
+          </Fragment>
+          :
+          <div className={classes.loadingSettings}>
+            <Typography variant="h4" className={classes.loadingSettingsDetails}>
+              {errorMessage}
+            </Typography>
+            <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
+              Reset
+      		  </Button>
+          </div>
     );
   }
 
 }
 
 ManageUsersForm.propTypes = {
-  authenticationContext: PropTypes.object.isRequired,
   classes: PropTypes.object.isRequired,
   userData: PropTypes.object,
   userDataFetched: PropTypes.bool.isRequired,
@@ -247,7 +239,8 @@ ManageUsersForm.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   onReset: PropTypes.func.isRequired,
   setData: PropTypes.func.isRequired,
-  handleValueChange: PropTypes.func.isRequired
+  handleValueChange: PropTypes.func.isRequired,
+  authenticationContext: PropTypes.object.isRequired,
 };
 
 export default withAuthenticationContext(withStyles(styles)(ManageUsersForm));

interface/src/forms/SecuritySettingsForm.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ValidatorForm } from 'react-material-ui-form-validator';
+
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+import PasswordValidator from '../components/PasswordValidator';
+import { withAuthenticationContext } from '../authentication/Context';
+
+const styles = theme => ({
+  loadingSettings: {
+    margin: theme.spacing.unit,
+  },
+  loadingSettingsDetails: {
+    margin: theme.spacing.unit * 4,
+    textAlign: "center"
+  },
+  textField: {
+    width: "100%"
+  },
+  button: {
+    marginRight: theme.spacing.unit * 2,
+    marginTop: theme.spacing.unit * 2,
+  }
+});
+
+class SecuritySettingsForm extends React.Component {
+
+  onSubmit = () => {
+    this.props.onSubmit();
+    this.props.authenticationContext.refresh();
+  }
+
+  render() {
+    const { classes, securitySettingsFetched, securitySettings, errorMessage, handleValueChange, onReset } = this.props;
+    return (
+      !securitySettingsFetched ?
+        <div className={classes.loadingSettings}>
+          <LinearProgress className={classes.loadingSettingsDetails} />
+          <Typography variant="h4" className={classes.loadingSettingsDetails}>
+            Loading...
+          </Typography>
+        </div>
+        :
+        securitySettings ?
+          <ValidatorForm onSubmit={this.onSubmit} ref="SecuritySettingsForm">
+            <PasswordValidator
+              validators={['required', 'matchRegexp:^.{0,64}$']}
+              errorMessages={['JWT Secret Required', 'JWT Secret must be 64 characters or less']}
+              name="jwt_secret"
+              label="JWT Secret"
+              className={classes.textField}
+              value={securitySettings.jwt_secret}
+              onChange={handleValueChange('jwt_secret')}
+              margin="normal"
+            />
+            <Typography component="div" variant="body1">
+              <Box bgcolor="primary.main" color="primary.contrastText" p={2} m={2}>
+                If you modify the JWT Secret, all users will be logged out.
+              </Box>
+            </Typography>
+            <Button variant="contained" color="primary" className={classes.button} type="submit">
+              Save
+            </Button>
+            <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
+              Reset
+      		  </Button>
+          </ValidatorForm>
+          :
+          <div className={classes.loadingSettings}>
+            <Typography variant="h4" className={classes.loadingSettingsDetails}>
+              {errorMessage}
+            </Typography>
+            <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
+              Reset
+      		  </Button>
+          </div>
+    );
+  }
+}
+
+SecuritySettingsForm.propTypes = {
+  classes: PropTypes.object.isRequired,
+  securitySettingsFetched: PropTypes.bool.isRequired,
+  securitySettings: PropTypes.object,
+  errorMessage: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+  onReset: PropTypes.func.isRequired,
+  handleValueChange: PropTypes.func.isRequired,
+  authenticationContext: PropTypes.object.isRequired,
+};
+
+export default withAuthenticationContext(withStyles(styles)(SecuritySettingsForm));

interface/src/forms/UserForm.js

@@ -44,7 +44,7 @@ class UserForm extends React.Component {
     return (
       <ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
         <Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open={true} scroll="paper">
-          <DialogTitle id="user-form-dialog-title">{creating ? 'Create' : 'Modify'} User</DialogTitle>
+          <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}$'] : []}