lukas/WordClockESP
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

remove roles, as a simplification

Browse Source
This commit is contained in:
Rick Watson
2019-05-25 09:45:49 +01:00
parent 0c630f0f93
commit 6935b63706
5 changed files with 59 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
interface/src/forms/ManageUsersForm.js
View File

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

45
interface/src/forms/UserForm.js
View File

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