diff --git a/src/assets/main.css b/src/assets/main.css index 5bd056873b89260a36fcf27829e57b40738217d5..a78c1e6441961749ba7ae2a72e26b699008f73de 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -4,3 +4,7 @@ body { max-height: 100vh; background: #181818; } + +.top-toast { + top: 4rem; +} diff --git a/src/components/BucketView.vue b/src/components/BucketView.vue index 804b35f65bd285a70831ec6c50a9ae9283c6614c..feab82d9c6bdf878c20c7a77175e2ec6b179eec5 100644 --- a/src/components/BucketView.vue +++ b/src/components/BucketView.vue @@ -515,7 +515,7 @@ watch( </script> <template> - <div class="toast-container position-fixed top-0 end-0 p-3"> + <div class="toast-container position-fixed top-toast end-0 p-3"> <div role="alert" aria-live="assertive" diff --git a/src/components/Modals/CopyObjectModal.vue b/src/components/Modals/CopyObjectModal.vue index 2a9198b0252bd3996f9ecde390ece34b840e0c99..26e5d41d8a65b9810dbb79a413ba0fc7737f24d2 100644 --- a/src/components/Modals/CopyObjectModal.vue +++ b/src/components/Modals/CopyObjectModal.vue @@ -90,7 +90,7 @@ onMounted(() => { </script> <template> - <div class="toast-container position-fixed top-0 end-0 p-3"> + <div class="toast-container position-fixed top-toast end-0 p-3"> <div role="alert" aria-live="assertive" @@ -110,7 +110,7 @@ onMounted(() => { </div> </div> </div> - <div class="toast-container position-fixed top-0 end-0 p-3"> + <div class="toast-container position-fixed top-toast end-0 p-3"> <div role="alert" aria-live="assertive" diff --git a/src/components/Modals/CreateFolderModal.vue b/src/components/Modals/CreateFolderModal.vue index d789c8f9cca8013154acf82e90fc4bea7ec8035c..bbff4f9c2ab9a84449fe893322772c5eb62a6417 100644 --- a/src/components/Modals/CreateFolderModal.vue +++ b/src/components/Modals/CreateFolderModal.vue @@ -79,7 +79,7 @@ onMounted(() => { </script> <template> - <div class="toast-container position-fixed top-0 end-0 p-3"> + <div class="toast-container position-fixed top-toast end-0 p-3"> <div role="alert" aria-live="assertive" @@ -99,7 +99,7 @@ onMounted(() => { </div> </div> </div> - <div class="toast-container position-fixed top-0 end-0 p-3"> + <div class="toast-container position-fixed top-toast end-0 p-3"> <div role="alert" aria-live="assertive" diff --git a/src/components/Modals/PermissionModal.vue b/src/components/Modals/PermissionModal.vue index a470e2fc5060b2b59c8b01612ed6cc5ad7bc9751..a76048e39ef8cbd45e3e62820fbc53a41b474482 100644 --- a/src/components/Modals/PermissionModal.vue +++ b/src/components/Modals/PermissionModal.vue @@ -290,7 +290,7 @@ onMounted(() => { confirmedDeletePermission(permission.bucket_name, permission.uid) " /> - <div class="toast-container position-fixed top-0 end-0 p-3"> + <div class="toast-container position-fixed top-toast end-0 p-3"> <div role="alert" aria-live="assertive" diff --git a/src/components/Modals/UploadObjectModal.vue b/src/components/Modals/UploadObjectModal.vue index dc86f55756236e2469439d3c038c337649225b64..a46e9d37f391c30569a7f84147850eec24d908e3 100644 --- a/src/components/Modals/UploadObjectModal.vue +++ b/src/components/Modals/UploadObjectModal.vue @@ -124,7 +124,7 @@ onMounted(() => { </script> <template> - <div class="toast-container position-fixed top-0 end-0 p-3"> + <div class="toast-container position-fixed top-toast end-0 p-3"> <div role="alert" aria-live="assertive" @@ -144,7 +144,7 @@ onMounted(() => { </div> </div> </div> - <div class="toast-container position-fixed top-0 end-0 p-3"> + <div class="toast-container position-fixed top-toast end-0 p-3"> <div role="alert" aria-live="assertive" diff --git a/src/views/object-storage/S3KeysView.vue b/src/views/object-storage/S3KeysView.vue index 64933681b3d7b2dc74edb0d2eaade843205d9288..170c9cde6bd49785f6ed902e07ff447768ddc036 100644 --- a/src/views/object-storage/S3KeysView.vue +++ b/src/views/object-storage/S3KeysView.vue @@ -1,5 +1,6 @@ <script setup lang="ts"> import S3KeyView from "@/components/S3KeyView.vue"; +import BootstrapIcon from "@/components/BootstrapIcon.vue"; import { reactive, onMounted, computed } from "vue"; import type { ComputedRef } from "vue"; import type { S3Key } from "@/client"; @@ -36,6 +37,9 @@ const allowKeyDeletion: ComputedRef<boolean> = computed( function refreshKeys(uid: string) { KeyService.keyGetUserKeys(uid) .then((keys) => { + if (keyState.activeKey >= keys.length) { + keyState.activeKey = keys.length - 1; + } keyState.keys = keys; }) .catch((err) => console.error(err)) @@ -58,6 +62,19 @@ function deleteKey(accessKey: string) { } } +function createKey() { + if (allowKeyDeletion.value && authStore.user != null) { + KeyService.keyCreateUserKey(authStore.user.uid) + .then((s3key) => { + keyState.keys.push(s3key); + keyState.keys = [...keyState.keys].sort((keyA, keyB) => + keyA.access_key > keyB.access_key ? 1 : -1 + ); + }) + .catch((err) => console.error(err)); + } +} + onMounted(() => { successToast = new Toast("#successKeyToast"); if (authStore.user != null) { @@ -67,7 +84,7 @@ onMounted(() => { </script> <template> - <div class="toast-container position-fixed top-0 end-0 p-3"> + <div class="toast-container position-fixed top-toast end-0 p-3"> <div role="alert" aria-live="assertive" @@ -95,6 +112,20 @@ onMounted(() => { </div> <div class="row m-2 mt-4"> <div class="col-4"> + <div class="d-flex justify-content-between mb-4"> + <button + type="button" + class="btn btn-light" + @click="refreshKeys(authStore.user?.uid ?? 'impossible')" + > + <bootstrap-icon icon="arrow-clockwise" /> + <span class="visually-hidden">Refresh S3 Keys</span> + </button> + <button type="button" class="btn btn-light" @click="createKey"> + <bootstrap-icon icon="plus-lg" /> + <span class="visually-hidden">Create S3 Key</span> + </button> + </div> <div v-if="keyState.initialLoading" class="placeholder-glow"> <a v-for="n in 3"