mirror of
https://github.com/goauthentik/authentik
synced 2026-05-11 01:22:25 +02:00
befc15ad92
* ## 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`)
* The status label was using HTML booleans incorrectly. It is impossible for a boolean to be null. The default red was alarming, so I chose a neutral grey for the 'not default' state.
* It is not enough to provide a blank cell to ensure the header is spaced correctly; if the table is empty, that will collapse to zero width. Providing the classes that go with the 'this cell may contain a toggle' provides the correct spacing as well.
* Fix inconsistent wording between menu and page; make the 'select type' radiocard and radiolist interfaces flush with the top of the form container, removing a weird jagged visual line between the menu and the content.
* Document adding 'toggle' to Table classes.
* Fix how the buttons for TablePage's empty state align; slots are still wonky when responding to content layout that we do not control ourselves.
* Do not show pagination controls when there are no pages to turn.
* Fix spacing after ak-alert in documentation show in the front-end. Without this, headers and paragraphs were edging well into the alert's drop-shadow.
* Remove separator line from radio entries; P4-ism that was visually confusing.
* Make the empty state a slot, so it can be easily overriden, and provide a default if the slot isn't filled from a lightDOM entry. Add one to the columnWidth, since columnWidth doesn't include the action column; this fixes a visual tic where the empty state did not look correctly centered.
24 lines
417 B
CSS
24 lines
417 B
CSS
:host {
|
|
display: flex;
|
|
}
|
|
|
|
.pf-c-sidebar__panel {
|
|
--pf-c-sidebar__panel--Position: static;
|
|
flex: 0 1 25%;
|
|
}
|
|
.pf-c-sidebar__content {
|
|
flex: 1 1 75%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.pf-c-dropdown {
|
|
--pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--md);
|
|
}
|
|
|
|
.empty-state-primary {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--pf-global--spacer--sm);
|
|
justify-content: center;
|
|
}
|