ducky/web
ducky/web/src/pages/login.jsx
Update our profiles collection to use ampersand-rest-collection. Use ampersand-rest-collection instead of ampersand-collection, so we can take advantage of the excellent "getOrFetch" function to fall back on the server when looking for a member of the collection that isn't downloaded yet. Also, use the correct Authorization header when making profile collection requests. Finally, if the profile collection requests fail due to an expired access token, use the refresh token to acquire a new access token, then retry the request.
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'
9 export default React.createClass({
10 displayName: 'LoginPage',
12 getInitialState () {
13 return {active: false, progress: 0}
14 },
16 toggle () {
17 this.setState({active: !this.state.active})
18 },
20 onBackClick (event) {
21 event.preventDefault()
22 window.history.back()
23 },
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'/>
35 <label htmlFor='passwordLoginInput'>Passphrase</label>
36 <input id='passwordLoginInput' type='password'/>
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 })