habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Improve form input validation and visibility. (#12812)

Browse Source
This commit is contained in:
Teffen Ellis
2025-02-14 02:11:35 +01:00
committed by GitHub
parent 49cc70eb96
commit 46a968d1dd
44 changed files with 268 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/admin/admin-settings/AdminSettingsFooterLinks.ts
View File

@ -74,10 +74,11 @@ export class FooterLinkInput extends AkControlElement<FooterLink> {
tabindex="1" tabindex="1"
/> />
<input <input
type="text" type="url"
@change=${onChange} @change=${onChange}
value="${ifDefined(this.footerLink.href ?? undefined)}" value="${ifDefined(this.footerLink.href ?? undefined)}"
class="pf-c-form-control ak-form-control" class="pf-c-form-control ak-form-control pf-m-monospace"
autocomplete="off"
required required
placeholder=${msg("URL")} placeholder=${msg("URL")}
name="href" name="href"

6
web/src/admin/admin-settings/AdminSettingsForm.ts
View File

@ -70,6 +70,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
name="avatars" name="avatars"
label=${msg("Avatars")} label=${msg("Avatars")}
value="${ifDefined(this._settings?.avatars)}" value="${ifDefined(this._settings?.avatars)}"
inputHint="code"
.bighelp=${html` .bighelp=${html`
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
@ -156,6 +157,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
<ak-text-input <ak-text-input
name="eventRetention" name="eventRetention"
label=${msg("Event retention")} label=${msg("Event retention")}
inputHint="code"
required required
value="${ifDefined(this._settings?.eventRetention)}" value="${ifDefined(this._settings?.eventRetention)}"
.bighelp=${html`<p class="pf-c-form__helper-text"> .bighelp=${html`<p class="pf-c-form__helper-text">
@ -163,7 +165,8 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
</p> </p>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
'When using an external logging solution for archiving, this can be set to "minutes=5".', html`When using an external logging solution for archiving, this can be
set to <code>minutes=5</code>.`,
)} )}
</p> </p>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -218,6 +221,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
<ak-text-input <ak-text-input
name="defaultTokenDuration" name="defaultTokenDuration"
label=${msg("Default token duration")} label=${msg("Default token duration")}
inputHint="code"
required required
value="${ifDefined(this._settings?.defaultTokenDuration)}" value="${ifDefined(this._settings?.defaultTokenDuration)}"
.bighelp=${html`<p class="pf-c-form__helper-text"> .bighelp=${html`<p class="pf-c-form__helper-text">

3
web/src/admin/applications/ApplicationForm.ts
View File

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

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

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

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

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

13
web/src/admin/brands/BrandForm.ts
View File

@ -59,7 +59,10 @@ export class BrandForm extends ModelForm<Brand, string> {
<input <input
type="text" type="text"
value="${first(this.instance?.domain, window.location.host)}" value="${first(this.instance?.domain, window.location.host)}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
inputmode="url"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -116,7 +119,9 @@ export class BrandForm extends ModelForm<Brand, string> {
<input <input
type="text" type="text"
value="${first(this.instance?.brandingLogo, DefaultBrand.brandingLogo)}" value="${first(this.instance?.brandingLogo, DefaultBrand.brandingLogo)}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -134,7 +139,9 @@ export class BrandForm extends ModelForm<Brand, string> {
this.instance?.brandingFavicon, this.instance?.brandingFavicon,
DefaultBrand.brandingFavicon, DefaultBrand.brandingFavicon,
)}" )}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

14
web/src/admin/crypto/CertificateKeyPairForm.ts
View File

@ -52,7 +52,13 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
?writeOnly=${this.instance !== undefined} ?writeOnly=${this.instance !== undefined}
?required=${true} ?required=${true}
> >
<textarea class="pf-c-form-control" required></textarea> <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> <p class="pf-c-form__helper-text">${msg("PEM-encoded Certificate data.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
@ -60,7 +66,11 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
?writeOnly=${this.instance !== undefined} ?writeOnly=${this.instance !== undefined}
label=${msg("Private Key")} label=${msg("Private Key")}
> >
<textarea class="pf-c-form-control"></textarea> <textarea
autocomplete="off"
class="pf-c-form-control pf-m-monospace"
spellcheck="false"
></textarea>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
"Optional Private Key. If this is set, you can use this keypair for encryption.", "Optional Private Key. If this is set, you can use this keypair for encryption.",

25
web/src/admin/enterprise/EnterpriseLicenseForm.ts
View File

@ -51,13 +51,26 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
// prettier-ignore return html` <ak-form-element-horizontal label=${msg("Install ID")}>
return html` <input
<ak-form-element-horizontal label=${msg("Install ID")}> class="pf-c-form-control pf-m-monospace"
<input class="pf-c-form-control" readonly type="text" value="${ifDefined(this.installID)}" /> autocomplete="off"
spellcheck="false"
readonly
type="text"
value="${ifDefined(this.installID)}"
/>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="key" ?writeOnly=${this.instance !== undefined} label=${msg("License key")}> <ak-form-element-horizontal
<textarea class="pf-c-form-control"></textarea> name="key"
?writeOnly=${this.instance !== undefined}
label=${msg("License key")}
>
<textarea
class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
></textarea>
</ak-form-element-horizontal>`; </ak-form-element-horizontal>`;
} }
} }

2
web/src/admin/enterprise/EnterpriseLicenseListPage.ts
View File

@ -254,7 +254,7 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
const renderCard = (installID: string) => html` const renderCard = (installID: string) => html`
<div class="pf-c-card__title">${msg("Your Install ID")}</div> <div class="pf-c-card__title">${msg("Your Install ID")}</div>
<div class="pf-c-card__body install-id">${installID}</div> <div class="pf-c-card__body install-id pf-m-monospace">${installID}</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<a <a
target="_blank" target="_blank"

4
web/src/admin/flows/FlowForm.ts
View File

@ -99,7 +99,9 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.slug)}" value="${ifDefined(this.instance?.slug)}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text">${msg("Visible in the URL.")}</p> <p class="pf-c-form__helper-text">${msg("Visible in the URL.")}</p>

9
web/src/admin/outposts/ServiceConnectionDockerForm.ts
View File

@ -72,12 +72,17 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.url)}" value="${ifDefined(this.instance?.url)}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
inputmode="url"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
"Can be in the format of 'unix://' when connecting to a local docker daemon, using 'ssh://' to connect via SSH, or 'https://:2376' when connecting to a remote system.", html`Can be in the format of <code>unix://</code> when connecting to a local
docker daemon, using <code>ssh://</code> to connect via SSH, or
<code>https://:2376</code> when connecting to a remote system.`,
)} )}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>

4
web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts
View File

@ -113,7 +113,9 @@ export class EventMatcherPolicyForm extends BasePolicyForm<EventMatcherPolicy> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.clientIp || "")}" value="${ifDefined(this.instance?.clientIp || "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(

4
web/src/admin/policies/geoip/GeoIPPolicyForm.ts
View File

@ -86,7 +86,9 @@ export class GeoIPPolicyForm extends BasePolicyForm<GeoIPPolicy> {
<input <input
type="text" type="text"
value="${this.instance?.asns ?? ""}" value="${this.instance?.asns ?? ""}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(

4
web/src/admin/providers/google_workspace/GoogleWorkspaceProviderForm.ts
View File

@ -82,7 +82,7 @@ export class GoogleWorkspaceProviderFormPage extends BaseProviderForm<GoogleWork
<input <input
type="email" type="email"
value="${first(this.instance?.delegatedSubject, "")}" value="${first(this.instance?.delegatedSubject, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -99,7 +99,7 @@ export class GoogleWorkspaceProviderFormPage extends BaseProviderForm<GoogleWork
<input <input
type="text" type="text"
value="${first(this.instance?.defaultGroupEmailDomain, "")}" value="${first(this.instance?.defaultGroupEmailDomain, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

2
web/src/admin/providers/ldap/LDAPProviderFormForm.ts
View File

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

6
web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderForm.ts
View File

@ -67,7 +67,7 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
<input <input
type="text" type="text"
value="${first(this.instance?.clientId, "")}" value="${first(this.instance?.clientId, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -82,7 +82,7 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
<input <input
type="text" type="text"
value="${first(this.instance?.clientSecret, "")}" value="${first(this.instance?.clientSecret, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -97,7 +97,7 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
<input <input
type="text" type="text"
value="${first(this.instance?.tenantId, "")}" value="${first(this.instance?.tenantId, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

5
web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
View File

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

4
web/src/admin/providers/oauth2/OAuth2ProviderRedirectURI.ts
View File

@ -80,7 +80,9 @@ export class OAuth2ProviderRedirectURI extends AkControlElement<RedirectURI> {
type="text" type="text"
@change=${onChange} @change=${onChange}
value="${ifDefined(this.redirectURI.url ?? undefined)}" value="${ifDefined(this.redirectURI.url ?? undefined)}"
class="pf-c-form-control ak-form-control" class="pf-c-form-control ak-form-control pf-m-monospace"
spellcheck="false"
autocomplete="off"
required required
id="url" id="url"
placeholder=${msg("URL")} placeholder=${msg("URL")}

10
web/src/admin/providers/proxy/ProxyProviderFormForm.ts
View File

@ -48,6 +48,7 @@ function renderHttpBasic(provider: Partial<ProxyProvider>) {
help=${msg( 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.", "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"
> >
</ak-text-input> </ak-text-input>
@ -56,6 +57,7 @@ function renderHttpBasic(provider: Partial<ProxyProvider>) {
label=${msg("HTTP-Basic Password Key")} label=${msg("HTTP-Basic Password Key")}
value="${ifDefined(provider?.basicAuthPasswordAttribute)}" value="${ifDefined(provider?.basicAuthPasswordAttribute)}"
help=${msg("User/Group Attribute used for the password part of the HTTP-Basic Header.")} help=${msg("User/Group Attribute used for the password part of the HTTP-Basic Header.")}
inputHint="code"
> >
</ak-text-input>`; </ak-text-input>`;
} }
@ -88,6 +90,7 @@ function renderProxySettings(provider: Partial<ProxyProvider>, errors?: Validati
help=${msg( help=${msg(
"The external URL you'll access the application at. Include any non-standard port.", "The external URL you'll access the application at. Include any non-standard port.",
)} )}
inputHint="code"
></ak-text-input> ></ak-text-input>
<ak-text-input <ak-text-input
name="internalHost" name="internalHost"
@ -96,6 +99,7 @@ function renderProxySettings(provider: Partial<ProxyProvider>, errors?: Validati
required required
.errorMessages=${errors?.internalHost ?? []} .errorMessages=${errors?.internalHost ?? []}
help=${msg("Upstream host that the requests are forwarded to.")} help=${msg("Upstream host that the requests are forwarded to.")}
inputHint="code"
></ak-text-input> ></ak-text-input>
<ak-switch-input <ak-switch-input
@ -122,6 +126,7 @@ function renderForwardSingleSettings(provider: Partial<ProxyProvider>, errors?:
help=${msg( help=${msg(
"The external URL you'll access the application at. Include any non-standard port.", "The external URL you'll access the application at. Include any non-standard port.",
)} )}
inputHint="code"
></ak-text-input>`; ></ak-text-input>`;
} }
@ -220,6 +225,7 @@ export function renderForm(
.errorMessages=${errors?.accessTokenValidity ?? []} .errorMessages=${errors?.accessTokenValidity ?? []}
required required
.help=${msg("Configure how long tokens are valid for.")} .help=${msg("Configure how long tokens are valid for.")}
inputHint="code"
></ak-text-input> ></ak-text-input>
<ak-form-group> <ak-form-group>
@ -251,7 +257,9 @@ export function renderForm(
: msg("Unauthenticated Paths")}" : msg("Unauthenticated Paths")}"
name="skipPathRegex" name="skipPathRegex"
> >
<textarea class="pf-c-form-control">${provider?.skipPathRegex}</textarea> <textarea class="pf-c-form-control pf-m-monospace">
${provider?.skipPathRegex}</textarea
>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
"Regular expressions for which authentication is not required. Each new line is interpreted as a new expression.", "Regular expressions for which authentication is not required. Each new line is interpreted as a new expression.",

4
web/src/admin/providers/rac/RACProviderForm.ts
View File

@ -83,7 +83,9 @@ export class RACProviderFormPage extends ModelForm<RACProvider, number> {
<input <input
type="text" type="text"
value="${first(this.instance?.connectionExpiry, "hours=8")}" value="${first(this.instance?.connectionExpiry, "hours=8")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

2
web/src/admin/providers/radius/RadiusProviderFormForm.ts
View File

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

2
web/src/admin/providers/scim/SCIMProviderFormForm.ts
View File

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

59
web/src/admin/sources/oauth/OAuthSourceForm.ts
View File

@ -126,7 +126,9 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
this.providerType.authorizationUrl, this.providerType.authorizationUrl,
"", "",
)}" )}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg("URL the user is redirect to to consent the authorization.")} ${msg("URL the user is redirect to to consent the authorization.")}
@ -134,13 +136,15 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Access token URL")} name="accessTokenUrl"> <ak-form-element-horizontal label=${msg("Access token URL")} name="accessTokenUrl">
<input <input
type="text" type="url"
value="${first( value="${first(
this.instance?.accessTokenUrl, this.instance?.accessTokenUrl,
this.providerType.accessTokenUrl, this.providerType.accessTokenUrl,
"", "",
)}" )}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg("URL used by authentik to retrieve tokens.")} ${msg("URL used by authentik to retrieve tokens.")}
@ -148,13 +152,15 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Profile URL")} name="profileUrl"> <ak-form-element-horizontal label=${msg("Profile URL")} name="profileUrl">
<input <input
type="text" type="url"
value="${first( value="${first(
this.instance?.profileUrl, this.instance?.profileUrl,
this.providerType.profileUrl, this.providerType.profileUrl,
"", "",
)}" )}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg("URL used by authentik to get user information.")} ${msg("URL used by authentik to get user information.")}
@ -166,9 +172,10 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
name="requestTokenUrl" name="requestTokenUrl"
> >
<input <input
type="text" type="url"
value="${first(this.instance?.requestTokenUrl, "")}" value="${first(this.instance?.requestTokenUrl, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
@ -184,13 +191,15 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
name="oidcWellKnownUrl" name="oidcWellKnownUrl"
> >
<input <input
type="text" type="url"
value="${first( value="${first(
this.instance?.oidcWellKnownUrl, this.instance?.oidcWellKnownUrl,
this.providerType.oidcWellKnownUrl, this.providerType.oidcWellKnownUrl,
"", "",
)}" )}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
@ -206,13 +215,15 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
name="oidcJwksUrl" name="oidcJwksUrl"
> >
<input <input
type="text" type="url"
value="${first( value="${first(
this.instance?.oidcJwksUrl, this.instance?.oidcJwksUrl,
this.providerType.oidcJwksUrl, this.providerType.oidcJwksUrl,
"", "",
)}" )}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
@ -246,7 +257,9 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.slug)}" value="${ifDefined(this.instance?.slug)}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -344,7 +357,9 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
this.instance?.userPathTemplate, this.instance?.userPathTemplate,
"goauthentik.io/sources/%(slug)s", "goauthentik.io/sources/%(slug)s",
)}" )}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text">${placeholderHelperText}</p> <p class="pf-c-form__helper-text">${placeholderHelperText}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -390,7 +405,9 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
<input <input
type="text" type="text"
value="${first(this.instance?.icon, "")}" value="${first(this.instance?.icon, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text">${iconHelperText}</p> <p class="pf-c-form__helper-text">${iconHelperText}</p>
</ak-form-element-horizontal>`} </ak-form-element-horizontal>`}
@ -406,7 +423,9 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.consumerKey)}" value="${ifDefined(this.instance?.consumerKey)}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text">${msg("Also known as Client ID.")}</p> <p class="pf-c-form__helper-text">${msg("Also known as Client ID.")}</p>
@ -417,14 +436,20 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
?writeOnly=${this.instance !== undefined} ?writeOnly=${this.instance !== undefined}
name="consumerSecret" name="consumerSecret"
> >
<textarea class="pf-c-form-control"></textarea> <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> <p class="pf-c-form__helper-text">${msg("Also known as Client Secret.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Scopes")} name="additionalScopes"> <ak-form-element-horizontal label=${msg("Scopes")} name="additionalScopes">
<input <input
type="text" type="text"
value="${first(this.instance?.additionalScopes, "")}" value="${first(this.instance?.additionalScopes, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(

25
web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
View File

@ -79,7 +79,9 @@ export class AuthenticatorDuoStageForm extends BaseStageForm<AuthenticatorDuoSta
<input <input
type="text" type="text"
value="${first(this.instance?.apiHostname, "")}" value="${first(this.instance?.apiHostname, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -104,7 +106,14 @@ export class AuthenticatorDuoStageForm extends BaseStageForm<AuthenticatorDuoSta
?writeOnly=${this.instance !== undefined} ?writeOnly=${this.instance !== undefined}
name="clientSecret" name="clientSecret"
> >
<input type="text" value="" class="pf-c-form-control" required /> <input
type="text"
value=""
class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required
/>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>
</ak-form-group> </ak-form-group>
@ -124,7 +133,9 @@ export class AuthenticatorDuoStageForm extends BaseStageForm<AuthenticatorDuoSta
<input <input
type="text" type="text"
value="${first(this.instance?.adminIntegrationKey, "")}" value="${first(this.instance?.adminIntegrationKey, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
@ -132,7 +143,13 @@ export class AuthenticatorDuoStageForm extends BaseStageForm<AuthenticatorDuoSta
?writeOnly=${this.instance !== undefined} ?writeOnly=${this.instance !== undefined}
name="adminSecretKey" name="adminSecretKey"
> >
<input type="text" value="" class="pf-c-form-control" /> <input
type="text"
value=""
class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>
</ak-form-group> </ak-form-group>

24
web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
View File

@ -67,7 +67,9 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
<input <input
type="text" type="text"
value="${first(this.instance?.accountSid, "")}" value="${first(this.instance?.accountSid, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -82,7 +84,9 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
<input <input
type="text" type="text"
value="${first(this.instance?.auth, "")}" value="${first(this.instance?.auth, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -126,7 +130,9 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
<input <input
type="text" type="text"
value="${first(this.instance?.accountSid, "")}" value="${first(this.instance?.accountSid, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -141,7 +147,9 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
<input <input
type="text" type="text"
value="${first(this.instance?.auth, "")}" value="${first(this.instance?.auth, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
@ -157,7 +165,9 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
<input <input
type="text" type="text"
value="${first(this.instance?.authPassword, "")}" value="${first(this.instance?.authPassword, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg("This is the password to be used with basic auth")} ${msg("This is the password to be used with basic auth")}
@ -263,7 +273,9 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
<input <input
type="text" type="text"
value="${first(this.instance?.fromNumber, "")}" value="${first(this.instance?.fromNumber, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

4
web/src/admin/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
View File

@ -125,7 +125,9 @@ export class AuthenticatorValidateStageForm extends BaseStageForm<AuthenticatorV
<input <input
type="text" type="text"
value="${this.instance?.lastAuthThreshold || "seconds=0"}" value="${this.instance?.lastAuthThreshold || "seconds=0"}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

25
web/src/admin/stages/captcha/CaptchaStageForm.ts
View File

@ -59,7 +59,9 @@ export class CaptchaStageForm extends BaseStageForm<CaptchaStage> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.publicKey || "")}" value="${ifDefined(this.instance?.publicKey || "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -74,7 +76,14 @@ export class CaptchaStageForm extends BaseStageForm<CaptchaStage> {
?writeOnly=${this.instance !== undefined} ?writeOnly=${this.instance !== undefined}
name="privateKey" name="privateKey"
> >
<input type="text" value="" class="pf-c-form-control" required /> <input
type="text"
value=""
class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required
/>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
"Private key, acquired from https://www.google.com/recaptcha/intro/v3.html.", "Private key, acquired from https://www.google.com/recaptcha/intro/v3.html.",
@ -135,12 +144,14 @@ export class CaptchaStageForm extends BaseStageForm<CaptchaStage> {
name="jsUrl" name="jsUrl"
> >
<input <input
type="text" type="url"
value="${ifDefined( value="${ifDefined(
this.instance?.jsUrl || this.instance?.jsUrl ||
"https://www.recaptcha.net/recaptcha/api.js", "https://www.recaptcha.net/recaptcha/api.js",
)}" )}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -155,12 +166,14 @@ export class CaptchaStageForm extends BaseStageForm<CaptchaStage> {
name="apiUrl" name="apiUrl"
> >
<input <input
type="text" type="url"
value="${ifDefined( value="${ifDefined(
this.instance?.apiUrl || this.instance?.apiUrl ||
"https://www.recaptcha.net/recaptcha/api/siteverify", "https://www.recaptcha.net/recaptcha/api/siteverify",
)}" )}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

4
web/src/admin/stages/prompt/PromptForm.ts
View File

@ -217,7 +217,9 @@ export class PromptForm extends ModelForm<Prompt, string> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.fieldKey)}" value="${ifDefined(this.instance?.fieldKey)}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
@input=${() => { @input=${() => {
this._shouldRefresh = true; this._shouldRefresh = true;

4
web/src/admin/stages/redirect/RedirectStageForm.ts
View File

@ -91,7 +91,9 @@ export class RedirectStageForm extends BaseStageForm<RedirectStage> {
<input <input
type="text" type="text"
value="${this.instance?.targetStatic ?? ""}" value="${this.instance?.targetStatic ?? ""}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg("Redirect the user to a static URL.")} ${msg("Redirect the user to a static URL.")}

8
web/src/admin/stages/user_login/UserLoginStageForm.ts
View File

@ -54,7 +54,9 @@ export class UserLoginStageForm extends BaseStageForm<UserLoginStage> {
<input <input
type="text" type="text"
value="${first(this.instance?.sessionDuration, "seconds=0")}" value="${first(this.instance?.sessionDuration, "seconds=0")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
@ -83,7 +85,9 @@ export class UserLoginStageForm extends BaseStageForm<UserLoginStage> {
<input <input
type="text" type="text"
value="${first(this.instance?.rememberMeOffset, "seconds=0")}" value="${first(this.instance?.rememberMeOffset, "seconds=0")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

4
web/src/admin/stages/user_write/UserWriteStageForm.ts
View File

@ -150,7 +150,9 @@ export class UserWriteStageForm extends BaseStageForm<UserWriteStage> {
<input <input
type="text" type="text"
value="${first(this.instance?.userPathTemplate, "")}" value="${first(this.instance?.userPathTemplate, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

4
web/src/admin/tokens/TokenForm.ts
View File

@ -64,7 +64,9 @@ export class TokenForm extends ModelForm<Token, string> {
<input <input
type="text" type="text"
value="${first(this.instance?.identifier, "")}" value="${first(this.instance?.identifier, "")}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

9
web/src/admin/users/ServiceAccountForm.ts
View File

@ -59,7 +59,14 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
?required=${true} ?required=${true}
name="name" name="name"
> >
<input type="text" value="" class="pf-c-form-control" required /> <input
type="text"
value=""
class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required
/>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg("User's primary identifier. 150 characters or fewer.")} ${msg("User's primary identifier. 150 characters or fewer.")}
</p> </p>

4
web/src/admin/users/UserForm.ts
View File

@ -91,7 +91,9 @@ export class UserForm extends ModelForm<User, number> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.username)}" value="${ifDefined(this.instance?.username)}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

8
web/src/common/styles/authentik.css
View File

@ -120,6 +120,14 @@ html > form > input {
color: var(--pf-global--danger-color--100); color: var(--pf-global--danger-color--100);
} }
/* #region Fonts */
.pf-m-monospace {
font-family: var(--pf-global--FontFamily--monospace);
}
/* #endregion */
.pf-c-description-list__description .pf-c-button { .pf-c-description-list__description .pf-c-button {
margin-right: 6px; margin-right: 6px;
margin-bottom: 6px; margin-bottom: 6px;

5
web/src/components/HorizontalLightComponent.ts
View File

@ -45,6 +45,9 @@ export class HorizontalLightComponent<T> extends AKElement {
@property({ attribute: false }) @property({ attribute: false })
value?: T; value?: T;
@property({ type: String })
inputHint = "";
renderControl() { renderControl() {
throw new Error("Must be implemented in a subclass"); throw new Error("Must be implemented in a subclass");
} }
@ -69,7 +72,7 @@ export class HorizontalLightComponent<T> extends AKElement {
.errorMessages=${this.errorMessages} .errorMessages=${this.errorMessages}
?invalid=${this.invalid} ?invalid=${this.invalid}
> >
${this.renderControl()} ${this.renderControl()}
${this.renderHelp()} ${this.renderHelp()}
</ak-form-element-horizontal> `; </ak-form-element-horizontal> `;
} }

10
web/src/components/ak-text-input.ts
View File

@ -1,5 +1,6 @@
import { html } from "lit"; import { html } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js"; import { ifDefined } from "lit/directives/if-defined.js";
import { HorizontalLightComponent } from "./HorizontalLightComponent"; import { HorizontalLightComponent } from "./HorizontalLightComponent";
@ -14,11 +15,18 @@ export class AkTextInput extends HorizontalLightComponent<string> {
this.value = (ev.target as HTMLInputElement).value; this.value = (ev.target as HTMLInputElement).value;
}; };
const code = this.inputHint === "code";
return html` <input return html` <input
type="text" type="text"
@input=${setValue} @input=${setValue}
value=${ifDefined(this.value)} value=${ifDefined(this.value)}
class="pf-c-form-control" class="${classMap({
"pf-c-form-control": true,
"pf-m-monospace": code,
})}"
autocomplete=${ifDefined(code ? "off" : undefined)}
spellcheck=${ifDefined(code ? "false" : undefined)}
?required=${this.required} ?required=${this.required}
/>`; />`;
} }

4
web/src/elements/utils/TimeDeltaHelp.ts
View File

@ -22,8 +22,8 @@ export class TimeDeltaHelp extends AKElement {
return html`<div class="pf-c-form__helper-text"> return html`<div class="pf-c-form__helper-text">
<span> <span>
${this.negative ${this.negative
? msg("(Format: hours=-1;minutes=-2;seconds=-3).") ? msg(html`(Format: <code>hours=-1;minutes=-2;seconds=-3)</code>.`)
: msg("(Format: hours=1;minutes=2;seconds=3).")} : msg(html`(Format: <code>hours=1;minutes=2;seconds=3).</code>`)}
</span> </span>
<pf-tooltip position="top"> <pf-tooltip position="top">
<i class="pf-icon fa fa-question-circle" aria-hidden="true"></i> <i class="pf-icon fa fa-question-circle" aria-hidden="true"></i>

3
web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts
View File

@ -45,7 +45,6 @@ export class AuthenticatorStaticStage extends BaseStage<
} }
ul li { ul li {
font-size: var(--pf-global--FontSize--2xl); font-size: var(--pf-global--FontSize--2xl);
font-family: monospace;
margin: 0 2rem; margin: 0 2rem;
} }
`, `,
@ -80,7 +79,7 @@ export class AuthenticatorStaticStage extends BaseStage<
<ak-form-element label="" class="pf-c-form__group"> <ak-form-element label="" class="pf-c-form__group">
<ul> <ul>
${this.challenge.codes.map((token) => { ${this.challenge.codes.map((token) => {
return html`<li>${token}</li>`; return html`<li class="pf-m-monospace">${token}</li>`;
})} })}
</ul> </ul>
</ak-form-element> </ak-form-element>

3
web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts
View File

@ -125,7 +125,8 @@ export class AuthenticatorTOTPStage extends BaseStage<
placeholder="${msg("Please enter your TOTP Code")}" placeholder="${msg("Please enter your TOTP Code")}"
autofocus="" autofocus=""
autocomplete="one-time-code" autocomplete="one-time-code"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
spellcheck="false"
required required
/> />
</ak-form-element> </ak-form-element>

1
web/src/flow/stages/identification/IdentificationStage.ts
View File

@ -260,6 +260,7 @@ export class IdentificationStage extends BaseStage<
placeholder=${label} placeholder=${label}
autofocus="" autofocus=""
autocomplete="username" autocomplete="username"
spellcheck="false"
class="pf-c-form-control" class="pf-c-form-control"
required required
/> />

1
web/src/flow/stages/prompt/PromptStage.ts
View File

@ -99,6 +99,7 @@ ${prompt.initialValue}</textarea
name="${prompt.fieldKey}" name="${prompt.fieldKey}"
placeholder="${prompt.placeholder}" placeholder="${prompt.placeholder}"
autocomplete="username" autocomplete="username"
spellcheck="false"
class="pf-c-form-control" class="pf-c-form-control"
?required=${prompt.required} ?required=${prompt.required}
value="${prompt.initialValue}" value="${prompt.initialValue}"

4
web/src/user/user-settings/tokens/UserTokenForm.ts
View File

@ -56,7 +56,9 @@ export class UserTokenForm extends ModelForm<Token, string> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.identifier)}" value="${ifDefined(this.instance?.identifier)}"
class="pf-c-form-control" class="pf-c-form-control pf-m-monospace"
autocomplete="off"
spellcheck="false"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>

2
web/src/user/user-settings/tokens/UserTokenList.ts
View File

@ -151,7 +151,7 @@ export class UserTokenList extends Table<Token> {
row(item: Token): TemplateResult[] { row(item: Token): TemplateResult[] {
return [ return [
html`${item.identifier}`, html`<span class="pf-m-monospace">${item.identifier}</span>`,
html` html`
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>