From 68c7037eea5ff5dbbc57aa07490a6bfa01305522 Mon Sep 17 00:00:00 2001 From: "Jens L." Date: Wed, 4 Feb 2026 17:39:01 +0100 Subject: [PATCH] flows: add option for flow layout with frame background (#19527) * flows: add option for flow layout with frame background Signed-off-by: Jens Langhammer fix Signed-off-by: Jens Langhammer * Tidy variables. Fix mobile and tablet layouts, shadows. * Update web/src/flow/FlowExecutor.ts Co-authored-by: Jens L. Signed-off-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com> --------- Signed-off-by: Jens Langhammer Signed-off-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com> Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com> --- authentik/flows/challenge.py | 3 + .../migrations/0031_alter_flow_layout.py | 29 +++ blueprints/schema.json | 4 +- schema.yml | 4 + web/src/admin/flows/FlowForm.ts | 14 ++ web/src/admin/flows/utils.ts | 4 + web/src/flow/FlowExecutor.ts | 46 +++-- web/src/flow/stages/identification/styles.css | 6 +- .../authentik/components/Login/login.css | 166 ++++++++++++------ 9 files changed, 203 insertions(+), 73 deletions(-) create mode 100644 authentik/flows/migrations/0031_alter_flow_layout.py diff --git a/authentik/flows/challenge.py b/authentik/flows/challenge.py index e8bf58a598..6a0119d97a 100644 --- a/authentik/flows/challenge.py +++ b/authentik/flows/challenge.py @@ -31,6 +31,9 @@ class FlowLayout(models.TextChoices): SIDEBAR_LEFT = "sidebar_left" SIDEBAR_RIGHT = "sidebar_right" + SIDEBAR_LEFT_FRAME_BACKGROUND = "sidebar_left_frame_background" + SIDEBAR_RIGHT_FRAME_BACKGROUND = "sidebar_right_frame_background" + class ErrorDetailSerializer(PassiveSerializer): """Serializer for rest_framework's error messages""" diff --git a/authentik/flows/migrations/0031_alter_flow_layout.py b/authentik/flows/migrations/0031_alter_flow_layout.py new file mode 100644 index 0000000000..6dbaccdfb5 --- /dev/null +++ b/authentik/flows/migrations/0031_alter_flow_layout.py @@ -0,0 +1,29 @@ +# Generated by Django 5.2.10 on 2026-01-16 17:50 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ("authentik_flows", "0030_alter_flow_background"), + ] + + operations = [ + migrations.AlterField( + 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"), + ("sidebar_left_frame_background", "Sidebar Left Frame Background"), + ("sidebar_right_frame_background", "Sidebar Right Frame Background"), + ], + default="stacked", + ), + ), + ] diff --git a/blueprints/schema.json b/blueprints/schema.json index a090ad6410..2ff2260229 100644 --- a/blueprints/schema.json +++ b/blueprints/schema.json @@ -7966,7 +7966,9 @@ "content_left", "content_right", "sidebar_left", - "sidebar_right" + "sidebar_right", + "sidebar_left_frame_background", + "sidebar_right_frame_background" ], "title": "Layout" }, diff --git a/schema.yml b/schema.yml index 40ac25d94d..c87cb25e1b 100644 --- a/schema.yml +++ b/schema.yml @@ -36155,6 +36155,8 @@ components: - content_right - sidebar_left - sidebar_right + - sidebar_left_frame_background + - sidebar_right_frame_background type: string CountryCodeEnum: enum: @@ -38807,6 +38809,8 @@ components: - content_right - sidebar_left - sidebar_right + - sidebar_left_frame_background + - sidebar_right_frame_background type: string FlowRequest: type: object diff --git a/web/src/admin/flows/FlowForm.ts b/web/src/admin/flows/FlowForm.ts index 616fe92e20..dd4091c740 100644 --- a/web/src/admin/flows/FlowForm.ts +++ b/web/src/admin/flows/FlowForm.ts @@ -293,6 +293,20 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm) { > ${LayoutToLabel(FlowLayoutEnum.SidebarRight)} + + `; } - protected override render(): TemplateResult { + protected renderFrameBackground(): SlottedTemplateResult { + return guard([this.layout, this.#challenge], () => { + if ( + this.layout !== FlowLayoutEnum.SidebarLeftFrameBackground && + this.layout !== FlowLayoutEnum.SidebarRightFrameBackground + ) { + return nothing; + } + + const src = this.#challenge?.flowInfo?.background; + + if (!src) return nothing; + + return html` + + `; + }); + } + + protected override render(): SlottedTemplateResult { const { component } = this.challenge || {}; return html` - + ${this.renderFrameBackground()}