Add button for refreshing and creating s3 keys

#16

src/assets/main.css

@@ -4,3 +4,7 @@ body {
     max-height: 100vh;
     background: #181818;
 }
+
+.top-toast {
+    top: 4rem;
+}

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"

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"

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"

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"

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"

src/views/object-storage/S3KeysView.vue

 <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"