Allow disabling toggles, add toggle fieldset component

app/components/form_elements/fieldset_toggle_component.html.erb

@@ -0,0 +1,9 @@
+<%= tag.public_send(@tag, class: "flex items-center justify-between py-6") do %>
+  <div class="flex flex-col">
+    <label class="font-bold mb-1"><%= @title %></label>
+    <p class="text-gray-500"><%= @descripton %></p>
+  </div>
+  <div class="relative ml-4 inline-flex flex-shrink-0">
+    <%= render FormElements::ToggleComponent.new(enabled: @enabled, input_enabled: @input_enabled) %>
+  </div>
+<% end %>

app/components/form_elements/fieldset_toggle_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module FormElements
+  class FieldsetToggleComponent < ViewComponent::Base
+    def initialize(tag: "li", enabled: false, input_enabled: true, title:, description:)
+      @tag = tag
+      @enabled = enabled
+      @input_enabled = input_enabled
+      @title = title
+      @descripton = description
+      @button_text = @enabled ? "Switch off" : "Switch on"
+    end
+  end
+end

app/components/form_elements/toggle_component.html.erb

@@ -1,10 +1,11 @@
 <button type="submit" role="switch" aria-checked="false"
+        <%= @input_enabled ? "" : "disabled=disabled"%>
         class="<%= @enabled ? 'bg-indigo-600' : 'bg-gray-200' %>
                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 focus:ring-indigo-600 focus:ring-offset-2">
-  <!-- <span class="sr&#45;only">Enable</span> -->
+  <span class="sr-only"><%= @button_text %></span>
   <span aria-hidden="true"
         class="<%= @enabled ? 'translate-x-5' : 'translate-x-0' %>
                pointer-events-none inline-block h-5 w-5 transform rounded-full

app/components/form_elements/toggle_component.rb

@@ -2,8 +2,9 @@
 
 module FormElements
   class ToggleComponent < ViewComponent::Base
-    def initialize(enabled:)
+    def initialize(enabled:, input_enabled: true)
       @enabled = !!enabled
+      @input_enabled = input_enabled
     end
   end
 end

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

@@ -15,24 +15,20 @@
       <% end %>
 
       <ul role="list" class="mt-2 divide-y divide-gray-200">
-        <li class="flex items-center justify-between py-6">
+        <%= render FormElements::FieldsetToggleComponent.new(
-          <div class="flex flex-col">
+          tag: "li",
-            <label class="font-bold mb-1">Enable LNDHub integration</label>
+          enabled: Setting.lndhub_enabled?,
-            <p class="text-gray-500">LNDHub configuration present and wallet features enabled</p>
+          input_enabled: false,
-          </div>
+          title: "Enable LNDHub integration",
-          <%= f.check_box :lndhub_enabled, checked: Setting.lndhub_enabled?,
+          description: "LNDHub configuration present and wallet features enabled"
-                          disabled: true,
+        ) %>
-                          class: "relative ml-4 inline-flex flex-shrink-0" %>
+        <%= render FormElements::FieldsetToggleComponent.new(
-        </li>
+          tag: "li",
-        <li class="flex items-center justify-between py-6">
+          enabled: Setting.lndhub_admin_enabled?,
-          <div class="flex flex-col">
+          input_enabled: false,
-            <label class="font-bold mb-1">Enable LNDHub admin panel</label>
+          title: "Enable LNDHub admin panel",
-            <p class="text-gray-500">LNDHub database configuration present and admin panel enabled</p>
+          description: "LNDHub database configuration present and admin panel enabled"
-          </div>
+        ) %>
-          <%= f.check_box :lndhub_admin_enabled, checked: Setting.lndhub_admin_enabled?,
-                          disabled: true,
-                          class: "relative ml-4 inline-flex flex-shrink-0" %>
-        </li>
       </ul>
     <% end %>
   </section>