Supports editing user's name, role, and active status in <UpdateUserDialog>
Supports editing user password in <ChangePasswordDialog>
Passwords must be between 12 and 36 characters and consist of only numbers, letters, and !@#$%^*
Passwords cannot include "paws", "password", "cat", "dog", or the user's username.
Supports the creation of new users in <NewUserDialog>
Usernames must be at least 2 characters and consist of only alphanumeric characters.
Adds yup and react-hook-form libraries for form validation.
I noticed leading and trailing whitespace did not seem to make any difference in the api calls, so I trim it before validating to allow users to accidentally lead or end with a space and not get invalid field notifications.
yup provides information for any invalid fields onBlur.
It also allows no api calls if the form is invalid.
Fun, additional improvements
Added an updater function to rerender on user creation/user update without refetching.
Closes dialogs on esc keydown. I'm not sure if this would even be a negative to some users (if so, I can remove it), but I found myself wanting to close dialogs with escape.
Provides a banner on successful user creation or update that automatically disappears after 5 seconds and can be dismissed manually. Error banners require manual dismissal.
Small issues we could potentially open
50 characters of As for the username and full name completely mess up the UI, but I don't foresee there being an issue with any reasonable name/username lengths.
I couldn't for the life of me get a dropdown to work, so the role field requires the actual string value. Not the best UX, but it works and seems clear enough.
I had a couple instances of a fetch error that I thiiink were related to the state of things during development, but everything was fixed through refreshing. By no means a catastrophic bug if it does show up.
I think it would be sort of nice if we had a wrapper that provided the user's auth token across the app rather than passing it to every single component.
It would be helpful if at least the password fields were validated onChange, but this didn't work as expected. The validations didn't seem to work correctly when I invoked trigger() that way.
Additions
<UpdateUserDialog><ChangePasswordDialog><NewUserDialog>yupandreact-hook-formlibraries for form validation.yupprovides information for any invalid fieldsonBlur.Fun, additional improvements
esckeydown. I'm not sure if this would even be a negative to some users (if so, I can remove it), but I found myself wanting to close dialogs with escape.Small issues we could potentially open
As for the username and full name completely mess up the UI, but I don't foresee there being an issue with any reasonable name/username lengths.rolefield requires the actual string value. Not the best UX, but it works and seems clear enough.onChange, but this didn't work as expected. The validations didn't seem to work correctly when I invokedtrigger()that way.