flows/layouts (#2867)

authentik/core/templates/if/flow.html

@@ -8,6 +8,12 @@
 {% if flow.compatibility_mode and not inspector %}
 <script>ShadyDOM = { force: !navigator.webdriver };</script>
 {% endif %}
+<script>
+window.authentik = {};
+window.authentik.flow = {
+    "layout": "{{ flow.layout }}",
+};
+</script>
 {% endblock %}
 
 {% block head %}

authentik/flows/api/flows.py

@@ -72,6 +72,7 @@ class FlowSerializer(ModelSerializer):
             "policy_engine_mode",
             "compatibility_mode",
             "export_url",
+            "layout",
         ]
         extra_kwargs = {
             "background": {"read_only": True},

authentik/flows/challenge.py

@@ -2,6 +2,7 @@
 from enum import Enum
 from typing import TYPE_CHECKING, Optional
 
+from django.db import models
 from django.http import JsonResponse
 from rest_framework.fields import ChoiceField, DictField
 from rest_framework.serializers import CharField
@@ -17,6 +18,16 @@ PLAN_CONTEXT_URL = "url"
 PLAN_CONTEXT_ATTRS = "attrs"
 
 
+class FlowLayout(models.TextChoices):
+    """Flow layouts"""
+
+    STACKED = "stacked"
+    CONTENT_LEFT = "content_left"
+    CONTENT_RIGHT = "content_right"
+    SIDEBAR_LEFT = "sidebar_left"
+    SIDEBAR_RIGHT = "sidebar_right"
+
+
 class ChallengeTypes(Enum):
     """Currently defined challenge types"""
 
@@ -38,6 +49,7 @@ class ContextualFlowInfo(PassiveSerializer):
     title = CharField(required=False, allow_blank=True)
     background = CharField(required=False)
     cancel_url = CharField()
+    layout = ChoiceField(choices=[(x.value, x.name) for x in FlowLayout])
 
 
 class Challenge(PassiveSerializer):

authentik/flows/migrations/0022_flow_layout.py

@@ -0,0 +1,27 @@
+# Generated by Django 4.0.4 on 2022-05-15 19:17
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("authentik_flows", "0021_auto_20211227_2103"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="flow",
+            name="layout",
+            field=models.TextField(
+                choices=[
+                    ("stacked", "Stacked"),
+                    ("content_left", "Content Left"),
+                    ("content_right", "Content Right"),
+                    ("sidebar_left", "Sidebar Left"),
+                    ("sidebar_right", "Sidebar Right"),
+                ],
+                default="stacked",
+            ),
+        ),
+    ]

authentik/flows/models.py

@@ -13,6 +13,7 @@ from structlog.stdlib import get_logger
 
 from authentik.core.models import Token
 from authentik.core.types import UserSettingSerializer
+from authentik.flows.challenge import FlowLayout
 from authentik.lib.models import InheritanceForeignKey, SerializerModel
 from authentik.policies.models import PolicyBindingModel
 
@@ -107,6 +108,7 @@ class Flow(SerializerModel, PolicyBindingModel):
     slug = models.SlugField(unique=True, help_text=_("Visible in the URL."))
 
     title = models.TextField(help_text=_("Shown as the Title in Flow pages."))
+    layout = models.TextField(default=FlowLayout.STACKED, choices=FlowLayout.choices)
 
     designation = models.CharField(
         max_length=100,

authentik/flows/stage.py

@@ -144,6 +144,7 @@ class ChallengeStageView(StageView):
                         "title": self.format_title(),
                         "background": self.executor.flow.background_url,
                         "cancel_url": reverse("authentik_flows:cancel"),
+                        "layout": self.executor.flow.layout,
                     }
                 )
                 flow_info.is_valid()

authentik/flows/tests/test_inspector.py

@@ -55,6 +55,7 @@ class TestFlowInspector(APITestCase):
                     "background": flow.background_url,
                     "cancel_url": reverse("authentik_flows:cancel"),
                     "title": "",
+                    "layout": "stacked",
                 },
                 "type": ChallengeTypes.NATIVE.value,
                 "password_fields": False,

authentik/stages/authenticator_sms/tests.py

@@ -46,6 +46,7 @@ class AuthenticatorSMSStageTests(APITestCase):
                     "background": self.flow.background_url,
                     "cancel_url": reverse("authentik_flows:cancel"),
                     "title": "",
+                    "layout": "stacked",
                 },
                 "pending_user": "foo",
                 "pending_user_avatar": "/static/dist/assets/images/user_default.png",

schema.yml

@@ -20511,8 +20511,11 @@ components:
           type: string
         cancel_url:
           type: string
+        layout:
+          $ref: '#/components/schemas/LayoutEnum'
       required:
       - cancel_url
+      - layout
     Coordinate:
       type: object
       description: Coordinates for diagrams
@@ -21473,6 +21476,8 @@ components:
         export_url:
           type: string
           readOnly: true
+        layout:
+          $ref: '#/components/schemas/LayoutEnum'
       required:
       - background
       - cache_count
@@ -21608,6 +21613,8 @@ components:
           type: boolean
           description: Enable compatibility mode, increases compatibility with password
             managers on mobile devices.
+        layout:
+          $ref: '#/components/schemas/LayoutEnum'
       required:
       - designation
       - name
@@ -22815,6 +22822,14 @@ components:
       - name
       - server_uri
       - slug
+    LayoutEnum:
+      enum:
+      - stacked
+      - content_left
+      - content_right
+      - sidebar_left
+      - sidebar_right
+      type: string
     Link:
       type: object
       description: Returns a single link
@@ -27108,6 +27123,8 @@ components:
           type: boolean
           description: Enable compatibility mode, increases compatibility with password
             managers on mobile devices.
+        layout:
+          $ref: '#/components/schemas/LayoutEnum'
     PatchedFlowStageBindingRequest:
       type: object
       description: FlowStageBinding Serializer

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="pf-c-login ${this.getLayout()}">
-                                    <div class="ak-login-container">
+                                    <div class="${this.getLayoutClass()}">
                                         <header class="pf-c-login__header">
                                             <div class="pf-c-brand ak-brand">
                                                 <img

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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)) {

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`;
+    }
+}

website/docs/flow/layouts.md

@@ -0,0 +1,25 @@
+---
+title: Layouts
+---
+
+Starting with authentik 2022.5, the layout of the default flow executor can be changed. Below are examples for the available options:
+
+### Stacked (default)
+
+![](./layouts/stacked.png)
+
+### Content besides logo (left)
+
+![](./layouts/content_left.png)
+
+### Content besides logo (right)
+
+![](./layouts/content_right.png)
+
+### Sidebar (left)
+
+![](./layouts/sidebar_left.png)
+
+### Sidebar (right)
+
+![](./layouts/sidebar_right.png)

website/sidebars.js

@@ -84,6 +84,7 @@ module.exports = {
             label: "Flows",
             items: [
                 "flow/index",
+                "flow/layouts",
                 "flow/inspector",
                 "flow/examples",
                 {