habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/flows: fix duplicate loading spinners when using webauthn

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-12-26 15:14:39 +01:00
parent f246da6b73
commit d854d819d1
3 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
View File

@ -37,6 +37,13 @@ export class AuthenticatorValidateStage
{
flowSlug = "";
set loading(value: boolean) {
this.host.loading = value;
}
get loading(): boolean {
return this.host.loading;
}
@state()
_selectedDeviceChallenge?: DeviceChallenge;

30
web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
View File

@ -19,7 +19,6 @@ import {
DeviceChallenge,
} from "@goauthentik/api";
import { PFSize } from "../../../elements/Spinner";
import {
transformAssertionForServer,
transformCredentialRequestOptions,
@ -35,11 +34,8 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage<
@property({ attribute: false })
deviceChallenge?: DeviceChallenge;
@property({ type: Boolean })
authenticateRunning = false;
@property()
authenticateMessage = "";
authenticateMessage?: string;
@property({ type: Boolean })
showBackButton = false;
@ -101,31 +97,24 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage<
}
async authenticateWrapper(): Promise<void> {
if (this.authenticateRunning) {
if (this.host.loading) {
return;
}
this.authenticateRunning = true;
this.host.loading = true;
this.authenticate()
.catch((e) => {
console.error(e);
this.authenticateMessage = e.toString();
})
.finally(() => {
this.authenticateRunning = false;
this.host.loading = false;
});
}
render(): TemplateResult {
return html`<div class="pf-c-login__main-body">
${this.authenticateRunning
? html`<div class="pf-c-empty-state__content">
<div class="pf-l-bullseye">
<div class="pf-l-bullseye__item">
<ak-spinner size="${PFSize.XLarge}"></ak-spinner>
</div>
</div>
</div>`
: html` <div class="pf-c-form__group pf-m-action">
${this.authenticateMessage
? html`<div class="pf-c-form__group pf-m-action">
<p class="pf-m-block">${this.authenticateMessage}</p>
<button
class="pf-c-button pf-m-primary pf-m-block"
@ -135,7 +124,12 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage<
>
${t`Retry authentication`}
</button>
</div>`}
</div>`
: html`<div class="pf-c-form__group pf-m-action">
<p class="pf-m-block">&nbsp;</p>
<p class="pf-m-block">&nbsp;</p>
<p class="pf-m-block">&nbsp;</p>
</div> `}
</div>
<footer class="pf-c-login__main-footer">
<ul class="pf-c-login__main-footer-links">

1
web/src/flows/stages/base.ts
View File

@ -6,6 +6,7 @@ import { ErrorDetail } from "@goauthentik/api";
export interface StageHost {
challenge?: unknown;
flowSlug: string;
loading: boolean;
submit(payload: unknown): Promise<void>;
}