ducky/web
2015-05-03
Child:b9d0efb44eaa
ducky/web/src/pages/register.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.
1 import app from 'ampersand-app'
2 import React from 'react/addons'
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: 'RegisterPage',
11 mixins: [React.addons.LinkedStateMixin],
13 getInitialState () {
14 return {
15 email: null,
16 emailConfirmation: null,
17 passphrase: null,
18 passphraseConfirmation: null,
19 active: false,
20 valid: false,
21 }
22 },
24 componentDidMount () {
25 app.profiles.on('request', (moc, xhr, options) => {
26 this.setState({active: true})
27 })
28 app.profiles.on('error', (moc, xhr, options) => {
29 this.setState({active: false})
30 })
31 app.profiles.on('sync', (moc, xhr, options) => {
32 app.me.login(this.state.email, this.state.passphrase)
33 })
34 app.me.on('sync', (moc, xhr, options) => {
35 this.setState({active: false})
36 console.log("logged in, continuing on to billing")
37 })
38 },
40 register (e) {
41 e.preventDefault()
42 app.profiles.register(this.state.email, this.state.passphrase)
43 },
45 onBackClick (event) {
46 event.preventDefault()
47 window.history.back()
48 },
50 render () {
51 return (
52 <div className='container'>
53 <HeroUnit title='Create an Account'>We’d like to get to know you better.</HeroUnit>
54 <article className='onboarding register'>
55 <form onSubmit={this.register}>
56 <div>
57 <label htmlFor='emailRegisterInput'>Email</label>
58 <input id='emailRegisterInput' type='email' placeholder='Ours is quack@useducky.com' valueLink={this.linkState('email')} disabled={this.state.active} />
60 <label htmlFor='emailVerificationInput'>Verify Email</label>
61 <input id='emailVerificationInput' type='email' placeholder='Typos are the absolute worst.' valueLink={this.linkState('emailConfirmation')} disabled={this.state.active} />
63 <label htmlFor='passwordRegisterInput'>Passphrase</label>
64 <input id='passwordRegisterInput' type='password' placeholder='We use a sentence. Try it!' valueLink={this.linkState('passphrase')} disabled={this.state.active} />
66 <label htmlFor='passwordVerificationInput'>Verify Passphrase</label>
67 <input id='passwordVerificationInput' type='password' placeholder='Just to make sure you know it.' valueLink={this.linkState('passphraseConfirmation')} disabled={this.state.active} />
68 </div>
69 <div className='actionbuttons'>
70 <button onClick={this.onBackClick} disabled={this.state.active} type='button' className='ladda-button'>Back</button>
71 <LaddaButton style='expand-right' active={this.state.active}>
72 <button type='submit' className='primary' disabled={this.state.active || !this.state.valid}>Register</button>
73 </LaddaButton>
74 </div>
75 </form>
76 </article>
77 </div>
78 )
79 }
80 })