From 3184a644820c299137d7b024d78d82e4726bdf36 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Sat, 26 Mar 2022 18:49:08 +0100 Subject: [PATCH] web: live-convert to slug in fields where only slugs are allowed Signed-off-by: Jens Langhammer --- web/src/elements/forms/HorizontalFormElement.ts | 11 +++++++++++ .../AuthenticateWebAuthnStageForm.ts | 3 +-- web/src/pages/stages/invitation/InvitationForm.ts | 7 ++++++- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts index 4bda70044..ad546c726 100644 --- a/web/src/elements/forms/HorizontalFormElement.ts +++ b/web/src/elements/forms/HorizontalFormElement.ts @@ -9,6 +9,7 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import { convertToSlug } from "../../utils"; import { FormGroup } from "./FormGroup"; @customElement("ak-form-element-horizontal") @@ -48,6 +49,9 @@ export class HorizontalFormElement extends LitElement { @property({ attribute: false }) errorMessages: string[] = []; + @property({ type: Boolean }) + slugMode = false; + _invalid = false; @property({ type: Boolean }) @@ -70,6 +74,13 @@ export class HorizontalFormElement extends LitElement { this.querySelectorAll("input[autofocus]").forEach((input) => { input.focus(); }); + if (this.name === "slug" || this.slugMode) { + this.querySelectorAll("input[type='text']").forEach((input) => { + input.addEventListener("keyup", () => { + input.value = convertToSlug(input.value); + }); + }); + } this.querySelectorAll("*").forEach((input) => { switch (input.tagName.toLowerCase()) { case "input": diff --git a/web/src/pages/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts b/web/src/pages/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts index a6df2d58d..d78f0192b 100644 --- a/web/src/pages/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts +++ b/web/src/pages/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts @@ -1,5 +1,3 @@ -import { UserVerificationEnum } from "@goauthentik/api/dist/models/UserVerificationEnum"; - import { t } from "@lingui/macro"; import { TemplateResult, html } from "lit"; @@ -14,6 +12,7 @@ import { FlowsInstancesListDesignationEnum, ResidentKeyRequirementEnum, StagesApi, + UserVerificationEnum, } from "@goauthentik/api"; import { DEFAULT_CONFIG } from "../../../api/Config"; diff --git a/web/src/pages/stages/invitation/InvitationForm.ts b/web/src/pages/stages/invitation/InvitationForm.ts index a3ea9e885..ecafd1405 100644 --- a/web/src/pages/stages/invitation/InvitationForm.ts +++ b/web/src/pages/stages/invitation/InvitationForm.ts @@ -44,7 +44,12 @@ export class InvitationForm extends ModelForm { renderForm(): TemplateResult { return html`
- +