diff --git a/src/domain/login/LoginViewModel.js b/src/domain/login/LoginViewModel.js index 74a8d67d..9a1b75df 100644 --- a/src/domain/login/LoginViewModel.js +++ b/src/domain/login/LoginViewModel.js @@ -39,6 +39,7 @@ export class LoginViewModel extends ViewModel { this._errorMessage = ""; this._hideHomeserver = false; this._isBusy = false; + this._isFetchingLoginOptions = false; this._createViewModels(this._homeserver); } @@ -51,6 +52,7 @@ export class LoginViewModel extends ViewModel { get cancelUrl() { return this.urlCreator.urlForSegment("session"); } get loadViewModel() {return this._loadViewModel; } get isBusy() { return this._isBusy; } + get isFetchingLoginOptions() { return this._isFetchingLoginOptions; } async _createViewModels(homeserver) { if (this._loginToken) { @@ -67,11 +69,15 @@ export class LoginViewModel extends ViewModel { else { this._errorMessage = ""; try { + this._isFetchingLoginOptions = true; + this.emitChange("isFetchingLoginOptions"); this._loginOptions = await this._sessionContainer.queryLogin(homeserver); } catch (e) { this._loginOptions = null; } + this._isFetchingLoginOptions = false; + this.emitChange("isFetchingLoginOptions"); if (this._loginOptions) { if (this._loginOptions.sso) { this._showSSOLogin(); } if (this._loginOptions.password) { this._showPasswordLogin(); } diff --git a/src/platform/web/ui/css/login.css b/src/platform/web/ui/css/login.css index 59a25799..ca376dee 100644 --- a/src/platform/web/ui/css/login.css +++ b/src/platform/web/ui/css/login.css @@ -54,15 +54,15 @@ limitations under the License. padding: 0 0.4em 0.4em; } -.SessionLoadStatusView { +.SessionLoadStatusView, .LoginView_query-spinner { display: flex; } -.SessionLoadStatusView> :not(:first-child) { +.SessionLoadStatusView> :not(:first-child), .LoginView_query-spinner> :not(:first-child) { margin-left: 12px; } -.SessionLoadStatusView p { +.SessionLoadStatusView p, .LoginView_query-spinner p { flex: 1; margin: 0; } diff --git a/src/platform/web/ui/login/LoginView.js b/src/platform/web/ui/login/LoginView.js index b44a67df..4b507567 100644 --- a/src/platform/web/ui/login/LoginView.js +++ b/src/platform/web/ui/login/LoginView.js @@ -19,6 +19,7 @@ import {hydrogenGithubLink} from "./common.js"; import {PasswordLoginView} from "./PasswordLoginView.js"; import {CompleteSSOView} from "./CompleteSSOView.js"; import {SessionLoadStatusView} from "./SessionLoadStatusView.js"; +import {spinner} from "../common.js"; export class LoginView extends TemplateView { render(t, vm) { @@ -41,6 +42,7 @@ export class LoginView extends TemplateView { }) ] )), + t.if(vm => vm.isFetchingLoginOptions, t => t.div({className: "LoginView_query-spinner"}, [spinner(t), t.p("Fetching available login options...")])), t.mapView(vm => vm.passwordLoginViewModel, vm => vm ? new PasswordLoginView(vm): null), t.if(vm => vm.passwordLoginViewModel && vm.startSSOLoginViewModel, t => t.p({className: "LoginView_separator"}, vm.i18n`or`)), t.mapView(vm => vm.startSSOLoginViewModel, vm => vm ? new StartSSOLoginView(vm) : null),