ducky/web
ducky/web/src/pages/register.jsx
Stop ignoring our build folder. Now that our HTML lives in our build folder, we should probably stop ignoring it. This means that an `hg clone` followed by an `npm install` followed by an `npm run deploy` will work. I hope.
| 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@2 | 23 errors: [], |
| paddy@0 | 24 } |
| paddy@0 | 25 }, |
| paddy@0 | 26 |
| paddy@2 | 27 emailValidationOutputs: { |
| paddy@2 | 28 'missing': 'We need to know how to contact you. We promise not to share it.', |
| paddy@2 | 29 'overflow': 'Hm, that’s a bit long. Do you have a shorter email address?', |
| paddy@2 | 30 'invalid_format': 'That doesn’t look like an email address… Double check it?', |
| paddy@2 | 31 }, |
| paddy@2 | 32 |
| paddy@2 | 33 emailConfirmationValidationOutputs: { |
| paddy@2 | 34 'invalid_value': 'Oops! Those emails don’t match. Maybe double-check them?', |
| paddy@2 | 35 }, |
| paddy@2 | 36 |
| paddy@2 | 37 passphraseValidationOutputs: { |
| paddy@2 | 38 'insufficient': 'A longer passphrase would be better.', |
| paddy@2 | 39 'missing': 'Looks like you forgot to enter a passphrase. You need one!', |
| paddy@2 | 40 'overflow': 'We can’t store that long a passphrase. Try a shorter one.', |
| paddy@2 | 41 }, |
| paddy@2 | 42 |
| paddy@2 | 43 passphraseConfirmationValidationOutputs: { |
| paddy@2 | 44 'invalid_value': 'Oops! Those passphrases don’t match. Maybe double-check them?', |
| paddy@2 | 45 }, |
| paddy@2 | 46 |
| paddy@2 | 47 debouncedValidateForm (event) { |
| paddy@2 | 48 this._validateForm(event) |
| paddy@2 | 49 }, |
| paddy@2 | 50 |
| paddy@2 | 51 _validateForm (event) { |
| paddy@2 | 52 const fields = { |
| paddy@2 | 53 email: this.state.email, |
| paddy@2 | 54 emailConfirmation: this.state.emailConfirmation, |
| paddy@2 | 55 passphrase: this.state.passphrase, |
| paddy@2 | 56 passphraseConfirmation: this.state.passphraseConfirmation, |
| paddy@2 | 57 } |
| paddy@2 | 58 if (event != null) { |
| paddy@2 | 59 if (event.target.id == 'emailInput') { |
| paddy@2 | 60 fields.email = event.target.value |
| paddy@2 | 61 } |
| paddy@2 | 62 else if (event.target.id == 'emailConfirmationInput') { |
| paddy@2 | 63 fields.emailConfirmation = event.target.value |
| paddy@2 | 64 } |
| paddy@2 | 65 else if (event.target.id == 'passphraseInput') { |
| paddy@2 | 66 fields.passphrase = event.target.value |
| paddy@2 | 67 } |
| paddy@2 | 68 else if (event.target.id == 'passphraseConfirmationInput') { |
| paddy@2 | 69 fields.passphraseConfirmation = event.target.value |
| paddy@2 | 70 } |
| paddy@2 | 71 } |
| paddy@2 | 72 const errors = this.validate(fields, event == null) |
| paddy@2 | 73 this.setState({errors: errors}) |
| paddy@2 | 74 return errors.length <= 0 |
| paddy@2 | 75 }, |
| paddy@2 | 76 |
| paddy@2 | 77 validateForm (event) { |
| paddy@2 | 78 event.persist() |
| paddy@2 | 79 this.debouncedValidateForm(event) |
| paddy@2 | 80 }, |
| paddy@2 | 81 |
| paddy@2 | 82 validate (fields, all) { |
| paddy@2 | 83 const errors = [] |
| paddy@2 | 84 if (fields.email != null) { |
| paddy@2 | 85 if (fields.email.length == 0) { |
| paddy@2 | 86 errors.push({'error': 'missing', 'field': '/email'}) |
| paddy@2 | 87 } else if (fields.email.length > 64) { |
| paddy@2 | 88 errors.push({'error': 'overflow', 'field': '/email'}) |
| paddy@2 | 89 } else if (!fields.email.match(/.+@.+\..+/)) { |
| paddy@2 | 90 errors.push({'error': 'invalid_format', 'field': '/email'}) |
| paddy@2 | 91 } |
| paddy@2 | 92 } else if (all) { |
| paddy@2 | 93 errors.push({'error': 'missing', 'field': '/email'}) |
| paddy@2 | 94 } |
| paddy@2 | 95 if (fields.emailConfirmation != null || all) { |
| paddy@2 | 96 if (fields.emailConfirmation != fields.email && (fields.email || fields.emailConfirmation)) { |
| paddy@2 | 97 errors.push({'error': 'invalid_value', 'field': '/email_confirmation'}) |
| paddy@2 | 98 } |
| paddy@2 | 99 } |
| paddy@2 | 100 if (fields.passphrase != null) { |
| paddy@2 | 101 if (fields.passphrase.length == 0) { |
| paddy@2 | 102 errors.push({'error': 'missing', 'field': '/passphrase'}) |
| paddy@2 | 103 } else if (fields.passphrase.length < 6) { |
| paddy@2 | 104 errors.push({'error': 'insufficient', 'field': '/passphrase'}) |
| paddy@2 | 105 } else if (fields.passphrase.length > 64) { |
| paddy@2 | 106 errors.push({'error': 'overflow', 'field': '/passphrase'}) |
| paddy@2 | 107 } |
| paddy@2 | 108 } else if (all) { |
| paddy@2 | 109 errors.push({'error': 'missing', 'field': '/passphrase'}) |
| paddy@2 | 110 } |
| paddy@2 | 111 if (fields.passphraseConfirmation != null || all) { |
| paddy@2 | 112 if (fields.passphraseConfirmation != fields.passphrase && (fields.passphrase || fields.passphraseConfirmation)) { |
| paddy@2 | 113 errors.push({'error': 'invalid_value', 'field': '/passphrase_confirmation'}) |
| paddy@2 | 114 } |
| paddy@2 | 115 } |
| paddy@2 | 116 return errors |
| paddy@2 | 117 }, |
| paddy@2 | 118 |
| paddy@0 | 119 componentDidMount () { |
| paddy@0 | 120 app.profiles.on('request', (moc, xhr, options) => { |
| paddy@0 | 121 this.setState({active: true}) |
| paddy@0 | 122 }) |
| paddy@0 | 123 app.profiles.on('error', (moc, xhr, options) => { |
| paddy@0 | 124 this.setState({active: false}) |
| paddy@0 | 125 }) |
| paddy@0 | 126 app.profiles.on('sync', (moc, xhr, options) => { |
| paddy@0 | 127 app.me.login(this.state.email, this.state.passphrase) |
| paddy@0 | 128 }) |
| paddy@0 | 129 app.me.on('sync', (moc, xhr, options) => { |
| paddy@0 | 130 this.setState({active: false}) |
| paddy@2 | 131 app.router.navigate('/register/payment') |
| paddy@0 | 132 }) |
| paddy@0 | 133 }, |
| paddy@0 | 134 |
| paddy@2 | 135 componentWillMount () { |
| paddy@2 | 136 this.debouncedValidateForm = debounce(this.debouncedValidateForm, 900) |
| paddy@2 | 137 }, |
| paddy@2 | 138 |
| paddy@0 | 139 register (e) { |
| paddy@0 | 140 e.preventDefault() |
| paddy@2 | 141 const success = this._validateForm(null) |
| paddy@2 | 142 if (!success) { |
| paddy@2 | 143 return |
| paddy@2 | 144 } |
| paddy@0 | 145 app.profiles.register(this.state.email, this.state.passphrase) |
| paddy@0 | 146 }, |
| paddy@0 | 147 |
| paddy@0 | 148 onBackClick (event) { |
| paddy@0 | 149 event.preventDefault() |
| paddy@0 | 150 window.history.back() |
| paddy@0 | 151 }, |
| paddy@0 | 152 |
| paddy@0 | 153 render () { |
| paddy@0 | 154 return ( |
| paddy@0 | 155 <div className='container'> |
| paddy@0 | 156 <HeroUnit title='Create an Account'>We’d like to get to know you better.</HeroUnit> |
| paddy@0 | 157 <article className='onboarding register'> |
| paddy@0 | 158 <form onSubmit={this.register}> |
| paddy@0 | 159 <div> |
| paddy@2 | 160 <label htmlFor='emailInput'>Email</label> |
| paddy@2 | 161 <input id='emailInput' type='email' placeholder='Ours is quack@useducky.com' valueLink={this.linkState('email')} disabled={this.state.active} onInput={this.validateForm} /> |
| paddy@2 | 162 <ValidationError errors={this.state.errors} field='/email' outputs={this.emailValidationOutputs} /> |
| paddy@0 | 163 |
| paddy@2 | 164 <label htmlFor='emailConfirmationInput'>Verify Email</label> |
| paddy@2 | 165 <input id='emailConfirmationInput' type='email' placeholder='Typos are the absolute worst.' valueLink={this.linkState('emailConfirmation')} disabled={this.state.active} onInput={this.validateForm} /> |
| paddy@2 | 166 <ValidationError errors={this.state.errors} field='/email_confirmation' outputs={this.emailConfirmationValidationOutputs} /> |
| paddy@0 | 167 |
| paddy@2 | 168 <label htmlFor='passphraseInput'>Passphrase</label> |
| paddy@2 | 169 <input id='passphraseInput' type='password' placeholder='We use a sentence. Try it!' valueLink={this.linkState('passphrase')} disabled={this.state.active} onInput={this.validateForm} /> |
| paddy@2 | 170 <ValidationError errors={this.state.errors} field='/passphrase' outputs={this.passphraseValidationOutputs} /> |
| paddy@0 | 171 |
| paddy@2 | 172 <label htmlFor='passphraseConfirmationInput'>Verify Passphrase</label> |
| paddy@2 | 173 <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@2 | 174 <ValidationError errors={this.state.errors} field='/passphrase_confirmation' outputs={this.passphraseConfirmationValidationOutputs} /> |
| paddy@0 | 175 </div> |
| paddy@0 | 176 <div className='actionbuttons'> |
| paddy@0 | 177 <button onClick={this.onBackClick} disabled={this.state.active} type='button' className='ladda-button'>Back</button> |
| paddy@0 | 178 <LaddaButton style='expand-right' active={this.state.active}> |
| paddy@2 | 179 <button type='submit' className='primary' disabled={this.state.active || this.state.errors.length}>Register</button> |
| paddy@0 | 180 </LaddaButton> |
| paddy@0 | 181 </div> |
| paddy@0 | 182 </form> |
| paddy@0 | 183 </article> |
| paddy@0 | 184 </div> |
| paddy@0 | 185 ) |
| paddy@0 | 186 } |
| paddy@0 | 187 }) |