Wire up login & refresh app upon click login to organization
parent
eed18c4fdd
commit
524ca41621
|
@ -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)
|
||||||
|
)
|
||||||
|
|
Loading…
Reference in New Issue