Merge pull request #18593 from itisAliRH/api-key-eye

[23.0] Fix API key reveals on mouse hover

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>