From 21c4c4d82662d31f79945a804683b0431484127a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20B=C4=82LTEANU?= <marius.balteanu@zitec.com>
Date: Fri, 19 Sep 2025 00:57:21 +0300
Subject: [PATCH] WIP


diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index e3c4b8158..6ec00bd33 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1975,6 +1975,7 @@ td.gantt_watcher_users_column div.issue_watcher_users ul li:not(:last-child)::af
   box-shadow: none;
   white-space: pre-wrap;
   pointer-events: none;
+  opacity: 1;
 }
 
 /***** SVG Icons *****/
@@ -2548,3 +2549,31 @@ th[role=columnheader]:not(.no-sort):hover:after {
   padding: 0.5rem;
   width: calc(200px - 0.5rem * 2);
 }
+
+.input-group {
+  display: flex;
+  align-items: stretch;
+  column-gap: 0.5rem;
+  row-gap: 1rem;
+  margin-right: 10px;
+}
+
+.input-group input {
+  width: 100%;
+}
+
+.copy-button-wrapper {
+  position: relative;
+  display: flex;
+  gap: 5px;
+}
+
+.copy-tooltip {
+  position: absolute;
+  bottom: 110%; /* Position it above the button */
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.4rem 0.6rem;
+  white-space: nowrap;
+  transition: opacity 0.2s ease-in-out;
+}
diff --git a/app/views/my/_sidebar.html.erb b/app/views/my/_sidebar.html.erb
index c2b64bd53..b99e4e82c 100644
--- a/app/views/my/_sidebar.html.erb
+++ b/app/views/my/_sidebar.html.erb
@@ -20,17 +20,28 @@
 
 <% if Setting.rest_api_enabled? %>
 <h4><%= l(:label_api_access_key) %></h4>
-<div>
-  <%= link_to l(:button_show), my_api_key_path, :remote => true %>
-  <pre id='api-access-key' class='autoscroll'></pre>
+
+<div class="input-group" data-controller="input-copyable">
+  <%= password_field_tag "input_copyable", @user.api_key, readonly: true, data: { input_copyable_target: "input" } %>
+  <div class="copy-button-wrapper">
+    <a href="" class="icon" data-action="input-copyable#toggleVisibility" data-api-key-target="toggleButton">
+      <%= sprite_icon('watch', l(:button_copy), icon_only: true) %>
+    </a>
+    <a href="" class="icon" data-action="input-copyable#copy">
+      <%= sprite_icon('copy', l(:button_copy), icon_only: true) %>
+    </a>
+    <span class="ui-tooltip copy-tooltip hidden" data-input-copyable-target="tooltip">
+        <%= l(:label_copied).capitalize %>
+    </span>
+  </div>
 </div>
-<%= javascript_tag("$('#api-access-key').hide();") %>
+
 <p>
 <% if @user.api_token %>
-<%= l(:label_api_access_key_created_on, distance_of_time_in_words(Time.now, @user.api_token.created_on)) %>
+  <%= l(:label_api_access_key_created_on, distance_of_time_in_words(Time.now, @user.api_token.created_on)) %>
 <% else %>
-<%= l(:label_missing_api_access_key) %>
+  <%= l(:label_missing_api_access_key) %>
 <% end %>
-(<%= link_to l(:button_reset), my_api_key_path, :method => :post %>)
+  (<%= link_to l(:button_reset), my_api_key_path, :method => :post %>)
 </p>
 <% end %>
diff --git a/app/views/my/show_api_key.js.erb b/app/views/my/show_api_key.js.erb
deleted file mode 100644
index 73b0ee029..000000000
--- a/app/views/my/show_api_key.js.erb
+++ /dev/null
@@ -1 +0,0 @@
-$('#api-access-key').html('<%= escape_javascript @user.api_key %>').toggle();
diff --git a/config/routes.rb b/config/routes.rb
index 7a683c938..f983f588b 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -94,7 +94,6 @@ Rails.application.routes.draw do
   match 'my/page', :controller => 'my', :action => 'page', :via => :get
   post 'my/page', :to => 'my#update_page'
   match 'my', :controller => 'my', :action => 'index', :via => :get # Redirects to my/page
-  get 'my/api_key', :to => 'my#show_api_key', :as => 'my_api_key'
   post 'my/api_key', :to => 'my#reset_api_key'
   post 'my/atom_key', :to => 'my#reset_atom_key', :as => 'my_atom_key'
   match 'my/password', :controller => 'my', :action => 'password', :via => [:get, :post]
-- 
2.39.5 (Apple Git-154)