feat(common): add user invite input validation

lib/media_server_web/components/user_invitation_component.ex

@@ -3,8 +3,8 @@ defmodule MediaServerWeb.Components.UserInvitationComponent do
 
   alias MediaServer.Accounts
 
-  def handle_event("save", %{"email" => email, "name" => name}, socket) do
-    create(socket, %{"user" => %{"email" => email, "name" => name, "password" => "#{ Enum.take_random(?a..?z, 12) }"}})
+  def handle_event("save", %{"user" => user_params}, socket) do
+    create(socket, %{"user" => %{"email" => user_params["email"], "name" => user_params["name"], "password" => "#{ Enum.take_random(?a..?z, 12) }"}})
   end
 
   def create(socket, %{"user" => user_params}) do
@@ -17,6 +17,8 @@ defmodule MediaServerWeb.Components.UserInvitationComponent do
           |> put_flash(:info, "Success")
           |> push_redirect(to: socket.assigns.return_to)
         }
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, :changeset, changeset)}
     end
   end
 end

lib/media_server_web/components/user_invitation_component.html.heex

@@ -1,7 +1,8 @@
 <main class="max-w-lg mx-auto px-4 py-8">
 
   <.form
-      for={:user_invitation}
+      let={f}
+      for={@changeset}
       id={@id}
       phx-target={@myself}
       phx-submit="save">
@@ -17,17 +18,15 @@
             </div>
 
             <div>
-              <label for="name" class="block text-sm font-medium text-gray-700">
-                Name
-              </label>
-              <input type="text" name="name" id="name" class="mt-1 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" placeholder="Name">
+                <%= label f, :name, class: "block text-sm font-medium text-gray-700" %>
+                <%= text_input f, :name, placeholder: "Enter name", class: "mt-1 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" %>
+                <%= error_tag f, :name %>
             </div>
 
             <div>
-              <label for="email" class="block text-sm font-medium text-gray-700">
-                Email address
-              </label>
-              <input type="text" name="email" id="email" class="mt-1 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" placeholder="Email address">
+                <%= label f, :email, class: "block text-sm font-medium text-gray-700" %>
+                <%= text_input f, :email, placeholder: "Enter email", class: "mt-1 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" %>
+                <%= error_tag f, :email %>
             </div>
 
             <div class="flex justify-end">

lib/media_server_web/live/settings_live/index.ex

@@ -12,6 +12,7 @@ defmodule MediaServerWeb.SettingsLive.Index do
       socket
       |> assign(:page_title, "Settings")
       |> assign(:users, Repo.all(User))
+      |> assign(:user, User.registration_changeset(%User{}, %{}))
       |> assign(:radarr, Integrations.get_first_radarr())
       |> assign(:sonarr, Integrations.get_first_sonarr())
     }

lib/media_server_web/live/settings_live/index.html.heex

@@ -1,7 +1,8 @@
   <div class="max-w-4xl mx-auto py-6 px-4 divide-y">
     <div>
         <%= live_component MediaServerWeb.Components.UserInvitationComponent,
-        id: "user-invite-form",
+        id: "user-form",
+        changeset: @user,
         return_to: Routes.settings_index_path(@socket, :index),
         title: "Invite Users",
         description: "Fill in the information below to invite users.",

test/media_server_web/components/user_invitation_component_test.exs

@@ -22,7 +22,7 @@ defmodule MediaServerWeb.UserInvitationComponentTest do
 
       {:ok, _, html} =
         index_live
-        |> form("#user-invite-form", email: "[email protected]", name: "Some Name")
+        |> form("#user-form", user: %{email: "[email protected]", name: "Some Name"})
         |> render_submit()
         |> follow_redirect(conn, Routes.settings_index_path(conn, :index))