add copy to clipboard for invites

assets/js/app.js

@@ -56,3 +56,13 @@ liveSocket.connect()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
+
+// Copy to clipboard
+window.addEventListener('cannery:clipcopy', (event) => {
+  if ('clipboard' in navigator) {
+    const text = event.target.textContent
+    navigator.clipboard.writeText(text)
+  } else {
+    window.alert('Sorry, your browser does not support clipboard copy.')
+  }
+})

lib/cannery_web/components/invite_card.ex

@@ -25,8 +25,14 @@ defmodule CanneryWeb.Components.InviteCard do
         </h2>
       <% end %>
 
-      <code class="text-xs px-4 py-2 rounded-lg text-gray-100 bg-primary-800"><%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %>
-      </code>
+      <div class="flex flex-row justify-center items-center space-x-4">
+        <code id={"code-#{@invite.id}"} class="text-xs px-4 py-2 rounded-lg text-gray-100 bg-primary-800"><%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %>
+        </code>
+
+        <%= if @code_actions do %>
+          <%= render_slot(@code_actions) %>
+        <% end %>
+      </div>
 
       <%= if @inner_block do %>
         <div class="flex space-x-4 justify-center items-center">

lib/cannery_web/live/invite_live/index.ex

@@ -7,6 +7,7 @@ defmodule CanneryWeb.InviteLive.Index do
   import CanneryWeb.Components.{InviteCard, UserCard}
   alias Cannery.{Accounts, Invites, Invites.Invite}
   alias CanneryWeb.{Endpoint, HomeLive}
+  alias Phoenix.LiveView.JS
 
   @impl true
   def mount(_params, session, socket) do
@@ -75,7 +76,11 @@ defmodule CanneryWeb.InviteLive.Index do
     {:noreply, socket}
   end
 
-  def handle_event("enable", %{"id" => id}, %{assigns: %{current_user: current_user}} = socket) do
+  def handle_event(
+        "enable_invite",
+        %{"id" => id},
+        %{assigns: %{current_user: current_user}} = socket
+      ) do
     socket =
       Invites.get_invite!(id, current_user)
       |> Invites.update_invite(%{"uses_left" => nil, "disabled_at" => nil}, current_user)
@@ -91,7 +96,11 @@ defmodule CanneryWeb.InviteLive.Index do
     {:noreply, socket}
   end
 
-  def handle_event("disable", %{"id" => id}, %{assigns: %{current_user: current_user}} = socket) do
+  def handle_event(
+        "disable_invite",
+        %{"id" => id},
+        %{assigns: %{current_user: current_user}} = socket
+      ) do
     now = NaiveDateTime.utc_now() |> NaiveDateTime.truncate(:second)
 
     socket =
@@ -109,6 +118,12 @@ defmodule CanneryWeb.InviteLive.Index do
     {:noreply, socket}
   end
 
+  @impl true
+  def handle_event("copy_to_clipboard", _, socket) do
+    prompt = dgettext("prompts", "Copied to clipboard")
+    {:noreply, socket |> put_flash(:info, prompt)}
+  end
+
   @impl true
   def handle_event(
         "delete_user",
@@ -123,16 +138,16 @@ defmodule CanneryWeb.InviteLive.Index do
   end
 
   defp display_invites(%{assigns: %{current_user: current_user}} = socket) do
-    invites = Invites.list_invites(current_user)
-
+    invites = Invites.list_invites(current_user) |> Enum.sort_by(fn %{name: name} -> name end)
     all_users = Accounts.list_all_users_by_role(current_user)
 
     admins =
       all_users
       |> Map.get(:admin, [])
       |> Enum.reject(fn %{id: user_id} -> user_id == current_user.id end)
+      |> Enum.sort_by(fn %{email: email} -> email end)
 
-    users = all_users |> Map.get(:user, [])
+    users = all_users |> Map.get(:user, []) |> Enum.sort_by(fn %{email: email} -> email end)
     socket |> assign(invites: invites, admins: admins, users: users)
   end
 end

lib/cannery_web/live/invite_live/index.html.heex

@@ -22,6 +22,18 @@
   <div class="w-full flex flex-row flex-wrap justify-center items-center">
     <%= for invite <- @invites do %>
       <.invite_card invite={invite}>
+        <:code_actions>
+          <form phx-submit={JS.dispatch("cannery:clipcopy", to: "#code-#{invite.id}")}>
+            <button
+              type="submit"
+              class="btn btn-primary"
+              phx-click="copy_to_clipboard"
+              phx-value-invite_id={"#code-#{invite.id}"}
+            >
+              <%= dgettext("actions", "Copy to clipboard") %>
+            </button>
+          </form>
+        </:code_actions>
         <%= live_patch to: Routes.invite_index_path(Endpoint, :edit, invite),
                    class: "text-primary-500 link" do %>
           <i class="fa-fw fa-lg fas fa-edit"></i>

priv/gettext/actions.pot

@@ -183,3 +183,8 @@ msgstr ""
 #: lib/cannery_web/components/move_ammo_group_component.html.heex:59
 msgid "Select"
 msgstr ""
+
+#, elixir-format, ex-autogen
+#: lib/cannery_web/live/invite_live/index.html.heex:33
+msgid "Copy to clipboard"
+msgstr ""

priv/gettext/default.pot

@@ -21,7 +21,7 @@ msgid "Access from any internet-capable device"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.html.heex:73
+#: lib/cannery_web/live/invite_live/index.html.heex:84
 msgid "Admins"
 msgstr ""
 
@@ -143,7 +143,7 @@ msgid "Description:"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.html.heex:45
+#: lib/cannery_web/live/invite_live/index.html.heex:57
 msgid "Disable"
 msgstr ""
 
@@ -171,7 +171,7 @@ msgid "Edit Container"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.ex:34
+#: lib/cannery_web/live/invite_live/index.ex:35
 msgid "Edit Invite"
 msgstr ""
 
@@ -181,7 +181,7 @@ msgid "Edit Tag"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.html.heex:49
+#: lib/cannery_web/live/invite_live/index.html.heex:61
 msgid "Enable"
 msgstr ""
 
@@ -245,7 +245,7 @@ msgid "Listing Containers"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.ex:42
+#: lib/cannery_web/live/invite_live/index.ex:43
 msgid "Listing Invites"
 msgstr ""
 
@@ -312,7 +312,7 @@ msgid "New Container"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.ex:38
+#: lib/cannery_web/live/invite_live/index.ex:39
 msgid "New Invite"
 msgstr ""
 
@@ -429,7 +429,7 @@ msgid "Self-host your own instance, or use an instance from someone you trust."
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.html.heex:61
+#: lib/cannery_web/live/invite_live/index.html.heex:73
 msgid "Set Unlimited"
 msgstr ""
 
@@ -519,7 +519,7 @@ msgid "Type:"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.html.heex:102
+#: lib/cannery_web/live/invite_live/index.html.heex:113
 msgid "Users"
 msgstr ""
 

priv/gettext/errors.pot

@@ -97,7 +97,7 @@ msgid "User confirmation link is invalid or it has expired."
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.ex:19
+#: lib/cannery_web/live/invite_live/index.ex:20
 msgid "You are not authorized to view this page"
 msgstr ""
 

priv/gettext/prompts.pot

@@ -21,19 +21,19 @@ msgstr ""
 #, elixir-format, ex-autogen
 #: lib/cannery_web/live/ammo_type_live/index.ex:41
 #: lib/cannery_web/live/ammo_type_live/show.ex:40
-#: lib/cannery_web/live/invite_live/index.ex:54
-#: lib/cannery_web/live/invite_live/index.ex:120
+#: lib/cannery_web/live/invite_live/index.ex:55
+#: lib/cannery_web/live/invite_live/index.ex:135
 #: lib/cannery_web/live/tag_live/index.ex:40
 msgid "%{name} deleted succesfully"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.ex:102
+#: lib/cannery_web/live/invite_live/index.ex:111
 msgid "%{name} disabled succesfully"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.ex:84
+#: lib/cannery_web/live/invite_live/index.ex:89
 msgid "%{name} enabled succesfully"
 msgstr ""
 
@@ -44,7 +44,7 @@ msgid "%{name} has been deleted"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.ex:68
+#: lib/cannery_web/live/invite_live/index.ex:69
 msgid "%{name} updated succesfully"
 msgstr ""
 
@@ -78,8 +78,8 @@ msgid "Ammo group updated successfully"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.html.heex:84
-#: lib/cannery_web/live/invite_live/index.html.heex:113
+#: lib/cannery_web/live/invite_live/index.html.heex:96
+#: lib/cannery_web/live/invite_live/index.html.heex:125
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""
 
@@ -92,7 +92,7 @@ msgid "Are you sure you want to delete %{name}?"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.html.heex:36
+#: lib/cannery_web/live/invite_live/index.html.heex:48
 msgid "Are you sure you want to delete the invite for %{name}?"
 msgstr ""
 
@@ -114,7 +114,7 @@ msgid "Are you sure you want to log out?"
 msgstr ""
 
 #, elixir-format, ex-autogen
-#: lib/cannery_web/live/invite_live/index.html.heex:59
+#: lib/cannery_web/live/invite_live/index.html.heex:71
 msgid "Are you sure you want to make %{name} unlimited?"
 msgstr ""
 
@@ -233,3 +233,8 @@ msgstr ""
 #: lib/cannery_web/components/move_ammo_group_component.ex:47
 msgid "Ammo moved to %{name} successfully"
 msgstr ""
+
+#, elixir-format, ex-autogen
+#: lib/cannery_web/live/invite_live/index.ex:123
+msgid "Copied to clipboard"
+msgstr ""