diff options
Diffstat (limited to 'front-end/src')
-rw-r--r-- | front-end/src/buttons.scss | 2 | ||||
-rw-r--r-- | front-end/src/components/Settings/Bookmarks.vue | 86 | ||||
-rw-r--r-- | front-end/src/components/Settings/PkiSettings.vue | 2 | ||||
-rw-r--r-- | front-end/src/components/Settings/TotpSettings.vue | 2 | ||||
-rw-r--r-- | front-end/src/store/bookmarks.ts | 8 | ||||
-rw-r--r-- | front-end/src/store/index.ts | 2 |
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 = () => { |