Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add toggle password to password fields #421

Merged
merged 6 commits into from
Sep 23, 2023

Conversation

MarioRodrigues10
Copy link
Member

No description provided.

@reviewpad
Copy link

reviewpad bot commented Sep 17, 2023

AI-Generated Summary: This pull request introduces a new feature which adds a toggle eye icon to all password input fields. This feature allows users to view or hide their password when they are entering it, thus enhancing user experience and providing more control. It involves changes in the config.exs, atomic_web.ex, as well as various templates in atomic_web to incorporate the Ionicons collection alongside Heroicons for the eye (visibility) symbol. Improvements have been made in the design of the forms for user registration, password reset and user session creation by adding interactivity with JavaScript. There have been 60 insertions and 27 deletions across 5 files.

@MarioRodrigues10 MarioRodrigues10 added enhancement New feature or improvements frontend Frontend related labels Sep 17, 2023
Copy link
Member

@joaodiaslobo joaodiaslobo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change password inputs to have the same text size as the other inputs and same ring size on focus. Fix the registration page password inputs to have the same spacing.

Also, the mobile view's elements are not sized properly:

image

lib/atomic_web/templates/user_session/new.html.heex Outdated Show resolved Hide resolved
lib/atomic_web/templates/user_session/new.html.heex Outdated Show resolved Hide resolved
lib/atomic_web/templates/user_registration/new.html.heex Outdated Show resolved Hide resolved
lib/atomic_web/templates/user_registration/new.html.heex Outdated Show resolved Hide resolved
lib/atomic_web/templates/user_registration/new.html.heex Outdated Show resolved Hide resolved
lib/atomic_web/templates/user_registration/new.html.heex Outdated Show resolved Hide resolved
lib/atomic_web/templates/user_registration/new.html.heex Outdated Show resolved Hide resolved
lib/atomic_web/templates/user_registration/new.html.heex Outdated Show resolved Hide resolved
lib/atomic_web/templates/user_registration/new.html.heex Outdated Show resolved Hide resolved
Copy link
Member

@ruilopesm ruilopesm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both inputs should occupy the same width as the "Log in" button. Just like it was before 🙏🏼

@joaodiaslobo
Copy link
Member

Also, can you add the following CSS code to app.css to disable the toggle Microsoft Edge adds to show the password?

/* Hide password reveal button in MS Edge */
::-ms-reveal {
  display: none;
}

To avoid this:

image

Copy link
Member

@joaodiaslobo joaodiaslobo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job! 🚀

@MarioRodrigues10 MarioRodrigues10 merged commit e84e1ef into develop Sep 23, 2023
3 checks passed
@MarioRodrigues10 MarioRodrigues10 deleted the mr/add-toggle-password branch September 23, 2023 18:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or improvements frontend Frontend related
Projects
Development

Successfully merging this pull request may close these issues.

Add toggle password button to all password fields
3 participants