auth implementation

App.js

import React from 'react';
import { Router, Route } from 'react-router-dom';
import loadable from 'react-loadable';
import LoadingComponent from 'components/Loading';
import history from './../constants/history';
//import * as routes from './../constants/routes';

// 3rd
import 'styles/antd.less';
import 'styles/bootstrap/bootstrap.scss'
// custom
import "styles/layout.scss"
import "styles/theme.scss"
import "styles/ui.scss"
import "styles/vendors.scss"


let SignInPage = loadable({
  loader: () => import('./common/SignIn'),
  loading: LoadingComponent
})



const App = ({ session, refetch }) =>  (
      <Router history={history}>
        <div>
          <Route
            exact
            path={"/"}
            component={() => <SignInPage refetch={refetch} />}
          />
        </div>
      </Router>
    );
export default App;

gistfile1.txt

{
  "name": "webapp",
  "version": "1.0",
  "private": true,
  "homepage": "",
  "dependencies": {
    "antd": "^3.8.2",
    "classnames": "^2.2.6",
    "echarts": "^4.1.0",
    "echarts-for-react": "^2.0.14",
    "rc-queue-anim": "^1.6.5",
    "subscriptions-transport-ws": "^0.9.12",
    "apollo-cache-inmemory": "^1.2.5",
    "apollo-client": "^2.3.5",
    "apollo-link": "^1.2.2",
    "apollo-link-error": "^1.1.0",
    "apollo-link-http": "^1.5.4",
    "apollo-link-ws": "^1.0.8",
    "apollo-utilities": "^1.0.16",
    "graphql": "^14.0.0-rc.1",
    "graphql-tag": "^2.9.2",
    "react-apollo": "^2.1.9",
    "history": "^4.7.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-router-dom": "^4.3.1",
    "react-loadable": "^5.5.0",
    "react-scripts": "2.0.0-next.3e165448",
    "reqwest": "^2.0.5"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject",
    "prettier": "prettier --write ./src/**/**/**/*"
  },
  "browserslist": {
    "development": [
      "last 2 chrome versions",
      "last 2 firefox versions",
      "last 2 edge versions"
    ],
    "production": [
      ">1%",
      "last 4 versions",
      "Firefox ESR",
      "not ie < 11"
    ]
  },
  "devDependencies": {
    "babel-plugin-import": "^1.8.0",
    "bootstrap": "^4.1.3",
    "history": "^4.7.2",
    "loaders.css": "^0.1.2",
    "node-sass": "^4.9.3",
    "prettier": "^1.14.2",
    "prop-types": "^15.6.2",
    "react-app-rewire-less": "^2.1.2",
    "react-app-rewired": "^1.5.2"
  }
}

index.js

import React from 'react';
import { render } from 'react-dom';
import Root from './components/Root';
import * as serviceWorker from './serviceWorker';


render(
  <Root />,
  document.getElementById('root')
);


serviceWorker.unregister();

Root.js

import React, { Component } from 'react';
import App from './App';


import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { getMainDefinition } from 'apollo-utilities';
import { ApolloLink, split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { onError } from 'apollo-link-error';
import { InMemoryCache } from 'apollo-cache-inmemory';


const httpLink = new HttpLink({
  uri: 'http://localhost:8000/graphql',
});

const wsLink = new WebSocketLink({
  uri: `ws://localhost:8000/graphql`,
  options: {
    reconnect: true,
  },
});

const terminatingLink = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return (
      kind === 'OperationDefinition' && operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

const authLink = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => {
    const token = localStorage.getItem('token')
    return {
      headers: {
        ...headers,
        'x-token': token ? token :  '',
      },
    }
  });

  return forward(operation);
});

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
      console.log('GraphQL error', message);

      if (message === 'NOT_AUTHENTICATED') {
        //9signOut(client);
      }
    });
  }

  if (networkError) {
    console.log('Network error', networkError);

    if (networkError.statusCode === 401) {
      //signOut(client);
    }
  }
});

const link = ApolloLink.from([authLink, errorLink, terminatingLink]);

const cache = new InMemoryCache();

const client = new ApolloClient({
  link,
  cache,
});

export default class Root extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>
    );
  }
}

SignIn-index.js

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { Mutation, ApolloConsumer } from 'react-apollo';
import gql from 'graphql-tag';

import * as routes from '../../../constants/routes';
import history from '../../../constants/history';

import { Form, Input, Button, Checkbox } from 'antd';
import { Alert } from 'antd';
import QueueAnim from 'rc-queue-anim';
import APPCONFIG from '../../../constants/appConfig';
import DEMO from '../../../constants/demoData';

import './styles.scss';



const FormItem = Form.Item;

const SIGN_IN = gql`
  mutation($login: String!, $password: String!) {
    signIn(login: $login, password: $password) {
      token
    }
  }
`;

const INITIAL_STATE = {
  login: '',
  password: '',
};

const onClose = (e) => {
  console.log(e, 'I was closed.');
};

const SignIn = () => (
  <section className="form-card-page form-card row no-gutters">
    <div
      className="form-card__img form-card__img--left col-lg-6"
      style={{backgroundImage: "url('assets/images-demo/covers/patagonia.jpg')"}}></div>
    <div className="form-card__body col-lg-6 p-5 px-lg-8 d-flex align-items-center">
      <WrappedNormalLoginForm />
    </div>
  </section>
)

const Page = () => (
  <QueueAnim type="bottom" className="ui-animate">
    <div key="1">
      <SignIn />
    </div>
  </QueueAnim>
)


class NormalLoginForm extends Component {
  state = { ...INITIAL_STATE };

  onChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  handleSubmit = (e, signIn, client) => {
    localStorage.setItem('token', '');
    client.resetStore();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        signIn().then(async ({ data }) => {
          this.setState({ ...INITIAL_STATE });
          localStorage.setItem('token', data.signIn.token);
          await this.props.refetch();
          //this.props.history.push(routes.DASHBOARD);
          //this.props.history.push(DEMO.home2);
          history.push(routes.LANDING);

        });


      }
    });
    e.preventDefault();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { login, password } = this.state;
    const isInvalid = password === '' || login === '';

    return (
      <Mutation mutation={SIGN_IN} variables={{ login, password }}>
        {(signIn, { data, loading, error }) => (
          <ApolloConsumer>
            {client => (

              <section className="form-v1-container">
                <h2>Welcome to {APPCONFIG.brand}</h2>
                <p className="lead">Smart Agriculture</p>

                <Form onSubmit={event => this.handleSubmit(event, signIn, client)} className="form-v1">
                  {error ? (
                    <FormItem>
                      <Alert
                        message={"Error"}
                        description={error.message.replace('GraphQL error:','')}
                        type="error"
                        closable
                        onClose={onClose}
                      />
                    </FormItem>
                  ) : null}

                  <FormItem>
                    {getFieldDecorator('login2-username', {
                      rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                      <Input
                        name="login"
                        size="large"
                        placeholder="Username"
                        autoComplete=""
                        setfieldsvalue={login}
                        onChange={this.onChange}
                      />
                    )}
                  </FormItem>
                  <FormItem>
                    {getFieldDecorator('login2-password', {
                      rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                      <Input
                        name="password"
                        size="large"
                        type="password"
                        placeholder="Password"
                        autoComplete=""
                        setfieldsvalue={password}
                        onChange={this.onChange}
                      />
                    )}
                  </FormItem>
                  <FormItem className="form-v1__remember">
                    {getFieldDecorator('login2-remember', {
                      valuePropName: 'checked',
                      initialValue: true,
                    })(
                      <Checkbox>Remember me</Checkbox>
                    )}
                  </FormItem>
                  <FormItem>
                    <Button  disabled={isInvalid || loading} type="primary" htmlType="submit" className="btn-cta btn-block">
                      Log in
                    </Button>
                  </FormItem>
                </Form>
                <p className="additional-info">Dont have an account yet? <a href={DEMO.signUp}>Sign up</a></p>
                <p className="additional-info">Forgot your username or password? <a href={DEMO.forgotPassword}>Reset password</a></p>
              </section>

            )}

          </ApolloConsumer>
        )}
      </Mutation>
    );
  }
}

const WrappedNormalLoginForm = Form.create()(withRouter(NormalLoginForm));


export default Page;
export { WrappedNormalLoginForm };