Wire up login & refresh app upon click login to organization

pull/2352/head
Jared Scheib 2017-11-10 18:36:12 -08:00
parent eed18c4fdd
commit 524ca41621
1 changed files with 102 additions and 81 deletions

View File

@ -1,6 +1,9 @@
import React, {PropTypes} from 'react' import React, {Component, PropTypes} from 'react'
import {withRouter} from 'react-router'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {withRouter} from 'react-router'
import {meChangeOrganizationAsync} from 'shared/actions/auth'
import {MEMBER_ROLE} from 'src/auth/Authorized' import {MEMBER_ROLE} from 'src/auth/Authorized'
@ -9,92 +12,98 @@ const getRoleNameByOrgID = (id, roles) => {
return (role && role.name) || 'ghost' return (role && role.name) || 'ghost'
} }
const Purgatory = ({ class Purgatory extends Component {
router, handleClickLogin = organization => async e => {
name, e.preventDefault()
provider, const {router, links, meChangeOrganization} = this.props
scheme,
currentOrganization,
roles,
organizations,
logoutLink,
}) => {
const rolesAndOrgs = organizations.map(({id, name: orgName}) => ({
id,
organization: orgName,
role: getRoleNameByOrgID(id, roles),
currentOrganization: id === currentOrganization.id,
}))
const subHeading = await meChangeOrganization(links.me, {organization: organization.id})
rolesAndOrgs.length === 1 router.push('')
? 'Authenticated in 1 Organization'
: `Authenticated in ${rolesAndOrgs.length} Organizations`
const loginLink = () => {
return router.push('')
} }
return ( render() {
<div> const {
<div className="auth-page"> name,
<div className="auth-box"> provider,
<div className="auth-logo" /> scheme,
<div className="auth--purgatory"> currentOrganization,
<h3> roles,
{name} organizations,
</h3> logoutLink,
<h6> } = this.props
{subHeading}{' '}
<code> const rolesAndOrgs = organizations.map(organization => ({
{scheme}/{provider} organization,
</code> role: getRoleNameByOrgID(organization.id, roles),
</h6> currentOrganization: organization.id === currentOrganization.id,
{rolesAndOrgs.length }))
? <div className="auth--list">
{rolesAndOrgs.map(rag => const subHeading =
<div rolesAndOrgs.length === 1
key={rag.id} ? 'Authenticated in 1 Organization'
className={ : `Authenticated in ${rolesAndOrgs.length} Organizations`
rag.currentOrganization
? 'auth--list-item current' return (
: 'auth--list-item' <div>
} <div className="auth-page">
> <div className="auth-box">
<div className="auth--list-info"> <div className="auth-logo" />
<div className="auth--list-org"> <div className="auth--purgatory">
{rag.organization} <h3>
</div> {name}
<div className="auth--list-role"> </h3>
{rag.role} <h6>
{subHeading}{' '}
<code>
{scheme}/{provider}
</code>
</h6>
{rolesAndOrgs.length
? <div className="auth--list">
{rolesAndOrgs.map(rag =>
<div
key={rag.organization.id}
className={
rag.currentOrganization
? 'auth--list-item current'
: 'auth--list-item'
}
>
<div className="auth--list-info">
<div className="auth--list-org">
{rag.organization.name}
</div>
<div className="auth--list-role">
{rag.role}
</div>
</div> </div>
{rag.role === MEMBER_ROLE
? <span className="auth--list-blocked">
Contact your Admin<br />for access
</span>
: <button
className="btn btn-sm btn-primary"
onClick={this.handleClickLogin(rag.organization)}
>
Login
</button>}
</div> </div>
{rag.role === MEMBER_ROLE )}
? <span className="auth--list-blocked"> </div>
Contact your Admin<br />for access : <p>You are a Lost Soul</p>}
</span> <a href={logoutLink} className="btn btn-sm btn-link auth--logout">
: <button Logout
className="btn btn-sm btn-primary" </a>
onClick={loginLink} </div>
>
Login
</button>}
</div>
)}
</div>
: <p>You are a Lost Soul</p>}
<a href={logoutLink} className="btn btn-sm btn-link auth--logout">
Logout
</a>
</div> </div>
<p className="auth-credits">
Made by <span className="icon cubo-uniform" />InfluxData
</p>
<div className="auth-image" />
</div> </div>
<p className="auth-credits">
Made by <span className="icon cubo-uniform" />InfluxData
</p>
<div className="auth-image" />
</div> </div>
</div> )
) }
} }
const {arrayOf, func, shape, string} = PropTypes const {arrayOf, func, shape, string} = PropTypes
@ -103,6 +112,9 @@ Purgatory.propTypes = {
router: shape({ router: shape({
push: func.isRequired, push: func.isRequired,
}).isRequired, }).isRequired,
links: shape({
me: string.isRequired,
}),
name: string.isRequired, name: string.isRequired,
provider: string.isRequired, provider: string.isRequired,
scheme: string.isRequired, scheme: string.isRequired,
@ -123,14 +135,17 @@ Purgatory.propTypes = {
}) })
).isRequired, ).isRequired,
logoutLink: string.isRequired, logoutLink: string.isRequired,
meChangeOrganization: func.isRequired,
} }
const mapStateToProps = ({ const mapStateToProps = ({
links,
auth: { auth: {
me: {name, provider, scheme, currentOrganization, roles, organizations}, me: {name, provider, scheme, currentOrganization, roles, organizations},
logoutLink, logoutLink,
}, },
}) => ({ }) => ({
links,
name, name,
provider, provider,
scheme, scheme,
@ -140,4 +155,10 @@ const mapStateToProps = ({
logoutLink, logoutLink,
}) })
export default connect(mapStateToProps)(withRouter(Purgatory)) const mapDispatchToProps = dispatch => ({
meChangeOrganization: bindActionCreators(meChangeOrganizationAsync, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(
withRouter(Purgatory)
)