Add Asynchronous Username Validation and Dynamic Button Behavior

[cheesea3]

This pull request introduces fixes to the username input validation logic within our application's user form. It leverages a a different version of our custom React hook, useInput, to manage input states and validation more efficiently. The primary goal is to ensure usernames meet our specified criteria: 3-20 alphanumeric characters or underscores.

Changes:

• Updated Validation Logic: Implements regex-based validation to check username length and character restrictions directly within the useInput hook.
• Accessibility Improvements: Adds proper aria-describedby attributes to enhance accessibility and error messaging.
• UI Feedback: Integrates dynamic input styling based on user interaction and validation status, including a yellow border during typing (with a pulse effect) and color-coded feedback for valid/invalid inputs.

Technical Details:

• Regex pattern used: /^[a-zA-Z0-9_]{3,20}$/
• Debounce implementation to reduce excessive state updates during input.
• CSS animations for visual feedback during typing.

Test Plan:

1. Input Validation: Ensure that the username input rejects entries that do not conform to the regex pattern. Test with edge cases like minimal length, maximal length, and invalid characters.
2. UI Feedback: Check the yellow pulsing effect during typing and ensure it transitions correctly to either green (valid) or red (invalid) upon completion.
3. Accessibility Checks: Verify that screen readers correctly read out error messages associated with the input field using the aria-describedby attribute. #3 CURRENTLY PENDING UNTIL OTHER PRIORITIES FINISHED