flows: migrate access denied message to webcompoennts

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

web/src/flows/FlowExecutor.ts

@@ -20,6 +20,7 @@ import "./stages/email/EmailStage";
 import "./stages/identification/IdentificationStage";
 import "./stages/password/PasswordStage";
 import "./stages/prompt/PromptStage";
+import "./access_denied/FlowAccessDenied";
 import { ShellChallenge, RedirectChallenge } from "../api/Flows";
 import { IdentificationChallenge } from "./stages/identification/IdentificationStage";
 import { PasswordChallenge } from "./stages/password/PasswordStage";
@@ -38,6 +39,7 @@ import { DEFAULT_CONFIG } from "../api/Config";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { until } from "lit-html/directives/until";
 import { TITLE_SUFFIX } from "../elements/router/RouterOutlet";
+import { AccessDeniedChallenge } from "./access_denied/FlowAccessDenied";
 
 @customElement("ak-flow-executor")
 export class FlowExecutor extends LitElement implements StageHost {
@@ -175,6 +177,8 @@ export class FlowExecutor extends LitElement implements StageHost {
                 return html`${unsafeHTML((this.challenge as ShellChallenge).body)}`;
             case ChallengeTypeEnum.Native:
                 switch (this.challenge.component) {
+                    case "ak-stage-access-denied":
+                        return html`<ak-stage-access-denied .host=${this} .challenge=${this.challenge as AccessDeniedChallenge}></ak-stage-access-denied>`;
                     case "ak-stage-identification":
                         return html`<ak-stage-identification .host=${this} .challenge=${this.challenge as IdentificationChallenge}></ak-stage-identification>`;
                     case "ak-stage-password":

web/src/flows/access_denied/FlowAccessDenied.ts

@@ -0,0 +1,82 @@
+import { Challenge } from "authentik-api";
+import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
+import { BaseStage } from "../stages/base";
+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 PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFList from "@patternfly/patternfly/components/List/list.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import AKGlobal from "../../authentik.css";
+import { gettext } from "django";
+
+import "../../elements/EmptyState";
+
+export interface AccessDeniedChallenge extends Challenge {
+    error_message?: string;
+    policy_result?: Record<string, unknown>;
+}
+
+@customElement("ak-stage-access-denied")
+export class FlowAccessDenied extends BaseStage {
+
+    @property({ attribute: false })
+    challenge?: AccessDeniedChallenge;
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle, AKGlobal];
+    }
+
+    render(): TemplateResult {
+        if (!this.challenge) {
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
+        }
+        return html`<header class="pf-c-login__main-header">
+                <h1 class="pf-c-title pf-m-3xl">
+                    ${this.challenge.title}
+                </h1>
+            </header>
+            <div class="pf-c-login__main-body">
+                <form method="POST" class="pf-c-form">
+                    <div class="pf-c-form__group">
+                        <p>
+                            <i class="pf-icon pf-icon-error-circle-o"></i>
+                            ${gettext("Request has been denied.")}
+                        </p>
+                        ${this.challenge?.error_message &&
+                            html`<hr>
+                            <p>${this.challenge.error_message}</p>`}
+                        ${this.challenge.policy_result &&
+                            html`<hr>
+                            <em>
+                                ${gettext("Explanation:")}
+                            </em>
+                            <ul class="pf-c-list">
+                                {% for source_result in policy_result.source_results %}
+                                <li>
+                                    {% blocktrans with name=source_result.source_policy.name result=source_result.passing %}
+                                    Policy '{{ name }}' returned result '{{ result }}'
+                                    {% endblocktrans %}
+                                    {% if source_result.messages %}
+                                    <ul class="pf-c-list">
+                                        {% for message in source_result.messages %}
+                                            <li>{{ message }}</li>
+                                        {% endfor %}
+                                    </ul>
+                                    {% endif %}
+                                </li>
+                                {% endfor %}
+                            </ul>`}
+                    </div>
+                </form>
+            </div>
+            <footer class="pf-c-login__main-footer">
+                <ul class="pf-c-login__main-footer-links">
+                </ul>
+            </footer>`;
+    }
+
+}