Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component, Fragment } from 'react'
- import {
- NavLink,
- Link,
- BrowserRouter as Router,
- Route,
- Switch,
- Redirect,
- } from 'react-router-dom'
- import FeedPage from './FeedPage'
- import DraftsPage from './DraftsPage'
- import CreatePage from './CreatePage'
- import DetailPage from './DetailPage'
- import LoginPage from './LoginPage'
- import SignupPage from './SignupPage'
- import PageNotFound from './PageNotFound'
- import LogoutPage from './LogoutPage'
- import { AUTH_TOKEN } from '../constant'
- import { isTokenExpired } from '../helper/jwtHelper'
- import { graphql } from 'react-apollo'
- import { gql } from 'apollo-boost'
- const ProtectedRoute = ({ component: Component, token, ...rest }) => {
- return token ? (
- <Route {...rest} render={matchProps => <Component {...matchProps} />} />
- ) : (
- <Redirect to="/login" />
- )
- }
- class RootContainer extends Component {
- constructor(props) {
- super(props)
- this.refreshTokenFn = this.refreshTokenFn.bind(this)
- this.state = {
- token: props.token,
- }
- }
- refreshTokenFn(data = {}) {
- const token = data.AUTH_TOKEN
- if (token) {
- localStorage.setItem(AUTH_TOKEN, token)
- } else {
- localStorage.removeItem(AUTH_TOKEN)
- }
- this.setState({
- token: data.AUTH_TOKEN,
- })
- }
- bootStrapData() {
- try {
- const token = localStorage.getItem(AUTH_TOKEN)
- if (token !== null && token !== undefined) {
- const expired = isTokenExpired(token)
- if (!expired) {
- this.setState({ token: token })
- } else {
- localStorage.removeItem(AUTH_TOKEN)
- this.setState({ token: null })
- }
- }
- } catch (e) {
- console.log('')
- }
- }
- //verify localStorage check
- componentDidMount() {
- this.bootStrapData()
- }
- render() {
- return (
- <Router>
- <Fragment>
- {this.renderNavBar()}
- {this.renderRoute()}
- </Fragment>
- </Router>
- )
- }
- renderNavBar() {
- return (
- <nav className="pa3 pa4-ns">
- <div className="stateText">
- STATE:
- <strong>
- {this.state.token ? (
- <div>
- Logged <em>IN</em>!!!
- </div>
- ) : (
- <div>
- Logged <em>OUT</em>!!!
- </div>
- )}
- </strong>
- </div>
- ======>
- {this.state.token ? (
- <div
- onClick={() => {
- this.refreshTokenFn &&
- this.refreshTokenFn({
- [AUTH_TOKEN]: null,
- })
- window.location.href = '/'
- }}
- className="f6 link dim br1 ba ph3 pv2 fr mb2 dib black">
- Logout
- </div>
- ) : (
- <Link
- to="/login"
- className="f6 link dim br1 ba ph3 pv2 fr mb2 dib black"
- >
- Login
- </Link>
- )}
- </nav>
- )
- }
- renderRoute() {
- return (
- <div className="fl w-100 pl4 pr4">
- <Switch>
- <Route exact path="/" component={FeedPage} />
- <Route
- token={this.state.token}
- path="/login"
- render={props => <LoginPage refreshTokenFn={this.refreshTokenFn} />}
- />
- <Route path="/logout" component={LogoutPage} />
- <Route component={PageNotFound} />
- </Switch>
- </div>
- )
- }
- }
- export default RootContainer
- // ==================== The subsequent LoginPage is below ============================>
- import React, { Component } from 'react'
- import { withRouter } from 'react-router-dom'
- import { graphql } from 'react-apollo'
- import { gql } from 'apollo-boost'
- import { AUTH_TOKEN } from '../constant'
- class LoginPage extends Component {
- state = {
- username: '',
- password: '',
- }
- render() {
- return (
- <div className="pa4 flex justify-center bg-white">
- <div>
- Username: bobjones
- <br />
- Password: abc12345678
- <input
- autoFocus
- className="w-100 pa2 mv2 br2 b--black-20 bw1"
- placeholder="Email"
- type="text"
- onChange={e => this.setState({ username: e.target.value })}
- value={this.state.username}
- />
- <input
- autoFocus
- className="w-100 pa2 mv2 br2 b--black-20 bw1"
- placeholder="Password"
- type="password"
- onChange={e => this.setState({ password: e.target.value })}
- value={this.state.password}
- />
- <button
- className="pa3 bg-black-10 bn dim ttu pointer"
- onClick={this._login}>
- GO
- </button>
- </div>
- </div>
- )
- }
- _login = async e => {
- const { username, password } = this.state
- this.props
- .loginMutation({
- variables: {
- username,
- password,
- },
- })
- .then(result => {
- const token = result.data.login.authToken
- this.props.refreshTokenFn &&
- this.props.refreshTokenFn({
- [AUTH_TOKEN]: token,
- })
- alert('Auth Successful')
- {/*this.props.history.replace('/')
- window.location.reload()*/}
- })
- .catch(err => {
- alert('Incorrect credentials')
- })
- }
- }
- const LOGIN_USER_MUTATION = gql`
- mutation loginMutation($username: String!, $password: String!) {
- login (input: {
- username: $username
- password: $password
- clientMutationId: ""
- }) {
- authToken
- }
- }
- `
- export default graphql(LOGIN_USER_MUTATION, { name: 'loginMutation' })(
- withRouter(LoginPage),
- )
Add Comment
Please, Sign In to add comment