User feedback for SSO options check

frontend/prebuild/src/app/login/login.component.html

@@ -24,6 +24,16 @@
             <div class="form-item">
               <button type="button" (click)="loginTwitter()" [disabled]="!isTwitterConfigured">Sign in with Twitter</button>
             </div>
+            <div class="caption"
+                  *ngIf="!isSsoCheckComplete"
+                  [@sso]="isSsoCheckComplete">
+              Checking for sign-in options...
+            </div>
+            <div class="caption"
+                  *ngIf="isSsoCheckComplete && (!isGoogleConfigured || !isGithubConfigured || !isTwitterConfigured)"
+                  [@sso]="isSsoCheckComplete">
+              Some sign-in options are unavailable because they have not been configured
+            </div>
             <h2 *ngIf="isFullDevice" class="section-header">or</h2>
             <div *ngIf="isFullDevice" class="form-item">
               <button type="button" (click)="hostRound()">Host Round</button>

frontend/prebuild/src/app/login/login.component.scss

@@ -129,6 +129,14 @@ h2 {
   color: white;
 }
 
+.caption {
+  color: #ccc;
+  font-style: italic;
+  font-size: .7em;
+  text-align: center;
+  padding-bottom: 10px;
+}
+
 .slider {
   width: 100%;
 }

frontend/prebuild/src/app/login/login.component.ts

@@ -12,7 +12,19 @@ import { Player } from '../entity/player';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  styleUrls: ['./login.component.scss'],
+  animations: [
+    trigger('sso', [
+      transition(':enter', [
+        style({height: '0', opacity: 0, 'padding-bottom': 0}),
+        animate('300ms', style({height: '*', opacity: 1, 'padding-bottom': '*'}))
+      ]),
+      transition(':leave', [
+        style({height: '*', opacity: 1, 'padding-bottom' : '*'}),
+        animate('300ms', style({height: '0', opacity: 0, 'padding-bottom': 0}))
+      ])
+    ])
+  ]
 })
 export class LoginComponent implements OnInit, OnDestroy {
   static queueCallback: EventSourcePolyfill;
@@ -25,6 +37,7 @@ export class LoginComponent implements OnInit, OnDestroy {
   isFullDevice: boolean = !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
   isQuickPlayAllowed: boolean = this.isFullDevice;
   isSingleParty: boolean = false;
+  isSsoCheckComplete: boolean = false;
   isGoogleConfigured: boolean = false;
   isGithubConfigured: boolean = false;
   isTwitterConfigured: boolean = false;
@@ -93,9 +106,15 @@ export class LoginComponent implements OnInit, OnDestroy {
   }
 
   async checkSsoOptions() {
+    // Delay to give users enough time to read the check text
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
     let data: any = await this.http.get(`${environment.API_URL_AUTH}/auth-service`).toPromise();
     if (data == null) {
       console.log('WARNING: Unable to contact auth service to determine SSO options');
+      this.ngZone.run(() => {
+        this.isSsoCheckComplete = true;
+      });
       return;
     }
 
@@ -110,6 +129,8 @@ export class LoginComponent implements OnInit, OnDestroy {
       if (data.indexOf('GitHubAuth') > -1) {
         this.isGithubConfigured = true;
       }
+
+      this.isSsoCheckComplete = true;
     });
   }
 

frontend/prebuild/src/styles.scss

@@ -35,7 +35,11 @@ button {
   transition: all 0.3s ease-in-out;
 }
 
-button:hover {
+button:disabled {
+  opacity: 0.5;
+}
+
+button:hover:enabled {
   text-shadow: 0 0 5px #fff;
 }