h icon indicating copy to clipboard operation
h copied to clipboard

Warn earlier if username contains disallowed characters

Open robertknight opened this issue 5 months ago • 0 comments

In https://github.com/hypothesis/h/pull/9623 the signup form was converted to the new Preact + Tailwind components. A piece of functionality that was lost was the info icon next to the username field indicating the character constraints on usernames. This PR adds that back, but in a different way by showing a warning if the user enters disallowed characters.

The first commit adds a useFormValue hook which simplifies keeping track of the current value and error for a form field, combining the initial value + error from the server with local updates. It changes the login and signup forms to use these for all fields.

The second commit uses the client-side validation functionality of the hook to show a warning immediately if a user enters a username with invalid characters.

Testing:

  1. Go to http://localhost:5000/signup
  2. Enter a value in the username which contains disallowed characters (not matching A-Za-z0-9_.). You should see an error appear immediately.

robertknight avatar Jun 16 '25 13:06 robertknight