Severity: Medium

1. Allows invalid usernames to be saved, which may cause technical issues (e.g., API errors, display problems).
2. Violates UX best practices by not guiding users toward valid input.

Describe the bug
When a user attempts to change their username on the Account Settings page, the app accepts invalid usernames (e.g., @@@@@@@@@12_!@31u2i3u1io23uio1p23!!!31212378+asd;asjdklajskldasjldk1923) without validation or error messages. This violates UX best practices and risks data integrity..

To Reproduce
Steps to reproduce the behavior:

1. Navigate to https://app.aixblock.io/user/account.
2. Locate the Username field.
3. Enter an invalid username (e.g., @@@@@@@@@12_!@31u2i3u1io23u...).
4. Click Save or Update.
5. Observe that the app accepts the invalid username without showing an error message.

Expected behavior
The app should validate the username against rules (e.g., length, allowed characters) and display an error (e.g., "Invalid username format").

Screenshots

Desktop (please complete the following information):
OS: Windows 11
Browser Chrome
Version v139.0.7258.139

Additional context
UX Impact: Users may input invalid usernames by mistake, leading to confusion or backend errors.

Suggested Fix
Frontend Fix:

1. Add regex validation for the username field (e.g., 3-30 characters, letters, numbers, underscores).
2. Display an error message for invalid inputs (e.g., "Invalid username. Use 3-30 characters (letters, numbers, or underscores).").

javascript

// Example regex validation
const validateUsername = (username) => {
  const regex = /^[a-zA-Z0-9_]{3,30}$/; // 3-30 characters, letters, numbers, underscores
  return regex.test(username);
};

// Example usage
if (!validateUsername(newUsername)) {
  alert("Invalid username. Use 3-30 characters (letters, numbers, or underscores).");
}

Backend Fix (if applicable):

1. Validate the username on the server before saving to the database.
2. Example (Python):

python

import re

def validate_username(username):
    if not re.match(r"^[a-zA-Z0-9_]{3,30}$", username):
        raise ValueError("Invalid username format")