1909983 - Add missing "New Password" label for passwords input fields and error messages for certain password rules

Status: NEW

(Firefox :: Profile Backup, defect, P3)

Description

[kpatenio]

Pairing these issues together since they're all fluent-related.

Error messages
By default, there are messages displayed on hover whenever there is an error state. There are two already provided by the browser:

• “Please fill out this field.”
• “Please use at least 8 characters (you are currently using # characters)”

We don’t have any message implemented yet for the following cases:

• When a common email is entered
• When an email is entered
• When passwords do not match

Some things to think about:

• Do we want these messages to appear on hover? Or would the tooltip suffice? If the latter, we should consider adding novalidate to the inputs' form parent. To compare with Firefox Accounts, the sign up page does not display any message besides tooltips.
• Do we want to show the same type of tooltip "Passwords do not match" as the Firefox Accounts sign up page?

New Password label
Apparently, there is a slight difference in the first label for inputs between the "set-password", "change-password" and turn-on backup dialogs. The "change-password" variant should have "New password" as its label for the first input. As for the other dialogs, their first input should just say "Password".

https://www.figma.com/design/vNbX4c0ws0L1qr0mxpKvsW/Fx-Backup?node-id=951-21750&m=dev

Comment 1

[kpatenio]

Attachment: fxa_signup_no_match_passwords.png

There's interest from UX to mimic the "Passwords do not match" popup. Attaching how it currently looks like in the FXA sign up page.

We may want to hide the input messages as well, and let the password rules bubble take precedence.