Client: handle user authentication

This commit is contained in:
SamR1 2017-12-25 20:11:10 +01:00
parent c66f3fd9d7
commit b1fca3ab34
6 changed files with 92 additions and 55 deletions

View File

@ -33,6 +33,7 @@ export function getProfile(dispatch) {
.then(ret => {
if (ret.status === 'success') {
dispatch(ProfileSuccess(ret))
// window.location.href = '/'
} else {
dispatch(ProfileError(ret.message))
}
@ -95,7 +96,7 @@ export function handleUserFormSubmit(event, formType) {
event.preventDefault()
return (dispatch, getState) => {
const state = getState()
let { formData } = state.formData
const { formData } = state.formData
formData.formData = state.formData.formData
if (formType === 'Login') {
dispatch(login(formData.formData))

View File

@ -1,13 +1,15 @@
import React from 'react'
import { Route, Switch } from 'react-router-dom'
import { Redirect, Route, Switch } from 'react-router-dom'
import './App.css'
import Dashboard from './Dashboard'
import Logout from './Logout'
import NavBar from './NavBar'
import UserForm from './User/UserForm'
import { isLoggedIn } from '../utils'
export default class App extends React.Component {
constructor(props) {
super(props)
this.props = props
@ -18,21 +20,38 @@ export default class App extends React.Component {
<div className="App">
<NavBar />
<Switch>
<Route exact path="/" component={Dashboard} />
<Route
exact path="/"
render={() => (
isLoggedIn() ? (
<Dashboard />
) : (
<Redirect to="/login" />
)
)}
/>
<Route
exact path="/register"
render={() => (
<UserForm
formType={'Register'}
/>
isLoggedIn() ? (
<Redirect to="/" />
) : (
<UserForm
formType={'Register'}
/>
)
)}
/>
<Route
exact path="/login"
render={() => (
<UserForm
formType={'Login'}
/>
isLoggedIn() ? (
<Redirect to="/" />
) : (
<UserForm
formType={'Login'}
/>
)
)}
/>
<Route exact path="/logout" component={Logout} />

View File

@ -5,48 +5,56 @@ export default function Form (props) {
return (
<div>
<h1>{props.formType}</h1>
<hr /><br />
<form onSubmit={event =>
props.handleUserFormSubmit(event, props.formType)}
>
{props.formType === 'Register' &&
<div className="container">
<div className="row">
<div className="col-md-3" />
<div className="col-md-6">
<hr /><br />
<form onSubmit={event =>
props.handleUserFormSubmit(event, props.formType)}
>
{props.formType === 'Register' &&
<div className="form-group">
<input
name="username"
className="form-control input-lg"
type="text"
placeholder="Enter a username"
required
onChange={props.onHandleFormChange}
/>
</div>
}
<div className="form-group">
<input
name="username"
name="email"
className="form-control input-lg"
type="text"
placeholder="Enter a username"
type="email"
placeholder="Enter an email address"
required
onChange={props.onHandleFormChange}
/>
</div>
}
<div className="form-group">
<input
name="email"
className="form-control input-lg"
type="email"
placeholder="Enter an email address"
required
onChange={props.onHandleFormChange}
/>
</div>
<div className="form-group">
<input
name="password"
className="form-control input-lg"
type="password"
placeholder="Enter a password"
required
onChange={props.onHandleFormChange}
/>
</div>
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
value="Submit"
/>
</form>
</div>
<div className="form-group">
<input
name="password"
className="form-control input-lg"
type="password"
placeholder="Enter a password"
required
onChange={props.onHandleFormChange}
/>
</div>
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
value="Submit"
/>
</form>
<div className="col-md-3" />
</div>
</div>
</div>
)
}

View File

@ -1,22 +1,30 @@
import React from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import Form from './Form'
import { handleFormChange, handleUserFormSubmit } from '../../actions'
import { isLoggedIn } from '../../utils'
function UserForm(props) {
return (
<div>
{props.message !== '' && (
<code>{props.message}</code>
)}
<Form
formType={props.formType}
userForm={props.formData}
onHandleFormChange={event => props.onHandleFormChange(event)}
handleUserFormSubmit={(event, formType) =>
props.onHandleUserFormSubmit(event, formType)}
/>
{isLoggedIn() ? (
<Redirect to="/" />
) : (
<div>
{ props.message !== '' && (
<code>{props.message}</code>
)}
<Form
formType={props.formType}
userForm={props.formData}
onHandleFormChange={event => props.onHandleFormChange(event)}
handleUserFormSubmit={(event, formType) =>
props.onHandleUserFormSubmit(event, formType)}
/>
</div>
)}
</div>
)
}

View File

@ -24,7 +24,7 @@ export const store = createStore(
)
)
if (window.localStorage.getItem('authToken') !== null) {
if (window.localStorage.authToken !== null) {
store.dispatch(loadProfile())
}

1
mpwo_client/src/utils.js Normal file
View File

@ -0,0 +1 @@
export const isLoggedIn = () => !!window.localStorage.authToken