web/admin: use attribute naming scheme for attributes (#14644)

web/standards: use attribute naming scheme for attributes

## What

Renamed the 'inputHint' attribute to 'input-hint', because it is an attribute, not a property.
Properties are camelCased, but attributes are kebab-cased.

Updated all instances where this appears with the usual magic:

```
$ perl -pi.bak -e 's/inputHint="code"/input-hint="code"/' $(rg -l 'inputHint="code"')
```

This fix is in preparation for both the Patternfly 5 project and the Schema-Driven Forms project.

* Revision: You almost certainly do NOT want every field to be reflected.  Booleans are okay, especially for fields that may be changed internally but need to be read by screen-readers, sunch as 'hidden' or 'invalid'.  But if a field is a string or a number and has a default value, you do not want it to be reflected.
This commit is contained in:
Ken Sternberg
2025-06-06 14:49:47 -07:00
committed by GitHub
parent e77a3241f0
commit 6b530ff764
10 changed files with 32 additions and 32 deletions

View File

@ -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">

View File

@ -136,7 +136,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"
@ -145,7 +145,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"
@ -186,7 +186,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"

View File

@ -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"

View File

@ -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}>

View File

@ -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

View File

@ -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.")}

View File

@ -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>

View File

@ -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")}

View File

@ -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"

View File

@ -18,13 +18,13 @@ export class HorizontalLightComponent<T> extends AKElement {
return this;
}
@property({ type: String })
@property({ type: String, reflect: true })
name!: string;
@property({ type: String })
label = "";
@property({ type: Boolean })
@property({ type: Boolean, reflect: true })
required = false;
@property({ type: String })
@ -33,10 +33,10 @@ export class HorizontalLightComponent<T> extends AKElement {
@property({ type: Object })
bighelp?: TemplateResult | TemplateResult[];
@property({ type: Boolean })
@property({ type: Boolean, reflect: true })
hidden = false;
@property({ type: Boolean })
@property({ type: Boolean, reflect: true })
invalid = false;
@property({ attribute: false })
@ -45,7 +45,7 @@ export class HorizontalLightComponent<T> extends AKElement {
@property({ attribute: false })
value?: T;
@property({ type: String })
@property({ type: String, attribute: "input-hint" })
inputHint = "";
renderControl() {