forked from mystiq/hydrogen-web
Add spinner
Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
parent
82067ca6f5
commit
a5985cba2a
3 changed files with 11 additions and 3 deletions
|
@ -39,6 +39,7 @@ export class LoginViewModel extends ViewModel {
|
||||||
this._errorMessage = "";
|
this._errorMessage = "";
|
||||||
this._hideHomeserver = false;
|
this._hideHomeserver = false;
|
||||||
this._isBusy = false;
|
this._isBusy = false;
|
||||||
|
this._isFetchingLoginOptions = false;
|
||||||
this._createViewModels(this._homeserver);
|
this._createViewModels(this._homeserver);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -51,6 +52,7 @@ export class LoginViewModel extends ViewModel {
|
||||||
get cancelUrl() { return this.urlCreator.urlForSegment("session"); }
|
get cancelUrl() { return this.urlCreator.urlForSegment("session"); }
|
||||||
get loadViewModel() {return this._loadViewModel; }
|
get loadViewModel() {return this._loadViewModel; }
|
||||||
get isBusy() { return this._isBusy; }
|
get isBusy() { return this._isBusy; }
|
||||||
|
get isFetchingLoginOptions() { return this._isFetchingLoginOptions; }
|
||||||
|
|
||||||
async _createViewModels(homeserver) {
|
async _createViewModels(homeserver) {
|
||||||
if (this._loginToken) {
|
if (this._loginToken) {
|
||||||
|
@ -67,11 +69,15 @@ export class LoginViewModel extends ViewModel {
|
||||||
else {
|
else {
|
||||||
this._errorMessage = "";
|
this._errorMessage = "";
|
||||||
try {
|
try {
|
||||||
|
this._isFetchingLoginOptions = true;
|
||||||
|
this.emitChange("isFetchingLoginOptions");
|
||||||
this._loginOptions = await this._sessionContainer.queryLogin(homeserver);
|
this._loginOptions = await this._sessionContainer.queryLogin(homeserver);
|
||||||
}
|
}
|
||||||
catch (e) {
|
catch (e) {
|
||||||
this._loginOptions = null;
|
this._loginOptions = null;
|
||||||
}
|
}
|
||||||
|
this._isFetchingLoginOptions = false;
|
||||||
|
this.emitChange("isFetchingLoginOptions");
|
||||||
if (this._loginOptions) {
|
if (this._loginOptions) {
|
||||||
if (this._loginOptions.sso) { this._showSSOLogin(); }
|
if (this._loginOptions.sso) { this._showSSOLogin(); }
|
||||||
if (this._loginOptions.password) { this._showPasswordLogin(); }
|
if (this._loginOptions.password) { this._showPasswordLogin(); }
|
||||||
|
|
|
@ -54,15 +54,15 @@ limitations under the License.
|
||||||
padding: 0 0.4em 0.4em;
|
padding: 0 0.4em 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.SessionLoadStatusView {
|
.SessionLoadStatusView, .LoginView_query-spinner {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.SessionLoadStatusView> :not(:first-child) {
|
.SessionLoadStatusView> :not(:first-child), .LoginView_query-spinner> :not(:first-child) {
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.SessionLoadStatusView p {
|
.SessionLoadStatusView p, .LoginView_query-spinner p {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,6 +19,7 @@ import {hydrogenGithubLink} from "./common.js";
|
||||||
import {PasswordLoginView} from "./PasswordLoginView.js";
|
import {PasswordLoginView} from "./PasswordLoginView.js";
|
||||||
import {CompleteSSOView} from "./CompleteSSOView.js";
|
import {CompleteSSOView} from "./CompleteSSOView.js";
|
||||||
import {SessionLoadStatusView} from "./SessionLoadStatusView.js";
|
import {SessionLoadStatusView} from "./SessionLoadStatusView.js";
|
||||||
|
import {spinner} from "../common.js";
|
||||||
|
|
||||||
export class LoginView extends TemplateView {
|
export class LoginView extends TemplateView {
|
||||||
render(t, vm) {
|
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.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.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),
|
t.mapView(vm => vm.startSSOLoginViewModel, vm => vm ? new StartSSOLoginView(vm) : null),
|
||||||
|
|
Loading…
Reference in a new issue