Client: handle user authentication
This commit is contained in:
parent
c66f3fd9d7
commit
b1fca3ab34
@ -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))
|
||||
|
@ -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} />
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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
1
mpwo_client/src/utils.js
Normal file
@ -0,0 +1 @@
|
||||
export const isLoggedIn = () => !!window.localStorage.authToken
|
Loading…
Reference in New Issue
Block a user