ducky/web
ducky/web/src/pages/onboard.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' |
| paddy@0 | 3 import localLinks from 'local-links' |
| paddy@0 | 4 import HeroUnit from '../components/hero' |
| paddy@0 | 5 import onboardStyles from '../styles/onboarding.scss' |
| paddy@0 | 6 |
| paddy@0 | 7 export default React.createClass({ |
| paddy@0 | 8 displayName: 'OnboardingPage', |
| paddy@0 | 9 |
| paddy@0 | 10 onLoginClick (event) { |
| paddy@0 | 11 event.preventDefault() |
| paddy@0 | 12 app.router.navigate('/login') |
| paddy@0 | 13 }, |
| paddy@0 | 14 |
| paddy@0 | 15 onRegisterClick (event) { |
| paddy@0 | 16 event.preventDefault() |
| paddy@0 | 17 app.router.navigate('/register') |
| paddy@0 | 18 }, |
| paddy@0 | 19 |
| paddy@0 | 20 render () { |
| paddy@0 | 21 return ( |
| paddy@0 | 22 <div className='container'> |
| paddy@0 | 23 <HeroUnit title='Welcome to Ducky' settings='true'>Let’s get our ducks in a row.</HeroUnit> |
| paddy@0 | 24 <article className='onboarding'> |
| paddy@0 | 25 <p>We’re just as excited as you are, but we need some more information before we can do anything. Don’t worry, this won’t take long</p> |
| paddy@0 | 26 <p>First of all, who <em>are</em> you? If you have a Ducky account already, we need you to sign in. If you don’t have one, don’t sweat it. Click that fancy “Register” button below.</p> |
| paddy@0 | 27 <div className='actionbuttons'> |
| paddy@0 | 28 <button onClick={this.onLoginClick}>Sign in</button> |
| paddy@0 | 29 <button onClick={this.onRegisterClick}>Register</button> |
| paddy@0 | 30 </div> |
| paddy@0 | 31 </article> |
| paddy@0 | 32 </div> |
| paddy@0 | 33 ) |
| paddy@0 | 34 } |
| paddy@0 | 35 }) |