user management new/edit/delete working, with fixed live modal

lib/shift73k_web/live/modal_component.ex

@@ -3,12 +3,12 @@ defmodule Shift73kWeb.ModalComponent do
 
   @impl true
   def render(assigns) do
-    ~L"""
+    ~H"""
-    <div id="<%= @id %>" class="modal fade"
+    <div id={@id} class="modal fade"
       phx-hook="BsModal"
       phx-window-keydown="hide"
       phx-key="escape"
-      phx-target="#<%= @id %>"
+      phx-target={"#" <> to_string(@id)}
       phx-page-loading>
 
       <div class="modal-dialog modal-dialog-centered">
@@ -16,10 +16,10 @@ defmodule Shift73kWeb.ModalComponent do
 
           <div class="modal-header">
             <h5 class="modal-title"><%= Keyword.get(@opts, :title, "Modal title") %></h5>
-            <button type="button" class="btn-close" phx-click="hide" phx-target="<%= @myself %>" aria-label="Close"></button>
+            <button type="button" class="btn-close" phx-click="hide" phx-target={@myself} aria-label="Close"></button>
           </div>
 
-          <%= live_component @socket, @component, Keyword.put(@opts, :modal_id, @id) %>
+          <%= live_component @component, Keyword.put(@opts, :modal_id, @id) %>
 
         </div>
       </div>

lib/shift73k_web/live/user_management/delete_component.html.heex

@@ -0,0 +1,20 @@
+<div>
+
+  <div class="modal-body">
+
+    Are you sure you want to delete "<%= @delete_user.email %>"?
+
+  </div>
+  <div class="modal-footer">
+
+    <%= link "Cancel", to: "#", class: "btn btn-outline-dark", phx_click: "hide", phx_target: "##{@modal_id}" %>
+    <%= link "Confirm Delete", to: "#",
+        class: "btn btn-danger",
+        phx_click: "confirm",
+        phx_target: @myself,
+        phx_value_id: @delete_user.id,
+        phx_value_email: @delete_user.email %>
+
+  </div>
+
+</div>

lib/shift73k_web/live/user_management/delete_component.html.leex

@@ -1,16 +0,0 @@
-<div class="modal-body">
-
-  Are you sure you want to delete "<%= @delete_user.email %>"?
-
-</div>
-<div class="modal-footer">
-
-  <%= link "Cancel", to: "#", class: "btn btn-outline-dark", phx_click: "hide", phx_target: "##{@modal_id}" %>
-  <%= link "Confirm Delete", to: "#",
-      class: "btn btn-danger",
-      phx_click: "confirm",
-      phx_target: @myself,
-      phx_value_id: @delete_user.id,
-      phx_value_email: @delete_user.email %>
-
-</div>

lib/shift73k_web/live/user_management/form_component.html.heex

@@ -0,0 +1,66 @@
+<div>
+
+  <%= form_for @changeset, "#", [
+      phx_target: @myself,
+      phx_change: "validate",
+      phx_submit: "save"
+    ], fn f -> %>
+
+    <div class="modal-body">
+
+      <%= label f, :email, class: "form-label" %>
+      <div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(f, :email)}>
+        <i class="bi bi-at icon is-left text-muted fs-5"></i>
+        <%= email_input f, :email,
+            value: input_value(f, :email),
+            class: input_class(f, :email, "form-control"),
+            placeholder: "e.g., babka@73k.us",
+            maxlength: User.max_email,
+            autofocus: true,
+            phx_debounce: "250",
+            aria_describedby: error_ids(f, :email)
+          %>
+        <%= error_tag f, :email %>
+      </div>
+
+      <%= label f, :password, class: "form-label" %>
+      <div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(f, :password)}>
+        <i class="bi bi-key icon is-left text-muted fs-5"></i>
+        <%= password_input f, :password,
+            value: input_value(f, :password),
+            class: input_class(f, :password, "form-control"),
+            maxlength: User.max_password,
+            aria_describedby: error_ids(f, :password)
+          %>
+        <%= error_tag f, :password %>
+      </div>
+
+      <%= if Roles.can?(@current_user, %User{}, :edit_role) do %>
+        <%= label f, :role, class: "form-label" %>
+        <div class="inner-addon left-addon mb-3">
+          <i class="bi bi-shield icon is-left text-muted fs-5"></i>
+          <%= select f, :role, Enum.map(User.roles(), fn {k, _v} -> {String.capitalize(Atom.to_string(k)), k} end), class: "form-select" %>
+          <span class="valid-feedback text-primary" style="display: block;">
+            <%= role_description(input_value(f, :role)) %>
+          </span>
+        </div>
+      <% else %>
+        <%= hidden_input f, :role, value: input_value(f, :role) %>
+      <% end %>
+
+    </div>
+    <div class="modal-footer">
+
+      <%= link "Cancel", to: "#", class: "btn btn-outline-dark", phx_click: "hide", phx_target: "##{@modal_id}" %>
+      <%= submit "Save",
+          class: "btn btn-primary ",
+          disabled: !@changeset.valid?,
+          aria_disabled: !@changeset.valid? && "true" || false,
+          phx_disable_with: "Saving..."
+        %>
+
+    </div>
+
+  <% end %>
+
+</div>

lib/shift73k_web/live/user_management/form_component.html.leex

@@ -1,62 +0,0 @@
-<%= form_for @changeset, "#", [
-    phx_target: @myself,
-    phx_change: "validate",
-    phx_submit: "save"
-  ], fn f -> %>
-
-  <div class="modal-body">
-
-    <%= label f, :email, class: "form-label" %>
-    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :email) %>">
-      <%= icon_div @socket, "bi-at", [class: "icon is-left text-muted fs-5"] %>
-      <%= email_input f, :email,
-          value: input_value(f, :email),
-          class: input_class(f, :email, "form-control"),
-          placeholder: "e.g., babka@73k.us",
-          maxlength: User.max_email,
-          autofocus: true,
-          phx_debounce: "250",
-          aria_describedby: error_ids(f, :email)
-        %>
-      <%= error_tag f, :email %>
-    </div>
-
-    <%= label f, :password, class: "form-label" %>
-    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
-      <%= icon_div @socket, "bi-key", [class: "icon is-left text-muted fs-5"] %>
-      <%= password_input f, :password,
-          value: input_value(f, :password),
-          class: input_class(f, :password, "form-control"),
-          maxlength: User.max_password,
-          aria_describedby: error_ids(f, :password)
-        %>
-      <%= error_tag f, :password %>
-    </div>
-
-    <%= if Roles.can?(@current_user, %User{}, :edit_role) do %>
-      <%= label f, :role, class: "form-label" %>
-      <div class="inner-addon left-addon mb-3">
-        <%= icon_div @socket, "bi-shield", [class: "icon is-left text-muted fs-5"] %>
-        <%= select f, :role, Enum.map(User.roles(), fn {k, _v} -> {String.capitalize(Atom.to_string(k)), k} end), class: "form-select" %>
-        <span class="valid-feedback text-primary" style="display: block;">
-          <%= role_description(input_value(f, :role)) %>
-        </span>
-      </div>
-    <% else %>
-      <%= hidden_input f, :role, value: input_value(f, :role) %>
-    <% end %>
-
-  </div>
-  <div class="modal-footer">
-
-    <%= link "Cancel", to: "#", class: "btn btn-outline-dark", phx_click: "hide", phx_target: "##{@modal_id}" %>
-    <%= submit "Save",
-        class: "btn btn-primary ",
-        disabled: !@changeset.valid?,
-        aria_disabled: !@changeset.valid? && "true" || false,
-        phx_disable_with: "Saving..."
-      %>
-
-  </div>
-
-<% end %>