fleet/frontend/components/forms/InviteUserForm/InviteUserForm.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Button from 'components/buttons/Button';
import InputFieldWithIcon from 'components/forms/fields/InputFieldWithIcon';
import Checkbox from 'components/forms/fields/Checkbox';
import userInterface from 'interfaces/user';
import validatePresence from 'components/forms/validators/validate_presence';
import validEmail from 'components/forms/validators/valid_email';

const baseClass = 'invite-user-form';

class InviteUserForm extends Component {
  static propTypes = {
    serverErrors: PropTypes.shape({
      email: PropTypes.string,
      base: PropTypes.string,
    }),
    invitedBy: userInterface,
    onCancel: PropTypes.func,
    onSubmit: PropTypes.func,
    canUseSSO: PropTypes.bool,
  };

  constructor (props) {
    super(props);

    this.state = {
      errors: {
        admin: null,
        email: null,
        name: null,
        sso_enabled: null,
      },
      formData: {
        admin: false,
        email: '',
        name: '',
        sso_enabled: false,
      },
    };
  }

  componentWillReceiveProps ({ serverErrors }) {
    const { errors } = this.state;

    if (this.props.serverErrors !== serverErrors) {
      this.setState({
        errors: {
          ...errors,
          ...serverErrors,
        },
      });
    }
  }

  onInputChange = (formField) => {
    return (value) => {
      const { errors, formData } = this.state;

      this.setState({
        errors: {
          ...errors,
          [formField]: null,
        },
        formData: {
          ...formData,
          [formField]: value,
        },
      });

      return false;
    };
  }

  onCheckboxChange = (formField) => {
    return (evt) => {
      return this.onInputChange(formField)(evt);
    };
  };

  onFormSubmit = (evt) => {
    evt.preventDefault();
    const valid = this.validate();

    if (valid) {
      const { formData: { admin, email, name, sso_enabled: ssoEnabled } } = this.state;
      const { invitedBy, onSubmit } = this.props;
      return onSubmit({
        admin,
        email,
        invited_by: invitedBy.id,
        name,
        sso_enabled: ssoEnabled,
      });
    }

    return false;
  }

  validate = () => {
    const {
      errors,
      formData: { email },
    } = this.state;

    if (!validatePresence(email)) {
      this.setState({
        errors: {
          ...errors,
          email: 'Email field must be completed',
        },
      });

      return false;
    }

    if (!validEmail(email)) {
      this.setState({
        errors: {
          ...errors,
          email: `${email} is not a valid email`,
        },
      });

      return false;
    }

    return true;
  }

  render () {
    const { errors, formData: { admin, email, name, ssoEnabled } } = this.state;
    const { onCancel, serverErrors } = this.props;
    const { onFormSubmit, onInputChange, onCheckboxChange } = this;
    const baseError = serverErrors.base;

    return (
      <form onSubmit={onFormSubmit} className={baseClass}>
        {baseError && <div className="form__base-error">{baseError}</div>}
        <InputFieldWithIcon
          autofocus
          error={errors.name}
          name="name"
          onChange={onInputChange('name')}
          placeholder="Name"
          value={name}
        />
        <InputFieldWithIcon
          error={errors.email}
          name="email"
          onChange={onInputChange('email')}
          placeholder="Email"
          value={email}
        />
        <div className={`${baseClass}__radio`}>
          <p className={`${baseClass}__role`}>Admin</p>
          <Checkbox
            name="admin"
            onChange={onCheckboxChange('admin')}
            value={admin}
            wrapperClassName={`${baseClass}__invite-admin`}
          >
            Enable Admin
          </Checkbox>
        </div>
        <div className={`${baseClass}__radio`}>
          <p className={`${baseClass}__role`}>Single sign on</p>
          <Checkbox
            name="sso_enabled"
            onChange={onCheckboxChange('sso_enabled')}
            value={ssoEnabled}
            disabled={!this.props.canUseSSO}
            wrapperClassName={`${baseClass}__invite-admin`}
          >
            Enable Single Sign On
          </Checkbox>
        </div>

        <div className={`${baseClass}__btn-wrap`}>
          <Button className={`${baseClass}__btn`} type="submit" variant="brand">
            Invite
          </Button>
          <Button
            className={`${baseClass}__btn`}
            onClick={onCancel}
            type="input"
            variant="inverse"
          >
            Cancel
          </Button>
        </div>
      </form>
    );
  }
}

export default InviteUserForm;