Skip to content

Instantly share code, notes, and snippets.

@keown
Created June 6, 2016 15:33
Show Gist options
  • Save keown/79016d8129fe69f378489fdf7342dd2d to your computer and use it in GitHub Desktop.
Save keown/79016d8129fe69f378489fdf7342dd2d to your computer and use it in GitHub Desktop.
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment