web/maintenance: remove writeOnly hacks from Form and HorizontalFormElement

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/sources/kerberos/KerberosSourceForm.ts

@@ -7,6 +7,8 @@ import {
     UserMatchingModeToLabel,
 } from "@goauthentik/admin/sources/oauth/utils";
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-private-text-input.js";
+import "@goauthentik/components/ak-private-textarea-input.js";
 import "@goauthentik/components/ak-switch-input";
 import "@goauthentik/components/ak-text-input";
 import "@goauthentik/components/ak-textarea-input";
@@ -246,30 +248,22 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                         value=${ifDefined(this.instance?.syncPrincipal)}
                         help=${msg("Principal used to authenticate to the KDC for syncing.")}
                     ></ak-text-input>
-                    <ak-form-element-horizontal
+                    <ak-private-text-input
                         name="syncPassword"
                         label=${msg("Sync password")}
-                        ?writeOnly=${this.instance !== undefined}
-                    >
-                        <input type="text" value="" class="pf-c-form-control" />
-                        <p class="pf-c-form__helper-text">
-                            ${msg(
-                                "Password used to authenticate to the KDC for syncing. Optional if Sync keytab or Sync credentials cache is provided.",
-                            )}
-                        </p>
-                    </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
+                        ?revealed=${this.instance === undefined}
+                        help=${msg(
+                            "Password used to authenticate to the KDC for syncing. Optional if Sync keytab or Sync credentials cache is provided.",
+                        )}
+                    ></ak-private-text-input>
+                    <ak-private-textarea-input
                         name="syncKeytab"
                         label=${msg("Sync keytab")}
-                        ?writeOnly=${this.instance !== undefined}
-                    >
-                        <textarea class="pf-c-form-control"></textarea>
-                        <p class="pf-c-form__helper-text">
-                            ${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.",
-                            )}
-                        </p>
-                    </ak-form-element-horizontal>
+                        ?revealed=${this.instance === undefined}
+                        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.",
+                        )}
+                    ></ak-private-textarea-input>
                     <ak-text-input
                         name="syncCcache"
                         label=${msg("Sync credentials cache")}
@@ -291,18 +285,14 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                             "Force the use of a specific server name for SPNEGO. Must be in the form HTTP@domain",
                         )}
                     ></ak-text-input>
-                    <ak-form-element-horizontal
+                    <ak-private-textarea-input
                         name="spnegoKeytab"
                         label=${msg("SPNEGO keytab")}
-                        ?writeOnly=${this.instance !== undefined}
-                    >
-                        <textarea class="pf-c-form-control"></textarea>
-                        <p class="pf-c-form__helper-text">
-                            ${msg(
-                                "Keytab used for SPNEGO. Optional if SPNEGO credentials cache is provided. Must be base64 encoded or in the form TYPE:residual.",
-                            )}
-                        </p>
-                    </ak-form-element-horizontal>
+                        ?revealed=${this.instance === undefined}
+                        help=${msg(
+                            "Keytab used for SPNEGO. Optional if SPNEGO credentials cache is provided. Must be base64 encoded or in the form TYPE:residual.",
+                        )}
+                    ></ak-private-textarea-input>
                     <ak-text-input
                         name="spnegoCcache"
                         label=${msg("SPNEGO credentials cache")}

web/src/admin/sources/ldap/LDAPSourceForm.ts

@@ -2,6 +2,7 @@ import "@goauthentik/admin/common/ak-crypto-certificate-search";
 import { placeholderHelperText } from "@goauthentik/admin/helperText";
 import { BaseSourceForm } from "@goauthentik/admin/sources/BaseSourceForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-private-text-input.js";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -259,13 +260,11 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                             class="pf-c-form-control"
                         />
                     </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
+                    <ak-private-text-input
                         label=${msg("Bind Password")}
-                        ?writeOnly=${this.instance !== undefined}
                         name="bindPassword"
-                    >
-                        <input type="text" value="" class="pf-c-form-control" />
-                    </ak-form-element-horizontal>
+                        ?revealed=${this.instance === undefined}
+                    ></ak-private-text-input>
                     <ak-form-element-horizontal
                         label=${msg("Base DN")}
                         ?required=${true}

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

@@ -7,6 +7,7 @@ import {
     UserMatchingModeToLabel,
 } from "@goauthentik/admin/sources/oauth/utils";
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-private-textarea-input.js";
 import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
@@ -439,19 +440,14 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                         />
                         <p class="pf-c-form__helper-text">${msg("Also known as Client ID.")}</p>
                     </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
+                    <ak-private-textarea-input
                         label=${msg("Consumer secret")}
-                        ?required=${true}
-                        ?writeOnly=${this.instance !== undefined}
                         name="consumerSecret"
-                    >
-                        <textarea
-                            class="pf-c-form-control pf-m-monospace"
-                            autocomplete="off"
-                            spellcheck="false"
-                        ></textarea>
-                        <p class="pf-c-form__helper-text">${msg("Also known as Client Secret.")}</p>
-                    </ak-form-element-horizontal>
+                        input-hint="code"
+                        help=${msg("Also known as Client Secret.")}
+                        required
+                        ?revealed=${this.instance === undefined}
+                    ></ak-private-textarea-input>
                     <ak-form-element-horizontal label=${msg("Scopes")} name="additionalScopes">
                         <input
                             type="text"

web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts

@@ -1,6 +1,7 @@
 import { RenderFlowOption } from "@goauthentik/admin/flows/utils";
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-private-text-input.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/SearchSelect";
@@ -98,21 +99,13 @@ export class AuthenticatorDuoStageForm extends BaseStageForm<AuthenticatorDuoSta
                             required
                         />
                     </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
-                        label=${msg("Secret key")}
-                        ?required=${true}
-                        ?writeOnly=${this.instance !== undefined}
+                    <ak-private-text-input
                         name="clientSecret"
-                    >
-                        <input
-                            type="text"
-                            value=""
-                            class="pf-c-form-control pf-m-monospace"
-                            autocomplete="off"
-                            spellcheck="false"
-                            required
-                        />
-                    </ak-form-element-horizontal>
+                        label=${msg("Secret key")}
+                        input-hint="code"
+                        required
+                        ?revealed=${this.instance === undefined}
+                    ></ak-private-text-input>
                 </div>
             </ak-form-group>
             <ak-form-group>
@@ -136,19 +129,12 @@ export class AuthenticatorDuoStageForm extends BaseStageForm<AuthenticatorDuoSta
                             spellcheck="false"
                         />
                     </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
-                        label=${msg("Secret key")}
-                        ?writeOnly=${this.instance !== undefined}
+                    <ak-private-text-input
                         name="adminSecretKey"
-                    >
-                        <input
-                            type="text"
-                            value=""
-                            class="pf-c-form-control pf-m-monospace"
-                            autocomplete="off"
-                            spellcheck="false"
-                        />
-                    </ak-form-element-horizontal>
+                        label=${msg("Secret key")}
+                        input-hint="code"
+                        ?revealed=${this.instance === undefined}
+                    ></ak-private-text-input>
                 </div>
             </ak-form-group>
             <ak-form-group .expanded=${true}>

web/src/admin/stages/authenticator_email/AuthenticatorEmailStageForm.ts

@@ -1,6 +1,7 @@
 import { RenderFlowOption } from "@goauthentik/admin/flows/utils";
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-private-text-input.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/Radio";
@@ -75,13 +76,13 @@ export class AuthenticatorEmailStageForm extends BaseStageForm<AuthenticatorEmai
                         class="pf-c-form-control"
                     />
                 </ak-form-element-horizontal>
-                <ak-form-element-horizontal
-                    label=${msg("SMTP Password")}
-                    ?writeOnly=${this.instance !== undefined}
+
+                <ak-private-text-input
                     name="password"
-                >
-                    <input type="text" value="" class="pf-c-form-control" />
-                </ak-form-element-horizontal>
+                    label=${msg("SMTP Password")}
+                    ?revealed=${this.instance === undefined}
+                ></ak-private-text-input>
+
                 <ak-form-element-horizontal name="useTls">
                     <label class="pf-c-switch">
                         <input

web/src/admin/stages/captcha/CaptchaStageForm.ts

@@ -1,6 +1,7 @@
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import "@goauthentik/components/ak-number-input";
+import "@goauthentik/components/ak-private-text-input.js";
 import "@goauthentik/components/ak-switch-input";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -68,26 +69,18 @@ export class CaptchaStageForm extends BaseStageForm<CaptchaStage> {
                             )}
                         </p>
                     </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
-                        label=${msg("Private Key")}
-                        ?required=${true}
-                        ?writeOnly=${this.instance !== undefined}
+
+                    <ak-private-text-input
                         name="privateKey"
-                    >
-                        <input
-                            type="text"
-                            value=""
-                            class="pf-c-form-control pf-m-monospace"
-                            autocomplete="off"
-                            spellcheck="false"
-                            required
-                        />
-                        <p class="pf-c-form__helper-text">
-                            ${msg(
-                                "Private key, acquired from https://www.google.com/recaptcha/intro/v3.html.",
-                            )}
-                        </p>
-                    </ak-form-element-horizontal>
+                        label=${msg("Private Key")}
+                        input-hint="code"
+                        required
+                        ?revealed=${this.instance === undefined}
+                        help=${msg(
+                            "Private key, acquired from https://www.google.com/recaptcha/intro/v3.html.",
+                        )}
+                    ></ak-private-text-input>
+
                     <ak-switch-input
                         name="interactive"
                         label=${msg("Interactive")}

web/src/admin/stages/email/EmailStageForm.ts

@@ -1,5 +1,6 @@
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-private-text-input.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/utils/TimeDeltaHelp";
@@ -72,13 +73,11 @@ export class EmailStageForm extends BaseStageForm<EmailStage> {
                         class="pf-c-form-control"
                     />
                 </ak-form-element-horizontal>
-                <ak-form-element-horizontal
+                <ak-private-text-input
                     label=${msg("SMTP Password")}
-                    ?writeOnly=${this.instance !== undefined}
                     name="password"
-                >
-                    <input type="text" value="" class="pf-c-form-control" />
-                </ak-form-element-horizontal>
+                    ?revealed=${this.instance === undefined}
+                ></ak-private-text-input>
                 <ak-form-element-horizontal name="useTls">
                     <label class="pf-c-switch">
                         <input

web/src/components/HorizontalLightComponent.ts

@@ -21,13 +21,13 @@ export class HorizontalLightComponent<T> extends AKElement {
     @property({ type: String, reflect: true })
     name!: string;
 
-    @property({ type: String })
+    @property({ type: String, reflect: true })
     label = "";
 
     @property({ type: Boolean, reflect: true })
     required = false;
 
-    @property({ type: String })
+    @property({ type: String, reflect: true })
     help = "";
 
     @property({ type: Object })