web: Fix hidden textarea required attribute. (goauthentik#16168)

* web: Fix hidden textarea `required` attribute.

* web: Fix missing flag property.

* web: Clarify field error reporting.

Author: GirlBossRush

web/src/admin/admin-settings/AdminSettingsForm.ts

@@ -29,23 +29,7 @@ const DEFAULT_REPUTATION_UPPER_LIMIT = 5;
 
 @customElement("ak-admin-settings-form")
 export class AdminSettingsForm extends Form<SettingsRequest> {
-    //
-    // Custom property accessors in Lit 2 require a manual call to requestUpdate(). See:
-    // https://lit.dev/docs/v2/components/properties/#accessors-custom
-    //
-    set settings(value: Settings | undefined) {
-        this._settings = value;
-        this.requestUpdate();
-    }
-
-    @property({ type: Object })
-    get settings() {
-        return this._settings;
-    }
-
-    private _settings?: Settings;
-
-    static styles: CSSResult[] = [
+    public static styles: CSSResult[] = [
         ...super.styles,
         PFList,
         css`
@@ -55,25 +39,35 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
         `,
     ];
 
+    @property({ attribute: false })
+    public settings!: Settings;
+
     getSuccessMessage(): string {
         return msg("Successfully updated settings.");
     }
 
-    async send(data: SettingsRequest): Promise<Settings> {
+    async send(settingsRequest: SettingsRequest): Promise<Settings> {
+        settingsRequest.flags ??= this.settings.flags;
+
         const result = await new AdminApi(DEFAULT_CONFIG).adminSettingsUpdate({
-            settingsRequest: data,
+            settingsRequest,
         });
+
         this.dispatchEvent(new CustomEvent("ak-admin-setting-changed"));
+
         return result;
     }
 
     renderForm(): TemplateResult {
+        const { settings } = this;
+
         return html`
             <ak-text-input
                 name="avatars"
                 label=${msg("Avatars")}
-                value="${ifDefined(this._settings?.avatars)}"
+                value="${ifDefined(settings.avatars)}"
                 input-hint="code"
+                required
                 .bighelp=${html`
                     <p class="pf-c-form__helper-text">
                         ${msg(
@@ -133,27 +127,26 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
                         )}
                     </p>
                 `}
-                required
             >
             </ak-text-input>
             <ak-switch-input
                 name="defaultUserChangeName"
                 label=${msg("Allow users to change name")}
-                ?checked="${this._settings?.defaultUserChangeName}"
+                ?checked=${settings.defaultUserChangeName}
                 help=${msg("Enable the ability for users to change their name.")}
             >
             </ak-switch-input>
             <ak-switch-input
                 name="defaultUserChangeEmail"
                 label=${msg("Allow users to change email")}
-                ?checked="${this._settings?.defaultUserChangeEmail}"
+                ?checked=${settings.defaultUserChangeEmail}
                 help=${msg("Enable the ability for users to change their email.")}
             >
             </ak-switch-input>
             <ak-switch-input
                 name="defaultUserChangeUsername"
                 label=${msg("Allow users to change username")}
-                ?checked="${this._settings?.defaultUserChangeUsername}"
+                ?checked=${settings.defaultUserChangeUsername}
                 help=${msg("Enable the ability for users to change their username.")}
             >
             </ak-switch-input>
@@ -162,7 +155,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
                 label=${msg("Event retention")}
                 input-hint="code"
                 required
-                value="${ifDefined(this._settings?.eventRetention)}"
+                value="${ifDefined(settings.eventRetention)}"
                 .bighelp=${html`<p class="pf-c-form__helper-text">
                         ${msg("Duration after which events will be deleted from the database.")}
                     </p>
@@ -184,19 +177,19 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
                 label=${msg("Reputation: lower limit")}
                 required
                 name="reputationLowerLimit"
-                value="${this._settings?.reputationLowerLimit ?? DEFAULT_REPUTATION_LOWER_LIMIT}"
+                value="${settings.reputationLowerLimit ?? DEFAULT_REPUTATION_LOWER_LIMIT}"
                 help=${msg("Reputation cannot decrease lower than this value. Zero or negative.")}
             ></ak-number-input>
             <ak-number-input
                 label=${msg("Reputation: upper limit")}
                 required
                 name="reputationUpperLimit"
-                value="${this._settings?.reputationUpperLimit ?? DEFAULT_REPUTATION_UPPER_LIMIT}"
+                value="${settings.reputationUpperLimit ?? DEFAULT_REPUTATION_UPPER_LIMIT}"
                 help=${msg("Reputation cannot increase higher than this value. Zero or positive.")}
             ></ak-number-input>
             <ak-form-element-horizontal label=${msg("Footer links")} name="footerLinks">
                 <ak-array-input
-                    .items=${this._settings?.footerLinks ?? []}
+                    .items=${settings.footerLinks ?? []}
                     .newItem=${() => ({ name: "", href: "" })}
                     .row=${(f?: FooterLink) =>
                         akFooterLinkInput({
@@ -215,7 +208,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
             <ak-switch-input
                 name="gdprCompliance"
                 label=${msg("GDPR compliance")}
-                ?checked="${this._settings?.gdprCompliance}"
+                ?checked=${settings.gdprCompliance}
                 help=${msg(
                     "When enabled, all the events caused by a user will be deleted upon the user's deletion.",
                 )}
@@ -224,14 +217,14 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
             <ak-switch-input
                 name="impersonation"
                 label=${msg("Impersonation")}
-                ?checked="${this._settings?.impersonation}"
+                ?checked=${settings.impersonation}
                 help=${msg("Globally enable/disable impersonation.")}
             >
             </ak-switch-input>
             <ak-switch-input
                 name="impersonationRequireReason"
                 label=${msg("Require reason for impersonation")}
-                ?checked="${this._settings?.impersonationRequireReason}"
+                ?checked=${settings.impersonationRequireReason}
                 help=${msg("Require administrators to provide a reason for impersonating a user.")}
             >
             </ak-switch-input>
@@ -240,7 +233,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
                 label=${msg("Default token duration")}
                 input-hint="code"
                 required
-                value="${ifDefined(this._settings?.defaultTokenDuration)}"
+                value="${ifDefined(settings.defaultTokenDuration)}"
                 .bighelp=${html`<p class="pf-c-form__helper-text">
                         ${msg("Default duration for generated tokens")}
                     </p>
@@ -251,7 +244,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
                 label=${msg("Default token length")}
                 required
                 name="defaultTokenLength"
-                value="${this._settings?.defaultTokenLength ?? 60}"
+                value="${settings.defaultTokenLength ?? 60}"
                 help=${msg("Default length of generated tokens")}
             ></ak-number-input>
         `;

web/src/admin/crypto/CertificateKeyPairForm.ts

@@ -53,15 +53,15 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
                 name="certificateData"
                 input-hint="code"
                 placeholder="-----BEGIN CERTIFICATE-----"
-                required
-                ?revealed=${this.instance === undefined}
+                ?required=${!this.instance}
+                ?revealed=${!this.instance}
                 help=${msg("PEM-encoded Certificate data.")}
             ></ak-secret-textarea-input>
             <ak-secret-textarea-input
                 label=${msg("Private Key")}
                 name="keyData"
                 input-hint="code"
-                ?revealed=${this.instance === undefined}
+                ?revealed=${!this.instance}
                 help=${msg(
                     "Optional Private Key. If this is set, you can use this keypair for encryption.",
                 )}

web/src/admin/enterprise/EnterpriseLicenseForm.ts

@@ -66,7 +66,7 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
             </ak-form-element-horizontal>
             <ak-secret-textarea-input
                 name="key"
-                ?revealed=${this.instance === undefined}
+                ?revealed=${!this.instance}
                 label=${msg("License key")}
                 input-hint="code"
             >

web/src/admin/sources/kerberos/KerberosSourceForm.ts

@@ -259,7 +259,7 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                     <ak-secret-textarea-input
                         name="syncKeytab"
                         label=${msg("Sync keytab")}
-                        ?revealed=${this.instance === undefined}
+                        ?revealed=${!this.instance}
                         help=${msg(
                             "Keytab used to authenticate to the KDC for syncing. Optional if Sync password or Sync credentials cache is provided. Must be base64 encoded or in the form TYPE:residual.",
                         )}
@@ -287,7 +287,7 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                     <ak-secret-textarea-input
                         name="spnegoKeytab"
                         label=${msg("SPNEGO keytab")}
-                        ?revealed=${this.instance === undefined}
+                        ?revealed=${!this.instance}
                         help=${msg(
                             "Keytab used for SPNEGO. Optional if SPNEGO credentials cache is provided. Must be base64 encoded or in the form TYPE:residual.",
                         )}

web/src/admin/sources/oauth/OAuthSourceForm.ts

@@ -442,8 +442,8 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                         name="consumerSecret"
                         input-hint="code"
                         help=${msg("Also known as Client Secret.")}
-                        required
-                        ?revealed=${this.instance === undefined}
+                        ?required=${!this.instance}
+                        ?revealed=${!this.instance}
                     ></ak-secret-textarea-input>
                     <ak-form-element-horizontal label=${msg("Scopes")} name="additionalScopes">
                         <input

web/src/elements/forms/Form.ts

@@ -18,7 +18,7 @@ import { instanceOfValidationError } from "@goauthentik/api";
 
 import { snakeCase } from "change-case";
 
-import { msg } from "@lit/localize";
+import { msg, str } from "@lit/localize";
 import { css, CSSResult, html, nothing, TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -246,6 +246,8 @@ export abstract class Form<T = Record<string, unknown>> extends AKElement {
         return createFileMap<T>(this.shadowRoot?.querySelectorAll("ak-form-element-horizontal"));
     }
 
+    //#region Validation
+
     public checkValidity(): boolean {
         return !!this.form?.checkValidity?.();
     }
@@ -261,6 +263,10 @@ export abstract class Form<T = Record<string, unknown>> extends AKElement {
         return reportValidityDeep(form);
     }
 
+    //#endregion
+
+    //#region Submission
+
     /**
      * Convert the elements of the form to JSON.[4]
      */
@@ -273,6 +279,7 @@ export abstract class Form<T = Record<string, unknown>> extends AKElement {
 
         return serializeForm<T>(elements);
     }
+
     /**
      * Serialize and send the form to the destination. The `send()` method must be overridden for
      * this to work. If processing the data results in an error, we catch the error, distribute
@@ -310,6 +317,8 @@ export abstract class Form<T = Record<string, unknown>> extends AKElement {
                 let errorMessage = pluckErrorDetail(error);
                 let focused = false;
 
+                //#region Validation errors
+
                 if (instanceOfValidationError(parsedError)) {
                     // assign all input-related errors to their elements
                     const elements =
@@ -346,6 +355,23 @@ export abstract class Form<T = Record<string, unknown>> extends AKElement {
 
                     if (parsedError.nonFieldErrors) {
                         this.nonFieldErrors = parsedError.nonFieldErrors;
+                    } else if (!focused) {
+                        // It's possible that the API has returned a field error that we're
+                        // not aware of. We can still show the error message, to at least
+                        // give the user some feedback.
+                        for (const [fieldName, fieldErrors] of Object.entries(parsedError)) {
+                            if (Array.isArray(fieldErrors)) {
+                                this.nonFieldErrors = [
+                                    msg(str`${fieldName}: ${fieldErrors.join(", ")}`),
+                                ];
+                                break;
+                            }
+                        }
+
+                        console.error(
+                            "authentik/forms: API rejected the form submission due to an invalid field that doesn't appear to be in the form. This is likely a bug in authentik.",
+                            parsedError,
+                        );
                     }
 
                     errorMessage = msg("Invalid update request.");
@@ -357,6 +383,8 @@ export abstract class Form<T = Record<string, unknown>> extends AKElement {
                     }
                 }
 
+                //#endregion
+
                 showMessage({
                     message: errorMessage,
                     level: MessageLevel.error,
@@ -369,6 +397,8 @@ export abstract class Form<T = Record<string, unknown>> extends AKElement {
 
     //#endregion
 
+    //#endregion
+
     //#region Render
 
     public renderFormWrapper(): TemplateResult {