flows/layouts (#2867)

This commit is contained in:
Jens L 2022-05-16 01:10:23 +02:00 committed by GitHub
parent 699d3ca067
commit 333e58ce2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 462 additions and 4 deletions

View file

@ -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 %}

View file

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

View file

@ -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):

View file

@ -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",
),
),
]

View file

@ -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,

View file

@ -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()

View file

@ -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,

View file

@ -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",

View file

@ -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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 809 KiB

After

Width:  |  Height:  |  Size: 824 KiB

View file

@ -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

View file

@ -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"

View file

@ -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"

View file

@ -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"

View file

@ -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"

View file

@ -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"

View file

@ -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"

View file

@ -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"

View file

@ -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"

View file

@ -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"

View file

@ -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"

View file

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

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 MiB

View file

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