remove roles, as a simplification

interface/src/forms/ManageUsersForm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
+import { ValidatorForm } from 'react-material-ui-form-validator';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
@@ -13,14 +13,16 @@ import TableCell from '@material-ui/core/TableCell';
 import TableFooter from '@material-ui/core/TableFooter';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
-import Chip from '@material-ui/core/Chip';
 
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
+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';
 
 const styles = theme => ({
   loadingSettings: {
@@ -30,26 +32,15 @@ const styles = theme => ({
     margin: theme.spacing.unit * 4,
     textAlign: "center"
   },
-  switchControl: {
-    width: "100%",
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit
-  },
-  textField: {
-    width: "100%"
-  },
   button: {
     marginRight: theme.spacing.unit * 2,
     marginTop: theme.spacing.unit * 2,
   },
-  chip: {
-    margin: theme.spacing.unit,
-  },
   table: {
     '& td, & th': { padding: theme.spacing.unit }
   },
   actions: {
-    color: theme.palette.text.secondary,
+    whiteSpace: "nowrap"
   }
 });
 
@@ -76,7 +67,7 @@ class ManageUsersForm extends React.Component {
       user: {
         username: "",
         password: "",
-        roles: []
+        admin: true
       }
     });
   };
@@ -85,8 +76,8 @@ class ManageUsersForm extends React.Component {
     return !this.props.userData.users.find(u => u.username === username);
   }
 
-  usersValid = username => {
-    return !!this.props.userData.users.find(u => u.roles.includes("admin"));
+  noAdminConfigured = () => {
+    return !this.props.userData.users.find(u => u.admin);
   }
 
   startEditingUser = user => {
@@ -102,10 +93,6 @@ class ManageUsersForm extends React.Component {
     });
   }
 
-  sortedUsers(users) {
-    return users.sort(compareUsers);
-  }
-
   doneEditingUser = () => {
     const { user } = this.state;
     const { userData } = this.props;
@@ -120,17 +107,29 @@ class ManageUsersForm extends React.Component {
 
   handleUserValueChange = name => event => {
     const { user } = this.state;
-    if (user) {
-      this.setState({
-        user: {
-          ...user, [name]: event.target.value
-        }
-      });
-    }
+    this.setState({
+      user: {
+        ...user, [name]: event.target.value
+      }
+    });
   };
 
+  handleUserCheckboxChange = name => event => {
+    const { user } = this.state;
+    this.setState({
+      user: {
+        ...user, [name]: event.target.checked
+      }
+    });
+  }
+
+  onSubmit = () => {
+    this.props.onSubmit();
+    this.props.authenticationContex.refresh();
+  }
+
   render() {
-    const { classes, userData, userDataFetched, errorMessage, onSubmit, onReset, handleValueChange } = this.props;
+    const { classes, userData, userDataFetched, errorMessage, onReset } = this.props;
     const { user, creating } = this.state;
     return (
       <SectionContent title="Manage Users">
@@ -148,33 +147,31 @@ class ManageUsersForm extends React.Component {
                 <UserForm
                   user={user}
                   creating={creating}
-                  roles={userData.roles}
                   onDoneEditing={this.doneEditingUser}
                   onCancelEditing={this.cancelEditingUser}
                   handleValueChange={this.handleUserValueChange}
+                  handleCheckboxChange={this.handleUserCheckboxChange}
                   uniqueUsername={this.uniqueUsername}
                 />
                 :
-                <ValidatorForm onSubmit={onSubmit}>  
+                <ValidatorForm onSubmit={this.onSubmit}>
                   <Table className={classes.table}>
                     <TableHead>
                       <TableRow>
                         <TableCell>Username</TableCell>
-                        <TableCell align="center">Role(s)</TableCell>
+                        <TableCell align="center">Admin?</TableCell>
                         <TableCell align="center">Action</TableCell>
                       </TableRow>
                     </TableHead>
                     <TableBody>
-                      {this.sortedUsers(userData.users).map(user => (
+                      {userData.users.sort(compareUsers).map(user => (
                         <TableRow key={user.username}>
                           <TableCell component="th" scope="row">
                             {user.username}
                           </TableCell>
                           <TableCell align="center">
                             {
-                              user.roles.map(role => (
-                                <Chip label={role} className={classes.chip} />
-                              ))
+                              user.admin ? <CheckIcon /> : <CloseIcon />
                             }
                           </TableCell>
                           <TableCell align="center">
@@ -192,7 +189,7 @@ class ManageUsersForm extends React.Component {
                       <TableRow>
                         <TableCell colSpan={2}>
                           {
-                            !this.usersValid() &&
+                            this.noAdminConfigured() &&
                             <Typography variant="body1" color="error">
                               You must have at least one admin user configured.
                             </Typography>
@@ -206,7 +203,7 @@ class ManageUsersForm extends React.Component {
                       </TableRow>
                     </TableFooter>
                   </Table>
-                  <Button variant="contained" color="primary" className={classes.button} type="submit">
+                  <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}>
@@ -230,6 +227,7 @@ class ManageUsersForm extends React.Component {
 }
 
 ManageUsersForm.propTypes = {
+  authenticationContex: PropTypes.object.isRequired, 
   classes: PropTypes.object.isRequired,
   userData: PropTypes.object,
   userDataFetched: PropTypes.bool.isRequired,
@@ -240,4 +238,4 @@ ManageUsersForm.propTypes = {
   handleValueChange: PropTypes.func.isRequired
 };
 
-export default withStyles(styles)(ManageUsersForm);
+export default withAuthenticationContext(withStyles(styles)(ManageUsersForm));

interface/src/forms/UserForm.js

@@ -7,12 +7,9 @@ import Button from '@material-ui/core/Button';
 import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
 import PasswordValidator from '../components/PasswordValidator';
 
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import Chip from '@material-ui/core/Chip';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import FormGroup from '@material-ui/core/FormGroup';
 
 const styles = theme => ({
   textField: {
@@ -41,7 +38,7 @@ class UserForm extends React.Component {
   }
 
   render() {
-    const { classes, user, roles, creating, handleValueChange, onDoneEditing, onCancelEditing } = this.props;
+    const { classes, user, creating, handleValueChange, handleCheckboxChange, onDoneEditing, onCancelEditing } = this.props;
     return (
       <ValidatorForm onSubmit={onDoneEditing}>
         <TextValidator
@@ -62,31 +59,15 @@ class UserForm extends React.Component {
           label="Password"
           className={classes.textField}
           value={user.password}
-          onChange={handleValueChange('password')}
+          onChange={handleCheckboxChange('password')}
           margin="normal"
         />
-        <FormControl className={classes.textField}>
-          <InputLabel htmlFor="roles">Roles</InputLabel>
-          <Select
-            multiple
-            value={user.roles}
-            onChange={handleValueChange('roles')}
-            input={<Input id="roles" />}
-            renderValue={selected => (
-              <div className={classes.chips}>
-                {selected.map(value => (
-                  <Chip key={value} label={value} className={classes.chip} />
-                ))}
-              </div>
-            )}
-          >
-            {roles.map(name => (
-              <MenuItem key={name} value={name}>
-                {name}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        <FormGroup>
+          <FormControlLabel
+            control={<Switch checked={user.admin} onChange={handleCheckboxChange('admin')} id="admin" />}
+            label="Admin?"
+          />
+        </FormGroup>
         <Button variant="contained" color="primary" className={classes.button} type="submit">
           Save
         </Button>
@@ -102,11 +83,11 @@ UserForm.propTypes = {
   classes: PropTypes.object.isRequired,
   user: PropTypes.object.isRequired,
   creating: PropTypes.bool.isRequired,
-  roles: PropTypes.array.isRequired,
   onDoneEditing: PropTypes.func.isRequired,
   onCancelEditing: PropTypes.func.isRequired,
   uniqueUsername: PropTypes.func.isRequired,
-  handleValueChange: PropTypes.func.isRequired
+  handleValueChange: PropTypes.func.isRequired,
+  handleCheckboxChange: PropTypes.func.isRequired
 };
 
 export default withStyles(styles)(UserForm);