ducky/web
ducky/web/src/pages/register.jsx
Enable catch-all in our ValidationError component. We're doing this an ugly, hacky way. But it works, and right now, that's what counts. To match our params/fields/headers properties on the ValidationError component, we're going to add the notParams/notFields/notHeaders properties--they match any error _not_ targeting those params/fields/headers. Basically, "any error that wouldn't be caught by these filters". Which is an ugly, but workable, solution for a catch-all ValidationError--just tell it to catch anything but the params/fields/headers that are being handled by the other ValidationErrors. Our implementation of this in the RegisterPage component validates (ha!) that it's at least workable model, if not overly pretty. Also, I anticipate some human error bugs in the future, where one of the field-specific ValidationErrors gets updated and the catch-all ValidationError does not. But whatever. For now, this is Good Enough™.
| paddy@0 | 1 import app from 'ampersand-app' |
| paddy@0 | 2 import React from 'react/addons' |
| paddy@0 | 3 import localLinks from 'local-links' |
| paddy@0 | 4 import LaddaButton from 'react-ladda' |
| paddy@0 | 5 import LaddaCSS from '../../node_modules/ladda/dist/ladda.min.css' |
| paddy@0 | 6 import HeroUnit from '../components/hero' |
| paddy@2 | 7 import ValidationError from '../components/validation-error' |
| paddy@0 | 8 import onboardingStyles from '../styles/onboarding.scss' |
| paddy@2 | 9 import flashStyles from '../styles/_flashes.scss' |
| paddy@2 | 10 import debounce from 'lodash.debounce' |
| paddy@0 | 11 |
| paddy@0 | 12 export default React.createClass({ |
| paddy@0 | 13 displayName: 'RegisterPage', |
| paddy@0 | 14 mixins: [React.addons.LinkedStateMixin], |
| paddy@0 | 15 |
| paddy@0 | 16 getInitialState () { |
| paddy@0 | 17 return { |
| paddy@0 | 18 email: null, |
| paddy@0 | 19 emailConfirmation: null, |
| paddy@0 | 20 passphrase: null, |
| paddy@0 | 21 passphraseConfirmation: null, |
| paddy@0 | 22 active: false, |
| paddy@4 | 23 clientErrors: [], |
| paddy@4 | 24 serverErrors: [], |
| paddy@0 | 25 } |
| paddy@0 | 26 }, |
| paddy@0 | 27 |
| paddy@2 | 28 emailValidationOutputs: { |
| paddy@2 | 29 'missing': 'We need to know how to contact you. We promise not to share it.', |
| paddy@2 | 30 'overflow': 'Hm, that’s a bit long. Do you have a shorter email address?', |
| paddy@2 | 31 'invalid_format': 'That doesn’t look like an email address… Double check it?', |
| paddy@2 | 32 }, |
| paddy@2 | 33 |
| paddy@2 | 34 emailConfirmationValidationOutputs: { |
| paddy@2 | 35 'invalid_value': 'Oops! Those emails don’t match. Maybe double-check them?', |
| paddy@2 | 36 }, |
| paddy@2 | 37 |
| paddy@2 | 38 passphraseValidationOutputs: { |
| paddy@2 | 39 'insufficient': 'A longer passphrase would be better.', |
| paddy@2 | 40 'missing': 'Looks like you forgot to enter a passphrase. You need one!', |
| paddy@2 | 41 'overflow': 'We can’t store that long a passphrase. Try a shorter one.', |
| paddy@2 | 42 }, |
| paddy@2 | 43 |
| paddy@2 | 44 passphraseConfirmationValidationOutputs: { |
| paddy@2 | 45 'invalid_value': 'Oops! Those passphrases don’t match. Maybe double-check them?', |
| paddy@2 | 46 }, |
| paddy@2 | 47 |
| paddy@6 | 48 catchAllValidationOutputs: { |
| paddy@6 | 49 }, |
| paddy@6 | 50 |
| paddy@2 | 51 debouncedValidateForm (event) { |
| paddy@2 | 52 this._validateForm(event) |
| paddy@2 | 53 }, |
| paddy@2 | 54 |
| paddy@2 | 55 _validateForm (event) { |
| paddy@2 | 56 const fields = { |
| paddy@2 | 57 email: this.state.email, |
| paddy@2 | 58 emailConfirmation: this.state.emailConfirmation, |
| paddy@2 | 59 passphrase: this.state.passphrase, |
| paddy@2 | 60 passphraseConfirmation: this.state.passphraseConfirmation, |
| paddy@2 | 61 } |
| paddy@2 | 62 if (event != null) { |
| paddy@2 | 63 if (event.target.id == 'emailInput') { |
| paddy@2 | 64 fields.email = event.target.value |
| paddy@2 | 65 } |
| paddy@2 | 66 else if (event.target.id == 'emailConfirmationInput') { |
| paddy@2 | 67 fields.emailConfirmation = event.target.value |
| paddy@2 | 68 } |
| paddy@2 | 69 else if (event.target.id == 'passphraseInput') { |
| paddy@2 | 70 fields.passphrase = event.target.value |
| paddy@2 | 71 } |
| paddy@2 | 72 else if (event.target.id == 'passphraseConfirmationInput') { |
| paddy@2 | 73 fields.passphraseConfirmation = event.target.value |
| paddy@2 | 74 } |
| paddy@2 | 75 } |
| paddy@2 | 76 const errors = this.validate(fields, event == null) |
| paddy@4 | 77 this.setState({clientErrors: errors}) |
| paddy@2 | 78 return errors.length <= 0 |
| paddy@2 | 79 }, |
| paddy@2 | 80 |
| paddy@2 | 81 validateForm (event) { |
| paddy@2 | 82 event.persist() |
| paddy@2 | 83 this.debouncedValidateForm(event) |
| paddy@2 | 84 }, |
| paddy@2 | 85 |
| paddy@2 | 86 validate (fields, all) { |
| paddy@2 | 87 const errors = [] |
| paddy@2 | 88 if (fields.email != null) { |
| paddy@2 | 89 if (fields.email.length == 0) { |
| paddy@2 | 90 errors.push({'error': 'missing', 'field': '/email'}) |
| paddy@2 | 91 } else if (fields.email.length > 64) { |
| paddy@2 | 92 errors.push({'error': 'overflow', 'field': '/email'}) |
| paddy@2 | 93 } else if (!fields.email.match(/.+@.+\..+/)) { |
| paddy@2 | 94 errors.push({'error': 'invalid_format', 'field': '/email'}) |
| paddy@2 | 95 } |
| paddy@2 | 96 } else if (all) { |
| paddy@2 | 97 errors.push({'error': 'missing', 'field': '/email'}) |
| paddy@2 | 98 } |
| paddy@2 | 99 if (fields.emailConfirmation != null || all) { |
| paddy@2 | 100 if (fields.emailConfirmation != fields.email && (fields.email || fields.emailConfirmation)) { |
| paddy@2 | 101 errors.push({'error': 'invalid_value', 'field': '/email_confirmation'}) |
| paddy@2 | 102 } |
| paddy@2 | 103 } |
| paddy@2 | 104 if (fields.passphrase != null) { |
| paddy@2 | 105 if (fields.passphrase.length == 0) { |
| paddy@2 | 106 errors.push({'error': 'missing', 'field': '/passphrase'}) |
| paddy@2 | 107 } else if (fields.passphrase.length < 6) { |
| paddy@2 | 108 errors.push({'error': 'insufficient', 'field': '/passphrase'}) |
| paddy@2 | 109 } else if (fields.passphrase.length > 64) { |
| paddy@2 | 110 errors.push({'error': 'overflow', 'field': '/passphrase'}) |
| paddy@2 | 111 } |
| paddy@2 | 112 } else if (all) { |
| paddy@2 | 113 errors.push({'error': 'missing', 'field': '/passphrase'}) |
| paddy@2 | 114 } |
| paddy@2 | 115 if (fields.passphraseConfirmation != null || all) { |
| paddy@2 | 116 if (fields.passphraseConfirmation != fields.passphrase && (fields.passphrase || fields.passphraseConfirmation)) { |
| paddy@2 | 117 errors.push({'error': 'invalid_value', 'field': '/passphrase_confirmation'}) |
| paddy@2 | 118 } |
| paddy@2 | 119 } |
| paddy@2 | 120 return errors |
| paddy@2 | 121 }, |
| paddy@2 | 122 |
| paddy@0 | 123 componentDidMount () { |
| paddy@0 | 124 app.profiles.on('request', (moc, xhr, options) => { |
| paddy@0 | 125 this.setState({active: true}) |
| paddy@0 | 126 }) |
| paddy@0 | 127 app.profiles.on('error', (moc, xhr, options) => { |
| paddy@4 | 128 let state = {active: false} |
| paddy@4 | 129 if (xhr.errors && xhr.errors.length) { |
| paddy@4 | 130 state.serverErrors = this.state.serverErrors.concat(xhr.errors) |
| paddy@4 | 131 } else { |
| paddy@4 | 132 state.serverErrors = [{'error': 'act_of_god'}] |
| paddy@4 | 133 } |
| paddy@4 | 134 this.setState(state) |
| paddy@0 | 135 }) |
| paddy@0 | 136 app.profiles.on('sync', (moc, xhr, options) => { |
| paddy@0 | 137 app.me.login(this.state.email, this.state.passphrase) |
| paddy@0 | 138 }) |
| paddy@0 | 139 app.me.on('sync', (moc, xhr, options) => { |
| paddy@0 | 140 this.setState({active: false}) |
| paddy@2 | 141 app.router.navigate('/register/payment') |
| paddy@0 | 142 }) |
| paddy@4 | 143 app.me.on('error', (moc, xhr, options) => { |
| paddy@4 | 144 let state = {active: false} |
| paddy@4 | 145 if (xhr.errors && xhr.errors.length) { |
| paddy@4 | 146 state.serverErrors = this.state.serverErrors.concat(xhr.errors) |
| paddy@4 | 147 } else { |
| paddy@4 | 148 state.serverErrors = [{'error': 'act_of_god'}] |
| paddy@4 | 149 } |
| paddy@4 | 150 this.setState(state) |
| paddy@4 | 151 }) |
| paddy@0 | 152 }, |
| paddy@0 | 153 |
| paddy@2 | 154 componentWillMount () { |
| paddy@2 | 155 this.debouncedValidateForm = debounce(this.debouncedValidateForm, 900) |
| paddy@2 | 156 }, |
| paddy@2 | 157 |
| paddy@0 | 158 register (e) { |
| paddy@0 | 159 e.preventDefault() |
| paddy@2 | 160 const success = this._validateForm(null) |
| paddy@2 | 161 if (!success) { |
| paddy@2 | 162 return |
| paddy@2 | 163 } |
| paddy@0 | 164 app.profiles.register(this.state.email, this.state.passphrase) |
| paddy@0 | 165 }, |
| paddy@0 | 166 |
| paddy@0 | 167 onBackClick (event) { |
| paddy@0 | 168 event.preventDefault() |
| paddy@0 | 169 window.history.back() |
| paddy@0 | 170 }, |
| paddy@0 | 171 |
| paddy@0 | 172 render () { |
| paddy@0 | 173 return ( |
| paddy@0 | 174 <div className='container'> |
| paddy@0 | 175 <HeroUnit title='Create an Account'>We’d like to get to know you better.</HeroUnit> |
| paddy@0 | 176 <article className='onboarding register'> |
| paddy@0 | 177 <form onSubmit={this.register}> |
| paddy@0 | 178 <div> |
| paddy@2 | 179 <label htmlFor='emailInput'>Email</label> |
| paddy@2 | 180 <input id='emailInput' type='email' placeholder='Ours is quack@useducky.com' valueLink={this.linkState('email')} disabled={this.state.active} onInput={this.validateForm} /> |
| paddy@4 | 181 <ValidationError errors={this.state.clientErrors.concat(this.state.serverErrors)} field='/email' outputs={this.emailValidationOutputs} /> |
| paddy@0 | 182 |
| paddy@2 | 183 <label htmlFor='emailConfirmationInput'>Verify Email</label> |
| paddy@2 | 184 <input id='emailConfirmationInput' type='email' placeholder='Typos are the absolute worst.' valueLink={this.linkState('emailConfirmation')} disabled={this.state.active} onInput={this.validateForm} /> |
| paddy@4 | 185 <ValidationError errors={this.state.clientErrors.concat(this.state.serverErrors)} field='/email_confirmation' outputs={this.emailConfirmationValidationOutputs} /> |
| paddy@0 | 186 |
| paddy@2 | 187 <label htmlFor='passphraseInput'>Passphrase</label> |
| paddy@2 | 188 <input id='passphraseInput' type='password' placeholder='We use a sentence. Try it!' valueLink={this.linkState('passphrase')} disabled={this.state.active} onInput={this.validateForm} /> |
| paddy@4 | 189 <ValidationError errors={this.state.clientErrors.concat(this.state.serverErrors)} field='/passphrase' outputs={this.passphraseValidationOutputs} /> |
| paddy@0 | 190 |
| paddy@2 | 191 <label htmlFor='passphraseConfirmationInput'>Verify Passphrase</label> |
| paddy@2 | 192 <input id='passphraseConfirmationInput' type='password' placeholder='Just to make sure you know it.' valueLink={this.linkState('passphraseConfirmation')} disabled={this.state.active} onInput={this.validateForm} /> |
| paddy@4 | 193 <ValidationError errors={this.state.clientErrors.concat(this.state.serverErrors)} field='/passphrase_confirmation' outputs={this.passphraseConfirmationValidationOutputs} /> |
| paddy@6 | 194 |
| paddy@6 | 195 <ValidationError errors={this.state.clientErrors.concat(this.state.serverErrors)} notFields={['/email', '/email_confirmation', '/passphrase', '/passphrase_confirmation']} notHeaders={[]} notParams={[]} outputs={this.catchAllValidationOutputs} /> |
| paddy@0 | 196 </div> |
| paddy@0 | 197 <div className='actionbuttons'> |
| paddy@0 | 198 <button onClick={this.onBackClick} disabled={this.state.active} type='button' className='ladda-button'>Back</button> |
| paddy@0 | 199 <LaddaButton style='expand-right' active={this.state.active}> |
| paddy@4 | 200 <button type='submit' className='primary' disabled={this.state.active || this.state.clientErrors.length}>Register</button> |
| paddy@0 | 201 </LaddaButton> |
| paddy@0 | 202 </div> |
| paddy@0 | 203 </form> |
| paddy@0 | 204 </article> |
| paddy@0 | 205 </div> |
| paddy@0 | 206 ) |
| paddy@0 | 207 } |
| paddy@0 | 208 }) |