From 5b947b3a083e567aadbb890bc1778f720b8d1426 Mon Sep 17 00:00:00 2001 From: Liam Westby Date: Tue, 16 Oct 2018 12:15:55 -0500 Subject: [PATCH] User feedback for SSO options check --- .../src/app/login/login.component.html | 10 +++ .../src/app/login/login.component.scss | 8 +++ .../prebuild/src/app/login/login.component.ts | 65 ++++++++++++------- frontend/prebuild/src/styles.scss | 6 +- 4 files changed, 66 insertions(+), 23 deletions(-) diff --git a/frontend/prebuild/src/app/login/login.component.html b/frontend/prebuild/src/app/login/login.component.html index ddfcb42..9cc6496 100644 --- a/frontend/prebuild/src/app/login/login.component.html +++ b/frontend/prebuild/src/app/login/login.component.html @@ -24,6 +24,16 @@
+
+ Checking for sign-in options... +
+
+ Some sign-in options are unavailable because they have not been configured +

or

diff --git a/frontend/prebuild/src/app/login/login.component.scss b/frontend/prebuild/src/app/login/login.component.scss index 3b63fe0..ceb24fe 100644 --- a/frontend/prebuild/src/app/login/login.component.scss +++ b/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%; } diff --git a/frontend/prebuild/src/app/login/login.component.ts b/frontend/prebuild/src/app/login/login.component.ts index f16f9e5..b4d363d 100644 --- a/frontend/prebuild/src/app/login/login.component.ts +++ b/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,7 +37,8 @@ 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; - isGoogleConfigured: boolean = false; + isSsoCheckComplete: boolean = false; + isGoogleConfigured: boolean = false; isGithubConfigured: boolean = false; isTwitterConfigured: boolean = false; @@ -71,7 +84,7 @@ export class LoginComponent implements OnInit, OnDestroy { this.setQueueOnMessage(); this.showQueue(queuePosition); } - + this.checkForSingleParty(); this.checkSsoOptions(); } @@ -91,39 +104,47 @@ export class LoginComponent implements OnInit, OnDestroy { loginTwitter() { window.location.href = `${environment.API_URL_AUTH}/auth-service/TwitterAuth`; } - + 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'); - return; + console.log('WARNING: Unable to contact auth service to determine SSO options'); + this.ngZone.run(() => { + this.isSsoCheckComplete = true; + }); + return; } - - console.log('Configured auth schemes: ' + JSON.stringify(data)); + + console.log('Configured auth schemes: ' + JSON.stringify(data)); this.ngZone.run(() => { - if (data.indexOf('TwitterAuth') > -1) { - this.isTwitterConfigured = true; - } - if (data.indexOf('GoogleAuth') > -1) { - this.isGoogleConfigured = true; - } - if (data.indexOf('GitHubAuth') > -1) { - this.isGithubConfigured = true; - } + if (data.indexOf('TwitterAuth') > -1) { + this.isTwitterConfigured = true; + } + if (data.indexOf('GoogleAuth') > -1) { + this.isGoogleConfigured = true; + } + if (data.indexOf('GitHubAuth') > -1) { + this.isGithubConfigured = true; + } + + this.isSsoCheckComplete = true; }); } - + async checkForSingleParty() { if (this.isSingleParty) { return; } - + let data: any = await this.http.get(`${environment.API_URL_PARTY}/describe`).toPromise(); if (data == null) { console.log('WARNING: Unable to contact party service to determine if single party mode is enabled'); return; } - + if (data.isSingleParty === true) { console.log('Single party mode enabled'); this.party = data.partyId; @@ -136,10 +157,10 @@ export class LoginComponent implements OnInit, OnDestroy { } async quickJoin() { - if (this.isSingleParty) { + if (this.isSingleParty) { this.joinParty(); return; - } + } // First get an unstarted round ID let roundID = await this.http.get(`${environment.API_URL_GAME_ROUND}/available`, { responseType: 'text' }).toPromise(); // Then join the round diff --git a/frontend/prebuild/src/styles.scss b/frontend/prebuild/src/styles.scss index 90e7f96..6703394 100644 --- a/frontend/prebuild/src/styles.scss +++ b/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; }