✨ Password: add reveal property (#3341)

* ✨ Password: add reveal property

* ⬆️ Upgrade registry for on package

* ♻️ Refactor password component using Avo helpers

* 🧪 Password reveal: add system test

* 🚚 Rename password reveal to revealable

app/components/avo/fields/password_field/edit_component.html.erb

@@ -1,12 +1,24 @@
 <%= field_wrapper **field_wrapper_args do %>
-  <%= @form.password_field @field.id,
-    value: @field.value,
-    class: classes("w-full"),
-    data: @field.get_html(:data, view: view, element: :input),
-    disabled: disabled?,
-    placeholder: @field.placeholder,
-    style: @field.get_html(:style, view: view, element: :input),
-    autocomplete: @field.autocomplete,
-    autofocus: @autofocus
+  <div class="relative" data-controller="<%= @field.revealable ? 'password-visibility' : nil %>">
+    <%= @form.password_field @field.id,
+      value: @field.value,
+      class: classes("w-full"),
+      data: @field.get_html(:data, view: view, element: :input).merge(password_visibility_target: "input"),
+      disabled: disabled?,
+      placeholder: @field.placeholder,
+      style: @field.get_html(:style, view: view, element: :input),
+      autocomplete: @field.autocomplete,
+      autofocus: @autofocus
     %>
+
+    <% if @field.revealable %>
+      <button data-action="password-visibility#toggle" type="button" class="text-gray-500 absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
+        <!-- Heroicon name: outline/eye -->
+        <%= helpers.svg('heroicons/outline/eye', class: "size-6", data: { 'password-visibility-target': 'icon' }) %>
+
+        <!-- Heroicon name: outline/eye-off -->
+        <%= helpers.svg('heroicons/outline/eye-off', class: "size-6 hidden", data: { 'password-visibility-target': 'icon' }) %>
+      </button>
+    <% end %>
+  </div>
 <% end %>

app/javascript/js/application.js

@@ -1,12 +1,14 @@
 import { Alert, Popover } from 'tailwindcss-stimulus-components'
 import { Application } from '@hotwired/stimulus'
 import TextareaAutogrow from 'stimulus-textarea-autogrow'
+import PasswordVisibility from '@stimulus-components/password-visibility'
 import TurboPower from 'turbo_power'
 
 TurboPower.initialize(window.Turbo.StreamActions)
 
 const application = Application.start()
 application.register('textarea-autogrow', TextareaAutogrow)
+application.register('password-visibility', PasswordVisibility)
 
 // Configure Stimulus development experience
 application.debug = window?.localStorage.getItem('avo.debug')

lib/avo/fields/password_field.rb

@@ -1,12 +1,16 @@
 module Avo
   module Fields
     class PasswordField < TextField
+      attr_reader :revealable
+
       def initialize(id, **args, &block)
         show_on :forms
 
         super(id, **args, &block)
 
         hide_on :index, :show
+
+        @revealable = args[:revealable].present? ? args[:revealable] : false
       end
     end
   end

package.json

@@ -25,6 +25,7 @@
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.10",
     "@rails/activestorage": "^6.1.7",
+    "@stimulus-components/password-visibility": "^3.0.0",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
     "@tiptap/core": "^2.7.4",
@@ -43,6 +44,7 @@
     "@tiptap/extension-underline": "^2.7.4",
     "@tiptap/pm": "^2.7.4",
     "@yaireo/tagify": "^4.31.3",
+    "add": "^2.0.6",
     "autoprefixer": "^10.4.20",
     "chart.js": "^3.9.1",
     "chartkick": "^4.2.0",
@@ -105,3 +107,4 @@
     "last 3 safari versions"
   ]
 }
+

spec/dummy/app/avo/resources/user.rb

@@ -130,7 +130,7 @@ def main_panel_fields
       end
 
     field :password, as: :password, name: "User Password", required: false, only_on: :forms, help: 'You may verify the password strength <a href="http://www.passwordmeter.com/" target="_blank">here</a>.'
-    field :password_confirmation, as: :password, name: "Password confirmation", required: false
+    field :password_confirmation, as: :password, name: "Password confirmation", required: false, revealable: true
 
     with_options hide_on: :forms do
       field :dev, as: :heading, label: '<div class="underline uppercase font-bold">DEV</div>', as_html: true

spec/features/avo/password_spec.rb

@@ -58,6 +58,12 @@
         expect(page).to have_field type: "password", id: "user_password_confirmation", placeholder: "Password confirmation", text: nil
       end
 
+      it "checks password revealable button" do
+        visit url
+
+        expect(page).to have_selector "[data-password-visibility-target]"
+      end
+
       it "saves the resource with password" do
         visit url
 

spec/system/avo/password_field_spec.rb

@@ -0,0 +1,15 @@
+require "rails_helper"
+
+RSpec.describe "PasswordField", type: :system do
+  describe "revealable true" do
+    context "create" do
+      it "password revealable button is toggling" do
+        visit "/admin/resources/users/new"
+
+        expect(page).to have_field type: "password", id: "user_password_confirmation"
+        find("[data-action='password-visibility#toggle']").click
+        expect(page).to have_field type: "text", id: "user_password_confirmation"
+      end
+    end
+  end
+end

yarn.lock

@@ -1941,6 +1941,11 @@
   resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
   integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
 
+"@stimulus-components/password-visibility@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@stimulus-components/password-visibility/-/password-visibility-3.0.0.tgz#314c1bae571ba13b9a4da6014f3e5c5b776fe4cc"
+  integrity sha512-ikyuZ/4VX4YrCckVHDc4H6UkTr5UjtkxSH+UdlEIgP9v93W1Bbvnoao0hgQODm8cvNWigmpLpKoGUzgyjBlrdw==
+
 "@tailwindcss/forms@^0.5.9":
   version "0.5.9"
   resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.9.tgz#b495c12575d6eae5865b2cbd9876b26d89f16f61"
@@ -2103,6 +2108,11 @@ acorn@^8.9.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
   integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
 
+add@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
+  integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
+
 ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"