Login/LoginComponent.tsx

import React from 'react';
import './Login.css';
import { IonContent, IonRow, IonCol, IonPage, IonImg, IonItem, IonLabel, IonToast, IonLoading } from '@ionic/react';
// import "@codetrix-studio/capacitor-google-auth";
import { connect } from "react-redux";
import { fetchAuthDetails } from "../../redux/actions/LoginAction";
import { Plugins, NetworkStatus, registerWebPlugin } from '@capacitor/core';
import { OAuth2Client } from '@byteowls/capacitor-oauth2';
import { networkHelperAction } from "../../redux/actions/NetworkHelperAction";
// import { oauthLoginApi } from '../../core/constants/Constants';
import { User, UserDetails } from '../../core/types/AppStateType';
import { oauthLoginApi } from '../../core/constants/AuthConstants';
import Loading from '../../Loading';
import { deleteAll } from '../../services/indexedDb';
const { Network } = Plugins;
const { Device } = Plugins;


interface IProps {
  networkHelperAction: Function,
  fetchAuthDetails: Function,
  internetConnection: boolean,
  history: any,
  location: any,
  data: any,
  isErrorData: boolean,
  isLoginSuccess: boolean,
  errorMessage: string,
  isLoadingData: boolean
}

interface IState {
  isError: boolean,
  showErrMessage: string
}
/**
 * 
 * Login Module allows user to log in into Online Returns App. 
 * The online returns application will be accessed via the standard Morrisons google authentication service.
 * Only an authorised Morrisons user will be able to access the app. 
 @category Category
 */
class LoginComponent extends React.Component<IProps, IState>{

  oauth2Options: any;
  refreshToken: any;
  id_token: any;
  user!: User;
  platform: any;

  constructor(props: IProps) {
    super(props);

    this.state = {
      isError: false,
      showErrMessage: ''
    };
    this.getDeviceInfo();
    Network.addListener('networkStatusChange', (status: NetworkStatus) => {
      this.props.networkHelperAction(status.connected);
    });
  }

  /**
    Function invokes when user click on login with gmail and backend service gets called.
   */
  signIn() {
   // deleteAll();
    registerWebPlugin(OAuth2Client);
    this.oauth2Options = oauthLoginApi;
    Plugins.OAuth2Client.authenticate(
      this.oauth2Options
    ).then((response: any) => {
      this.id_token = response.id_token;
      if (this.id_token) {
        this.doLogin(this.id_token);
      }
    }).catch((reason: any) => {
    });
  }


  componentDidUpdate() {
    this.loginSuccess()
  }

  getDeviceInfo = () => {
    Device.getInfo().then((result: any) => {
      this.platform = result.platform;
    });
  }

  doLogin = (token: string) => {
    this.user = {
      grant_type: "password",
      id_token: token
    }
    this.props.fetchAuthDetails(this.user, this.platform);
  }

  /**
    * In this function,if user is valid and login successful 
    * then App redirects user to Store selection page. If Error then shows error message.
    */
  loginSuccess() {
    const getData = this.props.data;
    if (this.props.isLoginSuccess) {
      localStorage.setItem('state.auth.tokens', getData.access_token);
      this.props.history.push({
        pathname: '/store'
      })
    } else if (this.props.isErrorData) {
      this.setState({
        isError: this.props.isErrorData,
        showErrMessage: getData.errorMessage
      })
    }
  }

  render() {
    return (
      <IonPage>
        <IonContent className="ion-padding">
          <IonRow>
            <IonCol className="ion-text-center ">
              <IonImg className="custom-login-logo" src="assets/img/morrisons_logo_new.png"></IonImg>
            </IonCol>
          </IonRow>
          <IonRow>
            <IonCol>
              <IonItem className="custom-login-button-css" color="transparent" lines="none" onClick={() => this.signIn()}>
                <IonImg className="custom-login-glogo-size" src="assets/img/icons/googleLogo.png" />
                <IonLabel className="custom-label">&nbsp; <b>Login with gmail</b>   </IonLabel>
              </IonItem>

            </IonCol>
          </IonRow>
          <IonToast
            isOpen={this.state.isError}
            onDidDismiss={() => this.setState(() => ({ isError: false }))}
            message={this.state.showErrMessage}
            duration={3000}
          />
          <Loading isLoadingData={this.props.isLoadingData} duration={4000}></Loading>
        </IonContent>
      </IonPage>
    )
  }
}

const mapStateToProps = (state: any) => {
  return {
    data: state.auth.data,
    isLoadingData: state.auth.isLoadingData,
    isErrorData: state.auth.isErrorData,
    errorMessage: state.auth.isErrorData,
    isLoginSuccess: state.auth.isLoginSuccess,
    internetConnection: state.uiState.internetConnection,
  };
}

const mapDispatchToProps = {
  networkHelperAction,
  fetchAuthDetails
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LoginComponent);