Here's a quick and easy way to give your users the ability to toggle (hide and show) their password during login or signup.

In this example, we will be using Devise and Stimulus.js in a Rails 6 app.

This post assumes you already have Devise up and running.

To install stimulus, you can run: $ yarn add stimulus or simply run $ rails webpacker:install:stimulus. To view the installation guide, please click here.

Let's get started

In app/javascript/controllers create a new file called toogle_controller.js

toggle_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["show", "unhide"];

  password() {
    // console.log(`${this.value.textContent}`);
   //  console.log(`${this.input.type}`);

    if (this.value.textContent === "show") {
      this.value.textContent = "hide";
      this.input.type = "text";
    } else {
      this.value.textContent = "show";
      this.input.type = "password";
    }
  }

  get value() {
    return this.showTarget;
  }
  get input() {
    return this.unhideTarget;
  }
}

Now in app/views/devise/sessions/new.html.erb add the Stimulus controller we just created.

new.html.erb

<div class="form icons" data-controller="toggle"> # add the toggle controller!
 <div class="login__labels">
   <%= f.label :password, t("registration_pages.login.password_label"), class: "form__label form__label--login_color form__label--position" %> 
   <span>
     <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
     <%= link_to t("registration_pages.login.password_forgot"), new_password_path(resource_name), class: "form__forgot_password form__label--position" %>
    <% end %>
   </span>
 </div>   
 <div class="material_icons">
   # add the stimulus data target
   <%= f.password_field :password, placeholder: "**********", class: "form__element unhide", "data-target": "toggle.unhide" %>

  <i class="material material__lock_open">lock_open</i>
   <div class="toogle__password"> 
     # add the stimulus data target and data action
      <a class="show" data-target="toggle.show" data-action="click->toggle#password">show</a>
   </div>
 </div>
</div>

And voila!

Login screenshot with password toggle