stitch-ui/src/auth/components/AddUserModal.js

import React from "react";
import PropTypes from "prop-types";
import Modal from "react-modal";
import validateUserPass from "../validation";
import { enterPressedCaller } from "../../util";
import {
  Banner,
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  Button
} from "../../core";

const NO_USERPASS_PROVIDER_WARNING_MSG =
  "New users will not be able to log in because the email/password provider is disabled";

class AddUserModal extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.addUser = this.addUser.bind(this);
    this.submit = this.submit.bind(this);
    this.setAddUserError = this.setAddUserError.bind(this);
    this.onClose = this.onClose.bind(this);
    this.state = {
      email: "",
      password: "",
      confirmPassword: "",
      addUserError: null
    };
  }

  onClose() {
    this.setInitialState();
    this.props.onClose();
  }

  setAddUserError(userErr) {
    this.setState({ addUserError: userErr });
  }

  setInitialState() {
    this.setState({
      email: "",
      password: "",
      confirmPassword: "",
      addUserError: null
    });
  }

  addUser() {
    this.props
      .addUser(this.state)
      .then(() => this.onClose())
      .catch(e => this.setAddUserError(e.message));
  }

  submit() {
    const userErr = validateUserPass(this.state);
    if (userErr) {
      this.setAddUserError(userErr);
    } else {
      this.addUser();
    }
  }

  render() {
    const { open, localUserpassEnabled } = this.props;

    const formRowData = [
      {
        id: "email",
        label: "Email Address",
        type: "text",
        placeholder: "email-address",
        value: this.state.email,
        onChange: e => this.setState({ email: e.target.value })
      },
      {
        id: "password",
        label: "Password",
        type: "password",
        placeholder: "password",
        value: this.state.password,
        onChange: e => this.setState({ password: e.target.value })
      },
      {
        id: "confirmPassword",
        label: "Confirm Password",
        type: "password",
        placeholder: "confirm-password",
        value: this.state.confirmPassword,
        onChange: e => this.setState({ confirmPassword: e.target.value }),
        formRowOpts: { last: true }
      }
    ];

    return (
      <Modal
        isOpen={open}
        onRequestClose={this.onClose}
        contentLabel="addNewUser"
        className="view-modal-dialog"
        overlayClassName="view-modal-overlay"
      >
        <div className="view-modal-content">
          <div className="view-modal-header">
            <Button className="view-modal-close" onClick={this.onClose}>
              ×
            </Button>
            <h2 className="view-modal-title">Add New User</h2>
            <div>
              {!localUserpassEnabled &&
                <Banner
                  message={NO_USERPASS_PROVIDER_WARNING_MSG}
                  warning
                  clearable={false}
                />}
              <Banner
                message={this.state.addUserError}
                error
                onClear={() => this.setAddUserError(null)}
              />
            </div>
          </div>
          <div className="view-modal-body">
            <div className="clearfix">
              {formRowData.map(rowData =>
                <FormRow {...rowData.formRowOpts} key={rowData.id}>
                  <FormRowLabelGroup>
                    <label className="form-row-label" htmlFor={rowData.id}>
                      {rowData.label}
                    </label>
                  </FormRowLabelGroup>
                  <FormRowInputGroup>
                    <input
                      type={rowData.type}
                      onKeyPress={enterPressedCaller(this.submit)}
                      id={rowData.id}
                      className="text-input form-row-text-input"
                      placeholder={rowData.placeholder}
                      value={rowData.value}
                      onChange={rowData.onChange}
                    />
                  </FormRowInputGroup>
                </FormRow>
              )}
            </div>
          </div>
          <footer className="view-modal-footer">
            <Button primary onClick={this.submit}>
              Create
            </Button>
          </footer>
        </div>
      </Modal>
    );
  }
}

AddUserModal.contextTypes = {
  router: PropTypes.object
};

AddUserModal.propTypes = {
  addUser: PropTypes.func.isRequired,
  open: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  localUserpassEnabled: PropTypes.bool.isRequired
};

export default AddUserModal;