web/dependencies: move the sync components into the components folder. (#22242)

* ## What

         window.authentik.flow = {
             "layout": "{{ flow.layout }}",
    +        "background": "{{ flow.background }}",
    +        "title": "{{ flow.title }}",
         };

Amends the `flow.html` template and `GlobalAuthentik` parser to include new parameters, `background` and `title`, in the flow-specific part of the configuration written to the HTML `<head>` object, and to provide those parameters to client code.

## Why

The `layout` is start-up critical: it tells the Flow interface how the admin wants the Flow page to look, and allows the HTML and CSS to be pre-aligned to that condition. `layout` is determined on a per-Flow bases, not a per-Stage basis; Flows are derived from a tuple of `(Brand, Application?)`, where the opening policy *may* direct a user to a different flow if the user reached authentik via a redirect from a specific application, but will otherwise fall back to the default Flow for the Brand.

The `background` is a field that is required if the `Flow`’s layout is of type `frame_background`; in this case, the part of the viewport not dedicated to the FlowExecutor is reserved for an `<iframe>` that will be filled in with whatever the administrator specifies. Although this gives it the same priority as `layout` (whether it’s provided or undefined) for describing the [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome) around a challenge, it is currently not provided to the application in the start-up config; it is provided in the `challenge` and renders the IFrame as part of the initial challenge.

This patch fixes that; if `layout` is provided, `background` ought to be as well, even if it’s empty. The execution of a Challenge ought not have any influence over the look and feel of the Flow-defined appearance *around* that Challenge.

I have added `title` as well; with that, all of the current theme-and-appearance related configuration details are placed into `<head>` and can be removed from the FlowExecutor.

Server-side, `background` is currently specified: `background = FileField(blank=True, default="")` which is … interesting since we also appear to store URLs in it. I don’t see anything in the FlowSerializer that would change that from a client’s point of view.

This patch furthers the effort to separate flow execution from flow presentation.

- \[🐰\] The code has been formatted (`make web`)

* web/maint: Move sync into the components folder; adjust imports accordingly

# What

1.  Moves the sync folder from elements to components: sync is very API-aware.

2.  Adjusts all the imports correctly.
This commit is contained in:
Ken Sternberg
2026-05-20 17:49:48 -07:00
committed by GitHub
parent 63f3ea0d09
commit 6ee2778031
15 changed files with 12 additions and 12 deletions
@@ -1,6 +1,6 @@
import "#elements/forms/DeleteBulkForm";
import "#elements/forms/ModalForm";
import "#elements/sync/SyncObjectForm";
import "#components/sync/SyncObjectForm";
import "#admin/common/ak-flow-search/ak-flow-search-no-default";
import { StaticTable } from "#elements/table/StaticTable";
@@ -1,6 +1,6 @@
import "#elements/forms/DeleteBulkForm";
import "#elements/forms/ModalForm";
import "#elements/sync/SyncObjectForm";
import "#components/sync/SyncObjectForm";
import { DEFAULT_CONFIG } from "#common/api/config";
@@ -1,6 +1,6 @@
import "#elements/forms/DeleteBulkForm";
import "#elements/forms/ModalForm";
import "#elements/sync/SyncObjectForm";
import "#components/sync/SyncObjectForm";
import { DEFAULT_CONFIG } from "#common/api/config";
import { formatUserDisplayName } from "#common/users";
@@ -8,7 +8,7 @@ import "#admin/events/ObjectChangelog";
import "#elements/Tabs";
import "#elements/buttons/ActionButton/index";
import "#elements/buttons/ModalButton";
import "#elements/sync/SyncStatusCard";
import "#components/sync/SyncStatusCard";
import "#elements/tasks/ScheduleList";
import "#elements/tasks/TaskList";
@@ -1,6 +1,6 @@
import "#elements/forms/DeleteBulkForm";
import "#elements/forms/ModalForm";
import "#elements/sync/SyncObjectForm";
import "#components/sync/SyncObjectForm";
import { DEFAULT_CONFIG } from "#common/api/config";
@@ -1,6 +1,6 @@
import "#elements/forms/DeleteBulkForm";
import "#elements/forms/ModalForm";
import "#elements/sync/SyncObjectForm";
import "#components/sync/SyncObjectForm";
import { DEFAULT_CONFIG } from "#common/api/config";
import { formatUserDisplayName } from "#common/users";
@@ -8,7 +8,7 @@ import "#elements/Tabs";
import "#elements/buttons/ActionButton/index";
import "#elements/buttons/ModalButton";
import "#elements/events/LogViewer";
import "#elements/sync/SyncStatusCard";
import "#components/sync/SyncStatusCard";
import "#elements/tasks/ScheduleList";
import "#elements/tasks/TaskList";
@@ -1,6 +1,6 @@
import "#elements/forms/DeleteBulkForm";
import "#elements/forms/ModalForm";
import "#elements/sync/SyncObjectForm";
import "#components/sync/SyncObjectForm";
import "#admin/common/ak-flow-search/ak-flow-search-no-default";
import { DEFAULT_CONFIG } from "#common/api/config";
@@ -1,6 +1,6 @@
import "#elements/forms/DeleteBulkForm";
import "#elements/forms/ModalForm";
import "#elements/sync/SyncObjectForm";
import "#components/sync/SyncObjectForm";
import "#admin/common/ak-flow-search/ak-flow-search-no-default";
import { DEFAULT_CONFIG } from "#common/api/config";
@@ -10,7 +10,7 @@ import "#elements/Tabs";
import "#elements/ak-mdx/index";
import "#elements/buttons/ActionButton/index";
import "#elements/buttons/ModalButton";
import "#elements/sync/SyncStatusCard";
import "#components/sync/SyncStatusCard";
import "#elements/tasks/ScheduleList";
import "#elements/tasks/TaskList";
import "#elements/timestamp/ak-timestamp";
@@ -9,7 +9,7 @@ import "#elements/ak-mdx/index";
import "#elements/buttons/ActionButton/index";
import "#elements/buttons/SpinnerButton/index";
import "#elements/forms/ModalForm";
import "#elements/sync/SyncStatusCard";
import "#components/sync/SyncStatusCard";
import { DEFAULT_CONFIG } from "#common/api/config";
import { EVENT_REFRESH } from "#common/constants";
@@ -3,11 +3,11 @@ import "#admin/sources/ldap/LDAPSourceConnectivity";
import "#admin/sources/ldap/LDAPSourceUserList";
import "#admin/sources/ldap/LDAPSourceGroupList";
import "#admin/events/ObjectChangelog";
import "#components/sync/SyncStatusCard";
import "#elements/CodeMirror";
import "#elements/Tabs";
import "#elements/buttons/ActionButton/index";
import "#elements/buttons/SpinnerButton/index";
import "#elements/sync/SyncStatusCard";
import "#elements/tasks/ScheduleList";
import { DEFAULT_CONFIG } from "#common/api/config";