Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
var CreateAccountForm = React.createClass({
propTypes: {
buttonText: React.PropTypes.string,
isInline: React.PropTypes.bool
},
getInitialState: function() {
return {
error: '',
password: '',
emailAddress: '',
isProcessing: false,
isOptedIn: true
};
},
onEmailChange: function(event) {
this.setState( { emailAddress: event.target.value.trim() } );
},
onPasswordChange: function(event) {
this.setState( { password: event.target.value } );
},
onOptInChange: function(event) {
this.setState( { isOptedIn: event.target.checked } );
},
onSubmit: function(evt) {
evt.preventDefault();
if (this.state.isProcessing === false) {
// Retrieve the values from the email/password field one more time
// prior to submit. This fixes an issue where Safari auto-complete
// would not trigger the on*Change events for these fields.
var emailAddress = this.refs['sign_up_email_address_input'].getDOMNode().value;
var password = this.refs['sign_up_password_input'].getDOMNode().value;
this.setState({
errorMsg: '',
isProcessing: true,
emailAddress: emailAddress,
password: password
});
if (!HfReactHelper.isValidEmailAddress(emailAddress)) {
this.setState({errorMsg: 'Invalid email address', isProcessing: false});
}
else if (password.length < 6) {
this.setState({errorMsg: 'Your password must be at least 6 characters long', isProcessing: false});
}
else {
this.refs['sign_up_form'].getDOMNode().submit();
}
}
return false;
},
render: function() {
var errors = '';
if (this.state.errorMsg != '') {
errors = (
<div className='row'>
<div className='columns l-margin-b-10 small-10 small-offset-1 text-center m-modal--error'>
<p>{this.state.errorMsg}</p>
</div>
</div>
);
}
return (
<div className="m-create-account">
<form ref='sign_up_form' className="m-create-account--form" action="/account/signUp" method="POST">
<div className="m-create-account--outer-container">
<div className={buttonColumnClassNames + (this.props.isInline ? ' m-create-account--inline-google-login' : ' m-create-account--modal-google-login')}>
<GoogleLoginOrSignup isOptedIn={this.state.isOptedIn}/>
</div>
<div className={formColumnClassNames + ' text-left m-create-account--sign-up'}>
<input ref='sign_up_email_address_input' className="m-create-account--text-input" name='signup[email_address]' type='text' placeholder='Email' onChange={this.onEmailChange} data-format="email"/>
<input ref='sign_up_password_input' className="m-create-account--text-input" name='signup[password]' type='password' placeholder='Password' onChange={this.onPasswordChange}/>
<input className="m-create-account--text-input" onChange={this.onOptInChange} name='signup[is_opted_in_marketing_emails]' type='checkbox' defaultChecked='checked'/>
<label>&nbsp;Send me HelloSign updates</label>
{errors}
<div className={'l-margin-b-10 small-10 small-offset-1 small-text-center ' + (this.props.isInline ? 'large-text-left' : '')}>
<GreenButton onClick={ this.onSubmit } buttonText={this.props.buttonText}/>
</div>
</div>
</div>
</form>
</div>
);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.