✨ Password: add reveal property

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

@@ -1,12 +1,39 @@
 <%= 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
-    %>
+  <% if @field.reveal %>
+    <div class="relative" data-controller="password-visibility">
+      <%= @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
+      %>
+      <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 -->
+        <svg data-password-visibility-target="icon" xmlns="http://www.w3.org/2000/svg" class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+        </svg>
+
+        <!-- Heroicon name: outline/eye-off -->
+        <svg data-password-visibility-target="icon" xmlns="http://www.w3.org/2000/svg" class="size-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
+        </svg>
+      </button>
+    </div>
+  <% else %>
+    <%= @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
+      %>
+  <% end %>
 <% 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 :reveal
+
       def initialize(id, **args, &block)
         show_on :forms
 
         super(id, **args, &block)
 
         hide_on :index, :show
+
+        @reveal = args[:reveal].present? ? args[:reveal] : 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",
@@ -104,4 +106,4 @@
     "last 3 ios_saf versions",
     "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, reveal: 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 reveal button" do
+        visit url
+
+        expect(page).to have_selector "[data-password-visibility-target]"
+      end
+
       it "saves the resource with password" do
         visit url
 

yarn.lock

@@ -17,7 +17,7 @@
 
 "@algolia/autocomplete-js@^1.0.0-alpha.46":
   version "1.17.4"
-  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-js/-/autocomplete-js-1.17.4.tgz#5bb3990b38123a64568430f3a85e1e92806dc5c3"
+  resolved "https://registry.pkg.com/@algolia/autocomplete-js/-/autocomplete-js-1.17.4.tgz#5bb3990b38123a64568430f3a85e1e92806dc5c3"
   integrity sha512-ANhINMwusKmsW/xHhgiKvUSLis/Lll9OilueBR9h/lxBlgEJ/hHIOTnZupzksyna1OtGZaW5keAu04E19+CW1w==
   dependencies:
     "@algolia/autocomplete-core" "1.17.4"
@@ -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"