john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix admin/user login issues

Browse Source
This commit is contained in:
John Lyon-Smith
2018-05-25 10:16:28 -07:00
parent a33ca57d58
commit 587052a509
22 changed files with 255 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
website/src/API.js
View File

@@ -52,12 +52,12 @@ class API extends EventEmitter {
localStorage.removeItem(authTokenKeyName)
sessionStorage.removeItem(authTokenKeyName)
this._token = null
this._user = {}
this._user = { loggedOut: true }
this.socket = null
this.emit("logout")
})
} else {
this._user = {}
this._user = { loggedOut: true }
}
}
@@ -229,7 +229,7 @@ class API extends EventEmitter {
localStorage.removeItem(authTokenKeyName)
sessionStorage.removeItem(authTokenKeyName)
this._token = null
this._user = {}
this._user = { loggedOut: true }
this.disconnectSocket()
this.emit("logout")
}

57
website/src/App.js
View File

@@ -2,6 +2,7 @@ import React, { Component } from "react"
import {
Login,
Logout,
Parking,
ResetPassword,
ForgotPassword,
ConfirmEmail,
@@ -29,18 +30,38 @@ export class App extends Component {
<BrowserRouter>
<Column minHeight="100vh">
<Route
path="/app"
path="/admin"
render={(props) => (
<Column.Item height={sizeInfo.headerHeight}>
<Header
{...props}
left={[
{ image: require("images/badge.png"), path: "/app/home" },
{ text: "Teams", path: "/app/teams" },
{ text: "Users", path: "/app/users" },
{ image: require("images/badge.png"), path: "/admin/home" },
{ text: "Teams", path: "/admin/teams" },
{ text: "Users", path: "/admin/users" },
]}
right={[
{ icon: "profile", path: "/app/profile" },
{ icon: "profile", path: "/admin/profile" },
{ icon: "logout", path: "/logout" },
]}
/>
</Column.Item>
)}
/>
<Route
path="/user"
render={(props) => (
<Column.Item height={sizeInfo.headerHeight}>
<Header
{...props}
left={[
{
image: require("images/badge.png"),
path: "/user/profile",
},
]}
right={[
{ icon: "profile", path: "/user/profile" },
{ icon: "logout", path: "/logout" },
]}
/>
@@ -50,18 +71,30 @@ export class App extends Component {
<Switch>
<Route exact path="/login" component={Login} />
<Route exact path="/logout" component={Logout} />
<Route exact path="/parking" component={Parking} />
<Route exact path="/confirm-email" component={ConfirmEmail} />
<Route exact path="/reset-password" component={ResetPassword} />
<Route exact path="/forgot-password" component={ForgotPassword} />
<ProtectedRoute exact path="/app/profile" component={Profile} />
<ProtectedRoute exact admin path="/app/home" component={Home} />
<ProtectedRoute exact admin path="/app/teams" component={Teams} />
<ProtectedRoute exact admin path="/app/system" component={System} />
<ProtectedRoute exact admin path="/app/users" component={Users} />
<DefaultRoute redirect="/app/home" />
<ProtectedRoute exact path="/user/profile" component={Profile} />
<ProtectedRoute
exact
admin
path="/admin/profile"
component={Profile}
/>
<ProtectedRoute exact admin path="/admin/home" component={Home} />
<ProtectedRoute exact admin path="/admin/teams" component={Teams} />
<ProtectedRoute
exact
admin
path="/admin/system"
component={System}
/>
<ProtectedRoute exact admin path="/admin/users" component={Users} />
<DefaultRoute user="/user/profile" admin="/admin/home" />
</Switch>
<Route
path="/app"
path="/(user|admin)"
render={() => (
<Column.Item>
<Footer

2
website/src/Auth/ConfirmEmail.js
View File

@@ -79,7 +79,7 @@ export class ConfirmEmail extends React.Component {
return (
<div>
<WaitModal
active={!!waitModal}
open={!!waitModal}
message={waitModal ? waitModal.message : ""}
/>

41
website/src/Auth/DefaultRoute.js
View File

@@ -1,14 +1,49 @@
import React, { Component } from "react"
import { Route, Redirect } from "react-router-dom"
import PropTypes from "prop-types"
import { api } from "src/API"
export class DefaultRoute extends Component {
static propTypes = {
redirect: PropTypes.string,
location: PropTypes.shape({
pathname: PropTypes.string,
search: PropTypes.string,
}),
user: PropTypes.string.isRequired,
admin: PropTypes.string.isRequired,
}
render() {
// NOTE: When working on the site, Redirect to the page you are working on
return <Route render={() => <Redirect to={this.props.redirect} />} />
const user = api.loggedInUser
if (user.loggedOut) {
return <Route render={() => <Redirect to="/login" />} />
} else if (user.pending) {
// If login token has not yet been confirmed, park until it is then come back here
return (
<Route
render={() => (
<Redirect
to={`/parking?redirect=${this.props.location.pathname}`}
/>
)}
/>
)
} else {
// Render a redirect to the user or admin default page
return (
<Route
render={() => (
<Redirect
to={
user._id && user.administrator
? this.props.admin
: this.props.user
}
/>
)}
/>
)
}
}
}

2
website/src/Auth/ForgotPassword.js
View File

@@ -151,7 +151,7 @@ export class ForgotPassword extends Component {
</Column.Item>
<Column.Item grow>
<WaitModal
active={!!waitModal}
open={!!waitModal}
message={waitModal ? waitModal.message : ""}
/>

6
website/src/Auth/Login.js
View File

@@ -75,7 +75,9 @@ export class Login extends Component {
this.setState({ waitModal: false })
if (this.props.history) {
let url =
new URLSearchParams(window.location.search).get("redirect") || "/"
new URLSearchParams(this.props.history.location.search).get(
"redirect"
) || "/"
try {
this.props.history.replace(url)
@@ -224,7 +226,7 @@ export class Login extends Component {
</Row>
</Column.Item>
<Column.Item grow>
<WaitModal active={waitModal} message="Logging in..." />
<WaitModal open={waitModal} message="Logging in..." />
<MessageModal
error
open={!!messageModal}

53
website/src/Auth/Parking.js Normal file
View File

@@ -0,0 +1,53 @@
import React, { Component, Fragment } from "react"
import PropTypes from "prop-types"
import { api } from "src/API"
import { WaitModal } from "../Modal"
import { Column } from "ui"
import autobind from "autobind-decorator"
export class Parking extends Component {
static propTypes = {
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
}
componentDidMount() {
api.addListener("login", this.goToRedirect)
api.addListener("logout", this.goToLogin)
}
componentWillUnmount() {
api.removeListener("login", this.goToRedirect)
api.removeListener("logout", this.goToLogin)
}
@autobind
goToRedirect() {
if (this.props.history) {
let url =
new URLSearchParams(this.props.history.location.search).get(
"redirect"
) || "/"
try {
this.props.history.replace(url)
} catch (error) {
this.props.history.replace("/")
}
}
}
@autobind
goToLogin() {
this.props.history.replace("/login")
}
render() {
return (
<Fragment>
<Column.Item grow>
<WaitModal open loader={false} message="Authenticating..." />
</Column.Item>
</Fragment>
)
}
}

48
website/src/Auth/ProtectedRoute.js
View File

@@ -1,8 +1,7 @@
import React from 'react'
import { Route, Redirect } from 'react-router'
import { PropTypes } from 'prop-types'
import { api } from 'src/API'
import autobind from 'autobind-decorator'
import React from "react"
import { Route, Redirect } from "react-router"
import { PropTypes } from "prop-types"
import { api } from "src/API"
export class ProtectedRoute extends React.Component {
static propTypes = {
@@ -13,33 +12,32 @@ export class ProtectedRoute extends React.Component {
admin: PropTypes.bool,
}
@autobind
updateComponent() {
this.forceUpdate()
}
componentDidMount() {
api.addListener("login", this.updateComponent)
api.addListener("logout", this.updateComponent)
}
componentWillUnmount() {
api.removeListener("login", this.updateComponent)
api.removeListener("logout", this.updateComponent)
}
render(props) {
const user = api.loggedInUser
if (user.pending) {
return null
// If login token has not yet been confirmed, park until it is and redirect back here
return (
<Route
render={() => (
<Redirect
to={`/parking?redirect=${this.props.location.pathname}`}
/>
)}
/>
)
} else {
// If we are not a user or an admin go to the login page
if (!user._id || (this.props.admin && !user.administrator)) {
return (
<Redirect
to={`/login?redirect=${this.props.location.pathname}${
this.props.location.search
}`}
<Route
render={() => (
<Redirect
to={`/login?redirect=${this.props.location.pathname}${
this.props.location.search
}`}
/>
)}
/>
)
} else {

2
website/src/Auth/ResetPassword.js
View File

@@ -205,7 +205,7 @@ export class ResetPassword extends Component {
/>
<WaitModal
active={!!waitModal}
open={!!waitModal}
message={waitModal ? waitModal.message : ""}
/>
</Column.Item>

15
website/src/Auth/index.js
View File

@@ -1,7 +1,8 @@
export { Login } from './Login'
export { Logout } from './Logout'
export { ResetPassword } from './ResetPassword'
export { ForgotPassword } from './ForgotPassword'
export { ConfirmEmail } from './ConfirmEmail'
export { DefaultRoute } from './DefaultRoute'
export { ProtectedRoute } from './ProtectedRoute'
export { Login } from "./Login"
export { Logout } from "./Logout"
export { Parking } from "./Parking"
export { ResetPassword } from "./ResetPassword"
export { ForgotPassword } from "./ForgotPassword"
export { ConfirmEmail } from "./ConfirmEmail"
export { DefaultRoute } from "./DefaultRoute"
export { ProtectedRoute } from "./ProtectedRoute"

6
website/src/Home/Home.js
View File

@@ -19,7 +19,7 @@ export class Home extends Component {
<PanelButton
icon="users"
text="Users"
onClick={() => this.props.history.push("/app/users")}
onClick={() => this.props.history.push("/admin/users")}
/>
</Row.Item>
<Row.Item width={sizeInfo.panelButtonSpacing} />
@@ -27,7 +27,7 @@ export class Home extends Component {
<PanelButton
icon="teams"
text="Teams"
onClick={() => this.props.history.push("/app/teams")}
onClick={() => this.props.history.push("/admin/teams")}
/>
</Row.Item>
<Row.Item width={sizeInfo.panelButtonSpacing} />
@@ -35,7 +35,7 @@ export class Home extends Component {
<PanelButton
icon="system"
text="System"
onClick={() => this.props.history.push("/app/system")}
onClick={() => this.props.history.push("/admin/system")}
/>
</Row.Item>
<Row.Item grow />

2
website/src/MasterDetail/MasterDetail.js
View File

@@ -352,7 +352,7 @@ export class MasterDetail extends Component {
/>
<WaitModal
active={!!waitModal}
open={!!waitModal}
message={waitModal ? waitModal.message : ""}
/>

2
website/src/MasterDetail/MasterList.js
View File

@@ -47,7 +47,7 @@ export class MasterList extends React.Component {
<List.Item
key={item._id || "0"}
onClick={(e) => this.props.onItemListClick(e, index)}
active={item === this.props.selectedItem}>
open={item === this.props.selectedItem}>
<List.Icon name={data.icon} size={sizeInfo.listIcon} />
<List.Text>{data.text}</List.Text>
{item === selectedItem && selectionModified ? (

19
website/src/Modal/WaitModal.js
View File

@@ -4,17 +4,26 @@ import { Dimmer, Loader, Text } from 'ui'
export class WaitModal extends React.Component {
static propTypes = {
active: PropTypes.bool.isRequired,
open: PropTypes.bool.isRequired,
message: PropTypes.string,
loader: PropTypes.bool,
}
static defaultProps = {
loader: true,
}
render() {
const { active, message } = this.props
const { open, message, loader } = this.props
return (
<Dimmer active={active}>
<Loader />
{message && <Text size='huge' color='inverse'>{message}</Text>}
<Dimmer active={open}>
{loader && <Loader />}
{message && (
<Text size="huge" color="inverse">
{message}
</Text>
)}
</Dimmer>
)
}

2
website/src/Profile/Profile.js
View File

@@ -166,7 +166,7 @@ export class Profile extends Component {
/>
<WaitModal
active={!!waitModal}
open={!!waitModal}
message={waitModal ? waitModal.message : ""}
/>

2
website/src/System/System.js
View File

@@ -208,7 +208,7 @@ export class System extends Component {
/>
<WaitModal
active={!!waitModal}
open={!!waitModal}
message={waitModal ? waitModal.message : ""}
/>
</Column.Item>