web/maintenance: remove writeOnly hacks from Form and HorizontalFormElement

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

@@ -72,7 +72,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
                 name="avatars"
                 label=${msg("Avatars")}
                 value="${ifDefined(this._settings?.avatars)}"
-                inputHint="code"
+                input-hint="code"
                 .bighelp=${html`
                     <p class="pf-c-form__helper-text">
                         ${msg(
@@ -159,7 +159,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
             <ak-text-input
                 name="eventRetention"
                 label=${msg("Event retention")}
-                inputHint="code"
+                input-hint="code"
                 required
                 value="${ifDefined(this._settings?.eventRetention)}"
                 .bighelp=${html`<p class="pf-c-form__helper-text">
@@ -237,7 +237,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
             <ak-text-input
                 name="defaultTokenDuration"
                 label=${msg("Default token duration")}
-                inputHint="code"
+                input-hint="code"
                 required
                 value="${ifDefined(this._settings?.defaultTokenDuration)}"
                 .bighelp=${html`<p class="pf-c-form__helper-text">

web/src/admin/applications/ApplicationForm.ts

@@ -139,7 +139,7 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
                 label=${msg("Slug")}
                 required
                 help=${msg("Internal application name used in URLs.")}
-                inputHint="code"
+                input-hint="code"
             ></ak-text-input>
             <ak-text-input
                 name="group"
@@ -148,7 +148,7 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
                 help=${msg(
                     "Optionally enter a group name. Applications with identical groups are shown grouped together.",
                 )}
-                inputHint="code"
+                input-hint="code"
             ></ak-text-input>
             <ak-provider-search-input
                 name="provider"
@@ -189,7 +189,7 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
                         help=${msg(
                             "If left empty, authentik will try to extract the launch URL based on the selected provider.",
                         )}
-                        inputHint="code"
+                        input-hint="code"
                     ></ak-text-input>
                     <ak-switch-input
                         name="openInNewTab"

web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts

@@ -128,7 +128,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
                     ?invalid=${errors.slug ?? this.errors.has("slug")}
                     .errorMessages=${this.errorMessages("slug")}
                     help=${msg("Internal application name used in URLs.")}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-slug-input>
                 <ak-text-input
                     name="group"
@@ -138,7 +138,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
                     help=${msg(
                         "Optionally enter a group name. Applications with identical groups are shown grouped together.",
                     )}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
                 <ak-radio-input
                     label=${msg("Policy engine mode")}
@@ -161,7 +161,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
                             help=${msg(
                                 "If left empty, authentik will try to extract the launch URL based on the selected provider.",
                             )}
-                            inputHint="code"
+                            input-hint="code"
                         ></ak-text-input>
                         <ak-switch-input
                             name="openInNewTab"

web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts

@@ -57,7 +57,7 @@ export class ApplicationWizardRACProviderForm extends ApplicationWizardProviderF
                     help=${msg(
                         "Determines how long a session lasts before being disconnected and requiring re-authorization.",
                     )}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
 
                 <ak-form-group .expanded=${true}>

web/src/admin/crypto/CertificateKeyPairForm.ts

@@ -1,4 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-private-textarea-input.js";
 import "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -45,37 +46,24 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
                     required
                 />
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal
+            <ak-private-textarea-input
                 label=${msg("Certificate")}
                 name="certificateData"
-                ?writeOnly=${this.instance !== undefined}
-                ?required=${true}
-            >
-                <textarea
-                    autocomplete="off"
-                    spellcheck="false"
-                    class="pf-c-form-control pf-m-monospace"
-                    placeholder="-----BEGIN CERTIFICATE-----"
-                    required
-                ></textarea>
-                <p class="pf-c-form__helper-text">${msg("PEM-encoded Certificate data.")}</p>
-            </ak-form-element-horizontal>
-            <ak-form-element-horizontal
-                name="keyData"
-                ?writeOnly=${this.instance !== undefined}
+                input-hint="code"
+                placeholder="-----BEGIN CERTIFICATE-----"
+                required
+                ?revealed=${this.instance === undefined}
+                help=${msg("PEM-encoded Certificate data.")}
+            ></ak-private-textarea-input>
+            <ak-private-textarea-input
                 label=${msg("Private Key")}
-            >
-                <textarea
-                    autocomplete="off"
-                    class="pf-c-form-control pf-m-monospace"
-                    spellcheck="false"
-                ></textarea>
-                <p class="pf-c-form__helper-text">
-                    ${msg(
-                        "Optional Private Key. If this is set, you can use this keypair for encryption.",
-                    )}
-                </p>
-            </ak-form-element-horizontal>`;
+                name="keyData"
+                input-hint="code"
+                ?revealed=${this.instance === undefined}
+                help=${msg(
+                    "Optional Private Key. If this is set, you can use this keypair for encryption.",
+                )}
+            ></ak-private-textarea-input>`;
     }
 }
 

web/src/admin/enterprise/EnterpriseLicenseForm.ts

@@ -1,5 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH_ENTERPRISE } from "@goauthentik/common/constants";
+import "@goauthentik/components/ak-private-textarea-input.js";
 import "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -61,17 +62,13 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
                     value="${ifDefined(this.installID)}"
                 />
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal
+            <ak-private-textarea-input
                 name="key"
-                ?writeOnly=${this.instance !== undefined}
+                ?revealed=${this.instance === undefined}
                 label=${msg("License key")}
+                input-hint="code"
             >
-                <textarea
-                    class="pf-c-form-control pf-m-monospace"
-                    autocomplete="off"
-                    spellcheck="false"
-                ></textarea>
-            </ak-form-element-horizontal>`;
+            </ak-private-textarea-input>`;
     }
 }
 

web/src/admin/providers/ldap/LDAPProviderFormForm.ts

@@ -127,7 +127,7 @@ export function renderForm(
                     label=${msg("Base DN")}
                     required
                     value="${provider?.baseDn ?? "DC=ldap,DC=goauthentik,DC=io"}"
-                    inputHint="code"
+                    input-hint="code"
                     .errorMessages=${errors?.baseDn ?? []}
                     help=${msg(
                         "LDAP DN under which bind requests and search requests can be made.",
@@ -154,7 +154,7 @@ export function renderForm(
                     value="${provider?.tlsServerName ?? ""}"
                     .errorMessages=${errors?.tlsServerName ?? []}
                     help=${tlsServerNameHelp}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
 
                 <ak-number-input

web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts

@@ -163,14 +163,14 @@ export function renderForm(
                     label=${msg("Client ID")}
                     value="${provider?.clientId ?? randomString(40, ascii_letters + digits)}"
                     required
-                    inputHint="code"
+                    input-hint="code"
                 >
                 </ak-text-input>
                 <ak-text-input
                     name="clientSecret"
                     label=${msg("Client Secret")}
                     value="${provider?.clientSecret ?? randomString(128, ascii_letters + digits)}"
-                    inputHint="code"
+                    input-hint="code"
                     ?hidden=${!showClientSecret}
                 >
                 </ak-text-input>
@@ -252,7 +252,7 @@ export function renderForm(
                 <ak-text-input
                     name="accessCodeValidity"
                     label=${msg("Access code validity")}
-                    inputHint="code"
+                    input-hint="code"
                     required
                     value="${provider?.accessCodeValidity ?? "minutes=1"}"
                     .bighelp=${html`<p class="pf-c-form__helper-text">
@@ -265,7 +265,7 @@ export function renderForm(
                     name="accessTokenValidity"
                     label=${msg("Access Token validity")}
                     value="${provider?.accessTokenValidity ?? "minutes=5"}"
-                    inputHint="code"
+                    input-hint="code"
                     required
                     .bighelp=${html` <p class="pf-c-form__helper-text">
                             ${msg("Configure how long access tokens are valid for.")}
@@ -278,7 +278,7 @@ export function renderForm(
                     name="refreshTokenValidity"
                     label=${msg("Refresh Token validity")}
                     value="${provider?.refreshTokenValidity ?? "days=30"}"
-                    inputHint="code"
+                    input-hint="code"
                     ?required=${true}
                     .bighelp=${html` <p class="pf-c-form__helper-text">
                             ${msg("Configure how long refresh tokens are valid for.")}

web/src/admin/providers/proxy/ProxyProviderFormForm.ts

@@ -48,7 +48,7 @@ function renderHttpBasic(provider: Partial<ProxyProvider>) {
             help=${msg(
                 "User/Group Attribute used for the user part of the HTTP-Basic Header. If not set, the user's Email address is used.",
             )}
-            inputHint="code"
+            input-hint="code"
         >
         </ak-text-input>
 
@@ -57,7 +57,7 @@ function renderHttpBasic(provider: Partial<ProxyProvider>) {
             label=${msg("HTTP-Basic Password Key")}
             value="${ifDefined(provider?.basicAuthPasswordAttribute)}"
             help=${msg("User/Group Attribute used for the password part of the HTTP-Basic Header.")}
-            inputHint="code"
+            input-hint="code"
         >
         </ak-text-input>`;
 }
@@ -90,7 +90,7 @@ function renderProxySettings(provider: Partial<ProxyProvider>, errors?: Validati
             help=${msg(
                 "The external URL you'll access the application at. Include any non-standard port.",
             )}
-            inputHint="code"
+            input-hint="code"
         ></ak-text-input>
         <ak-text-input
             name="internalHost"
@@ -99,7 +99,7 @@ function renderProxySettings(provider: Partial<ProxyProvider>, errors?: Validati
             required
             .errorMessages=${errors?.internalHost ?? []}
             help=${msg("Upstream host that the requests are forwarded to.")}
-            inputHint="code"
+            input-hint="code"
         ></ak-text-input>
 
         <ak-switch-input
@@ -126,7 +126,7 @@ function renderForwardSingleSettings(provider: Partial<ProxyProvider>, errors?:
             help=${msg(
                 "The external URL you'll access the application at. Include any non-standard port.",
             )}
-            inputHint="code"
+            input-hint="code"
         ></ak-text-input>`;
 }
 
@@ -225,7 +225,7 @@ export function renderForm(
             .errorMessages=${errors?.accessTokenValidity ?? []}
             required
             .help=${msg("Configure how long tokens are valid for.")}
-            inputHint="code"
+            input-hint="code"
         ></ak-text-input>
 
         <ak-form-group>

web/src/admin/providers/radius/RadiusProviderFormForm.ts

@@ -80,7 +80,7 @@ export function renderForm(
                     .errorMessages=${errors?.sharedSecret ?? []}
                     value=${provider?.sharedSecret ?? randomString(128, ascii_letters + digits)}
                     required
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
                 <ak-text-input
                     name="clientNetworks"
@@ -89,7 +89,7 @@ export function renderForm(
                     .errorMessages=${errors?.clientNetworks ?? []}
                     required
                     help=${clientNetworksHelp}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
                 <ak-form-element-horizontal
                     label=${msg("Property mappings")}

web/src/admin/providers/scim/SCIMProviderFormForm.ts

@@ -40,7 +40,7 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
                     .errorMessages=${errors?.url ?? []}
                     required
                     help=${msg("SCIM base url, usually ends in /v2.")}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
 
                 <ak-switch-input
@@ -59,7 +59,7 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
                     help=${msg(
                         "Token to authenticate with. Currently only bearer authentication is supported.",
                     )}
-                    inputHint="code"
+                    input-hint="code"
                 ></ak-text-input>
                 <ak-radio-input
                     name="compatibilityMode"