From c659e40df72016f365e1bc0677c87b06dd2baf3f Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Fri, 2 Apr 2021 12:56:03 +0200 Subject: [PATCH] web/elements: make form sync slug field with name field Signed-off-by: Jens Langhammer --- web/src/elements/forms/Form.ts | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts index 2e4b3cf5a..ee0ebf3c7 100644 --- a/web/src/elements/forms/Form.ts +++ b/web/src/elements/forms/Form.ts @@ -12,7 +12,7 @@ import PFFormControl from "@patternfly/patternfly/components/FormControl/form-co import PFAlert from "@patternfly/patternfly/components/Alert/alert.css"; import { MessageLevel } from "../messages/Message"; import { IronFormElement } from "@polymer/iron-form/iron-form"; -import { camelToSnake } from "../../utils"; +import { camelToSnake, convertToSlug } from "../../utils"; import { ValidationError } from "authentik-api/src"; export class APIError extends Error { @@ -47,6 +47,28 @@ export class Form extends LitElement { return this.successMessage; } + updated(): void { + this.shadowRoot?.querySelectorAll("input[name=name]").forEach(nameInput => { + const form = nameInput.closest("form"); + if (form === null) { + return; + } + const slugField = form.querySelector("input[name=slug]"); + if (!slugField) { + return; + } + // Only attach handler if the slug is already equal to the name + // if not, they are probably completely different and shouldn't update + // each other + if (convertToSlug(nameInput.value) !== slugField.value) { + return; + } + nameInput.addEventListener("input", () => { + slugField.value = convertToSlug(nameInput.value); + }); + }); + } + /** * Reset the inner iron-form */