From 76a9fcece4e5dedc6374137e8958b86d637f9cc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B6bel?= <dgoebel@techfak.uni-bielefeld.de>
Date: Tue, 11 Oct 2022 16:15:21 +0200
Subject: [PATCH] Add button for refreshing and creating s3 keys
#16
---
src/assets/main.css | 4 +++
src/components/BucketView.vue | 2 +-
src/components/Modals/CopyObjectModal.vue | 4 +--
src/components/Modals/CreateFolderModal.vue | 4 +--
src/components/Modals/PermissionModal.vue | 2 +-
src/components/Modals/UploadObjectModal.vue | 4 +--
src/views/object-storage/S3KeysView.vue | 33 ++++++++++++++++++++-
7 files changed, 44 insertions(+), 9 deletions(-)
diff --git a/src/assets/main.css b/src/assets/main.css
index 5bd0568..a78c1e6 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 804b35f..feab82d 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 2a9198b..26e5d41 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 d789c8f..bbff4f9 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 a470e2f..a76048e 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 dc86f55..a46e9d3 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 6493368..170c9cd 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"
--
GitLab