advreact_04_12/admin-panel/src/components/routes/AddUserForm.jsx at a95d73ada211031f7171efa4f43d63f165e89bdb · romabelka/advreact_04_12 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import Button from '../common/Button';
import InputField from '../common/InputField';
import {
  required,
  minLength,
  maxLength,
  allowedChars,
  invalidEmail,
} from '../../helpers/reduxForm/fieldLevelValidation';

const firstAndFirstNameValidation = [required, allowedChars, minLength(3), maxLength(100)];
const emailValidation = [required, invalidEmail, maxLength(100)];
const passwordValidation = [required, minLength(8), maxLength(100)];

class AddUserForm extends React.Component {
  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    reset: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired,
    pristine: PropTypes.bool.isRequired,
    error: PropTypes.string,
  };

  static defaultProps = {
    error: '',
  };

  submit = () => { };

  render() {
    const {
      handleSubmit,
      error,
      pristine,
      reset,
      submitting,
    } = this.props;

    return (
      <form
        onSubmit={handleSubmit(this.submit)}
      >
        <Field
          name="firstname"
          type="text"
          component={InputField}
          label="Firstname"
          placeholder="Enter firstname"
          className="common-margins"
          validate={firstAndFirstNameValidation}
        />
        <Field
          name="lastName"
          type="text"
          component={InputField}
          label="Lastname"
          placeholder="Enter lastname"
          className="common-margins"
          validate={firstAndFirstNameValidation}
        />
        <Field
          name="email"
          type="text"
          component={InputField}
          label="Email"
          placeholder="Enter email"
          className="common-margins"
          validate={emailValidation}
        />
        <Field
          name="password"
          type="password"
          component={InputField}
          label="Password"
          placeholder="Enter password"
          className="common-margins"
          validate={passwordValidation}
        />
        <div>
          {
            error &&
            <strong>
              {error}
            </strong>
          }
          <div>
            <Button
              type="submit"
              disabled={submitting}
              className="common-margins"
            >
              Submit
            </Button>
            <Button
              type="button"
              disabled={pristine || submitting}
              onClick={reset}
              className="common-margins"
            >
              Reset
            </Button>
          </div>
        </div>
      </form>

    );
  }
}

export default reduxForm({
  form: 'AddUserForm',
})(AddUserForm);