redux-security/src/auth/react/auth.avatar.js

Redux security

import React, { PropTypes}  from 'react'

import AccountCircle        from 'material-ui/svg-icons/action/account-circle'
import IconButton           from 'material-ui/IconButton'

import AuthSnackbarLogin    from './auth.snackbar.login'
import AuthSnackbarLogout   from './auth.snackbar.logout'
import AuthSnackbarSignup   from './auth.snackbar.signup'

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

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

class AuthAvatar extends React.Component {
  constructor(props, context) {
    super(props, context)
    const { serviceName = SERVICE } = props
    const t = localeAPI()
    this.state = {
      serviceName,
      style: styles.normal,
      tooltip: `${t.cap(i18n.LOGIN)} / ${t.cap(i18n.LOGOUT)}`
    }
  }

  componentWillReceiveProps = (nextProps) => {
    const auth = select(nextProps.auth)
    if (auth.docs.length()) {
      this.setState({ style: styles.success })
    } else if (auth.error()) {
      this.setState({ style: styles.failure })
    } else {
      this.setState({ style: styles.normal })
    }
  }

  render() {
    const { onClick, serviceName, auth } = this.props
    return (<div>
      <IconButton { ...{ onClick } }
                  iconStyle={ styles.iconStyle }
                  style={ this.state.style }
                  tooltip={ this.state.tooltip }
                  tooltipPosition='bottom-left'>
        <AccountCircle />
      </IconButton>
      <AuthSnackbarLogin  { ...{ serviceName, auth }} />
      <AuthSnackbarLogout { ...{ serviceName, auth }} />
      <AuthSnackbarSignup { ...{ serviceName, auth }} />
    </div>)
  }
}

import { red200, green200, cyan400 } from 'material-ui/styles/colors'

const styles = {
  iconStyle: { height: '42px', width: '42px' },

  success: { height: '52px', width: '52px', padding: '5px', borderRadius: '50%', backgroundColor: green200 },
  failure: { height: '52px', width: '52px', padding: '5px', borderRadius: '50%', backgroundColor: red200 },
  normal:  { height: '52px', width: '52px', padding: '5px', borderRadius: '50%', backgroundColor: cyan400 }
}

AuthAvatar.propTypes = {
  auth:         PropTypes.object.isRequired,
  serviceName:  PropTypes.string,
  onClick:      PropTypes.func
}

export default AuthAvatar