h
h copied to clipboard
Warn earlier if username contains disallowed characters
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:
- Go to http://localhost:5000/signup
- Enter a value in the username which contains disallowed characters (not matching
A-Za-z0-9_.). You should see an error appear immediately.