flows/layouts (#2867)

2022-05-16 01:10:23 +02:00
parent 699d3ca067
commit 333e58ce2f
30 changed files with 462 additions and 4 deletions
--- a/web/src/assets/images/flow_background.jpg
+++ b/web/src/assets/images/flow_background.jpg
--- a/web/src/flows/FlowExecutor.ts
+++ b/web/src/flows/FlowExecutor.ts
@ -20,6 +20,7 @@ import {
    CurrentTenant,
    FlowChallengeResponseRequest,
    FlowsApi,
+    LayoutEnum,
    RedirectChallenge,
    ShellChallenge,
 } from "@goauthentik/api";
@ -38,6 +39,14 @@ import "./stages/captcha/CaptchaStage";
 import "./stages/identification/IdentificationStage";
 import "./stages/password/PasswordStage";

+export interface FlowWindow extends Window {
+    authentik: {
+        flow: {
+            layout: LayoutEnum;
+        };
+    };
+}
+
@customElement("ak-flow-executor")
 export class FlowExecutor extends LitElement implements StageHost {
    flowSlug?: string;
@ -100,6 +109,44 @@ export class FlowExecutor extends LitElement implements StageHost {
            .pf-c-drawer__content {
                background-color: transparent;
            }
+            /* layouts */
+            .pf-c-login__container.content-right {
+                grid-template-areas:
+                    "header main"
+                    "footer main"
+                    ". main";
+            }
+            .pf-c-login.sidebar_left {
+                justify-content: flex-start;
+                padding-top: 0;
+                padding-bottom: 0;
+            }
+            .pf-c-login.sidebar_left .ak-login-container,
+            .pf-c-login.sidebar_right .ak-login-container {
+                height: 100vh;
+                background-color: var(--pf-c-login__main--BackgroundColor);
+                padding-left: var(--pf-global--spacer--lg);
+                padding-right: var(--pf-global--spacer--lg);
+            }
+            .pf-c-login.sidebar_left .pf-c-list,
+            .pf-c-login.sidebar_right .pf-c-list {
+                color: #000;
+            }
+            @media (prefers-color-scheme: dark) {
+                .pf-c-login.sidebar_left .ak-login-container,
+                .pf-c-login.sidebar_right .ak-login-container {
+                    background-color: var(--ak-dark-background);
+                }
+                .pf-c-login.sidebar_left .pf-c-list,
+                .pf-c-login.sidebar_right .pf-c-list {
+                    color: var(--ak-dark-foreground);
+                }
+            }
+            .pf-c-login.sidebar_right {
+                justify-content: flex-end;
+                padding-top: 0;
+                padding-bottom: 0;
+            }
        `);
    }

@ -372,6 +419,27 @@ export class FlowExecutor extends LitElement implements StageHost {
        ></ak-flow-inspector>`;
    }

+    getLayout(): string {
+        const prefilledFlow = (window as unknown as FlowWindow).authentik.flow.layout;
+        if (this.challenge) {
+            return this.challenge?.flowInfo?.layout || prefilledFlow;
+        }
+        return prefilledFlow;
+    }
+
+    getLayoutClass(): string {
+        const layout = this.getLayout();
+        switch (layout) {
+            case LayoutEnum.ContentLeft:
+                return "pf-c-login__container";
+            case LayoutEnum.ContentRight:
+                return "pf-c-login__container content-right";
+            case LayoutEnum.Stacked:
+            default:
+                return "ak-login-container";
+        }
+    }
+
    render(): TemplateResult {
        return html`<div class="pf-c-background-image">
                <svg
@ -409,8 +477,8 @@ export class FlowExecutor extends LitElement implements StageHost {
                    <div class="pf-c-drawer__main">
                        <div class="pf-c-drawer__content">
                            <div class="pf-c-drawer__body">
-                                <div class="pf-c-login">
-                                    <div class="ak-login-container">
+                                <div class="pf-c-login ${this.getLayout()}">
+                                    <div class="${this.getLayoutClass()}">
                                        <header class="pf-c-login__header">
                                            <div class="pf-c-brand ak-brand">
                                                <img
--- a/web/src/locales/de.po
+++ b/web/src/locales/de.po
@ -1146,6 +1146,14 @@ msgstr "Schlüssel"
 msgid "Consumer secret"
 msgstr "Geheimniss"

+#: src/pages/flows/utils.ts
+msgid "Content left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Content right"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
@ -2792,6 +2800,10 @@ msgstr "Starten"
 msgid "Launch URL"
 msgstr "Start URL"

+#: src/pages/flows/FlowForm.ts
+msgid "Layout"
+msgstr ""
+
 #: src/pages/stages/identification/IdentificationStageForm.ts
 msgid "Let the user identify themselves with their username or Email address."
 msgstr "Lassen Sie den Benutzer sich mit seinem Benutzernamen oder seiner E-Mail-Adresse identifizieren."
@ -4623,6 +4635,14 @@ msgstr "Bezeichnungen der Quellen anzeigen"
 msgid "Shown as the Title in Flow pages."
 msgstr "Wird als Titel auf den Ablaufseiten angezeigt."

+#: src/pages/flows/utils.ts
+msgid "Sidebar left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Sidebar right"
+msgstr ""
+
 #: src/flows/stages/identification/IdentificationStage.ts
 msgid "Sign up."
 msgstr "Anmelden."
@ -4705,6 +4725,10 @@ msgstr "Spanisch"
 msgid "Specify multiple server URIs by separating them with a comma."
 msgstr "Geben Sie mehrere Server-URIs an, indem Sie sie durch ein Komma trennen."

+#: src/pages/flows/utils.ts
+msgid "Stacked"
+msgstr ""
+
 #: src/pages/flows/BoundStagesList.ts
 #: src/pages/flows/StageBindingForm.ts
 msgid "Stage"
--- a/web/src/locales/en.po
+++ b/web/src/locales/en.po
@ -1155,6 +1155,14 @@ msgstr "Consumer key"
 msgid "Consumer secret"
 msgstr "Consumer secret"

+#: src/pages/flows/utils.ts
+msgid "Content left"
+msgstr "Content left"
+
+#: src/pages/flows/utils.ts
+msgid "Content right"
+msgstr "Content right"
+
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
@ -2843,6 +2851,10 @@ msgstr "Launch"
 msgid "Launch URL"
 msgstr "Launch URL"

+#: src/pages/flows/FlowForm.ts
+msgid "Layout"
+msgstr "Layout"
+
 #: src/pages/stages/identification/IdentificationStageForm.ts
 msgid "Let the user identify themselves with their username or Email address."
 msgstr "Let the user identify themselves with their username or Email address."
@ -4711,6 +4723,14 @@ msgstr "Show sources' labels"
 msgid "Shown as the Title in Flow pages."
 msgstr "Shown as the Title in Flow pages."

+#: src/pages/flows/utils.ts
+msgid "Sidebar left"
+msgstr "Sidebar left"
+
+#: src/pages/flows/utils.ts
+msgid "Sidebar right"
+msgstr "Sidebar right"
+
 #: src/flows/stages/identification/IdentificationStage.ts
 msgid "Sign up."
 msgstr "Sign up."
@ -4799,6 +4819,10 @@ msgstr "Spanish"
 msgid "Specify multiple server URIs by separating them with a comma."
 msgstr "Specify multiple server URIs by separating them with a comma."

+#: src/pages/flows/utils.ts
+msgid "Stacked"
+msgstr "Stacked"
+
 #: src/pages/flows/BoundStagesList.ts
 #: src/pages/flows/StageBindingForm.ts
 msgid "Stage"
--- a/web/src/locales/es.po
+++ b/web/src/locales/es.po
@ -1137,6 +1137,14 @@ msgstr "Clave de consumidor"
 msgid "Consumer secret"
 msgstr "Secreto del consumidor"

+#: src/pages/flows/utils.ts
+msgid "Content left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Content right"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
@ -2785,6 +2793,10 @@ msgstr "Lanzamiento"
 msgid "Launch URL"
 msgstr "URL de lanzamiento"

+#: src/pages/flows/FlowForm.ts
+msgid "Layout"
+msgstr ""
+
 #: src/pages/stages/identification/IdentificationStageForm.ts
 msgid "Let the user identify themselves with their username or Email address."
 msgstr "Permite que el usuario se identifique con su nombre de usuario o dirección de correo electrónico."
@ -4616,6 +4628,14 @@ msgstr "Mostrar etiquetas de fuentes"
 msgid "Shown as the Title in Flow pages."
 msgstr "Se muestra como título en las páginas de flujo."

+#: src/pages/flows/utils.ts
+msgid "Sidebar left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Sidebar right"
+msgstr ""
+
 #: src/flows/stages/identification/IdentificationStage.ts
 msgid "Sign up."
 msgstr "Inscríbete."
@ -4698,6 +4718,10 @@ msgstr ""
 msgid "Specify multiple server URIs by separating them with a comma."
 msgstr "Especifique los URI de varios servidores separándolos con una coma."

+#: src/pages/flows/utils.ts
+msgid "Stacked"
+msgstr ""
+
 #: src/pages/flows/BoundStagesList.ts
 #: src/pages/flows/StageBindingForm.ts
 msgid "Stage"
--- a/web/src/locales/fr_FR.po
+++ b/web/src/locales/fr_FR.po
@ -1148,6 +1148,14 @@ msgstr "Clé consumer"
 msgid "Consumer secret"
 msgstr "Secret consumer"

+#: src/pages/flows/utils.ts
+msgid "Content left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Content right"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
@ -2816,6 +2824,10 @@ msgstr "Lancer"
 msgid "Launch URL"
 msgstr "URL de lancement"

+#: src/pages/flows/FlowForm.ts
+msgid "Layout"
+msgstr ""
+
 #: src/pages/stages/identification/IdentificationStageForm.ts
 msgid "Let the user identify themselves with their username or Email address."
 msgstr "Laisser l'utilisateur s'identifier lui-même avec son nom d'utilisateur ou son adresse e-mail."
@ -4665,6 +4677,14 @@ msgstr ""
 msgid "Shown as the Title in Flow pages."
 msgstr "Afficher comme Titre dans les pages de Flux."

+#: src/pages/flows/utils.ts
+msgid "Sidebar left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Sidebar right"
+msgstr ""
+
 #: src/flows/stages/identification/IdentificationStage.ts
 msgid "Sign up."
 msgstr "S'enregistrer."
@ -4751,6 +4771,10 @@ msgstr ""
 msgid "Specify multiple server URIs by separating them with a comma."
 msgstr ""

+#: src/pages/flows/utils.ts
+msgid "Stacked"
+msgstr ""
+
 #: src/pages/flows/BoundStagesList.ts
 #: src/pages/flows/StageBindingForm.ts
 msgid "Stage"
--- a/web/src/locales/pl.po
+++ b/web/src/locales/pl.po
@ -1134,6 +1134,14 @@ msgstr "Klucz klienta"
 msgid "Consumer secret"
 msgstr "Sekret klienta"

+#: src/pages/flows/utils.ts
+msgid "Content left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Content right"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
@ -2782,6 +2790,10 @@ msgstr "Uruchom"
 msgid "Launch URL"
 msgstr "URL uruchamiania"

+#: src/pages/flows/FlowForm.ts
+msgid "Layout"
+msgstr ""
+
 #: src/pages/stages/identification/IdentificationStageForm.ts
 msgid "Let the user identify themselves with their username or Email address."
 msgstr "Pozwól użytkownikowi identyfikować się za pomocą swojej nazwy użytkownika lub adresu e-mail."
@ -4613,6 +4625,14 @@ msgstr "Pokaż etykiety źródeł"
 msgid "Shown as the Title in Flow pages."
 msgstr "Wyświetlany jako tytuł na stronach przepływu."

+#: src/pages/flows/utils.ts
+msgid "Sidebar left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Sidebar right"
+msgstr ""
+
 #: src/flows/stages/identification/IdentificationStage.ts
 msgid "Sign up."
 msgstr "Zapisz się."
@ -4695,6 +4715,10 @@ msgstr "Hiszpański"
 msgid "Specify multiple server URIs by separating them with a comma."
 msgstr "Określ wiele identyfikatorów URI serwera, oddzielając je przecinkami."

+#: src/pages/flows/utils.ts
+msgid "Stacked"
+msgstr ""
+
 #: src/pages/flows/BoundStagesList.ts
 #: src/pages/flows/StageBindingForm.ts
 msgid "Stage"
--- a/web/src/locales/pseudo-LOCALE.po
+++ b/web/src/locales/pseudo-LOCALE.po
@ -1143,6 +1143,14 @@ msgstr ""
 msgid "Consumer secret"
 msgstr ""

+#: src/pages/flows/utils.ts
+msgid "Content left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Content right"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
@ -2825,6 +2833,10 @@ msgstr ""
 msgid "Launch URL"
 msgstr ""

+#: src/pages/flows/FlowForm.ts
+msgid "Layout"
+msgstr ""
+
 #: src/pages/stages/identification/IdentificationStageForm.ts
 msgid "Let the user identify themselves with their username or Email address."
 msgstr ""
@ -4691,6 +4703,14 @@ msgstr ""
 msgid "Shown as the Title in Flow pages."
 msgstr ""

+#: src/pages/flows/utils.ts
+msgid "Sidebar left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Sidebar right"
+msgstr ""
+
 #: src/flows/stages/identification/IdentificationStage.ts
 msgid "Sign up."
 msgstr ""
@ -4779,6 +4799,10 @@ msgstr ""
 msgid "Specify multiple server URIs by separating them with a comma."
 msgstr ""

+#: src/pages/flows/utils.ts
+msgid "Stacked"
+msgstr ""
+
 #: src/pages/flows/BoundStagesList.ts
 #: src/pages/flows/StageBindingForm.ts
 msgid "Stage"
--- a/web/src/locales/tr.po
+++ b/web/src/locales/tr.po
@ -1137,6 +1137,14 @@ msgstr "Tüketici anahtarı"
 msgid "Consumer secret"
 msgstr "Tüketici sırrı"

+#: src/pages/flows/utils.ts
+msgid "Content left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Content right"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
@ -2786,6 +2794,10 @@ msgstr "Eriş"
 msgid "Launch URL"
 msgstr "URL Başlat"

+#: src/pages/flows/FlowForm.ts
+msgid "Layout"
+msgstr ""
+
 #: src/pages/stages/identification/IdentificationStageForm.ts
 msgid "Let the user identify themselves with their username or Email address."
 msgstr "Kullanıcının kullanıcı adı veya E-posta adresi ile kendilerini tanımlamasına izin verin."
@ -4618,6 +4630,14 @@ msgstr "Kaynakların etiketlerini göster"
 msgid "Shown as the Title in Flow pages."
 msgstr "Akış sayfalarında Başlık olarak gösterilir."

+#: src/pages/flows/utils.ts
+msgid "Sidebar left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Sidebar right"
+msgstr ""
+
 #: src/flows/stages/identification/IdentificationStage.ts
 msgid "Sign up."
 msgstr "Kaydolun."
@ -4700,6 +4720,10 @@ msgstr ""
 msgid "Specify multiple server URIs by separating them with a comma."
 msgstr "Birden çok sunucu URI'lerini virgülle ayırarak belirtin."

+#: src/pages/flows/utils.ts
+msgid "Stacked"
+msgstr ""
+
 #: src/pages/flows/BoundStagesList.ts
 #: src/pages/flows/StageBindingForm.ts
 msgid "Stage"
--- a/web/src/locales/zh-Hans.po
+++ b/web/src/locales/zh-Hans.po
@ -1132,6 +1132,14 @@ msgstr "消费者 Key"
 msgid "Consumer secret"
 msgstr "消费者 Secret"

+#: src/pages/flows/utils.ts
+msgid "Content left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Content right"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
@ -2770,6 +2778,10 @@ msgstr "启动"
 msgid "Launch URL"
 msgstr "启动 URL"

+#: src/pages/flows/FlowForm.ts
+msgid "Layout"
+msgstr ""
+
 #: src/pages/stages/identification/IdentificationStageForm.ts
 msgid "Let the user identify themselves with their username or Email address."
 msgstr "让用户使用用户名或电子邮件地址来标识自己。"
@ -4582,6 +4594,14 @@ msgstr "显示源的标签"
 msgid "Shown as the Title in Flow pages."
 msgstr "显示为流程页面中的标题。"

+#: src/pages/flows/utils.ts
+msgid "Sidebar left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Sidebar right"
+msgstr ""
+
 #: src/flows/stages/identification/IdentificationStage.ts
 msgid "Sign up."
 msgstr "注册。"
@ -4664,6 +4684,10 @@ msgstr "西班牙语"
 msgid "Specify multiple server URIs by separating them with a comma."
 msgstr "通过用逗号分隔多个服务器 URI 来指定它们。"

+#: src/pages/flows/utils.ts
+msgid "Stacked"
+msgstr ""
+
 #: src/pages/flows/BoundStagesList.ts
 #: src/pages/flows/StageBindingForm.ts
 msgid "Stage"
--- a/web/src/locales/zh-Hant.po
+++ b/web/src/locales/zh-Hant.po
@ -1134,6 +1134,14 @@ msgstr "消费者密钥"
 msgid "Consumer secret"
 msgstr "消费者机密"

+#: src/pages/flows/utils.ts
+msgid "Content left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Content right"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
@ -2772,6 +2780,10 @@ msgstr "启动"
 msgid "Launch URL"
 msgstr "启动 URL"

+#: src/pages/flows/FlowForm.ts
+msgid "Layout"
+msgstr ""
+
 #: src/pages/stages/identification/IdentificationStageForm.ts
 msgid "Let the user identify themselves with their username or Email address."
 msgstr "让用户使用其用户名或电子邮件地址来标识自己。"
@ -4586,6 +4598,14 @@ msgstr "显示源的标签"
 msgid "Shown as the Title in Flow pages."
 msgstr "显示为 “Flow” 页面中的标题。"

+#: src/pages/flows/utils.ts
+msgid "Sidebar left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Sidebar right"
+msgstr ""
+
 #: src/flows/stages/identification/IdentificationStage.ts
 msgid "Sign up."
 msgstr "注册。"
@ -4668,6 +4688,10 @@ msgstr "西班牙的"
 msgid "Specify multiple server URIs by separating them with a comma."
 msgstr "通过用逗号分隔多个服务器 URI 来指定它们。"

+#: src/pages/flows/utils.ts
+msgid "Stacked"
+msgstr ""
+
 #: src/pages/flows/BoundStagesList.ts
 #: src/pages/flows/StageBindingForm.ts
 msgid "Stage"
--- a/web/src/locales/zh_TW.po
+++ b/web/src/locales/zh_TW.po
@ -1134,6 +1134,14 @@ msgstr "消费者密钥"
 msgid "Consumer secret"
 msgstr "消费者机密"

+#: src/pages/flows/utils.ts
+msgid "Content left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Content right"
+msgstr ""
+
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
 #: src/pages/events/EventInfo.ts
@ -2772,6 +2780,10 @@ msgstr "启动"
 msgid "Launch URL"
 msgstr "启动 URL"

+#: src/pages/flows/FlowForm.ts
+msgid "Layout"
+msgstr ""
+
 #: src/pages/stages/identification/IdentificationStageForm.ts
 msgid "Let the user identify themselves with their username or Email address."
 msgstr "让用户使用其用户名或电子邮件地址来标识自己。"
@ -4586,6 +4598,14 @@ msgstr "显示源的标签"
 msgid "Shown as the Title in Flow pages."
 msgstr "显示为 “Flow” 页面中的标题。"

+#: src/pages/flows/utils.ts
+msgid "Sidebar left"
+msgstr ""
+
+#: src/pages/flows/utils.ts
+msgid "Sidebar right"
+msgstr ""
+
 #: src/flows/stages/identification/IdentificationStage.ts
 msgid "Sign up."
 msgstr "注册。"
@ -4668,6 +4688,10 @@ msgstr "西班牙的"
 msgid "Specify multiple server URIs by separating them with a comma."
 msgstr "通过用逗号分隔多个服务器 URI 来指定它们。"

+#: src/pages/flows/utils.ts
+msgid "Stacked"
+msgstr ""
+
 #: src/pages/flows/BoundStagesList.ts
 #: src/pages/flows/StageBindingForm.ts
 msgid "Stage"
--- a/web/src/pages/flows/FlowForm.ts
+++ b/web/src/pages/flows/FlowForm.ts
@ -10,6 +10,7 @@ import {
    Flow,
    FlowDesignationEnum,
    FlowsApi,
+    LayoutEnum,
    PolicyEngineMode,
 } from "@goauthentik/api";

@ -17,7 +18,7 @@ import { DEFAULT_CONFIG, config } from "../../api/Config";
 import "../../elements/forms/HorizontalFormElement";
 import { ModelForm } from "../../elements/forms/ModelForm";
 import { first } from "../../utils";
-import { DesignationToLabel } from "./utils";
+import { DesignationToLabel, LayoutToLabel } from "./utils";

@customElement("ak-flow-form")
 export class FlowForm extends ModelForm<Flow, string> {
@ -118,6 +119,41 @@ export class FlowForm extends ModelForm<Flow, string> {
        `;
    }

+    renderLayout(): TemplateResult {
+        return html`
+            <option
+                value=${LayoutEnum.Stacked}
+                ?selected=${this.instance?.layout === LayoutEnum.Stacked}
+            >
+                ${LayoutToLabel(LayoutEnum.Stacked)}
+            </option>
+            <option
+                value=${LayoutEnum.ContentLeft}
+                ?selected=${this.instance?.layout === LayoutEnum.ContentLeft}
+            >
+                ${LayoutToLabel(LayoutEnum.ContentLeft)}
+            </option>
+            <option
+                value=${LayoutEnum.ContentRight}
+                ?selected=${this.instance?.layout === LayoutEnum.ContentRight}
+            >
+                ${LayoutToLabel(LayoutEnum.ContentRight)}
+            </option>
+            <option
+                value=${LayoutEnum.SidebarLeft}
+                ?selected=${this.instance?.layout === LayoutEnum.SidebarLeft}
+            >
+                ${LayoutToLabel(LayoutEnum.SidebarLeft)}
+            </option>
+            <option
+                value=${LayoutEnum.SidebarRight}
+                ?selected=${this.instance?.layout === LayoutEnum.SidebarRight}
+            >
+                ${LayoutToLabel(LayoutEnum.SidebarRight)}
+            </option>
+        `;
+    }
+
    renderForm(): TemplateResult {
        return html`<form class="pf-c-form pf-m-horizontal">
            <ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
@ -181,6 +217,11 @@ export class FlowForm extends ModelForm<Flow, string> {
                    ${t`Decides what this Flow is used for. For example, the Authentication flow is redirect to when an un-authenticated user visits authentik.`}
                </p>
            </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${t`Layout`} ?required=${true} name="layout">
+                <select class="pf-c-form-control">
+                    ${this.renderLayout()}
+                </select>
+            </ak-form-element-horizontal>
            ${until(
                config().then((c) => {
                    if (c.capabilities.includes(CapabilitiesEnum.SaveMedia)) {
--- a/web/src/pages/flows/utils.ts
+++ b/web/src/pages/flows/utils.ts
@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";

-import { FlowDesignationEnum } from "@goauthentik/api";
+import { FlowDesignationEnum, LayoutEnum } from "@goauthentik/api";

 export function DesignationToLabel(designation: FlowDesignationEnum): string {
    switch (designation) {
@ -20,3 +20,18 @@ export function DesignationToLabel(designation: FlowDesignationEnum): string {
            return t`Unenrollment`;
    }
 }
+
+export function LayoutToLabel(layout: LayoutEnum): string {
+    switch (layout) {
+        case LayoutEnum.Stacked:
+            return t`Stacked`;
+        case LayoutEnum.ContentLeft:
+            return t`Content left`;
+        case LayoutEnum.ContentRight:
+            return t`Content right`;
+        case LayoutEnum.SidebarLeft:
+            return t`Sidebar left`;
+        case LayoutEnum.SidebarRight:
+            return t`Sidebar right`;
+    }
+}