[Profile] None discriptive error when trying to save your profile with an empty "Display name" field

[O-Bots]

Bug description

There is no information in the error pop up to tell the user what the issue is

Steps to reproduce

1. Progress through the signup flow normally filling in all the required information
2. After completing the flow click "Edit profile" button
3. Clear the display name field so its empty
4. Click save
5. Observe error

Expected behavior

Some kind of information telling the user what the cause of the error is

Could be similar to the "Help text" when you input a number under 18 in the age field - will keep everything consistent

Screenshots

Info

Chrome Version 145.0.7632.109 (Official Build) (64-bit)
Windows Pc

Additional context

No response

[O-Bots]

A similar issue happens when attempting to progress through the signup flow with empty "Display name" and "Username" fields.

The only difference is that there is no pop up the "Next" button does nothing

I added this because what ever the fix is for the original issue could likely fix this as-well, if not please let me know and I will create a separate issue

[MartinBraquet]

Thanks! Let me know if you'd like to handle this issue in the coming weeks.

[O-Bots]

Yes I would like to handle this, I'm always open to learn new things.

I'll post my findings/solution here so you can review, unless discord is easier?

[MartinBraquet]

What your prefer :)
Github is a bit better for long messages that we don't wanna miss.
Discord is better for quick check ins.

[O-Bots]

Lets keep it to GitHub when dealing with issues whether I'm working on them or not...it will be good for a paper trail

[MartinBraquet]

Yep. Also gives the repo transparency and your account some activity in case you need to show off your work.

[O-Bots]

I got a little bit of progress, during the on-boarding flow there is now an error message similar to the one underneath the age field but the message does not show when you attempt to edit the username post signup through the edit profile option

Commit: 6a30b77

any ideas? or changes the code needs?

[MartinBraquet]

Nice progress. The user can't edit their username post signup so it's fine. Does it work with name editing?

[O-Bots]

I meant display name not username

[MartinBraquet]

It's because the check for both namr and username is done in updateUsername, the function called on each username input change. You just need to move the display name check to the onChange function of the display name.

[O-Bots]

Just updated the code and did another push, I have another issue that i just noticed.

when you are on the enter displayName username page you can remove everything from the display name field and you can continue through the signup flow like normal. I was thinking to implement some kind of safety guard but I couldn't find out how to do it.

Commit: 1e5f47a

[MartinBraquet]

Nice. If one of the error messages is not empty you can simply disable the next button. You can use a const isFormValid = !!errorMessageDisplayName || errorMessageUsername

[O-Bots]

Thanks just updated the code, button is disabled when the fields do not contain correct info

The same issue is happening on post signup when using edit profile, I figured out where the toast message is from but I'm not sure if changing it to reflect a display name error is the right way to go about it, as it seems to be a "If there is any errors with these promises throw a toast"
Here

[MartinBraquet]

Yeah we should combine the required and optional forms now that there is no api call in between. Once they are merged, disabling the next button if no display name will be trivial. But in the meantime you can probably just add the api error message to the toast, and make sure the api raises if display name is empty string.

[O-Bots]

I added the error from the try catch to the toast, but it is just "APIError", trying to chain off the error to get the message gives me a "error is of type unknown" and in the console the error looks like the below.

How do I go about adding the actual api error message