ducky/web

Paddy 2015-05-31 Parent:99a43a6d1d30 Child:21f80f56cda9

6:a641906b8267 Go to Latest

ducky/web/src/pages/login.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™.

Download raw file
View source Diff to previous Annotate
History
1 import app from 'ampersand-app'
2 import React from 'react'
3 import localLinks from 'local-links'
4 import LaddaButton from 'react-ladda'
5 import LaddaCSS from '../../node_modules/ladda/dist/ladda.min.css'
6 import HeroUnit from '../components/hero'
7 import onboardingStyles from '../styles/onboarding.scss'
8
9 export default React.createClass({
10 displayName: 'LoginPage',
11
12 getInitialState () {
13 return {active: false, progress: 0}
14 },
15
16 toggle () {
17 this.setState({active: !this.state.active})
18 },
19
20 onBackClick (event) {
21 event.preventDefault()
22 window.history.back()
23 },
24
25 render () {
26 return (
27 <div className='container'>
28 <HeroUnit title='Welcome Back'>We missed you.</HeroUnit>
29 <article className='onboarding login'>
30 <form>
31 <div>
32 <label htmlFor='emailLoginInput'>Email</label>
33 <input id='emailLoginInput' type='email'/>
34
35 <label htmlFor='passwordLoginInput'>Passphrase</label>
36 <input id='passwordLoginInput' type='password'/>
37
38 </div>
39 </form>
40 <div className='actionbuttons'>
41 <button onClick={this.onBackClick}>Back</button>
42 <LaddaButton style='expand-right' active={this.state.active} progress={this.state.progress}>
43 <button onClick={this.toggle} className='primary'>Login</button>
44 </LaddaButton>
45 </div>
46 </article>
47 </div>
48 )
49 }
50 })