Prevent invalid slugs from causing redirects in org settings (#2004)

Also improves the slug editing experience by partially-slugifying the
value as it's entered.

Previously, submitting a org slug value of ".." or similar would cause
the frontend to redirect to a "page not found" page, with all accessible
links leading to only `/account/settings`. This also causes the backend
to reset the org slug to one generated from the org name on a reload.

---------

Co-authored-by: sua yoo <sua@webrecorder.org>

frontend/src/pages/org/settings/settings.ts

@@ -239,10 +239,7 @@ export class OrgSettings extends TailwindElement {
                       : this.org.slug
                   }`,
                 )}
-                @sl-input=${(e: InputEvent) => {
+                @sl-input=${this.handleSlugInput}
-                  const input = e.target as SlInput;
-                  this.slugValue = input.value;
-                }}
               ></sl-input>
             `,
             msg(
@@ -275,6 +272,19 @@ export class OrgSettings extends TailwindElement {
     </div>`;
   }
 
+  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 ? msg("URL Identifier too short") : "",
+    );
+  }
+
   private renderMembers() {
     if (!this.org?.users) return;