ghg-react/lib/RegistrationForm/RegistrationForm.js

A library of React components for my own use.

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TextInput from '../TextInput';
import PasswordInput from '../PasswordInput';

/** Registration form with built-in validation. */

var RegistrationForm = function (_Component) {
  _inherits(RegistrationForm, _Component);

  function RegistrationForm(props) {
    _classCallCheck(this, RegistrationForm);

    var _this = _possibleConstructorReturn(this, (RegistrationForm.__proto__ || Object.getPrototypeOf(RegistrationForm)).call(this, props));

    _this.onChange = function (e) {
      var user = _this.state.user;
      user[e.target.name] = e.target.value;
      _this.setState({ user: user });
    };

    _this.onSubmit = function () {
      var user = _this.state.user;

      var formIsValid = _this.validate(user);
      if (formIsValid) {
        _this.props.onSubmit(user);
        _this.setState({ submitted: true });
      }
    };

    _this.state = {
      user: {
        email: '',
        password: ''
      },
      errors: {},
      submitted: false
    };
    return _this;
  }

  _createClass(RegistrationForm, [{
    key: 'passwordQuality',


    // Returns a number from 0 to 100 that represents password quality.
    // For simplicity, just returning % of min length entered.
    // Could enhance with checks for number, special char, unique characters, etc.
    value: function passwordQuality(password) {
      if (!password) return null;
      if (password.length >= this.props.minPasswordLength) return 100;
      var percentOfMinLength = parseInt(password.length / this.props.minPasswordLength * 100, 10);
      return percentOfMinLength;
    }
  }, {
    key: 'validate',
    value: function validate(_ref) {
      var email = _ref.email,
          password = _ref.password;

      var errors = {};
      var minPasswordLength = this.props.minPasswordLength;


      if (!email) errors.email = 'Email required.';
      if (password.length < minPasswordLength) errors.password = 'Password must be at least ' + minPasswordLength + ' characters.';

      this.setState({ errors: errors });
      var formIsValid = Object.getOwnPropertyNames(errors).length === 0;
      return formIsValid;
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state,
          errors = _state.errors,
          submitted = _state.submitted;
      var _state$user = this.state.user,
          email = _state$user.email,
          password = _state$user.password;


      return submitted ? React.createElement(
        'h2',
        null,
        this.props.confirmationMessage
      ) : React.createElement(
        'div',
        null,
        React.createElement(TextInput, {
          htmlId: 'registration-form-email',
          name: 'email',
          onChange: this.onChange,
          label: 'Email',
          value: email,
          error: errors.email,
          required: true }),
        React.createElement(PasswordInput, {
          htmlId: 'registration-form-password',
          name: 'password',
          value: password,
          onChange: this.onChange,
          quality: this.passwordQuality(password),
          showVisibilityToggle: true,
          maxLength: 50,
          error: errors.password }),
        React.createElement('input', { type: 'submit', value: 'Register', onClick: this.onSubmit })
      );
    }
  }]);

  return RegistrationForm;
}(Component);

RegistrationForm.propTypes = {
  /** Message displayed upon successful submission */
  confirmationMessage: PropTypes.string,

  /** Called when form is submitted */
  onSubmit: PropTypes.func.isRequired,

  /** Minimum password length */
  minPasswordLength: PropTypes.number
};

RegistrationForm.defaultProps = {
  confirmationMessage: "Thanks for registering!",
  minPasswordLength: 8
};

export default RegistrationForm;