Refactor toggles to work without JS, add specs

app/components/form_elements/fieldset_component.rb

@@ -2,7 +2,7 @@
 
 module FormElements
   class FieldsetComponent < ViewComponent::Base
-    def initialize(tag: "div", title:, description: nil)
+    def initialize(tag: "li", title:, description: nil)
       @tag = tag
       @title = title
       @descripton = description

app/components/form_elements/fieldset_toggle_component.html.erb

@@ -11,13 +11,16 @@
     <%= render FormElements::ToggleComponent.new(
           enabled: @enabled,
           input_enabled: @input_enabled,
+          class_names: @form.present? ? "hidden" : nil,
           data: {
             :'settings--toggle-target' => "button",
             action: "settings--toggle#toggleSwitch"
           }) %>
     <% if @form.present? %>
-      <%= @form.hidden_field @attribute, value: @enabled.to_s,
+      <%= @form.check_box @attribute, {
-            data: { :'settings--toggle-target' => "input" } %>
+            checked: @enabled,
+            data: { :'settings--toggle-target' => "checkbox" }
+          }, "true", "false" %>
     <% end %>
   </div>
 <% end %>

app/components/form_elements/toggle_component.html.erb

@@ -1,8 +1,8 @@
-<%= button_tag type: "button",
+<%= button_tag type: "button", name: "toggle", data: @data,
-      data: @data,
       role: "switch", aria: { checked: @enabled.to_s },
       disabled: !@input_enabled,
       class: "#{ @enabled ? 'bg-blue-600' : 'bg-gray-200' }
+              #{ @class_names.present? ? @class_names : '' }
               relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer
               rounded-full border-2 border-transparent transition-colors
               duration-200 ease-in-out focus:outline-none focus:ring-2

app/components/form_elements/toggle_component.rb

@@ -2,10 +2,11 @@
 
 module FormElements
   class ToggleComponent < ViewComponent::Base
-    def initialize(enabled:, input_enabled: true, data: nil)
+    def initialize(enabled:, input_enabled: true, data: nil, class_names: nil)
       @enabled = !!enabled
       @input_enabled = input_enabled
       @data = data
+      @class_names = class_names
     end
   end
 end

app/javascript/controllers/settings/toggle_controller.js

@@ -1,12 +1,17 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "button", "switch", "input" ]
+  static targets = [ "button", "switch", "checkbox" ]
   static values = { switchEnabled: Boolean }
 
+  connect () {
+    this.buttonTarget.classList.remove("hidden")
+    this.checkboxTarget.classList.add("hidden")
+  }
+
   toggleSwitch () {
     this.switchEnabledValue = !this.switchEnabledValue
-    this.inputTarget.value = this.switchEnabledValue.toString()
+    this.checkboxTarget.checked = this.switchEnabledValue
 
     if (this.switchEnabledValue) {
       this.buttonTarget.setAttribute("aria-checked", "true");

app/views/admin/settings/services/_discourse.html.erb

@@ -7,7 +7,6 @@
     title: "Enable Discourse integration",
     description: "Discourse configuration present and features enabled"
   ) %>
-</ul>
   <% if Setting.discourse_enabled? %>
     <%= render FormElements::FieldsetComponent.new(title: "Public URL") do %>
       <%= f.text_field :discourse_public_url,
@@ -15,3 +14,4 @@
         class: "w-full", disabled: true %>
     <% end %>
   <% end %>
+</ul>

app/views/admin/settings/services/_ejabberd.html.erb

@@ -7,7 +7,6 @@
     title: "Enable ejabberd integration",
     description: "ejabberd configuration present and features enabled"
   ) %>
-</ul>
   <% if Setting.ejabberd_enabled? %>
     <%= render FormElements::FieldsetComponent.new(title: "API URL") do %>
       <%= f.text_field :ejabberd_api_url,
@@ -20,3 +19,4 @@
         class: "w-full", disabled: true %>
     <% end %>
   <% end %>
+</ul>

app/views/admin/settings/services/_gitea.html.erb

@@ -7,7 +7,6 @@
     title: "Enable Gitea integration",
     description: "Gitea configuration present and features enabled"
   ) %>
-</ul>
   <% if Setting.gitea_enabled? %>
     <%= render FormElements::FieldsetComponent.new(title: "Public URL") do %>
       <%= f.text_field :gitea_public_url,
@@ -15,3 +14,4 @@
         class: "w-full", disabled: true %>
     <% end %>
   <% end %>
+</ul>

app/views/admin/settings/services/_lndhub.html.erb

@@ -10,7 +10,6 @@
   <% if Setting.lndhub_enabled? %>
     <%= render FormElements::FieldsetComponent.new(title: "API URL") do %>
       <%= f.text_field :lndhub_api_url,
-        tag: "li",
         value: Setting.lndhub_api_url,
         class: "w-full", disabled: true %>
     <% end %>
@@ -32,7 +31,6 @@
   <% if Setting.lndhub_keysend_enabled? %>
     <%= render FormElements::FieldsetComponent.new(title: "Public key", description: "The public key of the Lightning node used by LNDHub") do %>
       <%= f.text_field :lndhub_public_key,
-        tag: "li",
         value: Setting.lndhub_public_key,
         class: "w-full", disabled: true %>
     <% end %>

app/views/admin/settings/services/_mastodon.html.erb

@@ -7,7 +7,6 @@
     title: "Enable Mastodon integration",
     description: "Mastodon configuration present and features enabled"
   ) %>
-</ul>
   <% if Setting.mastodon_enabled? %>
     <%= render FormElements::FieldsetComponent.new(title: "Public URL") do %>
       <%= f.text_field :mastodon_public_url,
@@ -15,3 +14,4 @@
         class: "w-full", disabled: true %>
     <% end %>
   <% end %>
+</ul>

app/views/admin/settings/services/_mediawiki.html.erb

@@ -7,7 +7,6 @@
     title: "Enable MediaWiki integration",
     description: "MediaWiki configuration present and features enabled"
   ) %>
-</ul>
   <% if Setting.mediawiki_enabled? %>
     <%= render FormElements::FieldsetComponent.new(title: "Public URL") do %>
       <%= f.text_field :mediawiki_public_url,
@@ -15,3 +14,4 @@
         class: "w-full", disabled: true %>
     <% end %>
   <% end %>
+</ul>

spec/features/admin/settings_spec.rb

@@ -18,4 +18,33 @@ RSpec.describe 'Admin/global settings', type: :feature do
     click_button "Save"
     expect(Setting.reserved_usernames).to eq(['Kosmos', 'Kredits'])
   end
+
+  describe "Service settings" do
+    scenario "Opening service settings shows page for first service" do
+      visit admin_settings_services_path
+
+      expect(current_url).to eq(admin_settings_services_url(params: { s: "discourse" }))
+    end
+
+    scenario "View ejabberd settings" do
+      visit admin_settings_services_path(params: { s: "ejabberd" })
+
+      expect(page).to have_content("Enable ejabberd integration")
+      expect(page).to have_field("API URL",
+        with: "http://xmpp.example.com/api",
+        disabled: true)
+    end
+
+    scenario "Disable ejabberd integration" do
+      visit admin_settings_services_path(params: { s: "ejabberd" })
+      expect(page).to have_checked_field("setting[ejabberd_enabled]")
+
+      uncheck "setting[ejabberd_enabled]"
+      click_button "Save"
+
+      expect(current_url).to eq(admin_settings_services_url(params: { s: "ejabberd" }))
+      expect(page).to_not have_checked_field("setting[ejabberd_enabled]")
+      expect(page).to_not have_field("API URL", disabled: true)
+    end
+  end
 end