From f745aa7906fc404c7eed9d2c486b99ef2724add9 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 24 Jul 2024 11:29:40 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8:=20add=20eye=20icon=20to=20reveal=20A?=
 =?UTF-8?q?PI=20key=20and=20remove=20mouse=20over=20in=20`APIKeyItem`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/User/APIKey/APIKeyItem.vue   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/src/components/User/APIKey/APIKeyItem.vue b/client/src/components/User/APIKey/APIKeyItem.vue
index dd398af9b979..0ad915b730d0 100644
--- a/client/src/components/User/APIKey/APIKeyItem.vue
+++ b/client/src/components/User/APIKey/APIKeyItem.vue
@@ -1,10 +1,15 @@
 <script setup>
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faEye, faEyeSlash, faKey, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 import svc from "./model/service";
 import { getGalaxyInstance } from "app";
 import UtcDate from "components/UtcDate";
 import CopyToClipboard from "components/CopyToClipboard";
 
+library.add(faEye, faEyeSlash, faKey, faTrash);
+
 defineProps({
     item: {
         type: Object,
@@ -34,12 +39,7 @@ const deleteKey = () => {
     <b-card title="Current API key">
         <div class="d-flex justify-content-between w-100">
             <div class="w-100">
-                <b-input-group
-                    class="w-100"
-                    @blur="hover = false"
-                    @focus="hover = true"
-                    @mouseover="hover = true"
-                    @mouseleave="hover = false">
+                <b-input-group class="w-100">
                     <b-input-group-prepend>
                         <b-input-group-text>
                             <icon icon="key" />
@@ -59,6 +59,11 @@ const deleteKey = () => {
                                 :text="item.key"
                                 title="Copy key" />
                         </b-input-group-text>
+
+                        <b-button v-b-tooltip.hover title="Show/hide key" @click="hover = !hover">
+                            <FontAwesomeIcon :icon="hover ? faEyeSlash : faEye" />
+                        </b-button>
+
                         <b-button title="Delete api key" @click="toggleDeleteModal">
                             <icon icon="trash" />
                         </b-button>