diff options
author | vnugent <public@vaughnnugent.com> | 2024-02-25 01:11:06 -0500 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2024-02-25 01:11:06 -0500 |
commit | bd3a7a25792b837c5f28c7580adf132abc6f35e7 (patch) | |
tree | 2a3ec046f8f76f115e648f2bc6d1576cfa0a6c6f /front-end/src/components/Settings | |
parent | 52645b724834e669788a45edb9d135f243432540 (diff) |
Squashed commit of the following:
commit 069f81fc3c87c437eceff756ddca7a4c1b58044d
Author: vnugent <public@vaughnnugent.com>
Date: Sat Feb 24 22:33:34 2024 -0500
feat: #3 setup mode, admin signup, fixes, and contianerize!
commit 97ffede9eb312fca0257afa06969d47a12703f3b
Author: vnugent <public@vaughnnugent.com>
Date: Mon Feb 19 22:26:03 2024 -0500
feat: new account setup and invitation links
commit 1c8f59bc0a1b25ce5013b0f1fc7fa73c0de415d6
Author: vnugent <public@vaughnnugent.com>
Date: Thu Feb 15 16:49:59 2024 -0500
feat: update packages, drag/drop link, and fix some button padding
Diffstat (limited to 'front-end/src/components/Settings')
-rw-r--r-- | front-end/src/components/Settings/Bookmarks.vue | 119 | ||||
-rw-r--r-- | front-end/src/components/Settings/Registation.vue | 130 |
2 files changed, 205 insertions, 44 deletions
diff --git a/front-end/src/components/Settings/Bookmarks.vue b/front-end/src/components/Settings/Bookmarks.vue index 7f73921..a4ab55a 100644 --- a/front-end/src/components/Settings/Bookmarks.vue +++ b/front-end/src/components/Settings/Bookmarks.vue @@ -1,6 +1,6 @@ <script setup lang="ts"> import { apiCall, useWait } from '@vnuge/vnlib.browser'; -import { useStore, type DownloadContentType } from '../../store'; +import { useStore, type DownloadContentType, TabId } from '../../store'; import { ref } from 'vue'; import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue' @@ -36,52 +36,83 @@ const downloadBookmarks = (contentType: DownloadContentType) => { }); } +const bookmarkHref = ` +javascript: (function() { + const bookmarkUrl = window.location; + let applicationUrl = '${window.location.origin}'; + applicationUrl += '?tab=${TabId.Bookmarks}&url=' + encodeURIComponent(bookmarkUrl); + applicationUrl += '&title='+document.title; + window.open(applicationUrl); +})();` + </script> <template> - <div class="relative w-fit"> + <div class="flex flex-col gap-4"> + <div class="flex-row hidden gap-2 sm:flex"> + <div class=""> + <a :href="bookmarkHref" @click.prevent="" class="text-sm cursor-move btn light"> + <span class="whitespace-nowrap"> + Add Bookmark 📎 + </span> + </a> + </div> + <p class="p-0.5 my-auto text-sm flex flex-row"> + <span class=""> + <svg class="w-6 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> + <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4"/> + </svg> + </span> + <span> + Drag this button to your bookmarks bar to quickly add a new bookmark + </span> + </p> + </div> + <div class="relative ml-auto sm:ml-0 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> + <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> </div> + <a ref="downloadAnchor" class="hidden"></a> </template>
\ No newline at end of file diff --git a/front-end/src/components/Settings/Registation.vue b/front-end/src/components/Settings/Registation.vue new file mode 100644 index 0000000..a0f208e --- /dev/null +++ b/front-end/src/components/Settings/Registation.vue @@ -0,0 +1,130 @@ +<script setup lang="ts"> +import { computed, defineAsyncComponent, ref, shallowReactive, shallowRef } from 'vue'; +import { useStore } from '../../store'; +import { get, set, useClipboard, useTimeAgo, useToggle } from '@vueuse/core'; +import { apiCall, useVuelidateWrapper } from '@vnuge/vnlib.browser'; +import { defaultTo } from 'lodash-es'; +import { useVuelidate } from '@vuelidate/core' +import { required, maxLength, minLength, helpers, email } from '@vuelidate/validators' +const Dialog = defineAsyncComponent(() => import('../global/Dialog.vue')); + +const store = useStore(); +const { copy, copied } = useClipboard() + +const [isOpen, toggleOpen] = useToggle(false) +const vState = shallowReactive({ email: '' }) + +const canInvite = ref<boolean>(false) +const inviteLink = shallowRef<string | undefined>() + +const expirationDate = computed(() => Date.now() + (1000 * defaultTo(store.registation.status?.link_expiration, 0))) +const fromNowTime = useTimeAgo(expirationDate) + +const rules = computed(() => { + return { + email: { + required: helpers.withMessage('Email is required', required), + maxLength: helpers.withMessage('Email must be less than 255 characters', maxLength(255)), + minLength: helpers.withMessage('Email must be at least 3 characters', minLength(3)), + email: helpers.withMessage('Email must be a valid email', email) + }, + } +}) + +const v$ = useVuelidate(rules, vState) +const { validate } = useVuelidateWrapper(v$ as any) + +const onSubmit = async () => { + if (!await validate()) return + + apiCall(async () => { + //Rest password and pass totp code + const { link } = await store.registation.api.createSignupLink(vState.email, get(canInvite)) + set(inviteLink, link) + }) +} + +const onCancel = () => { + vState.email = '' + v$.value.$reset() + set(canInvite, false) + set(inviteLink, undefined) + toggleOpen(false) +} + +</script> + +<template> + <div class=""> + + <div class="flex flex-row justify-between w-full"> + <h3 class="text-xl font-bold">Registation</h3> + + <div class="flex flex-row justify-end"> + <button class="btn blue" @click="toggleOpen(true)">Invite User</button> + </div> + </div> + <p class="mt-2 text-sm text-gray-500 dark:text-gray-400"> + Create a one-time invite link you can send to add a new user to your server. + </p> + <p class="text-sm text-gray-500 dark:text-gray-400"> + Links expire <span class="text-blue-500">{{ fromNowTime }}</span> + </p> + <Dialog :open="isOpen" title="Invite User" @cancel="onCancel"> + <template #body> + <div class="p-4"> + + <div v-if="inviteLink" class=""> + <p class="my-2 text-lg font-medium text-center text-gray-900 dark:text-white"> + Link expires {{ fromNowTime }} + </p> + + <label for="invite-link" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"> + Invite link + </label> + <input + :value="inviteLink" + type="url" + id="invite-link" + class="input" + readonly + > + + <div class="mt-4 ml-auto w-fit"> + <button @click="copy(inviteLink)" type="submit" :disabled="copied" class="btn blue"> + {{ copied ? 'Copied!' : 'Copy' }} + </button> + </div> + + </div> + + <form v-else @submit.prevent="onSubmit"> + + <fieldset class="mb-4"> + <label for="user-email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email address</label> + <input v-model="v$.email.$model" type="email" id="user-email" class="input" + :class="{ 'error': v$.email.$error, 'dirty': v$.email.$dirty }" + placeholder="user@simplebookmark.com" + required + > + </fieldset> + + <fieldset class="px-2"> + <h4 class="font-bold text-gray-700 dark:text-white">Permissions</h4> + <div class="flex items-center mt-2 mb-4"> + <input id="can-invite-input" type="checkbox" v-model="canInvite" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> + <label for="can-invite-input" class="text-sm font-medium text-gray-900 ms-2 dark:text-gray-300">Can invite users</label> + </div> + </fieldset> + + <div class="ml-auto w-fit"> + <button type="submit" class="btn blue"> + Create Link + </button> + </div> + </form> + </div> + </template> + </Dialog> + </div> +</template>
\ No newline at end of file |