diff --git a/src/client/Main.ts b/src/client/Main.ts index 0461690d1..b163bb2a6 100644 --- a/src/client/Main.ts +++ b/src/client/Main.ts @@ -502,6 +502,10 @@ class Client { () => { console.log("Closing modals"); document.getElementById("settings-button")?.classList.add("hidden"); + if (this.usernameInput) { + // fix edge case where username-validation-error is re-rendered and hidden tag removed + this.usernameInput.validationError = ""; + } document .getElementById("username-validation-error") ?.classList.add("hidden"); diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts index 3b3c24b7d..37e26dc00 100644 --- a/src/client/UsernameInput.ts +++ b/src/client/UsernameInput.ts @@ -2,7 +2,6 @@ import { LitElement, html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { v4 as uuidv4 } from "uuid"; import { translateText } from "../client/Utils"; -import { UserSettings } from "../core/game/UserSettings"; import { MAX_USERNAME_LENGTH, validateUsername, @@ -15,7 +14,6 @@ export class UsernameInput extends LitElement { @state() private username: string = ""; @property({ type: String }) validationError: string = ""; private _isValid: boolean = true; - private userSettings: UserSettings = new UserSettings(); // Remove static styles since we're using Tailwind @@ -31,7 +29,6 @@ export class UsernameInput extends LitElement { connectedCallback() { super.connectedCallback(); this.username = this.getStoredUsername(); - this.dispatchUsernameEvent(); } render() { @@ -83,16 +80,6 @@ export class UsernameInput extends LitElement { } } - private dispatchUsernameEvent() { - this.dispatchEvent( - new CustomEvent("username-change", { - detail: { username: this.username }, - bubbles: true, - composed: true, - }), - ); - } - private generateNewUsername(): string { const newUsername = "Anon" + this.uuidToThreeDigits(); this.storeUsername(newUsername); diff --git a/src/core/validations/username.ts b/src/core/validations/username.ts index 5d0c26b55..2096c0ae1 100644 --- a/src/core/validations/username.ts +++ b/src/core/validations/username.ts @@ -22,7 +22,7 @@ const matcher = new RegExpMatcher({ export const MIN_USERNAME_LENGTH = 3; export const MAX_USERNAME_LENGTH = 27; -const validPattern = /^[a-zA-Z0-9_[\] 🐈🍀üÜ]+$/u; +const validPattern = /^[a-zA-Z0-9_[\] üÜ]+$/u; // Don't allow more than in UserNameSchema const shadowNames = [ "NicePeopleOnly", @@ -123,9 +123,7 @@ export function validateUsername(username: string): { if (!validPattern.test(username)) { return { isValid: false, - error: translateText("username.invalid_chars", { - max: MAX_USERNAME_LENGTH, - }), + error: translateText("username.invalid_chars"), }; } diff --git a/tests/Censor.test.ts b/tests/Censor.test.ts index 74f9cccc2..a937d4e71 100644 --- a/tests/Censor.test.ts +++ b/tests/Censor.test.ts @@ -105,8 +105,8 @@ describe("username.ts functions", () => { const res = validateUsername("Good_Name123"); expect(res.isValid).toBe(true); }); - test("accepts allowed Unicode like 🐈 or ü", () => { - const res = validateUsername("Cat🐈Üser"); + test("accepts allowed Unicode like ü", () => { + const res = validateUsername("Üser"); expect(res.isValid).toBe(true); }); }); @@ -123,7 +123,7 @@ describe("username.ts functions", () => { .slice(0, MAX_USERNAME_LENGTH), }, { input: "", expected: "xxx" }, - { input: "Ünicode🐈Test!", expected: "Ünicode🐈Test" }, + { input: "Ünicode Test!", expected: "Ünicode Test" }, ])('sanitizeUsername("%s") → "%s"', ({ input, expected }) => { const out = sanitizeUsername(input); expect(out).toBe(expected);