ducky/web
ducky/web/src/pages/login.jsx
Update to use plans instead of PWYW. If we're going to lean on Stripe for most of our subscription processing, we need to use plans, instead of pay what you want. This updates the page to replace our amount input with a plan select box. It also removes the nonsense about finding your first charge date, because Stripe forced us into a simpler, but harder to predict, billing model. We also updated our CSS to work with select boxes, as well as text inputs.
| 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 }) |