feat(common): add users' name to settings invite users section

Author: trueChazza

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}, socket) do
-    create(socket, %{"user" => %{"email" => email, "password" => "#{ Enum.take_random(?a..?z, 12) }"}})
+  def handle_event("save", %{"email" => email, "name" => name}, socket) do
+    create(socket, %{"user" => %{"email" => email, "name" => name, "password" => "#{ Enum.take_random(?a..?z, 12) }"}})
   end
 
   def create(socket, %{"user" => user_params}) do

lib/media_server_web/components/user_invitation_component.html.heex

@@ -16,20 +16,24 @@
                 </p>
             </div>
 
-            <div class="space-y-1">
+            <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">
+            </div>
+
+            <div>
               <label for="email" class="block text-sm font-medium text-gray-700">
                 Email address
               </label>
-              <div class="flex">
-                <div class="flex-grow">
-                  <input type="text" name="email" id="email" class="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" placeholder="Email address">
-                </div>
-                <span class="ml-3">
-                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                      Invite
-                    </button>
-                </span>
-              </div>
+              <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">
+            </div>
+
+            <div class="flex justify-end">
+                <button type="submit" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                  Invite
+                </button>
             </div>
 
             <div>
@@ -43,7 +47,7 @@
                             </svg>
                           </span>
                           <div class="ml-3 flex flex-col">
-                            <span class="text-sm font-medium text-gray-900">Calvin Hawkins</span>
+                            <span class="text-sm font-medium text-gray-900"><%= item.name %></span>
                             <span class="text-sm text-gray-500"><%= item.email %></span>
                           </div>
                         </li>

test/media_server_web/components/user_invitation_component_test.exs

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