Fork of the excellent esp8266-react - https://github.com/rjwats/esp8266-react
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
3.1 KiB
87 lines
3.1 KiB
import React, { RefObject } from 'react';
|
|
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
|
|
|
|
import { Dialog, DialogTitle, DialogContent, DialogActions, Checkbox } from '@material-ui/core';
|
|
|
|
import { PasswordValidator, BlockFormControlLabel, FormButton } from '../components';
|
|
|
|
import { User } from './types';
|
|
|
|
interface UserFormProps {
|
|
creating: boolean;
|
|
user: User;
|
|
uniqueUsername: (value: any) => boolean;
|
|
handleValueChange: (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
handleCheckboxChange: (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
|
|
onDoneEditing: () => void;
|
|
onCancelEditing: () => void;
|
|
}
|
|
|
|
class UserForm extends React.Component<UserFormProps> {
|
|
|
|
formRef: RefObject<any> = React.createRef();
|
|
|
|
componentDidMount() {
|
|
ValidatorForm.addValidationRule('uniqueUsername', this.props.uniqueUsername);
|
|
}
|
|
|
|
submit = () => {
|
|
this.formRef.current.submit();
|
|
}
|
|
|
|
render() {
|
|
const { user, creating, handleValueChange, handleCheckboxChange, onDoneEditing, onCancelEditing } = this.props;
|
|
return (
|
|
<ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
|
|
<Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open>
|
|
<DialogTitle id="user-form-dialog-title">{creating ? 'Add' : 'Modify'} User</DialogTitle>
|
|
<DialogContent dividers>
|
|
<TextValidator
|
|
validators={creating ? ['required', 'uniqueUsername', 'matchRegexp:^[a-zA-Z0-9_\\.]{1,24}$'] : []}
|
|
errorMessages={creating ? ['Username is required', "Username already exists", "Must be 1-24 characters: alpha numeric, '_' or '.'"] : []}
|
|
name="username"
|
|
label="Username"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={user.username}
|
|
disabled={!creating}
|
|
onChange={handleValueChange('username')}
|
|
margin="normal"
|
|
/>
|
|
<PasswordValidator
|
|
validators={['required', 'matchRegexp:^.{1,64}$']}
|
|
errorMessages={['Password is required', 'Password must be 64 characters or less']}
|
|
name="password"
|
|
label="Password"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={user.password}
|
|
onChange={handleValueChange('password')}
|
|
margin="normal"
|
|
/>
|
|
<BlockFormControlLabel
|
|
control={
|
|
<Checkbox
|
|
value="admin"
|
|
checked={user.admin}
|
|
onChange={handleCheckboxChange('admin')}
|
|
/>
|
|
}
|
|
label="Admin?"
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<FormButton variant="contained" color="primary" type="submit" onClick={this.submit}>
|
|
Done
|
|
</FormButton>
|
|
<FormButton variant="contained" color="secondary" onClick={onCancelEditing}>
|
|
Cancel
|
|
</FormButton>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</ValidatorForm>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default UserForm;
|