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

Redux security

import React, { PropTypes}  from 'react'
import { write }            from 'redux-journal'

import { Tabs, Tab }        from 'material-ui/Tabs'

import { TAGS }             from '../config'
import { select }           from '../select'

import AuthFormLogin        from './auth.form.login'
import AuthFormLogout       from './auth.form.logout'
import AuthFormSignup       from './auth.form.signup'

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

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

class AuthFormTabs extends React.Component {
  constructor(props, context) {
    super(props, context)
    const t = localeAPI()
    this.state = {
      i18n: {
        login:  t(i18n.LOGIN).toUpperCase(),
        signup: t(i18n.SIGNUP).toUpperCase(),
      },
      logged: false,
    }
  }

  componentWillReceiveProps = (nextProps) => {
    const auth = select(nextProps.auth)
    this.setState({ logged: auth.docs.length() > 0 })
  }

  render() {
    const { serviceName, auth } = this.props

    if (this.state.logged) return <AuthFormLogout { ...{ serviceName, auth }} />

    return (
      <Tabs>
        <Tab label={ this.state.i18n.login }>
          <AuthFormLogin  { ...{ serviceName, auth }} />
        </Tab>
        <Tab label={ this.state.i18n.signup }>
          <AuthFormSignup { ...{ serviceName, auth }} />
        </Tab>
      </Tabs>
    )
  }
}

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

export default AuthFormTabs