diff --git a/app/components/avo/fields/password_field/edit_component.html.erb b/app/components/avo/fields/password_field/edit_component.html.erb
index a7e5e30815..5a102a784d 100644
--- a/app/components/avo/fields/password_field/edit_component.html.erb
+++ b/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
+
+ <%= @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 %>
+
+ <% end %>
+
<% end %>
diff --git a/app/javascript/js/application.js b/app/javascript/js/application.js
index dc1cb8c8ea..72bd85a579 100644
--- a/app/javascript/js/application.js
+++ b/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')
diff --git a/lib/avo/fields/password_field.rb b/lib/avo/fields/password_field.rb
index 34581dd217..53492dbcf1 100644
--- a/lib/avo/fields/password_field.rb
+++ b/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
diff --git a/package.json b/package.json
index c7f25c7b02..4a2542ce2a 100644
--- a/package.json
+++ b/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"
]
}
+
diff --git a/spec/dummy/app/avo/resources/user.rb b/spec/dummy/app/avo/resources/user.rb
index d2528f5147..437bfe81a1 100644
--- a/spec/dummy/app/avo/resources/user.rb
+++ b/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 here.'
- 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: 'DEV
', as_html: true
diff --git a/spec/features/avo/password_spec.rb b/spec/features/avo/password_spec.rb
index 3fe5456068..02cdfe7b44 100644
--- a/spec/features/avo/password_spec.rb
+++ b/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
diff --git a/spec/system/avo/password_field_spec.rb b/spec/system/avo/password_field_spec.rb
new file mode 100644
index 0000000000..69e05bef84
--- /dev/null
+++ b/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
diff --git a/yarn.lock b/yarn.lock
index 9d158d4bd0..483a7bbc0c 100644
--- a/yarn.lock
+++ b/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"