feat: add in access token copying, tool tool tip dispaly

assets/js/app.js

@@ -17,8 +17,9 @@ import LiveReact, { initLiveReact } from "phoenix_live_react";
 
 import sourceLiveViewHooks from "./source_lv_hooks";
 import logsLiveViewHooks from "./log_event_live_hooks";
-
+import $ from "jquery"
 import moment from "moment";
+
 // set moment globally before daterangepicker
 window.moment = moment;
 
@@ -100,4 +101,24 @@ window.liveSocket = liveSocket;
 
 document.addEventListener("DOMContentLoaded", (e) => {
   initLiveReact();
+
+});
+
+// Use `:text` on the `:detail` optoin to pass values to event listener
+window.addEventListener("logflare:copy-to-clipboard", (event) => {
+  if ("clipboard" in navigator) {
+    const text = event.detail?.text || event.target.textContent;
+    navigator.clipboard.writeText(text);
+  } else {
+    console.error("Your browser does not support clipboard copy.");
+  }
 });
+
+
+window.addEventListener("phx:page-loading-stop", _info => {
+  // enable all tooltips
+  $(function () {
+    $('[data-toggle="tooltip"]').tooltip({delay: {show: 100, hide: 200}})
+  });
+
+})

lib/logflare_web.ex

@@ -123,6 +123,7 @@ defmodule LogflareWeb do
     quote do
       use LogflareWeb.LiveCommons
       use LogflareWeb.ModalLiveHelpers
+      alias Phoenix.LiveView.JS
     end
   end
 

lib/logflare_web/live/access_tokens_live.ex

@@ -8,16 +8,13 @@ defmodule LogflareWeb.AccessTokensLive do
     ~H"""
     <.subheader>
       <:path>
-        ~/accounts/<.subheader_path_link live_patch to={~p"/access-tokens"}>access-tokens</.subheader_path_link>
+        ~/accounts/<.subheader_path_link live_patch to={~p"/access-tokens"}>access tokens</.subheader_path_link>
       </:path>
       <.subheader_link to="https://docs.logflare.app/concepts/access-tokens/" text="docs" fa_icon="book" />
     </.subheader>
 
     <section class="content container mx-auto flex flex-col w-full">
       <div class="mb-4">
-        <p>
-          <strong>Accesss tokens are only supported for Logflare Endpoints for now.</strong>
-        </p>
         <p style="white-space: pre-wrap">Theree 3 ways of authenticating with the API: in the <code>Authorization</code> header, the <code>X-API-KEY</code> header, or the <code>api_key</code> query parameter.
 
           The <code>Authorization</code> header method expects the header format <code>Authorization: Bearer your-access-token</code>.
@@ -47,7 +44,13 @@ defmodule LogflareWeb.AccessTokensLive do
       </div>
 
       <%= if @access_tokens == [] do %>
-        <p>You do not have any access tokens yet.</p>
+        <div class="alert alert-dark tw-max-w-md">
+          <h5>Legacy Ingest API Key</h5>
+          <p><strong>Deprecated</strong>, use access tokens instead.</p>
+          <button class="btn btn-secondary btn-sm" phx-click={JS.dispatch("logflare:copy-to-clipboard", detail: %{text: @user.api_key})} data-toggle="tooltip" data-placement="top" title="Copy to clipboard">
+            <i class="fa fa-clone" aria-hidden="true"></i> Copy
+          </button>
+        </div>
       <% end %>
 
       <table class={["table-dark", "table-auto", "mt-4", "w-full", "flex-grow", if(@access_tokens == [], do: "hidden")]}>
@@ -63,11 +66,16 @@ defmodule LogflareWeb.AccessTokensLive do
             <tr>
               <td class="p-2">
                 <%= token.description %>
+                <span :for={scope <- String.split(token.scopes || "")}><%= scope %></span>
               </td>
               <td class="p-2">
                 <%= Calendar.strftime(token.inserted_at, "%d %b %Y, %I:%M:%S %p") %>
               </td>
+
               <td class="p-2">
+                <button :if={token.scopes =~ "public"} class="btn btn-secondary" phx-click={JS.dispatch("logflare:copy-to-clipboard", detail: %{text: token.token})} data-toggle="tooltip" data-placement="top" title="Copy to clipboard">
+                  <i class="fa fa-clone" aria-hidden="true"></i> Copy
+                </button>
                 <button class="btn text-danger text-bold" data-confirm="Are you sure? This cannot be undone." phx-click="revoke-token" phx-value-token-id={token.id}>
                   Revoke
                 </button>

test/logflare_web/live/access_tokens_live_test.exs

@@ -7,7 +7,6 @@ defmodule LogflareWeb.AccessTokensLiveTest do
     user = insert(:user)
     conn = conn |> put_session(:user_id, user.id) |> assign(:user, user)
 
-
     {:ok, user: user, conn: conn}
   end
 
@@ -18,4 +17,45 @@ defmodule LogflareWeb.AccessTokensLiveTest do
            |> element("a", "docs")
            |> has_element?()
   end
+
+  test "legacy api key - show only when no access tokens", %{conn: conn} do
+    {:ok, view, _html} = live(conn, ~p"/access-tokens")
+    html = render(view)
+    # able to copy, visible
+    assert view
+           |> element("button", "Copy")
+           |> has_element?()
+
+    # able to see legacy user token
+    assert html =~ "Deprecated"
+    assert html =~ "Copy"
+  end
+
+  test "public token", %{conn: conn, user: user} do
+    token = insert(:access_token, scopes: "public", resource_owner: user)
+    {:ok, view, _html} = live(conn, ~p"/access-tokens")
+    html = render(view)
+    # able to copy, visible
+    assert view
+           |> element("button", "Copy")
+           |> has_element?()
+
+    assert html =~ token.token
+    assert html =~ "public"
+    refute html =~ "Deprecated"
+  end
+
+  test "private token", %{conn: conn, user: user} do
+    token = insert(:access_token, scopes: "private", resource_owner: user)
+    {:ok, view, _html} = live(conn, ~p"/access-tokens")
+
+    # not able to copy, not visible
+    refute view
+           |> element("button", "Copy")
+           |> has_element?()
+
+    html = render(view)
+    refute html =~ token.token
+    assert html =~ "private"
+  end
 end

test/support/factory.ex

@@ -197,7 +197,8 @@ defmodule Logflare.Factory do
   def access_token_factory do
     %OauthAccessToken{
       token: TestUtils.random_string(20),
-      resource_owner: build(:user)
+      resource_owner: build(:user),
+      scopes: "public"
     }
   end