Fix: Stop Infinite spinning when login fails (#492)

* stop infinite spinning and display error

* add status text to localisation

* fix failing internationalization

src/app/views/authentication/Authentication.tsx

@@ -1,12 +1,13 @@
-import { Icon, Label, Spinner, SpinnerSize, styled } from 'office-ui-fabric-react';
+import { Icon, Label, MessageBarType, Spinner, SpinnerSize, styled } from 'office-ui-fabric-react';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { IAuthenticationProps } from '../../../types/authentication';
 import { Mode } from '../../../types/enums';
 import * as authActionCreators from '../../services/actions/auth-action-creators';
+import * as queryStatusActionCreators from '../../services/actions/query-status-action-creator';
 import { logIn } from '../../services/graph-client/msal-service';
 import { classNames } from '../classnames';
 import { showSignInButtonOrProfile } from './auth-util-components';
@@ -19,6 +20,9 @@ export class Authentication extends Component<IAuthenticationProps, { loginInPro
   }
 
   public signIn = async (): Promise<void> => {
+    const {
+      intl: { messages },
+    }: any = this.props;
     this.setState({ loginInProgress: true });
 
     const { mscc } = (window as any);
@@ -27,15 +31,25 @@ export class Authentication extends Component<IAuthenticationProps, { loginInPro
       mscc.setConsent();
     }
 
-    const authResponse = await logIn();
-    if (authResponse) {
+    try {
+      const authResponse = await logIn();
+      if (authResponse) {
+        this.setState({ loginInProgress: false });
+
+        this.props.actions!.signIn(authResponse.accessToken);
+        this.props.actions!.storeScopes(authResponse.scopes);
+      }
+    } catch (error) {
+      const { errorCode } = error;
+      this.props.actions!.setQueryResponseStatus({
+        ok: false,
+        statusText: messages['Authentication failed'],
+        status: errorCode.replace('_', ' '),
+        messageType: MessageBarType.error
+      });
       this.setState({ loginInProgress: false });
-
-      this.props.actions!.signIn(authResponse.accessToken);
-      this.props.actions!.storeScopes(authResponse.scopes);
     }
 
-    this.setState({ loginInProgress: false });
   };
 
   public render() {
@@ -94,12 +108,17 @@ function mapStateToProps(state: any) {
 
 function mapDispatchToProps(dispatch: Dispatch): object {
   return {
-    actions: bindActionCreators(authActionCreators, dispatch)
+    actions: bindActionCreators({
+      ...authActionCreators,
+      ...queryStatusActionCreators},
+      dispatch)
   };
 }
 
 // @ts-ignore
-const StyledAuthentication = styled(Authentication, authenticationStyles);
+const IntlAuthentication = injectIntl(Authentication);
+// @ts-ignore
+const StyledAuthentication = styled(IntlAuthentication, authenticationStyles);
 export default connect(
   mapStateToProps,
   mapDispatchToProps

src/messages/GE.json

@@ -295,6 +295,7 @@
   "see more queries":"See more queries in the",
   "Microsoft Graph API Reference docs": "Microsoft Graph API Reference docs.",
   "Fetching permissions": "Fetching permissions",
+  "Authentication failed": "Authentication failed",
   "view all permissions": "Select permissions",
   "Fetching code snippet": "Fetching code snippet",
   "Snippet not available": "Snippet not available",

src/types/authentication.ts

@@ -3,10 +3,14 @@ import { Mode } from './enums';
 
 export interface IAuthenticationProps {
   theme?: ITheme;
+  intl: {
+    message: object;
+  };
   styles?: object;
   actions?: {
     signIn: Function;
     storeScopes: Function;
+    setQueryResponseStatus: Function;
   };
   tokenPresent: boolean;
   mobileScreen: boolean;