gistfile1.js

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>
        );
    }
});