Handle external login errors

3 files changed, 17 insertions, 9 deletions

diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index b0639d8ca..a935c86c3 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -3,7 +3,11 @@
     Login
   </div>
 
-  <ng-container *ngIf="!isAuthenticatedWithExternalAuth">
+  <div class="alert alert-danger" i18n *ngIf="externalAuthError">
+    Sorry but there was an issue with the external login process. Please <a routerLink="/about">contact an administrator</a>.
+  </div>
+
+  <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
     <div class="alert alert-info" *ngIf="signupAllowed === false" role="alert">
       <h6 class="alert-heading" i18n>
         If you are looking for an account…
@@ -63,8 +67,8 @@
       <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0">
         <div class="block-title" i18n>Or sign in with</div>
 
-        <div class="external-login-block">
-          <a *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button">
+        <div>
+          <a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button">
             {{ auth.authDisplayName }}
           </a>
         </div>
diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss
index ccc98c12a..db9f78f7c 100644
--- a/client/src/app/login/login.component.scss
+++ b/client/src/app/login/login.component.scss
@@ -38,7 +38,6 @@ input[type=submit] {
   }
 
   .external-login-blocks {
-    padding: 0 10px 10px 10px;
     min-width: 200px;
 
     .block-title {
@@ -46,9 +45,12 @@ input[type=submit] {
     }
 
     .external-login-block {
+      @include disable-default-a-behaviour;
+
       cursor: pointer;
       border: 1px solid #d1d7e0;
       border-radius: 5px;
+      color: var(--mainForegroundColor);
       margin: 10px 10px 0 0;
       display: flex;
       justify-content: center;
@@ -59,11 +61,6 @@ input[type=submit] {
       &:hover {
         background-color: rgba(209, 215, 224, 0.5)
       }
-
-      a {
-        @include disable-default-a-behaviour;
-        color: var(--mainForegroundColor);
-      }
     }
   }
 }
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 5db8d3dbb..5d935cb49 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -23,7 +23,9 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
 
   error: string = null
   forgotPasswordEmail = ''
+
   isAuthenticatedWithExternalAuth = false
+  externalAuthError = false
   externalLogins: string[] = []
 
   private openedForgotPasswordModal: NgbModalRef
@@ -61,6 +63,11 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
       return
     }
 
+    if (snapshot.queryParams.externalAuthError) {
+      this.externalAuthError = true
+      return
+    }
+
     this.buildForm({
       username: this.loginValidatorsService.LOGIN_USERNAME,
       password: this.loginValidatorsService.LOGIN_PASSWORD