juice-shop/multi-juicer

UI: Improve Error Message for Invalid Team Name Input

jonasbg opened this issue · 5 comments

jonasbg commented

Currently, when a user attempts to input an illegal team name, the system only displays a generic error message: Failed to create / join the team. This error message could be more descriptive and provide specific feedback on what went wrong with the suggested team name.

Here are some rules for valid team names that should be communicated in the error message (these are already available in the tooltip menu):

  • The team name should not contain uppercase letters.
  • The '-' character is not allowed.
  • Special characters are not allowed.

By providing a more detailed error message, we can guide the user to correct their input, thus enhancing the user experience.

J12934 commented

Mhh that used to work, we have a specifc error message for that which used to be shown if the team name didn't match the regex in the frontend. https://github.com/juice-shop/multi-juicer/blob/main/juice-balancer/ui/src/pages/JoinPage.js#L14

J12934 commented

This is how it looks for me (after pressing create=

Screenshot 2023-09-23 at 12 04 17
jonasbg commented

I apologize for the confusion earlier. I had tested this on an older version 5.3.

I've now tested this on the latest version, ghcr.io/juice-shop/multi-juicer/juice-balancer:v7.0.0@sha256:3357a9aeb3f9d98017c14fc2d01589e12fe3d7a2c00ca9e37b18b5b2af45681e and I am getting the same screenshot as you are.

Tested with the following browsers:

  • Firefox 117.0.1 (same result as you)
  • Edge 117.0.2045.31 (same result as you)
  • Safari 16.6 (Safari is unique in its own way)

The safari version is not as elegant as those other browsers, however.
image

Given that Safari tends to behave differently, this issue can be considered resolved from my perspective.

stuebingerb commented

This was fixed with #174 😉

I wonder if it would make sense to align the error message for this and #179, though, to have a consistent UI. But I'll leave this up to @J12934.

J12934 commented

This was fixed with #174 😉

I wonder if it would make sense to align the error message for this and #179, though, to have a consistent UI. But I'll leave this up to @J12934.

Sorry I overlooked your comment earlier.

To me this is fine right now. I think having a different style for validation and for an actual error which was thrown for a valid input is totally fine.

I'm closing this ticket now. Thank you all for the input and feedback here 🙌