From 2c7572c96b719e5377924a60cbb67f67e86ff49b Mon Sep 17 00:00:00 2001 From: emma Date: Wed, 7 Aug 2024 19:06:41 -0400 Subject: [PATCH 1/2] prevent redirecting to empty slug values when editing org, and improve slug input experience --- frontend/src/pages/org/settings/settings.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts index 76a6e5888..8b20df7b6 100644 --- a/frontend/src/pages/org/settings/settings.ts +++ b/frontend/src/pages/org/settings/settings.ts @@ -239,10 +239,7 @@ export class OrgSettings extends TailwindElement { : this.org.slug }`, )} - @sl-input=${(e: InputEvent) => { - const input = e.target as SlInput; - this.slugValue = input.value; - }} + @sl-input=${this.handleSlugInput} > `, msg( @@ -275,6 +272,19 @@ export class OrgSettings extends TailwindElement { `; } + private handleSlugInput(e: InputEvent) { + const input = e.target as SlInput; + // Ideally this would match against the full character map that slugify uses + // but this'll do for most use cases + const end = input.value.match(/[\s*_+~.,()'"!\-:@]$/g) ? "-" : ""; + input.value = slugifyStrict(input.value) + end; + this.slugValue = slugifyStrict(input.value); + + input.setCustomValidity( + this.slugValue.length < 2 ? "URL Identifier too short" : "", + ); + } + private renderMembers() { if (!this.org?.users) return; From 8662c64ff92ca8bba8342132d49dc030a7d72a22 Mon Sep 17 00:00:00 2001 From: Emma Segal-Grossman Date: Wed, 7 Aug 2024 20:45:32 -0400 Subject: [PATCH 2/2] Update settings.ts Co-authored-by: sua yoo --- frontend/src/pages/org/settings/settings.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts index 8b20df7b6..dba3d5cca 100644 --- a/frontend/src/pages/org/settings/settings.ts +++ b/frontend/src/pages/org/settings/settings.ts @@ -281,7 +281,7 @@ export class OrgSettings extends TailwindElement { this.slugValue = slugifyStrict(input.value); input.setCustomValidity( - this.slugValue.length < 2 ? "URL Identifier too short" : "", + this.slugValue.length < 2 ? msg("URL Identifier too short") : "", ); }