web/fix: clarify some secrets remain secret (#23132)

* ## 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/update: update `secret text` to enable password-like inputs # What Adds a flag to ak-secret-text-input so that most secret texts are more password-like than plain-text-with-hidden. plain-text-with-hidden can still be enabled. # Why Some customers were uncomfortable with fields named “password” showing input as plain text during object creation. * web/update: update `secret text` to enable password-like inputs # What Adds a flag to ak-secret-text-input so that most secret texts are more password-like than plain-text-with-hidden. plain-text-with-hidden can still be enabled. # Why Some customers were uncomfortable with fields named “password” showing input as plain text during object creation.
2026-06-17 19:09:11 +03:00 · 2026-06-16 10:05:49 -07:00
parent 63f14fe215
commit 52674afa8a
4 changed files with 7 additions and 1 deletions
@@ -68,6 +68,7 @@ export class FleetConnectorForm extends ModelForm<FleetConnector, string> {
                        label=${msg("Fleet API Token")}
                        placeholder=${msg("Provide your Fleet API token...")}
                        name="token"
+                        plaintext
                        ?revealed=${!this.instance}
                    ></ak-secret-text-input>
                    <ak-switch-input
@@ -134,6 +134,7 @@ export class TelegramSourceForm extends BaseSourceForm<TelegramSource> {
            <ak-secret-text-input
                label=${msg("Bot token")}
                name="botToken"
+                plaintext
                input-hint="code"
                ?required=${!this.instance}
                ?revealed=${!this.instance}
@@ -221,6 +221,7 @@ export class CaptchaStageForm extends BaseStageForm<CaptchaStage> {
                name="privateKey"
                label=${msg("Secret Key")}
                input-hint="code"
+                plaintext
                ?required=${!this.instance}
                ?revealed=${!this.instance}
                placeholder=${msg("Paste your CAPTCHA secret key...")}
@@ -18,6 +18,9 @@ export class AkSecretTextInput extends HorizontalLightComponent<string> {
    @property({ type: Boolean, reflect: true })
    public revealed = false;

+    @property({ type: Boolean, reflect: true })
+    public plaintext = false;
+
    @property({ type: String })
    public placeholder = "";

@@ -93,7 +96,7 @@ export class AkSecretTextInput extends HorizontalLightComponent<string> {

        return html`<input
            ${ref(this.#ref)}
-            type="text"
+            type=${this.plaintext ? "text" : "password"}
            id=${this.fieldID}
            aria-describedby=${this.helpID}
            @input=${this.#inputListener}