web/admin: adopt ak-hidden-text (#15042)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderForm.ts

@@ -4,6 +4,7 @@ import {
     propertyMappingsSelector,
 } from "@goauthentik/admin/providers/microsoft_entra/MicrosoftEntraProviderFormHelpers.js";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-hidden-text-input";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-provider.js";
 import "@goauthentik/elements/forms/FormGroup";
@@ -68,21 +69,15 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
                             ${msg("Client ID for the app registration.")}
                         </p>
                     </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
+                    <ak-hidden-text-input
-                        label=${msg("Client Secret")}
-                        required
                         name="clientSecret"
+                        label=${msg("Client Secret")}
+                        value="${this.instance?.clientSecret ?? ""}"
+                        input-hint="code"
+                        required
+                        .help=${msg("Client secret for the app registration.")}
                     >
-                        <input
+                    </ak-hidden-text-input>
-                            type="text"
-                            value="${this.instance?.clientSecret ?? ""}"
-                            class="pf-c-form-control pf-m-monospace"
-                            required
-                        />
-                        <p class="pf-c-form__helper-text">
-                            ${msg("Client secret for the app registration.")}
-                        </p>
-                    </ak-form-element-horizontal>
                     <ak-form-element-horizontal label=${msg("Tenant ID")} required name="tenantId">
                         <input
                             type="text"

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

@@ -5,6 +5,7 @@ import {
     akOAuthRedirectURIInput,
 } from "@goauthentik/admin/providers/oauth2/OAuth2ProviderRedirectURI";
 import { ascii_letters, digits, randomString } from "@goauthentik/common/utils";
+import "@goauthentik/components/ak-hidden-text-input";
 import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/components/ak-text-input";
 import "@goauthentik/components/ak-textarea-input";
@@ -166,17 +167,16 @@ export function renderForm(
                     input-hint="code"
                 >
                 </ak-text-input>
-                <ak-text-input
+                <ak-hidden-text-input
                     name="clientSecret"
                     label=${msg("Client Secret")}
                     value="${provider?.clientSecret ?? randomString(128, ascii_letters + digits)}"
                     input-hint="code"
                     ?hidden=${!showClientSecret}
                 >
-                </ak-text-input>
+                </ak-hidden-text-input>
                 <ak-form-element-horizontal
                     label=${msg("Redirect URIs/Origins (RegEx)")}
-                    required
                     name="redirectUris"
                 >
                     <ak-array-input

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

@@ -1,6 +1,8 @@
 import "@goauthentik/admin/common/ak-flow-search/ak-branded-flow-search";
 import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
 import { ascii_letters, digits, randomString } from "@goauthentik/common/utils";
+import "@goauthentik/components/ak-hidden-text-input";
+import "@goauthentik/components/ak-text-input";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/SearchSelect";
@@ -74,14 +76,14 @@ export function renderForm(
         <ak-form-group expanded>
             <span slot="header"> ${msg("Protocol settings")} </span>
             <div slot="body" class="pf-c-form">
-                <ak-text-input
+                <ak-hidden-text-input
                     name="sharedSecret"
                     label=${msg("Shared secret")}
                     .errorMessages=${errors?.sharedSecret ?? []}
                     value=${provider?.sharedSecret ?? randomString(128, ascii_letters + digits)}
                     required
                     input-hint="code"
-                ></ak-text-input>
+                ></ak-hidden-text-input>
                 <ak-text-input
                     name="clientNetworks"
                     label=${msg("Client Networks")}

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

@@ -1,4 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-hidden-text-input";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -50,7 +51,7 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
                 >
                 </ak-switch-input>
 
-                <ak-text-input
+                <ak-hidden-text-input
                     name="token"
                     label=${msg("Token")}
                     value="${provider?.token ?? ""}"
@@ -60,7 +61,7 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
                         "Token to authenticate with. Currently only bearer authentication is supported.",
                     )}
                     input-hint="code"
-                ></ak-text-input>
+                ></ak-hidden-text-input>
                 <ak-radio-input
                     name="compatibilityMode"
                     label=${msg("Compatibility Mode")}

web/src/admin/sources/plex/PlexSourceForm.ts

@@ -128,7 +128,7 @@ export class PlexSourceForm extends WithCapabilitiesConfig(BaseSourceForm<PlexSo
                     this.doAuth();
                 }}
             >
-                ${msg("Re-authenticate with plex")}
+                ${msg("Re-authenticate with Plex")}
             </button>
             <ak-form-element-horizontal name="allowFriends">
                 <label class="pf-c-switch">

web/src/admin/users/ServiceAccountForm.ts

@@ -1,5 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { dateTimeLocal } from "@goauthentik/common/temporal";
+import "@goauthentik/components/ak-hidden-text-input";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModalForm } from "@goauthentik/elements/forms/ModalForm";
@@ -124,19 +125,14 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
                         class="pf-c-form-control"
                     />
                 </ak-form-element-horizontal>
-                <ak-form-element-horizontal label=${msg("Password")}>
+                <ak-hidden-text-input
-                    <input
+                    label=${msg("Password")}
-                        type="text"
+                    value="${this.result?.token ?? ""}"
-                        readonly
+                    .help=${msg(
-                        value=${ifDefined(this.result?.token)}
+                        "Valid for 360 days, after which the password will automatically rotate. You can copy the password from the Token List.",
-                        class="pf-c-form-control"
+                    )}
-                    />
+                >
-                    <p class="pf-c-form__helper-text">
+                </ak-hidden-text-input>
-                        ${msg(
-                            "Valid for 360 days, after which the password will automatically rotate. You can copy the password from the Token List.",
-                        )}
-                    </p>
-                </ak-form-element-horizontal>
             </form>`;
     }