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

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

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