Add buttons to copy s3 keys to the clipboard

#31

src/components/parameter-schema/form-mode/ParameterNumberInput.vue

@@ -39,7 +39,7 @@ function updateValue() {
     ref="numberInput"
     :max="props.parameter['maximum']"
     :min="props.parameter['minimum']"
-    step="0.01"
+    step="1"
     :value="props.modelValue"
     :required="props.required"
     :aria-describedby="props.helpId"

src/views/object-storage/S3KeyView.vue

 <script setup lang="ts">
 import type { S3Key } from "@/client/s3proxy";
-import { ref, watch } from "vue";
+import { reactive, watch } from "vue";
 import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 import DeleteModal from "@/components/modals/DeleteModal.vue";
-import { environment } from "../../environment";
+import { environment } from "@/environment";
+import CopyToClipboardIcon from "@/components/CopyToClipboardIcon.vue";
 
 const props = defineProps<{
   s3key: S3Key;
@@ -18,11 +19,17 @@ const emit = defineEmits<{
 watch(
   () => props.s3key.access_key,
   () => {
-    visibleSecret.value = false;
+    visibleKeys.secret = false;
+    visibleKeys.access = false;
   },
 );
-
-const visibleSecret = ref<boolean>(false);
+const visibleKeys = reactive<{
+  secret: boolean;
+  access: boolean;
+}>({
+  secret: false,
+  access: false,
+});
 
 function deleteKeyTrigger() {
   if (props.deletable) {
@@ -34,7 +41,7 @@ function deleteKeyTrigger() {
 <template>
   <DeleteModal
     modalID="delete-key-modal"
-    :object-name-delete="props.s3key.access_key"
+    :object-name-delete="props.s3key.access_key.slice(0, 5) + '...'"
     :back-modal-id="undefined"
     @confirm-delete="deleteKeyTrigger"
   />
@@ -44,42 +51,51 @@ function deleteKeyTrigger() {
   <div v-if="props.loading" class="placeholder-glow">
     <span class="placeholder col-5 mt-3 mb-2 fs-4"></span><br />
   </div>
-  <input
-    v-else
-    class="form-control-plaintext fs-4"
-    type="text"
-    :value="props.s3key.access_key"
-    aria-label="S3 Access Key"
-    readonly
-  />
-  <div class="d-flex align-items-center">
-    <span class="fs-3">Secret Key:</span>
-    <button
-      class="btn btn-outline-secondary ms-3"
-      :class="{ active: visibleSecret }"
-      data-bs-toggle="button"
-      :disabled="props.loading"
-      @click="visibleSecret = !visibleSecret"
+  <div v-else class="input-group mb-2">
+    <span
+      class="input-group-text cursor-pointer"
+      @click="visibleKeys.access = !visibleKeys.access"
     >
       <font-awesome-icon
-        class="fs-5"
-        :icon="visibleSecret ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'"
+        :icon="visibleKeys.access ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'"
       />
-    </button>
+    </span>
+    <input
+      class="form-control"
+      :type="visibleKeys.access ? 'text' : 'password'"
+      :value="props.s3key.access_key"
+      aria-label="S3 Access Key"
+      readonly
+    />
+    <span class="input-group-text" id="s3-secret-key-copy"
+      ><copy-to-clipboard-icon :text="props.s3key.access_key"
+    /></span>
   </div>
+  <h3>Secret Key:</h3>
   <div v-if="props.loading" class="placeholder-glow">
     <span class="placeholder col-7 mt-3 mb-4 fs-4"></span><br />
   </div>
-  <input
-    v-else
-    id="s3-secret-key"
-    class="form-control-plaintext fs-4 mb-3"
-    :type="visibleSecret ? 'text' : 'password'"
-    :value="props.s3key.secret_key"
-    aria-label="S3 Access Key"
-    aria-describedby="s3-secret-key"
-    readonly
-  />
+  <div v-else class="input-group fs-4 mb-3">
+    <span
+      class="input-group-text cursor-pointer"
+      @click="visibleKeys.secret = !visibleKeys.secret"
+    >
+      <font-awesome-icon
+        :icon="visibleKeys.secret ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'"
+      />
+    </span>
+    <input
+      id="s3-secret-key"
+      class="form-control"
+      :type="visibleKeys.secret ? 'text' : 'password'"
+      :value="props.s3key.secret_key"
+      aria-label="S3 Access Key"
+      readonly
+    />
+    <span class="input-group-text" id="s3-secret-key-copy"
+      ><copy-to-clipboard-icon :text="props.s3key.secret_key"
+    /></span>
+  </div>
   <button
     type="button"
     class="btn btn-danger fs-5"

src/views/object-storage/S3KeysView.vue

@@ -92,7 +92,7 @@ onMounted(() => {
     >
       <div class="d-flex">
         <div class="toast-body">
-          Successfully deleted S3 Key {{ keyState.deletedKey }}
+          Successfully deleted S3 Key {{ keyState.deletedKey.slice(0, 5) }}...
         </div>
         <button
           type="button"
@@ -152,7 +152,7 @@ onMounted(() => {
             shadow: keyState.activeKey === index,
           }"
         >
-          {{ s3key.access_key }}
+          {{ s3key.access_key.slice(0, 5) }}...
         </button>
       </div>
     </div>