UI: Improve Error Message for Invalid Team Name Input

juice-shop / multi-juicer

Host and manage multiple Juice Shop instances for security trainings and Capture The Flags

Apache License 2.0

268 stars 121 forks source link

UI: Improve Error Message for Invalid Team Name Input #178

Closed jonasbg closed 9 months ago

jonasbg commented 11 months ago

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 11 months ago

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 11 months ago

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

jonasbg commented 11 months ago

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.

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

stuebingerb commented 11 months ago

This was fixed with https://github.com/juice-shop/multi-juicer/pull/174 😉

I wonder if it would make sense to align the error message for this and https://github.com/juice-shop/multi-juicer/issues/179, though, to have a consistent UI. But I'll leave this up to @J12934.

J12934 commented 9 months ago

This was fixed with https://github.com/juice-shop/multi-juicer/pull/174 😉

I wonder if it would make sense to align the error message for this and https://github.com/juice-shop/multi-juicer/issues/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 🙌