trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/flows: fix duplicate loading spinners when using webauthn 

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
Show Stats 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 = ""; flowSlug = "";
set loading(value: boolean) {
this.host.loading = value;
}
get loading(): boolean {
return this.host.loading;
}
@state() @state()
_selectedDeviceChallenge?: DeviceChallenge; _selectedDeviceChallenge?: DeviceChallenge;

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

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