web/flows: rework error display, always use ak-stage-flow-error instead of shell

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/flow/FlowExecutor.ts

@@ -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;
         }

web/src/flow/stages/FlowErrorStage.ts

@@ -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">

web/src/user/user-settings/details/UserSettingsFlowExecutor.ts

@@ -25,6 +25,7 @@ import {
     ChallengeTypes,
     CurrentTenant,
     FlowChallengeResponseRequest,
+    FlowErrorChallenge,
     FlowsApi,
     RedirectChallenge,
     ResponseError,
@@ -123,27 +124,13 @@ export class UserSettingsFlowExecutor extends AKElement implements StageHost {
         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;
     }
 
     globalRefresh(): void {