3 files changed, 35 insertions, 2 deletions
diff --git a/front-end/src/components/Settings/Bookmarks.vue b/front-end/src/components/Settings/Bookmarks.vue
new file mode 100644
index 0000000..68fa86b
--- /dev/null
+++ b/front-end/src/components/Settings/Bookmarks.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { apiCall, useWait } from '@vnuge/vnlib.browser';
+import { useStore } from '../../store';
+import { useObjectUrl, set } from '@vueuse/core';
+import { ref } from 'vue';
+
+const { bookmarks } = useStore();
+
+const blobUrl = ref<Blob>();
+const downloadAnchor = ref();
+const obj = useObjectUrl(blobUrl);
+const { waiting } = useWait()
+
+const downloadBookmarks = () => {
+    apiCall(async () => {
+        const htmlData = await bookmarks.api.downloadAll();
+        const blob = new Blob([htmlData], { type: 'text/html' });
+        set(blobUrl, blob);
+        downloadAnchor.value?.click();
+    });
+}
+
+</script>
+<template>
+    <div class="flex flex-row justify-start">
+        <div class="">
+            <button class="flex items-center btn light" :disabled="waiting" @click="downloadBookmarks()">
+                Download
+            </button>
+        </div>
+    </div>
+    <a ref="downloadAnchor" :href="obj" download="bookmarks.html" class="hidden"></a>
+</template>
+\ No newline at end of file
diff --git a/front-end/src/components/Settings/PkiSettings.vue b/front-end/src/components/Settings/PkiSettings.vue
index 5fa5c93..2564cf6 100644
--- a/front-end/src/components/Settings/PkiSettings.vue
+++ b/front-end/src/components/Settings/PkiSettings.vue
@@ -142,7 +142,7 @@ const onAddKey = async () => {
             </div>
         </div>
 
-        <div class="relative mt-2 overflow-x-auto shadow-md sm:rounded">
+        <div class="relative mt-4 overflow-x-auto shadow-md sm:rounded">
             <table class="w-full text-sm text-left text-gray-500 rtl:text-right dark:text-gray-400">
                 <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                     <tr>
diff --git a/front-end/src/components/Settings/TotpSettings.vue b/front-end/src/components/Settings/TotpSettings.vue
index 1d79914..0019a9d 100644
--- a/front-end/src/components/Settings/TotpSettings.vue
+++ b/front-end/src/components/Settings/TotpSettings.vue
@@ -114,7 +114,7 @@ const onVerifyOtp = async (code: string) => {
             </span>
         </div>
         <div v-if="totpEnabled" class="flex">
-            <button class="btn light">
+            <button class="btn light" @click="addOrUpdate()">
                 Regenerate
             </button>
             <button class="btn red" @click="disableTotp()">