Merge branch 'release_23.2' into release_24.0

client/src/components/User/APIKey/APIKeyItem.vue

@@ -1,4 +1,7 @@
 <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 { getGalaxyInstance } from "app";
 import CopyToClipboard from "components/CopyToClipboard";
 import UtcDate from "components/UtcDate";
@@ -6,6 +9,8 @@ import { ref } from "vue";
 
 import svc from "./model/service";
 
+library.add(faEye, faEyeSlash, faKey, faTrash);
+
 defineProps({
     item: {
         type: Object,
@@ -35,12 +40,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" />
@@ -57,6 +57,11 @@ const deleteKey = () => {
                         <b-input-group-text>
                             <CopyToClipboard message="Key was copied to clipboard" :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>