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

Redux security

import React, { PropTypes}  from 'react'

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

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

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

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

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

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

class AuthFormLogout extends React.Component {
  constructor(props, context) {
    super(props, context)
    const { serviceName = SERVICE } = props
    const t = localeAPI()
    this.state = {
      i18n: {
        logout: t(i18n.LOGOUT).toUpperCase()
      },
      serviceName,
    }
  }

  onTouchTap = (e) => {
    write(``, `${tags}.onTouchTap`)
    stop(e)
    const { serviceName } = this.state
    const auth = select(this.props.auth)
    if (auth.docs.length()) {
      const { sessionID } = auth.docs.first() || {}
      if (sessionID) {
        manager.dispatch(actions.logout({ sessionID }), serviceName)
      } else {
        warning('Try to logout but in auth no sessionID', `${tags}.onTouchTap`)
      }
    } else {
      warning(`Try to logout when not loged in`, `${tags}.onTouchTap`)
    }
  }

  render() {
    return (
      <Paper zDepth={ 2 }>
        <RaisedButton label={ this.state.i18n.logout }
                      onTouchTap={ this.onTouchTap }
                      secondary={ true }
                      style={ styles.button }
        />
      </Paper>
    )
  }
}

const styles = {
  button: { width: '100%' },
}

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

export default AuthFormLogout