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>
This commit is contained in:
Emma Segal-Grossman 2024-08-08 17:41:18 -04:00 committed by GitHub
parent ed9038fbdb
commit 2b5f964c24
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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}
></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;