diff --git a/src/components/parameter-schema/form-mode/ParameterNumberInput.vue b/src/components/parameter-schema/form-mode/ParameterNumberInput.vue index 513b783282e6b08ce8e78b4dd4360ddd4fe963ce..f93c0bf683345162a1d6bceb466717e77b84d6c9 100644 --- a/src/components/parameter-schema/form-mode/ParameterNumberInput.vue +++ b/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" diff --git a/src/views/object-storage/S3KeyView.vue b/src/views/object-storage/S3KeyView.vue index 4366ee644178f1b00e01dd10d6150d046dc3945e..3a3116d083e307f08d5ff7298ae23cc644e948f7 100644 --- a/src/views/object-storage/S3KeyView.vue +++ b/src/views/object-storage/S3KeyView.vue @@ -1,9 +1,10 @@ <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" diff --git a/src/views/object-storage/S3KeysView.vue b/src/views/object-storage/S3KeysView.vue index eaf3f920a6c8615e0340519cabd49597800c0937..ffc92ad84f1457f9a0bae304f28813f23eef9bc9 100644 --- a/src/views/object-storage/S3KeysView.vue +++ b/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>