From fbf52a9bd87ed831c34d76cf4d67fb9da1b18661 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Mon, 27 Feb 2023 17:54:26 +0100
Subject: [PATCH] Update app form to use checkboxes (#1732)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: José Valim <jose.valim@dashbit.co>
---
 .../components/form_components.ex             | 39 +++++++++++++++++++
 .../live/session_live/app_info_component.ex   | 24 ++++++------
 2 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/lib/livebook_web/components/form_components.ex b/lib/livebook_web/components/form_components.ex
index f0abaa7b6..abb7c6bdd 100644
--- a/lib/livebook_web/components/form_components.ex
+++ b/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.
   """
diff --git a/lib/livebook_web/live/session_live/app_info_component.ex b/lib/livebook_web/live/session_live/app_info_component.ex
index 1001195de..5d29d0a37 100644
--- a/lib/livebook_web/live/session_live/app_info_component.ex
+++ b/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
-                  field={f[:access_type]}
-                  label="Password-protected"
-                  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" />
-                <% end %>
-                <.switch_field field={f[:show_source]} label="Show source" />
+                <div class="flex flex-col space-y-1">
+                  <.checkbox_field
+                    field={f[:access_type]}
+                    label="Password-protected"
+                    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" />
+                  <% 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>