RegistrationForm.jsx

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';

import MenuItem from 'material-ui/MenuItem';

import TextField from 'material-ui/TextField';
import Checkbox from 'material-ui/Checkbox';
import SelectField from 'material-ui/SelectField';

import RaisedButton from 'material-ui/RaisedButton';
import RailsForm from '../RailsForm/RailsForm';

import InputWithInfo from '../InputWithInfo/InputWithInfo'

import { Field, Form, actions, createFieldClass, controls } from 'react-redux-form';

import { textFieldStyle, checkBoxStyle, selectFieldStyle } from '../shared/sharedDarkStyles';

import style from './RegistrationForm.scss';

import validator from 'validator';

const MaterialField = createFieldClass({
  'TextField': controls.text
});

const MaterialSelect = createFieldClass({
  'SelectField': (props) => ({
    name: props.name,
    onChange: (event, index, value) => props.onChange(value),
    value: props.modelValue,
    errors: props.errors
  })
});

const MaterialCheckbox = createFieldClass({
  'Checkbox': (props) => ({
    name: props.name,
    onCheck: props.onChange,
    onBlur: props.onBlur,
    onFocus: props.onFocus,
    onKeyPress: props.onKeyPress,
    checked: (props.modelValue ? true : false)
  })
});

function parseCheckbox(value){
  if (value == 'on') {
    return true;
  } else {
    return false;
  }
}

function changeCheckbox(model, value){
  return (dispatch) => {
    dispatch(actions.toggle(model, value));
  }
}

class RegistrationForm extends React.Component {
  handleSubmit(user){
    const {registrationForm} = this.props;
    if (registrationForm.valid) {
      $('#new_user').trigger('submit');
    }
  }
  render () {
    const authToken = this.props.authenticity_token;
    const { registrationForm: { fields } } = this.props;
    const isSubmitFailed = this.props.registrationForm.submitFailed;
    const errors = {
      company: fields.company && isSubmitFailed && !fields.company.valid && (fields.company.errors.required),
      vat: fields.vat && isSubmitFailed && !fields.vat.valid && (fields.vat.errors.required),
      name: fields.name && isSubmitFailed && !fields.name.valid && (fields.name.errors.required),
      surname: fields.surname && isSubmitFailed && !fields.surname.valid && (fields.surname.errors.required),
      email: fields.email && isSubmitFailed && !fields.email.valid && (fields.email.errors.required || fields.email.errors.isEmail),
      role: fields.role && isSubmitFailed && !fields.role.valid && (fields.role.errors.required),
      password: fields.password && isSubmitFailed && !fields.password.valid && (fields.password.errors.required),
      password_confirmation: fields.password_confirmation && isSubmitFailed && !fields.password_confirmation.valid && (fields.password_confirmation.errors.required)
    }
    return(
      <div>
        <RailsForm
          model = 'registrationUser'
          className="new_user"
          id="new_user"
          action="/users"
          method="post"
          authToken={authToken}>
          <div>
            <InputWithInfo infoTxt = {I18n.t('activerecord.attributes.user.freelancer_hint')}
              tooltipId='user_company'
              tootlipPosition = 'bottom'>
              <MaterialField
                model='registrationUser.company'>

                <TextField autofocus='autofocus'
                  hintText={I18n.t('activerecord.attributes.user.company')}
                  floatingLabelText={I18n.t('activerecord.attributes.user.company')}
                  errorText = {errors.company}
                  type='text'
                  name='user[company]'
                  id='user_company'
                  autoComplete='off'
                  {...textFieldStyle}/>
              </MaterialField>
            </InputWithInfo>
          </div>
          <div>
            <MaterialField
              model='registrationUser.vat'
              validators={{
                required: (val) => val && val.length
              }}
              validateOn='blur'
              errors={{
                required: (val) => !val && 'This field is required'
              }}>
              <TextField
                hintText={I18n.t('activerecord.attributes.user.vat')}
                floatingLabelText={I18n.t('activerecord.attributes.user.vat')}
                errorText = {errors.vat}
                type='text'
                name='user[vat]'
                id='user_vat'
                autoComplete='off'
                {...textFieldStyle}/>
            </MaterialField>
          </div>
          <div className={style.title}>
            {I18n.t('registration.title')}
          </div>
          <div>
            <MaterialField
              model='registrationUser.name'
              validators={{
                required: (val) => val && val.length
              }}
              validateOn='blur'
              errors={{
                required: (val) => !val && 'This field is required'
              }}>
              <TextField
                hintText={I18n.t('activerecord.attributes.user.name')}
                floatingLabelText={I18n.t('activerecord.attributes.user.name')}
                errorText = {errors.name}
                type='text'
                name='user[name]'
                id='user_name'
                autoComplete='off'
                {...textFieldStyle}/>
            </MaterialField>
          </div>
          <div>
            <MaterialField
              model='registrationUser.surname'
              validators={{
                required: (val) => val && val.length
              }}
              validateOn='blur'
              errors={{
                required: (val) => !val && 'This field is required'
              }}>
              <TextField
                hintText={I18n.t('activerecord.attributes.user.surname')}
                floatingLabelText={I18n.t('activerecord.attributes.user.surname')}
                errorText = {errors.surname}
                type='text'
                name='user[surname]'
                id='user_surname'
                autoComplete='off'
                {...textFieldStyle}/>
            </MaterialField>
          </div>
          <div>
            <MaterialField
              model='registrationUser.email'
              validators={{
                required: (val) => val && val.length,
                isEmail: validator.isEmail
              }}
              validateOn='blur'
              errors={{
                isEmail: (val) => !validator.isEmail(val) && 'Not a valid email',
                required: (val) => !val && 'This field is required'
              }}>
              <TextField
                hintText={I18n.t('activerecord.attributes.user.email')}
                floatingLabelText={I18n.t('activerecord.attributes.user.email')}
                errorText = {errors.email}
                type='email'
                name='user[email]'
                id='user_email'
                autoComplete='off'
                {...textFieldStyle}/>
            </MaterialField>
          </div>
          <div>
            <MaterialSelect
              model='registrationUser.role'
              validators={{
                required: (val) => val && val.length
              }}
              validateOn='blur'
              errors={{
                required: (val) => !val && 'This field is required'
              }}>
              <SelectField
                floatingLabelText={I18n.t('activerecord.attributes.user.role')}
                errorText = {errors.role}
                name='user_role'
                id='user_role'
                fullWidth={true}
                {...selectFieldStyle}>
                <MenuItem value = { I18n.t('registration.roles.administration')}
                  primaryText = { I18n.t('registration.roles.administration')} />
                <MenuItem value = { I18n.t('registration.roles.it')}
                  primaryText = { I18n.t('registration.roles.it')} />
                <MenuItem value = { I18n.t('registration.roles.warehouse')}
                  primaryText = { I18n.t('registration.roles.warehouse')} />
                <MenuItem value = { I18n.t('registration.roles.presidency')}
                  primaryText = { I18n.t('registration.roles.presidency')} />
              </SelectField>
            </MaterialSelect>
          </div>
          <div>
            <MaterialField
              model='registrationUser.password'
              validators={{
                required: (val) => val && val.length
              }}
              validateOn='blur'
              errors={{
                required: (val) => !val && 'This field is required'
              }}>
              <TextField
                hintText={I18n.t('activerecord.attributes.user.password')}
                floatingLabelText={I18n.t('activerecord.attributes.user.password')}
                errorText = {errors.password}
                type='password'
                name='user[password]'
                id='user_password'
                {...textFieldStyle}/>
            </MaterialField>
          </div>
          <div>
            <MaterialField
              model='registrationUser.password_confirmation'
              validators={{
                required: (val) => val && val.length
              }}
              validateOn='blur'
              errors={{
                required: (val) => !val && 'This field is required'
              }}>
              <TextField
                hintText={I18n.t('activerecord.attributes.user.password_confirmation')}
                floatingLabelText={I18n.t('activerecord.attributes.user.password_confirmation')}
                errorText = {errors.password_confirmation}
                type='password'
                name='user[password_confirmation]'
                id='user_password_confirmation'
                {...textFieldStyle}/>
            </MaterialField>
          </div>
          <div>
            <MaterialCheckbox
              model='registrationUser.tos'
              parser = {parseCheckbox}
              changeAction= { changeCheckbox }>
              <Checkbox
                id='user_tos'
                name='user_tos'
                labelPosition="left"
                label={I18n.t('activerecord.attributes.user.tos')}
                style={{
                  fontSize: "0.75em"
                }}
                {...checkBoxStyle}/>
            </MaterialCheckbox>
          </div>
          <div>
            <MaterialCheckbox
              model='registrationUser.privacy'
              parser = {parseCheckbox}
              changeAction= { changeCheckbox }>
            <Checkbox
              id='user_privacy'
              name='user_privacy'
              labelPosition="left"
              label={I18n.t('activerecord.attributes.user.privacy')}
              style={{
                fontSize: "0.75em"
              }}
              {...checkBoxStyle}/>
            </MaterialCheckbox>
          </div>
          <div>
            <RaisedButton label={I18n.t('devise.registrations.new.sign_up')}
              primary={true}
              type='submit'/>
          </div>
        </RailsForm>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    registrationUser: state.registrationUser,
    registrationForm: state.registrationForm,
    authToken: state.authToken
  };
}

export default connect(mapStateToProps)(RegistrationForm);