add web stage for session end

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

authentik/flows/challenge.py

@@ -121,15 +121,19 @@ class FlowErrorChallenge(Challenge):
 class AccessDeniedChallenge(WithUserInfoChallenge):
     """Challenge when a flow's active stage calls `stage_invalid()`."""
 
-    error_message = CharField(required=False)
     component = CharField(default="ak-stage-access-denied")
 
+    error_message = CharField(required=False)
+
 
 class SessionEndChallenge(WithUserInfoChallenge):
     """Challenge for ending a session"""
 
     component = CharField(default="ak-stage-session-end")
 
+    application_name = CharField(required=True)
+    application_launch_url = CharField(required=False)
+
 
 class PermissionDict(TypedDict):
     """Consent Permission"""

schema.yml

@@ -40927,7 +40927,12 @@ components:
           type: string
         pending_user_avatar:
           type: string
+        application_name:
+          type: string
+        application_launch_url:
+          type: string
       required:
+      - application_name
       - pending_user
       - pending_user_avatar
       - type

web/src/flow/FlowExecutor.ts

@@ -392,6 +392,12 @@ export class FlowExecutor extends Interface implements StageHost {
                     .host=${this as StageHost}
                     .challenge=${this.challenge}
                 ></ak-flow-provider-oauth2-code-finish>`;
+            case "ak-stage-session-end":
+                await import("@goauthentik/flow/providers/SessionEnd");
+                return html`<ak-stage-session-end
+                    .host=${this as StageHost}
+                    .challenge=${this.challenge}
+                ></ak-stage-session-end>`;
             // Internal stages
             case "ak-stage-flow-error":
                 return html`<ak-stage-flow-error

web/src/flow/providers/SessionEnd.ts

@@ -0,0 +1,62 @@
+import { rootInterface } from "@goauthentik/elements/Base";
+import { BaseStage } from "@goauthentik/flow/stages/base";
+
+import { t } from "@lingui/macro";
+
+import { CSSResult, TemplateResult, html } from "lit";
+import { customElement } from "lit/decorators";
+
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import { SessionEndChallenge } from "@goauthentik/api";
+
+@customElement("ak-stage-session-end")
+export class SessionEnd extends BaseStage<SessionEndChallenge, unknown> {
+    static get styles(): CSSResult[] {
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton];
+    }
+
+    render(): TemplateResult {
+        if (!this.challenge) {
+            return html`<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>`;
+        }
+        const tenant = rootInterface()?.tenant;
+        return html`<header class="pf-c-login__main-header">
+                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+            </header>
+            <div class="pf-c-login__main-body">
+                <form class="pf-c-form">
+                    <p>
+                        ${t`You've logged out of ${this.challenge.applicationName}. You can go back to the overview to launch another application, or log out of your authentik account.`}
+                    </p>
+                    <a href="/" class="pf-c-button pf-m-primary"> ${t`Go back to overview`} </a>
+                    ${tenant && tenant.flowInvalidation
+                        ? html`
+                              <!-- TODO: don't construct URL here -->
+                              <a
+                                  href="/if/flow/${tenant.flowInvalidation}/"
+                                  class="pf-c-button pf-m-secondary"
+                              >
+                                  ${t`Log out of ${tenant.brandingTitle}`}
+                              </a>
+                          `
+                        : html``}
+                    ${this.challenge.applicationLaunchUrl
+                        ? html`
+                              <a
+                                  href="${this.challenge.applicationLaunchUrl}"
+                                  class="pf-c-button pf-m-secondary"
+                              >
+                                  ${t`Log back into ${this.challenge.applicationName}`}
+                              </a>
+                          `
+                        : html``}
+                </form>
+            </div>`;
+    }
+}