Update app form to use checkboxes (#1732)

Co-authored-by: José Valim <jose.valim@dashbit.co>

lib/livebook_web/components/form_components.ex

@@ -216,6 +216,45 @@ defmodule LivebookWeb.FormComponents do
     """
   end
 
+  @doc """
+  Renders checkbox input with label and error messages.
+  """
+  attr :id, :any, default: nil
+  attr :name, :any
+  attr :label, :string, default: nil
+  attr :value, :any
+  attr :errors, :list, default: []
+  attr :field, Phoenix.HTML.FormField, doc: "a form field struct retrieved from the form"
+
+  attr :disabled, :boolean, default: false
+  attr :checked_value, :string, default: "true"
+  attr :unchecked_value, :string, default: "false"
+
+  attr :rest, :global
+
+  def checkbox_field(assigns) do
+    assigns = assigns_from_field(assigns)
+
+    ~H"""
+    <div phx-feedback-for={@name} class={[@errors != [] && "show-errors"]}>
+      <label class="flex items-center gap-2 cursor-pointer">
+        <input type="hidden" value={@unchecked_value} name={@name} />
+        <input
+          type="checkbox"
+          class="checkbox"
+          value={@checked_value}
+          name={@name}
+          id={@id || @name}
+          checked={to_string(@value) == @checked_value}
+          {@rest}
+        />
+        <span :if={@label}><%= @label %></span>
+      </label>
+      <.error :for={msg <- @errors}><%= msg %></.error>
+    </div>
+    """
+  end
+
   @doc """
   Renders radio inputs with label and error messages.
   """

lib/livebook_web/live/session_live/app_info_component.ex

@@ -71,18 +71,20 @@ defmodule LivebookWeb.SessionLive.AppInfoComponent do
             >
               <div class="flex flex-col space-y-4">
                 <.text_field field={f[:slug]} label="Slug" spellcheck="false" phx-debounce="blur" />
-                <.switch_field
+                <div class="flex flex-col space-y-1">
-                  field={f[:access_type]}
+                  <.checkbox_field
-                  label="Password-protected"
+                    field={f[:access_type]}
-                  checked_value="protected"
+                    label="Password-protected"
-                  unchecked_value="public"
+                    checked_value="protected"
-                />
+                    unchecked_value="public"
-                <%= if Ecto.Changeset.get_field(@changeset, :access_type) == :protected do %>
+                  />
-                  <.password_field field={f[:password]} spellcheck="false" phx-debounce="blur" />
+                  <%= if Ecto.Changeset.get_field(@changeset, :access_type) == :protected do %>
-                <% end %>
+                    <.password_field field={f[:password]} spellcheck="false" phx-debounce="blur" />
-                <.switch_field field={f[:show_source]} label="Show source" />
+                  <% end %>
+                </div>
+                <.checkbox_field field={f[:show_source]} label="Show source" />
               </div>
-              <div class="mt-5 flex space-x-2">
+              <div class="mt-6 flex space-x-2">
                 <button class="button-base button-blue" type="submit" disabled={not @changeset.valid?}>
                   Deploy
                 </button>