From a090cb6b3ce102916c84670ce7ac8d93087119a3 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 10 Dec 2020 13:50:34 +0100
Subject: [PATCH] LoginButton: Don't show a logged-in/logged-out status during
login
In case the login process takes some time we would show a "login"
button which makes the user try to click it. There is a good chance
that aroudn that time we get logged in, so the click will log the user
out.
Avoid that by not showing anything during logging in.
---
packages/auth/src/login-button.js | 24 +++++++++++++++++++++++-
1 file changed, 23 insertions(+), 1 deletion(-)
diff --git a/packages/auth/src/login-button.js b/packages/auth/src/login-button.js
index ad6ea09f..435916e4 100644
--- a/packages/auth/src/login-button.js
+++ b/packages/auth/src/login-button.js
@@ -52,6 +52,17 @@ let loginSVG = `
</svg>
`;
+let loggingInSVG = `
+<svg
+ viewBox="0 0 100 100"
+ y="0px"
+ x="0px"
+ id="icon"
+ role="img"
+ version="1.1">
+</svg>
+`;
+
export class LoginButton extends ScopedElementsMixin(LitElement) {
constructor() {
@@ -77,6 +88,7 @@ export class LoginButton extends ScopedElementsMixin(LitElement) {
this._bus = new EventBus();
this._bus.subscribe('auth-update', (data) => {
+ console.log(data);
this._loginData = data;
});
}
@@ -153,7 +165,17 @@ export class LoginButton extends ScopedElementsMixin(LitElement) {
}
render() {
- if (this._loginData.status === LoginStatus.LOGGED_IN) {
+ if (this._loginData.status === LoginStatus.LOGGING_IN) {
+ // try to keep the layout the same to avoid layout shifts
+ return html`
+ <a href="#">
+ <div class="login-box login-button">
+ <div class="icon">${unsafeHTML(loggingInSVG)}</div>
+ <div class="label">​</div>
+ </div>
+ </a>
+ `;
+ } else if (this._loginData.status === LoginStatus.LOGGED_IN) {
return html`
<a href="#" @click="${this._onLogoutClicked}">
<div class="login-box login-button">
--
GitLab