progress on modal functionality and form styling

lib/bones73k_web/live/modal_component.ex

@@ -4,16 +4,26 @@ defmodule Bones73kWeb.ModalComponent do
   @impl true
   def render(assigns) do
     ~L"""
-    <div id="<%= @id %>" class="phx-modal"
-      phx-capture-click="close"
-      phx-window-keydown="close"
+    <div id="<%= @id %>" class="modal fade"
+      phx-hook="BsModal"
+      phx-window-keydown="hide"
       phx-key="escape"
       phx-target="#<%= @id %>"
       phx-page-loading>
 
-      <div class="phx-modal-content">
-        <%= live_patch raw("&times;"), to: @return_to, class: "phx-modal-close" %>
-        <%= live_component @socket, @component, @opts %>
+      <div class="modal-dialog">
+        <div class="modal-content">
+
+          <div class="modal-header">
+            <h5 class="modal-title"><%= Keyword.get(@opts, :title, "Modal title") %></h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+
+          <div class="modal-body">
+            <%= live_component @socket, @component, @opts %>
+          </div>
+
+        </div>
       </div>
     </div>
     """
@@ -23,4 +33,9 @@ defmodule Bones73kWeb.ModalComponent do
   def handle_event("close", _, socket) do
     {:noreply, push_patch(socket, to: socket.assigns.return_to)}
   end
+
+  @impl true
+  def handle_event("hide", _, socket) do
+    {:noreply, push_event(socket, "modal-please-hide", %{})}
+  end
 end

lib/bones73k_web/live/property_live/form_component.ex

@@ -5,12 +5,10 @@ defmodule Bones73kWeb.PropertyLive.FormComponent do
 
   @impl true
   def update(%{property: property} = assigns, socket) do
-    changeset = Properties.change_property(property)
-
-    {:ok,
-     socket
-     |> assign(assigns)
-     |> assign(:changeset, changeset)}
+    socket
+    |> assign(assigns)
+    |> assign(:changeset, Properties.change_property(property))
+    |> live_okreply()
   end
 
   @impl true
@@ -30,10 +28,10 @@ defmodule Bones73kWeb.PropertyLive.FormComponent do
   defp save_property(socket, :edit, property_params) do
     case Properties.update_property(socket.assigns.property, property_params) do
       {:ok, _property} ->
-        {:noreply,
-         socket
-         |> put_flash(:info, "Property updated successfully")
-         |> push_redirect(to: socket.assigns.return_to)}
+        socket
+        |> put_flash(:info, "Property updated successfully")
+        |> push_event("modal-please-hide", %{})
+        |> live_noreply()
 
       {:error, %Ecto.Changeset{} = changeset} ->
         {:noreply, assign(socket, :changeset, changeset)}
@@ -46,10 +44,10 @@ defmodule Bones73kWeb.PropertyLive.FormComponent do
 
     case Properties.create_property(property_params) do
       {:ok, _property} ->
-        {:noreply,
-         socket
-         |> put_flash(:info, "Property created successfully")
-         |> push_redirect(to: socket.assigns.return_to)}
+        socket
+        |> put_flash(:info, "Property created successfully")
+        |> push_event("modal-please-hide", %{})
+        |> live_noreply()
 
       {:error, %Ecto.Changeset{} = changeset} ->
         {:noreply, assign(socket, changeset: changeset)}

lib/bones73k_web/live/property_live/form_component.html.leex

@@ -1,22 +1,44 @@
-<h2><%= @title %></h2>
+<%= form_for @changeset, "#", [
+    phx_target: @myself,
+    phx_change: "validate",
+    phx_submit: "save"
+  ], fn f ->  %>
 
-<%= f = form_for @changeset, "#",
-  id: "property-form",
-  phx_target: @myself,
-  phx_change: "validate",
-  phx_submit: "save" %>
 
-  <%= label f, :name %>
-  <%= text_input f, :name %>
-  <%= error_tag f, :name %>
+  <div class="mb-3" phx-feedback-for="<%= input_id(f, :name)%>">
+    <%= label f, :name, class: "form-label" %>
+    <div class="input-group has-validation">
+      <%= text_input f, :name,
+          class: input_class(f, :name, "form-control"),
+          aria_describedby: error_id(f, :name)
+        %>
+      <%= error_tag f, :name %>
+    </div>
+  </div>
 
-  <%= label f, :price %>
-  <%= number_input f, :price, step: "any" %>
-  <%= error_tag f, :price %>
+  <div class="mb-3" phx-feedback-for="<%= input_id(f, :price)%>">
+    <%= label f, :price, class: "form-label" %>
+    <div class="input-group has-validation">
+      <%= number_input f, :price,
+          class: input_class(f, :price, "form-control"),
+          step: "any",
+          aria_describedby: error_id(f, :price)
+        %>
+      <%= error_tag f, :price %>
+    </div>
+  </div>
 
-  <%= label f, :description %>
-  <%= textarea f, :description %>
-  <%= error_tag f, :description %>
+  <div class="mb-3" phx-feedback-for="<%= input_id(f, :description)%>">
+    <%= label f, :description, class: "form-label" %>
+    <div class="input-group has-validation">
+      <%= textarea f, :description,
+          class: input_class(f, :description, "form-control"),
+          aria_describedby: error_id(f, :description)
+        %>
+      <%= error_tag f, :description %>
+    </div>
+  </div>
 
-  <%= submit "Save", phx_disable_with: "Saving..." %>
-</form>
+  <%= submit "Save", phx_disable_with: "Saving...", class: "btn btn-primary" %>
+
+<% end %>

lib/bones73k_web/live/user/registration.ex

@@ -30,7 +30,7 @@ defmodule Bones73kWeb.UserLive.Registration do
   @impl true
   def handle_event("validate", %{"user" => user_params}, socket) do
     cs = Accounts.change_user_registration(%User{}, user_params)
-    {:noreply, assign(socket, changeset: %{cs | action: :update})}
+    {:noreply, assign(socket, changeset: %{cs | action: :validate})}
   end
 
   @impl true

lib/bones73k_web/live/user/reset_password.ex

@@ -19,7 +19,7 @@ defmodule Bones73kWeb.UserLive.ResetPassword do
   @impl true
   def handle_event("validate", %{"user" => user_params}, socket) do
     cs = Accounts.change_user_password(socket.assigns.user, user_params)
-    {:noreply, socket |> assign(changeset: %{cs | action: :update})}
+    {:noreply, socket |> assign(changeset: %{cs | action: :validate})}
   end
 
   def handle_event("save", %{"user" => user_params}, socket) do
@@ -34,7 +34,7 @@ defmodule Bones73kWeb.UserLive.ResetPassword do
         {:noreply,
          socket
          |> put_flash(:error, "Please check the errors below.")
-         |> assign(changeset: %{changeset | action: :update})}
+         |> assign(changeset: changeset)}
     end
   end
 end

lib/bones73k_web/live/user/settings/email.ex

@@ -20,7 +20,7 @@ defmodule Bones73kWeb.UserLive.Settings.Email do
   @impl true
   def handle_event("validate", %{"user" => user_params}, socket) do
     cs = get_changeset(socket.assigns.current_user, user_params)
-    {:noreply, assign(socket, changeset: %{cs | action: :update})}
+    {:noreply, assign(socket, changeset: %{cs | action: :validate})}
   end
 
   # user_settings_path  GET     /users/settings/confirm_email/:token   Bones73kWeb.UserSettingsController :confirm_email

lib/bones73k_web/live/user/settings/email.html.leex

@@ -30,6 +30,7 @@
           <%= icon_div @socket, "bi-lock", [class: "icon fs-5"] %>
         </span>
         <%= password_input f, :current_password,
+            value: input_value(f, :current_password),
             class: "form-control",
             required: true,
             aria_describedby: error_id(f, :current_password)

lib/bones73k_web/live/user/settings/password.ex

@@ -30,7 +30,7 @@ defmodule Bones73kWeb.UserLive.Settings.Password do
   @impl true
   def handle_event("validate", %{"user" => user_params}, socket) do
     cs = get_changeset(socket.assigns.current_user, user_params)
-    {:noreply, assign(socket, changeset: %{cs | action: :update})}
+    {:noreply, assign(socket, changeset: %{cs | action: :validate})}
   end
 
   @impl true

lib/bones73k_web/live/user/settings/password.html.leex

@@ -44,6 +44,7 @@
           <%= icon_div @socket, "bi-lock", [class: "icon fs-5"] %>
         </span>
         <%= password_input f, :current_password,
+            value: input_value(f, :current_password),
             class: "form-control",
             required: true,
             aria_describedby: error_id(f, :current_password)