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.

Sign up for GitHub

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

Add view password functionality to login form #4714

Merged
merged 2 commits into from
Oct 11, 2024
Merged

Add view password functionality to login form #4714

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e84ccfa
Add view password functionality to login form
princekumarg12 Oct 9, 2024
67e70f8
refactored the password visiblity toggle into a Stimulus controller
princekumarg12 Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 41 additions & 1 deletion app/views/users/sessions/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,21 @@
<style>
.password-input-wrapper {
position: relative;
}

.password-field {
padding-right: 40px; /* Space for the icon */
}

.toggle-password {
position: absolute;
right: 10px;
top: 70%;
transform: translateY(-50%);
cursor: pointer;
color: #999;
}
</style>
<%= render partial: "shared/flash" %>
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="login-box">
Expand All @@ -12,7 +30,12 @@
<%= f.input :email, autofocus: true %>
</div>
<div class="form-inputs">
<%= f.input :password, autofocus: true %>
<div class="password-input-wrapper">
<%= f.input :password, autofocus: true, input_html: { id: 'password_field', class: 'password-field' } %>
<span id="toggle_password" class="toggle-password">
<i class="fas fa-eye-slash"></i>
</span>
</div>
</div>
<div class="col-12 text-center">
<%= f.button :submit, "Log in", class: "btn btn-primary btn-block" %>
Expand All @@ -37,3 +60,20 @@
<%= link_to user_google_oauth2_omniauth_authorize_path, method: :post do %>
<img src="../img/btn_google_signin_dark_focus_web@2x.png" alt="Sign in with Google">
<% end %>

<script>
document.getElementById('toggle_password').onclick = function () {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Can we package this into a Stimulus controller? That's the way we want to encourage sprinkling JavaScript into our pages. You can see an example here: https://github.com/rubyforgood/human-essentials/blob/8839e19eb67ed92fb4c96fa7a98beab2ddf9e09f/app/javascript/controllers/highchart_controller.js#L32-L32 and it's used

human-essentials/app/views/shared/_highcharts.html.erb

Line 4 in 8839e19

<button type="button" class="btn btn-sm btn-secondary" data-action="click->highchart#selectAll">Select All</button>

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hi Dorner,
I've refactored the password toggle into a Stimulus controller as requested. It’s now encapsulated neatly in the password_visibility_controller.js, making our JS integration more structured.

const passwordField = document.getElementById('password_field');
const icon = this.querySelector('i');

if (passwordField.type === 'password') {
passwordField.type = 'text';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
} else {
passwordField.type = 'password';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
}
};
</script>
Loading