Improve API keys

apps/block_scout_web/assets/js/pages/api_keys.js

@@ -0,0 +1,9 @@
+import $ from 'jquery'
+
+$('[delete-api-key]').on('click', (event) => {
+  event.preventDefault()
+  console.log(event)
+  if (confirm('Are you sure you want to delete API key?')) {
+    $(event.currentTarget.parentElement).find('form').trigger('submit')
+  }
+})

apps/block_scout_web/assets/webpack.config.js

@@ -70,7 +70,9 @@ const appJs =
       'token-overview': './js/pages/token/overview.js',
       'export-csv': './css/export-csv.scss',
       'csv-download': './js/lib/csv_download.js',
-      'dropzone': './js/lib/dropzone.js'
+      'datepicker': './js/lib/datepicker.js',
+      'dropzone': './js/lib/dropzone.js',
+      'api-keys': './js/pages/api_keys.js'
     },
     output: {
       filename: '[name].js',

apps/block_scout_web/lib/block_scout_web/models/get_address_tags.ex

@@ -21,6 +21,8 @@ defmodule GetAddressTags do
     }
   end
 
+  def call(_, _), do: %{personal_tags: [], watchlist_names: []}
+
   def get_tags_on_address(%Hash{} = address_hash) do
     query =
       from(

apps/block_scout_web/lib/block_scout_web/templates/account/api_key/form.html.eex

@@ -1,6 +1,6 @@
 <section class="container">
   <div class="row">
-    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn %>
+    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn, active_item: :api_keys %>
     <div class="col-sm-10">
       <div class="card">
         <div class="card-body">

apps/block_scout_web/lib/block_scout_web/templates/account/api_key/index.html.eex

@@ -1,10 +1,10 @@
 <section class="container">
   <div class="row">
-    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn %>
+    <%= render BlockScoutWeb.Account.CommonView, "_nav.html", conn: @conn, active_item: :api_keys %>
     <div class="col-md">
       <div class="card">
         <div class="card-body">
-          <h1 class="card-title list-title-description header-account"><%= gettext "Api keys" %> </h1>
+          <h1 class="card-title list-title-description header-account"><%= gettext "API keys" %> </h1>
           <br>
           <div class="col-sm">
             <div class="mb-3 row o-flow-x">
@@ -41,4 +41,5 @@
       </div>
     </div>
   </div>
+  <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/api-keys.js") %>"></script>
 </section>

apps/block_scout_web/lib/block_scout_web/templates/account/api_key/row.html.eex

@@ -6,7 +6,11 @@
           additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"], clipboard_text: @api_key.value, aria_label: gettext("Copy API key"), title: gettext("Copy API key"), style: "display: inline-block; vertical-align: text-bottom; position: initial; margin-top: 1px;" %>
   </td>
   <td>
-    <%= link gettext("Remove"), to: api_key_path(@conn, :delete, @api_key.value), method: :delete %>
+    <form method="post" action="<%= api_key_path(@conn, :delete, @api_key.value) %>">
+      <input type="hidden" name="_csrf_token" value="<%= Plug.CSRFProtection.get_csrf_token() %>">
+      <input type="hidden" name="_method" value="delete">
+    </form>  
+    <a href="" delete-api-key><%= gettext("Remove") %></a>
   </td>
   <td>
     <%= link gettext("Edit"), to: api_key_path(@conn, :edit, @api_key.value) %>

apps/block_scout_web/lib/block_scout_web/templates/account/common/_nav.html.eex

@@ -13,7 +13,7 @@
       <a class="<%= nav_class(@active_item, :transaction_tags) %>" href="<%= tag_transaction_path(@conn, :index) %>">Transaction Tags</a>
     </li>
       <li class="nav-item">
-      <a class="dropdown-item fs-14" href="<%= api_key_path(@conn, :index) %>"><%= gettext "API keys" %></a>
+      <a class="<%= nav_class(@active_item, :api_keys) %>" href="<%= api_key_path(@conn, :index) %>"><%= gettext "API keys" %></a>
     </li>
   </ul>
 </div>