Enable single-field password entry for email sign-ups

[beccat123]

Currently, the email sign-up screen asks the user to create their password and re-enter it for confirmation. This results in more labor and therefore cumbersome UX.

Delete the password confirmation field and instead introduce an eye icon within the password entry field that would allow the user to toggle password visibility on and off.

Design details specified in: https://www.figma.com/file/kiaTbWxdPsyqz6eeaT4M8l/Open-Library---Sign-In-Flow?node-id=73%3A4143&t=gm520FiKGEaKFNWJ-1

Screenshot of the Figma frame:

This issue belongs to the epic #7694

Code

Here are the files which may need to be updated:

• Here is the front-end html view (the thing the patron sees) where the 2 passwords are implemented on the account creation page. https://github.com/internetarchive/openlibrary/blob/master/openlibrary/templates/account/create.html#L50-L51
• Here is the logic and rules which help us build the form which gets plugged in to the account creation page view: https://github.com/internetarchive/openlibrary/blob/master/openlibrary/plugins/upstream/forms.py#L98-L112
• Here is the back-end code where all the information the patron enters gets submitted upon a registration action (e.g. the passwords will be sent here) https://github.com/internetarchive/openlibrary/blob/master/openlibrary/plugins/upstream/account.py#L234-L298

[Ari1009]

I have made the changes @beccat123 ,can you check it out.

[zain93393]

I would like to work on this issue. As I am new to open source, can you guide me a little.

[jimchamp]

We'll need to add two icons in support of this feature: the "show password" and "hide password" icons.
@beccat123 or @mekarpeles, do either of you know where the icon used in the mock-ups was originally found?

[jimchamp]

Since there is no response and I can't find both show and hide password icons in the Figma, I'm replacing the icon with a string.

[tfmorris]

Why not just use the icons from Font Awesome or some other liberally licensed icon library? If FA doesn't work, Wikimedia Commons as an entire page of alternatives to choose from https://commons.wikimedia.org/wiki/Category:SVG_eye_icons

[ayushman075]

Please Assign me this issue

[jimchamp]

@ayushman075 there is already a PR for this.

If you're trying to find a good first issue, check out these search results: https://github.com/internetarchive/openlibrary/issues?q=is%3Aissue+is%3Aopen+-linked%3Apr+label%3A%22Good+First+Issue%22+no%3Aassignee