redux-security/src/auth/react/auth.form.login.js

Redux security

import React, { PropTypes}  from 'react'

import { write }            from 'redux-journal'
import { manager }          from 'redux-manager'

import Divider              from 'material-ui/Divider'
import Paper                from 'material-ui/Paper'
import RaisedButton         from 'material-ui/RaisedButton'
import TextField            from 'material-ui/TextField'

import { localeAPI }        from 'redux-locale'
import { i18n }             from '../i18n'

import { actions }          from '../actions'
import { SERVICE, TAGS }    from '../config'

const tags = `${TAGS}.react.form.login`

const stop = (e) => {
  e.preventDefault()
  e.stopPropagation()
}

class AuthFormLogin extends React.Component {
  constructor(props, context) {
    super(props, context)
    const { serviceName = SERVICE } = props
    const t = localeAPI()
    this.state = {
      i18n: {
        login:    t(i18n.LOGIN).toUpperCase(),
        username: t(i18n.USERNAME).toUpperCase(),
        password: t(i18n.PASSWORD).toUpperCase(),
      },
      serviceName,
    }
  }

  onSubmit = (e) => {
    write(``, `${tags}.onSubmit`)
    stop(e)
    const { serviceName } = this.state
    const username = this.refs.username.getValue()
    const password = this.refs.password.getValue()
    manager.dispatch(actions.login({ username, password }), serviceName)
  }

  render() {
    return (<form onSubmit={ this.onSubmit }>
      <Paper zDepth={ 2 }>
        <TextField ref='username' hintText={ this.state.i18n.username } style={ styles.textField } underlineShow={ false }/>
        <Divider />
        <TextField ref='password' hintText={ this.state.i18n.password } style={ styles.textField } type='password' underlineShow={ false }/>
        <Divider />
        <RaisedButton type='submit' label={ this.state.i18n.login }
                      primary={ true }
                      style={ styles.button }
        />
      </Paper>
    </form>)
  }
}

const styles = {
  button: { width: '100%' },
  textField: { marginLeft: '20px' }
}

AuthFormLogin.propTypes = {
  auth:         PropTypes.object.isRequired,
  serviceName:  PropTypes.string
}

export default AuthFormLogin