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"