ducky/web
2015-05-03
Child:21f80f56cda9
ducky/web/src/pages/login.jsx
First commit. Setup project structure, start getting our registration flow set up. At this point, it runs successfully locally, assuming the auth server is running locally at slightly.local:8080. So, uh... on my computer. Also, we currently have the Register button (on the register page) disabled always, because we still need to hook up form validation and set the this.state.valid property. If that property is set to true, then the button is enabled again. Still to do: validation, logging in. Then what we have written works, minus some configuration stuff that still needs to be figured out.
| 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 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@0 | 7 import onboardingStyles from '../styles/onboarding.scss' |
| paddy@0 | 8 |
| paddy@0 | 9 export default React.createClass({ |
| paddy@0 | 10 displayName: 'LoginPage', |
| paddy@0 | 11 |
| paddy@0 | 12 getInitialState () { |
| paddy@0 | 13 return {active: false, progress: 0} |
| paddy@0 | 14 }, |
| paddy@0 | 15 |
| paddy@0 | 16 toggle () { |
| paddy@0 | 17 this.setState({active: !this.state.active}) |
| paddy@0 | 18 }, |
| paddy@0 | 19 |
| paddy@0 | 20 onBackClick (event) { |
| paddy@0 | 21 event.preventDefault() |
| paddy@0 | 22 window.history.back() |
| paddy@0 | 23 }, |
| paddy@0 | 24 |
| paddy@0 | 25 render () { |
| paddy@0 | 26 return ( |
| paddy@0 | 27 <div className='container'> |
| paddy@0 | 28 <HeroUnit title='Welcome Back'>We missed you.</HeroUnit> |
| paddy@0 | 29 <article className='onboarding login'> |
| paddy@0 | 30 <form> |
| paddy@0 | 31 <div> |
| paddy@0 | 32 <label htmlFor='emailLoginInput'>Email</label> |
| paddy@0 | 33 <input id='emailLoginInput' type='email'/> |
| paddy@0 | 34 |
| paddy@0 | 35 <label htmlFor='passwordLoginInput'>Passphrase</label> |
| paddy@0 | 36 <input id='passwordLoginInput' type='password'/> |
| paddy@0 | 37 |
| paddy@0 | 38 </div> |
| paddy@0 | 39 </form> |
| paddy@0 | 40 <div className='actionbuttons'> |
| paddy@0 | 41 <button onClick={this.onBackClick}>Back</button> |
| paddy@0 | 42 <LaddaButton style='expand-right' active={this.state.active} progress={this.state.progress}> |
| paddy@0 | 43 <button onClick={this.toggle} className='primary'>Login</button> |
| paddy@0 | 44 </LaddaButton> |
| paddy@0 | 45 </div> |
| paddy@0 | 46 </article> |
| paddy@0 | 47 </div> |
| paddy@0 | 48 ) |
| paddy@0 | 49 } |
| paddy@0 | 50 }) |