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

web/flow: fix form input rendering issue (#9297)

Browse Source 
* web/flows: fix form inputs empty after submit

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* handle fetch error

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* improve error stage ux

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2024-04-16 23:36:02 +02:00
committed by GitHub
parent 89c841b530
commit 444e0642d0
2 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/flow/FlowExecutor.ts
View File

@ -36,6 +36,7 @@ import {
ChallengeChoices,
ChallengeTypes,
ContextualFlowInfo,
FetchError,
FlowChallengeResponseRequest,
FlowErrorChallenge,
FlowLayoutEnum,
@ -205,7 +206,7 @@ export class FlowExecutor extends Interface implements StageHost {
}
return !this.challenge.responseErrors;
} catch (exc: unknown) {
this.errorMessage(exc as Error | ResponseError);
this.errorMessage(exc as Error | ResponseError | FetchError);
return false;
} finally {
this.loading = false;
@ -237,15 +238,17 @@ export class FlowExecutor extends Interface implements StageHost {
}
} catch (exc: unknown) {
// Catch JSON or Update errors
this.errorMessage(exc as Error | ResponseError);
this.errorMessage(exc as Error | ResponseError | FetchError);
} finally {
this.loading = false;
}
}
async errorMessage(error: Error | ResponseError): Promise<void> {
async errorMessage(error: Error | ResponseError | FetchError): Promise<void> {
let body = "";
if (error instanceof ResponseError) {
if (error instanceof FetchError) {
body = msg("Request failed. Please try again later.");
} else if (error instanceof ResponseError) {
body = await error.response.text();
} else if (error instanceof Error) {
body = error.message;
@ -415,7 +418,8 @@ export class FlowExecutor extends Interface implements StageHost {
async renderChallenge(): Promise<TemplateResult> {
if (!this.challenge) {
return html``;
return html`<ak-empty-state ?loading=${true} header=${msg("Loading")}>
</ak-empty-state>`;
}
switch (this.challenge.type) {
case ChallengeChoices.Redirect:
@ -431,23 +435,21 @@ export class FlowExecutor extends Interface implements StageHost {
return await this.renderChallengeNativeElement();
default:
console.debug(`authentik/flows: unexpected data type ${this.challenge.type}`);
break;
return html``;
}
return html``;
}
renderChallengeWrapper(): TemplateResult {
const logo = html`<div class="pf-c-login__main-header pf-c-brand ak-brand">
<img src="${first(this.brand?.brandingLogo, "")}" alt="authentik Logo" />
</div>`;
const fallbackLoadSpinner = html`<ak-empty-state ?loading=${true} header=${msg("Loading")}>
</ak-empty-state>`;
if (!this.challenge) {
return html`${logo}${fallbackLoadSpinner}`;
return html`${logo}<ak-empty-state ?loading=${true} header=${msg("Loading")}>
</ak-empty-state>`;
}
return html`
${this.loading ? html`<ak-loading-overlay></ak-loading-overlay>` : nothing} ${logo}
${until(this.renderChallenge(), fallbackLoadSpinner)}
${until(this.renderChallenge())}
`;
}

34
web/src/flow/stages/FlowErrorStage.ts
View File

@ -46,22 +46,26 @@ export class FlowErrorStage extends BaseStage<FlowErrorChallenge, FlowChallengeR
</header>
<div class="pf-c-login__main-body">
<form class="pf-c-form">
<h3 class="pf-c-title pf-m-3xl">
${this.challenge?.error
? this.challenge.error
<ak-empty-state
icon="fa-times"
header=${this.challenge.error
? html`${this.challenge.error}`
: msg("Something went wrong! Please try again later.")}
</h3>
${this.challenge?.traceback
? html`<div class="pf-c-form__group">
<pre class="ak-exception">${this.challenge.traceback}</pre>
</div>`
: html``}
${this.challenge?.requestId
? html`<div class="pf-c-form__group">
<p>${msg("Request ID")}</p>
<code>${this.challenge.requestId}</code>
</div>`
: html``}
>
<div slot="body">
${this.challenge?.traceback
? html`<div class="pf-c-form__group">
<pre class="ak-exception">${this.challenge.traceback}</pre>
</div>`
: html``}
${this.challenge?.requestId
? html`<div class="pf-c-form__group">
<p>${msg("Request ID")}</p>
<code>${this.challenge.requestId}</code>
</div>`
: html``}
</div>
</ak-empty-state>
</form>
</div>
<footer class="pf-c-login__main-footer">