Merge pull request #136 from wuletawwonte/111-add-show-password-button

Add show password button

app/javascript/controllers/index.js

@@ -5,9 +5,11 @@ import { application } from 'controllers/application'
 // Eager load all controllers defined in the import map under controllers/**/*_controller
 import { eagerLoadControllersFrom } from '@hotwired/stimulus-loading'
 import Dropdown from '@stimulus-components/dropdown'
+import PasswordVisibility from '@stimulus-components/password-visibility'
 
 // Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
 // import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
 // lazyLoadControllersFrom("controllers", application)
 eagerLoadControllersFrom('controllers', application)
 application.register('dropdown', Dropdown)
+application.register('password-visibility', PasswordVisibility)

app/views/user_sessions/new.html.erb

@@ -16,7 +16,13 @@
 
           <div class="flex flex-col">
             <%= form.label :password, class: "text-white italic font-bold mb-2" %>
-            <%= form.password_field :password, required: true, placeholder: "Password", data: { test_id: "password_field" } %>
+            <div class="relative" data-controller="password-visibility">
+              <%= form.password_field :password, required: true, class: "peer w-full", placeholder: "Password", data: { test_id: "password_field", "password-visibility-target": "input" } %>
+              <button class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-300 hover:text-white peer-focus:text-gray-400 peer-focus:hover:text-gray-600" type="button" data-action="password-visibility#toggle">
+                <%= inline_svg_tag("icons/eye-empty.svg", size: "22", data: { "password-visibility-target": "icon" }) %>
+                <%= inline_svg_tag("icons/eye-off.svg", size: "22", class: "hidden", data: { "password-visibility-target": "icon" }) %>
+              </button>
+            </div>
           </div>
         </div>
 

config/importmap.rb

@@ -10,3 +10,4 @@
 pin_all_from "app/javascript/custom", under: "custom"
 pin "trix"
 pin "@rails/actiontext", to: "actiontext.esm.js"
+pin "@stimulus-components/password-visibility", to: "@stimulus-components--password-visibility.js" # @3.0.0