This commit is contained in:
proddy
2021-05-14 12:45:57 +02:00
parent 15df0c0552
commit fec5ff3132
108 changed files with 3508 additions and 2455 deletions

View File

@@ -1,9 +1,19 @@
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 {
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Checkbox
} from '@material-ui/core';
import { PasswordValidator, BlockFormControlLabel, FormButton } from '../components';
import {
PasswordValidator,
BlockFormControlLabel,
FormButton
} from '../components';
import { User } from './types';
@@ -11,33 +21,67 @@ interface UserFormProps {
creating: boolean;
user: User;
uniqueUsername: (value: any) => boolean;
handleValueChange: (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>) => void;
handleValueChange: (
name: keyof User
) => (event: React.ChangeEvent<HTMLInputElement>) => void;
onDoneEditing: () => void;
onCancelEditing: () => void;
}
class UserForm extends React.Component<UserFormProps> {
formRef: RefObject<any> = React.createRef();
componentDidMount() {
ValidatorForm.addValidationRule('uniqueUsername', this.props.uniqueUsername);
ValidatorForm.addValidationRule(
'uniqueUsername',
this.props.uniqueUsername
);
}
submit = () => {
this.formRef.current.submit();
}
};
render() {
const { user, creating, handleValueChange, onDoneEditing, onCancelEditing } = this.props;
const {
user,
creating,
handleValueChange,
onDoneEditing,
onCancelEditing
} = this.props;
return (
<ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
<Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open fullWidth maxWidth="sm">
<DialogTitle id="user-form-dialog-title">{creating ? 'Add' : 'Modify'} User</DialogTitle>
<Dialog
onClose={onCancelEditing}
aria-labelledby="user-form-dialog-title"
open
fullWidth
maxWidth="sm"
>
<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 '.'"] : []}
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
@@ -49,7 +93,10 @@ class UserForm extends React.Component<UserFormProps> {
/>
<PasswordValidator
validators={['required', 'matchRegexp:^.{1,64}$']}
errorMessages={['Password is required', 'Password must be 64 characters or less']}
errorMessages={[
'Password is required',
'Password must be 64 characters or less'
]}
name="password"
label="Password"
fullWidth
@@ -70,10 +117,19 @@ class UserForm extends React.Component<UserFormProps> {
/>
</DialogContent>
<DialogActions>
<FormButton variant="contained" color="secondary" onClick={onCancelEditing}>
<FormButton
variant="contained"
color="secondary"
onClick={onCancelEditing}
>
Cancel
</FormButton>
<FormButton variant="contained" color="primary" type="submit" onClick={this.submit}>
<FormButton
variant="contained"
color="primary"
type="submit"
onClick={this.submit}
>
Done
</FormButton>
</DialogActions>