2019-05-24 11:19:27 +00:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2019-05-25 16:41:27 +00:00
|
|
|
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
|
2019-05-24 11:19:27 +00:00
|
|
|
|
|
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
|
|
import Button from '@material-ui/core/Button';
|
|
|
|
|
2019-05-25 08:45:49 +00:00
|
|
|
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
|
|
|
import Switch from '@material-ui/core/Switch';
|
|
|
|
import FormGroup from '@material-ui/core/FormGroup';
|
2019-05-25 16:41:27 +00:00
|
|
|
import DialogTitle from '@material-ui/core/DialogTitle';
|
|
|
|
import Dialog from '@material-ui/core/Dialog';
|
|
|
|
import DialogContent from '@material-ui/core/DialogContent';
|
|
|
|
import DialogActions from '@material-ui/core/DialogActions';
|
|
|
|
|
|
|
|
import PasswordValidator from '../components/PasswordValidator';
|
2019-05-24 11:19:27 +00:00
|
|
|
|
|
|
|
const styles = theme => ({
|
|
|
|
textField: {
|
|
|
|
width: "100%"
|
|
|
|
},
|
|
|
|
button: {
|
2019-05-25 16:41:27 +00:00
|
|
|
margin: theme.spacing.unit
|
2019-05-24 11:19:27 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
class UserForm extends React.Component {
|
|
|
|
|
2019-05-25 16:41:27 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.formRef = React.createRef();
|
|
|
|
}
|
|
|
|
|
2019-05-24 11:19:27 +00:00
|
|
|
componentWillMount() {
|
|
|
|
ValidatorForm.addValidationRule('uniqueUsername', this.props.uniqueUsername);
|
|
|
|
}
|
|
|
|
|
2019-05-25 16:41:27 +00:00
|
|
|
submit = () => {
|
|
|
|
this.formRef.current.submit();
|
|
|
|
}
|
|
|
|
|
2019-05-24 11:19:27 +00:00
|
|
|
render() {
|
2019-05-25 08:45:49 +00:00
|
|
|
const { classes, user, creating, handleValueChange, handleCheckboxChange, onDoneEditing, onCancelEditing } = this.props;
|
2019-05-24 11:19:27 +00:00
|
|
|
return (
|
2019-05-25 16:41:27 +00:00
|
|
|
<ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
|
2019-05-26 20:27:35 +00:00
|
|
|
<Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open={true}>
|
2019-05-26 18:09:34 +00:00
|
|
|
<DialogTitle id="user-form-dialog-title">{creating ? 'Add' : 'Modify'} User</DialogTitle>
|
2019-05-26 15:19:16 +00:00
|
|
|
<DialogContent dividers={true}>
|
2019-05-25 16:41:27 +00:00
|
|
|
<TextValidator
|
|
|
|
validators={creating ? ['required', 'uniqueUsername', 'matchRegexp:^[a-zA-Z0-9_\\.]{1,24}$'] : []}
|
2019-05-26 20:27:35 +00:00
|
|
|
errorMessages={creating ? ['Username is required', "Username already exists", "Must be 1-24 characters: alpha numberic, '_' or '.'"] : []}
|
2019-05-25 16:41:27 +00:00
|
|
|
name="username"
|
|
|
|
label="Username"
|
|
|
|
className={classes.textField}
|
|
|
|
value={user.username}
|
|
|
|
disabled={!creating}
|
|
|
|
onChange={handleValueChange('username')}
|
|
|
|
margin="normal"
|
|
|
|
/>
|
|
|
|
<PasswordValidator
|
|
|
|
validators={['required', 'matchRegexp:^.{0,64}$']}
|
|
|
|
errorMessages={['Password is required', 'Password must be 64 characters or less']}
|
|
|
|
name="password"
|
|
|
|
label="Password"
|
|
|
|
className={classes.textField}
|
|
|
|
value={user.password}
|
|
|
|
onChange={handleValueChange('password')}
|
|
|
|
margin="normal"
|
|
|
|
/>
|
|
|
|
<FormGroup>
|
|
|
|
<FormControlLabel
|
|
|
|
control={<Switch checked={user.admin} onChange={handleCheckboxChange('admin')} id="admin" />}
|
|
|
|
label="Admin?"
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
|
|
|
</DialogContent>
|
|
|
|
<DialogActions >
|
|
|
|
<Button variant="contained" color="primary" className={classes.button} type="submit" onClick={this.submit}>
|
|
|
|
Done
|
|
|
|
</Button>
|
|
|
|
<Button variant="contained" color="secondary" className={classes.button} type="submit" onClick={onCancelEditing}>
|
|
|
|
Cancel
|
|
|
|
</Button>
|
|
|
|
</DialogActions>
|
|
|
|
</Dialog>
|
2019-05-24 11:19:27 +00:00
|
|
|
</ValidatorForm>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
UserForm.propTypes = {
|
|
|
|
classes: PropTypes.object.isRequired,
|
|
|
|
user: PropTypes.object.isRequired,
|
|
|
|
creating: PropTypes.bool.isRequired,
|
|
|
|
onDoneEditing: PropTypes.func.isRequired,
|
|
|
|
onCancelEditing: PropTypes.func.isRequired,
|
|
|
|
uniqueUsername: PropTypes.func.isRequired,
|
2019-05-25 08:45:49 +00:00
|
|
|
handleValueChange: PropTypes.func.isRequired,
|
|
|
|
handleCheckboxChange: PropTypes.func.isRequired
|
2019-05-24 11:19:27 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default withStyles(styles)(UserForm);
|