web/flows: rework error display, always use ak-stage-flow-error instead of shell
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
@ -10,6 +10,7 @@ import { first } from "@goauthentik/common/utils";
|
||||
import { WebsocketClient } from "@goauthentik/common/ws";
|
||||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
import "@goauthentik/elements/LoadingOverlay";
|
||||
import "@goauthentik/flow/stages/FlowErrorStage";
|
||||
import "@goauthentik/flow/stages/RedirectStage";
|
||||
import "@goauthentik/flow/stages/access_denied/AccessDeniedStage";
|
||||
// Import webauthn-related stages to prevent issues on safari
|
||||
@ -45,6 +46,7 @@ import {
|
||||
ChallengeTypes,
|
||||
CurrentTenant,
|
||||
FlowChallengeResponseRequest,
|
||||
FlowErrorChallenge,
|
||||
FlowsApi,
|
||||
LayoutEnum,
|
||||
RedirectChallenge,
|
||||
@ -107,10 +109,6 @@ export class FlowExecutor extends AKElement implements StageHost {
|
||||
:host {
|
||||
position: relative;
|
||||
}
|
||||
.ak-exception {
|
||||
font-family: monospace;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.pf-c-drawer__content {
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -254,27 +252,13 @@ export class FlowExecutor extends AKElement implements StageHost {
|
||||
} else if (error instanceof Error) {
|
||||
body = error.message;
|
||||
}
|
||||
this.challenge = {
|
||||
type: ChallengeChoices.Shell,
|
||||
body: `<header class="pf-c-login__main-header">
|
||||
<h1 class="pf-c-title pf-m-3xl">
|
||||
${t`Whoops!`}
|
||||
</h1>
|
||||
</header>
|
||||
<div class="pf-c-login__main-body">
|
||||
<h3>${t`Something went wrong! Please try again later.`}</h3>
|
||||
<pre class="ak-exception">${body}</pre>
|
||||
</div>
|
||||
<footer class="pf-c-login__main-footer">
|
||||
<ul class="pf-c-login__main-footer-links">
|
||||
<li class="pf-c-login__main-footer-links-item">
|
||||
<a class="pf-c-button pf-m-primary pf-m-block" href="/">
|
||||
${t`Return`}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>`,
|
||||
} as ChallengeTypes;
|
||||
const challenge: FlowErrorChallenge = {
|
||||
type: ChallengeChoices.Native,
|
||||
component: "ak-stage-flow-error",
|
||||
error: body,
|
||||
requestId: "",
|
||||
};
|
||||
this.challenge = challenge as ChallengeTypes;
|
||||
}
|
||||
|
||||
async renderChallengeNativeElement(): Promise<TemplateResult> {
|
||||
@ -395,6 +379,12 @@ export class FlowExecutor extends AKElement implements StageHost {
|
||||
.host=${this as StageHost}
|
||||
.challenge=${this.challenge}
|
||||
></ak-flow-provider-oauth2-code-finish>`;
|
||||
// Internal stages
|
||||
case "ak-stage-flow-error":
|
||||
return html`<ak-stage-flow-error
|
||||
.host=${this as StageHost}
|
||||
.challenge=${this.challenge}
|
||||
></ak-stage-flow-error>`;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
@ -4,9 +4,8 @@ import { BaseStage } from "@goauthentik/flow/stages/base";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
|
||||
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
||||
import PFForm from "@patternfly/patternfly/components/Form/form.css";
|
||||
@ -20,7 +19,23 @@ import { FlowChallengeResponseRequest, FlowErrorChallenge } from "@goauthentik/a
|
||||
@customElement("ak-stage-flow-error")
|
||||
export class FlowErrorStage extends BaseStage<FlowErrorChallenge, FlowChallengeResponseRequest> {
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, AKGlobal];
|
||||
return [
|
||||
PFBase,
|
||||
PFLogin,
|
||||
PFForm,
|
||||
PFFormControl,
|
||||
PFTitle,
|
||||
AKGlobal,
|
||||
css`
|
||||
pre {
|
||||
overflow-x: scroll;
|
||||
max-width: calc(
|
||||
35rem - var(--pf-c-login__main-body--PaddingRight) -
|
||||
var(--pf-c-login__main-body--PaddingRight)
|
||||
);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
@ -32,29 +47,22 @@ export class FlowErrorStage extends BaseStage<FlowErrorChallenge, FlowChallengeR
|
||||
</header>
|
||||
<div class="pf-c-login__main-body">
|
||||
<form class="pf-c-form">
|
||||
<ak-form-static
|
||||
class="pf-c-form__group"
|
||||
userAvatar="${this.challenge.pendingUserAvatar}"
|
||||
user=${this.challenge.pendingUser}
|
||||
>
|
||||
<div slot="link">
|
||||
<a href="${ifDefined(this.challenge.flowInfo?.cancelUrl)}"
|
||||
>${t`Not you?`}</a
|
||||
>
|
||||
</div>
|
||||
</ak-form-static>
|
||||
<div class="pf-c-form__group">
|
||||
<p>
|
||||
${this.challenge?.error
|
||||
? this.challenge.error
|
||||
: t`Something went wrong! Please try again later.`}
|
||||
</p>
|
||||
${this.challenge?.traceback
|
||||
? html`<pre class="ak-exception">
|
||||
${this.challenge.error}${this.challenge.traceback}</pre
|
||||
>`
|
||||
: html``}
|
||||
</div>
|
||||
<h3 class="pf-c-title pf-m-3xl">
|
||||
${this.challenge?.error
|
||||
? this.challenge.error
|
||||
: t`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>${t`Request ID`}</p>
|
||||
<code>${this.challenge.requestId}</code>
|
||||
</div>`
|
||||
: html``}
|
||||
</form>
|
||||
</div>
|
||||
<footer class="pf-c-login__main-footer">
|
||||
|
||||
Reference in New Issue
Block a user