{"size": 2092, "ext": "js", "max_stars_repo_path": "src/components/elements/LoginButton.js", "max_stars_repo_name": "jesseflorig/squadlist-io", "max_stars_repo_stars_event_min_datetime": "2017-04-21T22:47:45.000Z", "max_stars_repo_stars_event_max_datetime": "2017-05-22T00:06:34.000Z", "max_issues_repo_path": "src/components/elements/LoginButton.js", "max_issues_repo_name": "jesseflorig/squadlist-io", "max_issues_repo_issues_event_min_datetime": "2020-08-19T21:15:42.000Z", "max_issues_repo_issues_event_max_datetime": "2020-08-19T21:15:42.000Z", "max_forks_repo_path": "src/components/elements/LoginButton.js", "max_forks_repo_name": "jesseflorig/squadlist-io", "max_forks_repo_forks_event_min_datetime": "2017-05-01T19:11:29.000Z", "max_forks_repo_forks_event_max_datetime": "2017-05-04T16:44:35.000Z"}
{"max_stars_count": 2, "max_issues_count": 1, "max_forks_count": 2, "avg_line_length": 24.9047619048, "max_line_length": 88, "alphanum_fraction": 0.5826959847}
import React from 'react'
import Auth0Lock from 'auth0-lock'
import Config from '../../config.js'
import Button from './Button'
import PersonIcon from '../icons/personIcon'
import { withRouter } from 'react-router'
import { gql, withApollo } from 'react-apollo'

const {clientID, domain} = Config.get().auth

class LoginButton extends React.Component {

  constructor (props) {
    super(props)
    this._lock = new Auth0Lock(clientID, domain)
    this.handleLogin = this.handleLogin.bind(this)
    this.handleLogout = this.handleLogout.bind(this)
  }

  componentDidMount () {
    this._lock.on('authenticated', res => {
      window.localStorage.setItem('auth0IdToken', res.idToken)
      if (this.props.userQuery) {
        this.props.userQuery.refetch().then( r => {
          const {user} = r.data
          if (user) {
            this.props.history.replace('/')
          } else {
            this.createUser().then(() => {
              this.props.userQuery.refetch().then(() => {
                this.props.history.replace('/')
              })
            })
          }
        })
      }
    })
  }

  handleLogin () {
    this._lock.show()
  }

  handleLogout () {
    window.localStorage.removeItem('auth0IdToken')
    this.props.client.resetStore()
  }

  createUser () {
    return this.props.client.mutate({
      mutation: gql`
        mutation createUser($idToken: String!){
          createUser(authProvider: {auth0: {idToken: $idToken}}) {
            id
          }
        }
      `,
      variables: {
        idToken: window.localStorage.getItem('auth0IdToken')
      }
    })
  }

  render () {
    const label = this.props.userQuery.user ? 'logout' : 'login'
    const handleClick = this.props.userQuery.user ? this.handleLogout : this.handleLogin

    if (!this.props.userQuery.loading) {
      return(
        <Button
          text={label}
          type="accent"
          size="small"
          icon={<PersonIcon color='white'/>}
          onClick={handleClick}/>
      )
    }

    return <div></div>
  }
}

export default withRouter(withApollo(LoginButton))
