gistfile1.js

let React = require('react/addons');

let Router = require('react-router');
let {Link, RouteHandler} = Router;

let Morearty = require('morearty');
let mui = require('material-ui');
let {RaisedButton, TextField} = mui;

let l = require('../utils/lang');

let Register = React.createClass({
  mixins: [Morearty.Mixin],

  onChange: function(name, ev) {
    //console.log('Register::onChange', name, ev.target.value);
    let binding = this.getDefaultBinding();
    this.getDefaultBinding().update('views.register', function(obj) {
      return React.addons.update(obj, {name: {$set: ev.target.value}});
    });
  },

  render: function() {
    let binding = this.getDefaultBinding().get('views.register');
    return (
      <div className='Register'>
        <div className="row center-xs">
          <TextField
            type="input"
            hintText=""
            value={binding.name}
            onChange={ev => this.onChange('name', ev)}
            floatingLabelText={l.l('no', 'Name')} />
        </div>
        <div className="row center-xs">
          <TextField
            type="text"
            hintText=""
            value={binding.mobile}
            onChange={ev => this.onChange('mobile', ev)}
            floatingLabelText={l.l('no', 'Mobile')} />
        </div>
        <div className="row center-xs">
          <TextField
            type="email"
            hintText=""
            value={binding.email}
            onChange={ev => this.onChange('email', ev)}
            errorText="Hm, zup?"
            floatingLabelText={l.l('no', 'Email')} />
        </div>
        <div className="row center-xs">
          <TextField
            type="password"
            value={binding.password}
            onChange={ev => this.onChange('password', ev)}
            hintText=""
            floatingLabelText={l.l('no', 'Password')} />
        </div>
        <div className="row center-xs">
          <TextField
            type="password"
            value={binding.confirmpassword}
            onChange={ev => this.onChange('confirmpassword', ev)}
            hintText=""
            floatingLabelText={l.l('no', 'Confirm password')} />
        </div>
        <div className="row center-xs">
          <Link to="/login"><RaisedButton style={{margin: '0.5em'}} label={l.l('no', 'Sign in')} primary={false} /></Link>
          <RaisedButton style={{margin: '0.5em'}} label={l.l('no', 'Register')} primary={true} />
        </div>
      </div>
    );
  }
});

module.exports = Register;