aboutsummaryrefslogtreecommitdiff
path: root/front-end/src
diff options
context:
space:
mode:
Diffstat (limited to 'front-end/src')
-rw-r--r--front-end/src/buttons.scss2
-rw-r--r--front-end/src/components/Settings/Bookmarks.vue86
-rw-r--r--front-end/src/components/Settings/PkiSettings.vue2
-rw-r--r--front-end/src/components/Settings/TotpSettings.vue2
-rw-r--r--front-end/src/store/bookmarks.ts8
-rw-r--r--front-end/src/store/index.ts2
6 files changed, 80 insertions, 22 deletions
diff --git a/front-end/src/buttons.scss b/front-end/src/buttons.scss
index 409f405..7088deb 100644
--- a/front-end/src/buttons.scss
+++ b/front-end/src/buttons.scss
@@ -1,5 +1,5 @@
.btn{
- @apply focus:ring-2 focus:outline-none font-medium rounded text-sm px-4 py-2 text-center me-2 text-white;
+ @apply focus:ring-2 focus:outline-none font-medium rounded text-sm px-4 py-2 text-center text-white;
&.round{
@apply rounded-full;
diff --git a/front-end/src/components/Settings/Bookmarks.vue b/front-end/src/components/Settings/Bookmarks.vue
index 68fa86b..7f73921 100644
--- a/front-end/src/components/Settings/Bookmarks.vue
+++ b/front-end/src/components/Settings/Bookmarks.vue
@@ -1,33 +1,87 @@
<script setup lang="ts">
import { apiCall, useWait } from '@vnuge/vnlib.browser';
-import { useStore } from '../../store';
-import { useObjectUrl, set } from '@vueuse/core';
+import { useStore, type DownloadContentType } from '../../store';
import { ref } from 'vue';
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
const { bookmarks } = useStore();
-const blobUrl = ref<Blob>();
const downloadAnchor = ref();
-const obj = useObjectUrl(blobUrl);
const { waiting } = useWait()
-const downloadBookmarks = () => {
+const downloadBookmarks = (contentType: DownloadContentType) => {
apiCall(async () => {
- const htmlData = await bookmarks.api.downloadAll();
- const blob = new Blob([htmlData], { type: 'text/html' });
- set(blobUrl, blob);
- downloadAnchor.value?.click();
+ const htmlData = await bookmarks.api.downloadAll(contentType);
+
+ switch(contentType) {
+ case 'text/html':
+ case 'text/csv':
+ {
+ const blob = new Blob([htmlData], { type: contentType });
+ const url = URL.createObjectURL(blob);
+ downloadAnchor.value.href = url
+ }
+ break;
+ case 'application/json':
+ {
+ const json = JSON.stringify(htmlData);
+ const blob = new Blob([json], { type: contentType });
+ downloadAnchor.value.href = URL.createObjectURL(blob);
+ }
+ break;
+ }
+
+ downloadAnchor.value.download = `bookmarks.${contentType.split('/')[1]}`
+ 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 class="relative w-fit">
+ <Menu>
+ <MenuButton :disabled="waiting" class="flex items-center gap-3 btn light">
+ <div class="hidden lg:inline">Download</div>
+ <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none">
+ <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V4M7 14H5a1 1 0 0 0-1 1v4c0 .6.4 1 1 1h14c.6 0 1-.4 1-1v-4c0-.6-.4-1-1-1h-2m-1-5-4 5-4-5m9 8h0"/>
+ </svg>
+ </MenuButton>
+ <transition
+ enter-active-class="transition duration-100 ease-out"
+ enter-from-class="transform scale-95 opacity-0"
+ enter-to-class="transform scale-100 opacity-100"
+ leave-active-class="transition duration-75 ease-out"
+ leave-from-class="transform scale-100 opacity-100"
+ leave-to-class="transform scale-95 opacity-0"
+ >
+ <MenuItems class="absolute z-10 bg-white divide-y divide-gray-100 rounded-b shadow right-2 lg:left-0 min-w-32 lg:end-0 dark:bg-gray-700">
+ <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+ <!-- Use the `active` state to conditionally style the active item. -->
+ <MenuItem as="template" v-slot="{ }">
+ <li>
+ <button @click="downloadBookmarks('text/html')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+ HTML
+ </button>
+ </li>
+ </MenuItem>
+ <MenuItem as="template" v-slot="{ }">
+ <li>
+ <button @click="downloadBookmarks('text/csv')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+ CSV
+ </button>
+ </li>
+ </MenuItem>
+ <MenuItem as="template" v-slot="{ }">
+ <li>
+ <button @click="downloadBookmarks('application/json')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+ JSON
+ </button>
+ </li>
+ </MenuItem>
+ </ul>
+ </MenuItems>
+ </transition>
+ </Menu>
</div>
- <a ref="downloadAnchor" :href="obj" download="bookmarks.html" class="hidden"></a>
+ <a ref="downloadAnchor" 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 2564cf6..dfa4cad 100644
--- a/front-end/src/components/Settings/PkiSettings.vue
+++ b/front-end/src/components/Settings/PkiSettings.vue
@@ -129,7 +129,7 @@ const onAddKey = async () => {
<h3 class="text-xl font-bold">Authentication Keys</h3>
<div class="">
- <button type="button" class="btn blue" @click.prevent="showAddKeyDialog">
+ <button type="button" class="btn blue me-2" @click.prevent="showAddKeyDialog">
<div class="flex flex-row items-center gap-1.5">
Add
</div>
diff --git a/front-end/src/components/Settings/TotpSettings.vue b/front-end/src/components/Settings/TotpSettings.vue
index 0019a9d..5793795 100644
--- a/front-end/src/components/Settings/TotpSettings.vue
+++ b/front-end/src/components/Settings/TotpSettings.vue
@@ -113,7 +113,7 @@ const onVerifyOtp = async (code: string) => {
>
</span>
</div>
- <div v-if="totpEnabled" class="flex">
+ <div v-if="totpEnabled" class="flex gap-2">
<button class="btn light" @click="addOrUpdate()">
Regenerate
</button>
diff --git a/front-end/src/store/bookmarks.ts b/front-end/src/store/bookmarks.ts
index b0595e9..76cc5b9 100644
--- a/front-end/src/store/bookmarks.ts
+++ b/front-end/src/store/bookmarks.ts
@@ -43,6 +43,8 @@ export interface BookmarkError{
}>
}
+export type DownloadContentType = 'application/json' | 'text/html' | 'text/csv' | 'text/plain'
+
export interface BookmarkApi{
list: (page: number, limit: number, search: BookmarkSearch) => Promise<Bookmark[]>
add: (bookmark: Bookmark) => Promise<void>
@@ -51,7 +53,7 @@ export interface BookmarkApi{
getTags: () => Promise<string[]>
delete: (bookmark: Bookmark | Bookmark[]) => Promise<void>
count: () => Promise<number>
- downloadAll: () => Promise<string>
+ downloadAll: (contentType: DownloadContentType) => Promise<string>
}
export interface BookmarkSearch{
@@ -141,10 +143,10 @@ const useBookmarkApi = (endpoint: MaybeRef<string>): BookmarkApi => {
return data.result;
}
- const downloadAll = async () => {
+ const downloadAll = async (contentType: DownloadContentType) => {
//download the bookmarks as a html file
const { data } = await axios.get<string>(`${get(endpoint)}?export=true`, {
- headers: { 'Content-Type': 'application/htlm' }
+ headers: { 'Accept': contentType }
})
return data;
}
diff --git a/front-end/src/store/index.ts b/front-end/src/store/index.ts
index c13edcb..bcd79ad 100644
--- a/front-end/src/store/index.ts
+++ b/front-end/src/store/index.ts
@@ -19,6 +19,8 @@ import { noop, toSafeInteger, toString, defaults } from "lodash-es";
import { defineStore } from "pinia";
import { computed, shallowRef, watch } from "vue";
+export type { DownloadContentType } from './bookmarks'
+
export const useQuery = (name: string) => {
const getQuery = () => {
generated by cgit (git 2.46.0) at 2024-10-01 19:21:05 +0000