Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement