diff options
Diffstat (limited to 'front-end/src')
-rw-r--r-- | front-end/src/App.vue | 26 | ||||
-rw-r--r-- | front-end/src/components/Bookmarks.vue | 77 | ||||
-rw-r--r-- | front-end/src/components/Login.vue | 21 | ||||
-rw-r--r-- | front-end/src/components/Login/AdminReg.vue | 84 | ||||
-rw-r--r-- | front-end/src/components/Login/UserPass.vue | 2 | ||||
-rw-r--r-- | front-end/src/components/Registation.vue | 137 | ||||
-rw-r--r-- | front-end/src/components/Settings.vue | 10 | ||||
-rw-r--r-- | front-end/src/components/Settings/Bookmarks.vue | 119 | ||||
-rw-r--r-- | front-end/src/components/Settings/Registation.vue | 130 | ||||
-rw-r--r-- | front-end/src/components/global/ConfirmPrompt.vue | 2 | ||||
-rw-r--r-- | front-end/src/components/global/Dialog.vue | 4 | ||||
-rw-r--r-- | front-end/src/components/global/PasswordPrompt.vue | 2 | ||||
-rw-r--r-- | front-end/src/main.ts | 2 | ||||
-rw-r--r-- | front-end/src/store/bookmarks.ts | 1 | ||||
-rw-r--r-- | front-end/src/store/index.ts | 13 | ||||
-rw-r--r-- | front-end/src/store/registation.ts | 110 |
16 files changed, 652 insertions, 88 deletions
diff --git a/front-end/src/App.vue b/front-end/src/App.vue index 01e91e7..4bd94c8 100644 --- a/front-end/src/App.vue +++ b/front-end/src/App.vue @@ -1,8 +1,7 @@ <script setup lang="ts"> import { storeToRefs } from 'pinia'; import { useStore, TabId } from './store'; -import { defineAsyncComponent } from 'vue'; -import { apiCall } from '@vnuge/vnlib.browser'; +import { computed, defineAsyncComponent } from 'vue'; import { isEqual } from 'lodash-es'; import { useDark } from '@vueuse/core'; import SideMenuItem from './components/SideMenuItem.vue'; @@ -12,6 +11,7 @@ const Settings = defineAsyncComponent(() => import('./components/Settings.vue')) const Confirm = defineAsyncComponent(() => import('./components/global/ConfirmPrompt.vue')); const Alerts = defineAsyncComponent(() => import('./components/Alerts.vue')); const Login = defineAsyncComponent(() => import('./components/Login.vue')); +const Registation = defineAsyncComponent(() => import('./components/Registation.vue')); const PasswordPrompt = defineAsyncComponent(() => import('./components/global/PasswordPrompt.vue')); const store = useStore(); @@ -20,12 +20,7 @@ const darkMode = useDark() store.setSiteTitle('Simple Bookmark') -const logout = () => { - apiCall(async () => { - const { logout } = await store.socialOauth() - await logout() - }) -} +const isSetupMode = computed(() => store.registation.status?.setup_mode === true) const showIf = (tabId: TabId, active: TabId) => isEqual(tabId, active) @@ -39,7 +34,7 @@ const showIf = (tabId: TabId, active: TabId) => isEqual(tabId, active) <div id="app" class="min-h-screen pb-16 text-gray-700 bg-gray-50 dark:bg-gray-900 dark:text-white sm:pb-0"> <div class="relative"> - <div class="absolute z-50 right-10 top-10"> + <div class="fixed z-50 right-10 top-10"> <Alerts /> </div> </div> @@ -47,7 +42,7 @@ const showIf = (tabId: TabId, active: TabId) => isEqual(tabId, active) <Confirm /> <PasswordPrompt /> - <aside id="logo-sidebar" class="fixed top-0 left-0 z-10 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar"> + <aside id="logo-sidebar" class="fixed top-0 left-0 z-20 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar"> <div class="flex flex-col h-full px-3 py-4 overflow-y-auto bg-white dark:bg-gray-800"> <div class="flex-auto"> <a href="/" class="flex items-center ps-2.5 mb-5"> @@ -106,7 +101,14 @@ const showIf = (tabId: TabId, active: TabId) => isEqual(tabId, active) </div> </aside> + <div v-if="isSetupMode" class="relative mb-16 sm:mb-10"> + <div class="fixed top-0 z-10 w-full p-2 text-center text-white bg-amber-600"> + Setup mode is enabled. Restart the server without --setup flag to disable this warning + </div> + </div> + <div class="h-full py-6 md:p-6 sm:ml-64"> + <div v-if="showIf(TabId.Bookmarks, activeTab)" class="flex flex-col w-full h-full"> <Bookmarks /> </div> @@ -118,6 +120,10 @@ const showIf = (tabId: TabId, active: TabId) => isEqual(tabId, active) <div v-if="showIf(TabId.Settings, activeTab)" class="flex w-full h-full"> <Settings /> </div> + + <div v-if="showIf(TabId.Register, activeTab)" class="flex w-full h-full"> + <Registation/> + </div> </div> <div class="fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-200 sm:hidden dark:bg-gray-700 dark:border-gray-600"> diff --git a/front-end/src/components/Bookmarks.vue b/front-end/src/components/Bookmarks.vue index 93ddd73..cc3cd6a 100644 --- a/front-end/src/components/Bookmarks.vue +++ b/front-end/src/components/Bookmarks.vue @@ -5,10 +5,10 @@ import { get, set, formatTimeAgo, useToggle, useTimestamp, useFileDialog, asyncC import { useVuelidate } from '@vuelidate/core'; import { required, maxLength, minLength, helpers } from '@vuelidate/validators'; import { apiCall, useConfirm, useGeneralToaster, useVuelidateWrapper, useWait } from '@vnuge/vnlib.browser'; -import { clone, cloneDeep, join, defaultTo, every, filter, includes, isEmpty, isEqual, first, isString, chunk, map, forEach } from 'lodash-es'; +import { clone, cloneDeep, join, defaultTo, every, filter, includes, isEmpty, isEqual, first, isString, chunk, map, forEach, isNil } from 'lodash-es'; import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue' import { parseNetscapeBookmarkString } from './Boomarks/util.ts'; -import type { Bookmark, BookmarkError } from '../store/bookmarks'; +import type { BatchUploadResult, Bookmark, BookmarkError } from '../store/bookmarks'; import AddOrUpdateForm from './Boomarks/AddOrUpdateForm.vue'; const Dialog = defineAsyncComponent(() => import('./global/Dialog.vue')); @@ -27,7 +27,7 @@ const { copy } = useClipboard() //Refresh on page load store.bookmarks.refresh(); -const safeNameRegex = /^[a-zA-Z0-9_\-\|\. ]*$/; +const safeNameRegex = /^[a-zA-Z0-9_\-\|\., ]*$/; const safeUrlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/; const safeTagRegex = /^[a-zA-Z0-9-_]*$/; @@ -38,19 +38,19 @@ const addOrEditValidator = (buffer: Ref<Partial<Bookmark>>) => { required: helpers.withMessage('Name cannot be empty', required), safeName: helpers.withMessage('Bookmark name contains illegal characters', (value: string) => safeNameRegex.test(value)), minLength: helpers.withMessage('Name must be at least 1 characters', minLength(1)), - maxLength: helpers.withMessage('Name must have less than 100 characters', maxLength(100)) + maxLength: helpers.withMessage('Name must have less than 200 characters', maxLength(200)) }, Url: { required: helpers.withMessage('Url cannot be empty', required), safeUrl: helpers.withMessage('Url contains illegal characters or is not a valid URL', (value: string) => safeUrlRegex.test(value)), minLength: helpers.withMessage('Url must be at least 1 characters', minLength(1)), - maxLength: helpers.withMessage('Url must have less than 200 characters', maxLength(200)) + maxLength: helpers.withMessage('Url must have less than 300 characters', maxLength(300)) }, Description: { - maxLength: helpers.withMessage('Description must have less than 512 characters', maxLength(512)) + maxLength: helpers.withMessage('Description must have less than 500 characters', maxLength(500)) }, Tags: { - maxLength: helpers.withMessage('Tags must have less than 32 characters', (tags: string[]) => every(tags, tag => tag.length < 32)), + maxLength: helpers.withMessage('Tags must have less than 64 characters', (tags: string[]) => every(tags, tag => tag.length < 64)), safeTag: helpers.withMessage('Tags contains illegal characters', (tags: string[]) => every(tags, tag => safeTagRegex.test(tag))) } })); @@ -99,6 +99,7 @@ const bmDelete = async (bookmark: Bookmark) => { const isTagSelected = (tag: string, currentTags: MaybeRef<string[]>) => includes(get(currentTags), tag); const execSearch = () => store.bookmarks.query = get(localSearch); +const clearTags = () => store.bookmarks.tags = []; const percentToWith = (percent: number) => ({ width: `${percent}%` }); const printErroMessage = (error: BookmarkError) => { const errorMessages = map(error.errors, e=> e.message); @@ -262,22 +263,39 @@ const upload = (() => { const bms = get(foundBookmarks); if(get(fixErrors)){ - //try to fix names - forEach(bms, bm => { - //If the name is not safe, replace all illegal characters - if(!safeNameRegex.test(bm.Name)){ - bm.Name = bm.Name.replace(/[^a-zA-Z0-9_\-\|\. ]/g, ' '); - } - }) //truncate name length forEach(bms, bm => { if(bm.Name.length > 100){ - bm.Name = bm.Name.substring(0, 100); + bm.Name = bm.Name.substring(0, 199); + } + + //Replace illegal characters from name strings + bm.Name = bm.Name.replace(/[^a-zA-Z0-9_\-\|\., ]/g, ' '); + + if(!isNil(bm.Description)){ + //truncate description + if (bm.Description.length > 500) { + bm.Description = bm.Description.substring(0, 499); + } + + bm.Description = bm.Description.replace(/[^\x00-\x7F]/g, ''); //only allow utf-8 characters } + + //Try to remove illegal chars from tags + bm.Tags = map(bm.Tags, tag => tag.replace(/[^a-zA-Z0-9\-]/g, '')); }) } + forEach(bms, bm => { + //Remove any empty tags + bm.Tags = filter(bm.Tags, tag => tag?.length > 0); + + if(isEmpty(bm.Tags)){ + (bm.Tags as any) = null; + } + }) + const chunks = chunk(bms, 20); for(let i = 0; i < chunks.length; i++){ @@ -290,9 +308,18 @@ const upload = (() => { //See if an error occured if(!isString(result) && 'invalid' in result){ + const { message, invalid } = result as BatchUploadResult; + //add errors to the error list - errors.value.push(...result.invalid); + errors.value.push(...invalid); isError = true; + + if(message){ + toaster.error({ + title: `Batch ${i} upload failed due to an error`, + text: message + }) + } } if(isError){ @@ -382,14 +409,14 @@ const upload = (() => { <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="{ active }"> + <MenuItem as="template" v-slot="{ }"> <li> <button @click="add.open()" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> Manual </button> </li> </MenuItem> - <MenuItem as="template" v-slot="{ active }"> + <MenuItem as="template" v-slot="{ }"> <li> <button @click="upload.open()" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> Upload html @@ -402,7 +429,7 @@ const upload = (() => { </Menu> </div> </div> - <div class="grid flex-auto grid-cols-4 gap-8 mt-4 max-w-[60rem] mx-auto w-full"> + <div class="grid flex-auto grid-cols-4 gap-8 sm:mt-4 max-w-[60rem] mx-auto w-full"> <div class="col-span-4 lg:col-span-3"> @@ -414,7 +441,7 @@ const upload = (() => { <span class="sr-only">Loading...</span> </div> - <div class="mx-auto mt-2"> + <div class="mx-auto sm:mt-2"> <div class="grid h-full grid-cols-1 gap-1 leading-tight md:leading-normal"> <div v-for="bm in bookmarks" :key="bm.Id" :id="join(['bm', bm.Id], '-')" class="w-full p-1"> @@ -476,7 +503,15 @@ const upload = (() => { </div> </div> <div class="hidden lg:block"> - <div class="mt-10"> + <div class="h-10"> + <div class="ml-12"> + <button :disabled="isEmpty(selectedTags)" @click="clearTags()" + class="text-sm font-bold text-gray-600 duration-75 ease-linear disabled:opacity-0 hover:underline"> + Clear Tags + </button> + </div> + </div> + <div class="mt-1"> <ul class="grid grid-cols-2"> <li v-for="tag in tags" :key="tag" class="text-sm"> <span diff --git a/front-end/src/components/Login.vue b/front-end/src/components/Login.vue index eeda1ba..3022940 100644 --- a/front-end/src/components/Login.vue +++ b/front-end/src/components/Login.vue @@ -1,15 +1,19 @@ <script setup lang="ts"> +import { computed, defineAsyncComponent } from 'vue' import { apiCall, useWait } from '@vnuge/vnlib.browser' import { storeToRefs } from 'pinia' import { useStore } from '../store' import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue' import UserPass from './Login/UserPass.vue' import PkiLogin from './Login/PkiLogin.vue' +const AdminReg = defineAsyncComponent(() => import('./Login/AdminReg.vue')) const { waiting } = useWait(); const store = useStore(); const { loggedIn, siteTitle } = storeToRefs(store); +const adminRegEnabled = computed(() => store.registation.status?.enabled && store.registation.status?.setup_mode); + const logout = () => { apiCall(async () => { const { logout } = await store.socialOauth() @@ -20,7 +24,7 @@ const logout = () => { </script> <template> <section id="login-page" class="flex-auto"> - <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-24"> + <div class="flex flex-col items-center justify-center px-2 py-8 mx-auto sm:px-6 lg:py-24"> <div class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"> <span class="p-2 mr-2 bg-blue-500 rounded-full"> <svg class="w-5 h-5 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 20"> @@ -35,11 +39,19 @@ const logout = () => { <div v-if="!loggedIn"> <!-- password/username login --> <h1 class="text-xl font-bold leading-tight tracking-tight text-center text-gray-900 md:text-2xl dark:text-white"> - Sign in to your account + {{ adminRegEnabled ? "Create admin account" : "Sign in to your account" }} </h1> - <TabGroup class="w-full" as="div"> + <TabGroup class="w-full" as="div"> <TabList as="ul" class="flex flex-wrap justify-center -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400"> + <Tab v-if="adminRegEnabled" as="template" v-slot="{ selected }" class="cursor-pointer me-2"> + <div class="tab group" :class="{ selected }"> + <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> + <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/> + </svg> + Create + </div> + </Tab> <Tab as="template" v-slot="{ selected }" class="cursor-pointer me-2"> <div class="tab group" :class="{ selected }"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> @@ -58,6 +70,9 @@ const logout = () => { </Tab> </TabList> <TabPanels class="mt-4" as="div"> + <TabPanel v-if="adminRegEnabled" :unmount="false"> + <AdminReg /> + </TabPanel> <TabPanel :unmount="false"> <UserPass /> </TabPanel> diff --git a/front-end/src/components/Login/AdminReg.vue b/front-end/src/components/Login/AdminReg.vue new file mode 100644 index 0000000..8546512 --- /dev/null +++ b/front-end/src/components/Login/AdminReg.vue @@ -0,0 +1,84 @@ +<script setup lang="ts"> +import { reactive, computed } from 'vue' +import { useVuelidate } from '@vuelidate/core' +import { required, maxLength, minLength, email, helpers } from '@vuelidate/validators' +import { useVuelidateWrapper, apiCall, useWait } from '@vnuge/vnlib.browser' +import { useStore } from '../../store' + +const { waiting } = useWait(); +const store = useStore(); + +const vState = reactive({ username: '', password: '', repeat: ''}) + +const rules = computed(() =>({ + username: { + required: helpers.withMessage('Email cannot be empty', required), + email: helpers.withMessage('Your email address is not valid', email), + maxLength: helpers.withMessage('Email address must be less than 50 characters', maxLength(50)) + }, + password: { + required: helpers.withMessage('Password cannot be empty', required), + minLength: helpers.withMessage('Password must be at least 8 characters', minLength(8)), + maxLength: helpers.withMessage('Password must have less than 128 characters', maxLength(128)) + }, + repeat:{ + required: helpers.withMessage('Password cannot be empty', required), + minLength: helpers.withMessage('Password must be at least 8 characters', minLength(8)), + maxLength: helpers.withMessage('Password must have less than 128 characters', maxLength(128)), + match: helpers.withMessage('Passwords must match', (value: string) => value === vState.password) + } +})); + +const v$ = useVuelidate(rules, vState) +const { validate } = useVuelidateWrapper(v$ as any); + +const onSubmit = async () => { + + // If the form is not valid set the error message + if (!await validate()) { + return + } + + // Run login in an apicall wrapper + await apiCall(async ({ toaster }) => { + + const res = await store.registation.api.registerAdmin( + v$.value.username.$model, + v$.value.password.$model + ); + + const message = res.getResultOrThrow(); + + toaster.general.success({ + title: 'Success!', + text: message + }) + }) +} +</script> + +<template> + <form class="space-y-4 md:space-y-6" id="admin-registation" action="#" @submit.prevent="onSubmit" :disabled="waiting"> + <fieldset> + <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label> + <input type="email" name="email" id="email" class="input" placeholder="name@company.com" required + v-model="v$.username.$model"> + </fieldset> + <fieldset> + <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label> + <input type="password" name="password" id="password" class="input" placeholder="••••••••" required + v-model="v$.password.$model"> + </fieldset> + <fieldset> + <label for="repeat-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Repeat Password</label> + <input type="password" name="repeat-password" id="repeat-password" class="input" placeholder="••••••••" required + v-model="v$.repeat.$model"> + </fieldset> + <button form="admin-registation" type="submit" class="btn">Register</button> + </form> + <p class="py-4 text-sm text-red-500"> + This tab is only visible when the server is in setup mode. You can create as many admin accounts as you like now. + </p> +</template> + +<style scoped lang="scss"></style>
\ No newline at end of file diff --git a/front-end/src/components/Login/UserPass.vue b/front-end/src/components/Login/UserPass.vue index 9d72d08..c47e594 100644 --- a/front-end/src/components/Login/UserPass.vue +++ b/front-end/src/components/Login/UserPass.vue @@ -99,7 +99,7 @@ const onSubmit = async () => { </form> <form v-else class="space-y-4 md:space-y-6" action="#" @submit.prevent="onSubmit" :disabled="waiting"> <fieldset> - <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label> + <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label> <input type="email" name="email" id="email" class="input" placeholder="name@company.com" required v-model="v$.username.$model" > diff --git a/front-end/src/components/Registation.vue b/front-end/src/components/Registation.vue new file mode 100644 index 0000000..56508e8 --- /dev/null +++ b/front-end/src/components/Registation.vue @@ -0,0 +1,137 @@ +<script setup lang="ts"> +import { apiCall, useWait } from '@vnuge/vnlib.browser' +import { storeToRefs } from 'pinia' +import { useQuery, useStore } from '../store' +import { computed, ref, watch } from 'vue'; +import { get } from '@vueuse/core'; +import { delay, isEmpty, noop } from 'lodash-es'; +import { decodeJwt } from 'jose'; + +const { waiting } = useWait(); +const store = useStore(); +const { siteTitle } = storeToRefs(store) + +const enabled = computed(() => store.registation.status?.enabled === true); + +const password = ref(); +const repeatPassword = ref(); +const token = useQuery("token") + +const tVals = computed(() => { + try{ + const { sub, level, exp } = decodeJwt<{level:number, sub:string, exp:number}>(get(token)!) + const isPrilageed = (level & ( 1 << 0x08)) !== 0; + const isExpired = exp < Date.now() / 1000; + return { email: sub, isPrilageed , isExpired } + } + catch{ + return { email: '', isPrilageed: false, isExpired: true } + } +}) + +const onSubmit = () =>{ + + const passwrd = get(password); + if(isEmpty(passwrd)){ + return; + } + + apiCall(async ({ toaster }) => { + const result = await store.registation.api.completeRegistation(get(token)!, passwrd) + const message = result.getResultOrThrow(); + + toaster.general.success({ + title:'Completed!', + text: message + }) + + //redirect to login page on success + delay(() => { + //Clear token value + window.location.assign('/') + } , 1000) + }); +} + +//If token or enabled changes and both are true, reload and clear all arguments +watch([enabled, token], ([en, t]) => (en && t) ? noop() : window.location.assign('/')) + +</script> +<template> + <section id="reg-page" class="flex-auto"> + <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-24"> + <div class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"> + <span class="p-2 mr-2 bg-blue-500 rounded-full"> + <svg class="w-5 h-5 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" + fill="currentColor" viewBox="0 0 14 20"> + <path + d="M13 20a1 1 0 0 1-.64-.231L7 15.3l-5.36 4.469A1 1 0 0 1 0 19V2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v17a1 1 0 0 1-1 1Z" /> + </svg> + </span> + <span class="self-center font-semibold whitespace-nowrap">{{ siteTitle }}</span> + </div> + <div + class="w-full bg-white rounded shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700"> + <div class="p-6 space-y-4 md:space-y-6 sm:p-8"> + + <!-- password/username login --> + <h1 + class="text-xl font-bold leading-tight tracking-tight text-center text-gray-900 md:text-2xl dark:text-white"> + Sign up + </h1> + + <div class="" v-if="tVals.isExpired"> + <p class="py-4 text-lg text-center text-red-500 dark:text-red-400"> + Your sign up link has expired + </p> + <div class="mt-4"> + <a href="/"> + <button class="w-full btn blue">Go back</button> + </a> + </div> + </div> + + <form v-else class="space-y-4 md:space-y-6" action="#" @submit.prevent="onSubmit" :disabled="waiting"> + <fieldset> + <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label> + <input type="email" name="email" id="email" class="input" placeholder="" disabled + :value="tVals.email" + > + </fieldset> + <fieldset> + <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label> + <input type="password" name="password" id="password" class="input" placeholder="••••••••" required + v-model="password" + > + </fieldset> + <fieldset> + <label for="repeat-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Repeat Password</label> + <input type="password" name="repeat-password" id="repeat-password" class="input" placeholder="••••••••" required + v-model="repeatPassword" + > + </fieldset> + <fieldset> + <div class="flex items-center"> + <input disabled id="disabled-checked-checkbox" type="checkbox" :value="tVals.isPrilageed" + 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="disabled-checked-checkbox" class="text-sm font-medium text-gray-400 ms-2 dark:text-gray-500"> + Can add users + </label> + </div> + </fieldset> + <button type="submit" class="btn">Submit</button> + </form> + </div> + </div> + </div> + </section> +</template> + +<style lang="scss"> +#reg-page { + + button[type="submit"] { + @apply w-full focus:ring-4 focus:outline-none font-medium rounded text-sm px-5 py-2.5 text-center; + @apply text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800; + } +}</style>
\ No newline at end of file diff --git a/front-end/src/components/Settings.vue b/front-end/src/components/Settings.vue index 720c556..83d3f79 100644 --- a/front-end/src/components/Settings.vue +++ b/front-end/src/components/Settings.vue @@ -1,11 +1,13 @@ <script setup lang="ts"> import { useDark } from '@vueuse/core'; import { useStore } from '../store'; +import { defineAsyncComponent } from 'vue'; import Oauth2Apps from './Settings/Oauth2Apps.vue'; import PasswordReset from './Settings/PasswordReset.vue'; import PkiSettings from './Settings/PkiSettings.vue'; import TotpSettings from './Settings/TotpSettings.vue'; import Bookmarks from './Settings/Bookmarks.vue'; +const Registation = defineAsyncComponent(() => import('./Settings/Registation.vue')); const store = useStore(); const darkMode = useDark(); @@ -39,7 +41,7 @@ const darkMode = useDark(); </div> </div> - <div class=""> + <div class=""> <h3 class="text-xl font-bold">Boomarks</h3> <div class="relative mt-4"> @@ -61,7 +63,11 @@ const darkMode = useDark(); <!-- Only load component if oauth2 plugin is enabled --> <div v-if="store.oauth2" class=""> - <Oauth2Apps /> + <Oauth2Apps /> + </div> + + <div v-if="store.registation.status?.can_invite" class="mb-10"> + <Registation /> </div> </div> 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 diff --git a/front-end/src/components/global/ConfirmPrompt.vue b/front-end/src/components/global/ConfirmPrompt.vue index 24d3b9c..8cc9920 100644 --- a/front-end/src/components/global/ConfirmPrompt.vue +++ b/front-end/src/components/global/ConfirmPrompt.vue @@ -33,7 +33,7 @@ onReveal(m => message.value = defaultTo(m, {})); </p> </div> <!-- Modal footer --> - <div class="flex items-center justify-end p-4 border-t border-gray-200 rounded-b md:p-5 dark:border-gray-600"> + <div class="flex items-center justify-end gap-2 p-4 border-t border-gray-200 rounded-b md:p-5 dark:border-gray-600"> <button @click="confirm()" type="button" diff --git a/front-end/src/components/global/Dialog.vue b/front-end/src/components/global/Dialog.vue index a27d5ee..65d9165 100644 --- a/front-end/src/components/global/Dialog.vue +++ b/front-end/src/components/global/Dialog.vue @@ -19,10 +19,10 @@ onClickOutside(dialog, () => get(open) ? cancel() : noop()) <template> <!-- Main modal --> <Dialog :open="open" id="static-modal" data-modal-backdrop="static" tabindex="-1" - class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-10 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"> + class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-20 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"> <div class="fixed inset-0 bg-black/30" aria-hidden="true" /> - <div class="relative w-full max-w-xl max-h-full p-4 mx-auto mt-2 md:mt-32"> + <div class="relative w-full max-w-xl max-h-full p-4 mx-auto mt-[8rem] md:mt-32"> <!-- Modal content --> <div class="relative bg-white rounded shadow dark:bg-gray-700" ref="dialog"> <!-- Modal header --> diff --git a/front-end/src/components/global/PasswordPrompt.vue b/front-end/src/components/global/PasswordPrompt.vue index 50024fb..e0dc349 100644 --- a/front-end/src/components/global/PasswordPrompt.vue +++ b/front-end/src/components/global/PasswordPrompt.vue @@ -86,7 +86,7 @@ onReveal(m => message.value = defaultTo(m, {})); </form> </div> <!-- Modal footer --> - <div class="flex items-center justify-end p-4 border-t border-gray-200 rounded-b md:p-5 dark:border-gray-600"> + <div class="flex items-center justify-end gap-2 p-4 border-t border-gray-200 rounded-b md:p-5 dark:border-gray-600"> <button @click="formSubmitted" type="button" diff --git a/front-end/src/main.ts b/front-end/src/main.ts index 30c3f10..c5be406 100644 --- a/front-end/src/main.ts +++ b/front-end/src/main.ts @@ -29,6 +29,7 @@ import { profilePlugin } from './store/userProfile' import { mfaSettingsPlugin } from './store/mfaSettingsPlugin' import { socialMfaPlugin } from './store/socialMfaPlugin' import { bookmarkPlugin } from './store/bookmarks' +import { registationPlugin } from './store/registation'; //Setup the vnlib api configureApi({ @@ -69,6 +70,7 @@ store.use(profilePlugin('/account/profile')) .use(socialMfaPlugin()) //Add the oauth2 apps plugin .use(bookmarkPlugin('/bookmarks')) + .use(registationPlugin('/register')) //Setup oauth apps plugin (disabled for now) //.use(oauth2AppsPlugin('/oauth/apps', '/oauth/scopes')) diff --git a/front-end/src/store/bookmarks.ts b/front-end/src/store/bookmarks.ts index 76cc5b9..2af8344 100644 --- a/front-end/src/store/bookmarks.ts +++ b/front-end/src/store/bookmarks.ts @@ -33,6 +33,7 @@ export interface Bookmark{ export interface BatchUploadResult{ readonly invalid: BookmarkError[] + readonly message?: string } export interface BookmarkError{ diff --git a/front-end/src/store/index.ts b/front-end/src/store/index.ts index bcd79ad..09c5a2d 100644 --- a/front-end/src/store/index.ts +++ b/front-end/src/store/index.ts @@ -15,7 +15,7 @@ import { useSession, useAutoHeartbeat } from "@vnuge/vnlib.browser"; import { toRefs, set, watchDebounced, useLocalStorage } from "@vueuse/core"; -import { noop, toSafeInteger, toString, defaults } from "lodash-es"; +import { toSafeInteger, toString, defaults } from "lodash-es"; import { defineStore } from "pinia"; import { computed, shallowRef, watch } from "vue"; @@ -53,7 +53,8 @@ export enum TabId{ Bookmarks, Profile, Settings, - Login + Login, + Register } /** @@ -80,7 +81,13 @@ export const useStore = defineStore('main', () => { }) //If not logged in, redirect to login tab - watch(loggedIn, (loggedIn) => loggedIn ? noop() : set(activeTab, TabId.Login), { immediate: true }) + watch(loggedIn, (li) =>{ + if (li || activeTab.value == TabId.Register){ + return; + } + + set(activeTab, TabId.Login); + }, { immediate: true }) //Setup heartbeat for 5 minutes useAutoHeartbeat(shallowRef(5 * 60 * 1000), autoHeartbeat) diff --git a/front-end/src/store/registation.ts b/front-end/src/store/registation.ts new file mode 100644 index 0000000..b07e3e2 --- /dev/null +++ b/front-end/src/store/registation.ts @@ -0,0 +1,110 @@ +// Copyright (C) 2024 Vaughn Nugent +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as +// published by the Free Software Foundation, either version 3 of the +// License, or (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see <https://www.gnu.org/licenses/>. + +import 'pinia' +import { MaybeRef, shallowRef, watch } from 'vue'; +import { WebMessage, useAxios } from '@vnuge/vnlib.browser'; +import { get } from '@vueuse/core'; +import { PiniaPluginContext, PiniaPlugin, storeToRefs } from 'pinia' +import { defer } from 'lodash-es'; +import { TabId } from '.'; + +export interface SignupToken { + readonly link: string +} + +export interface RegistationStatus{ + readonly setup_mode: boolean + readonly enabled: boolean + readonly can_invite: boolean + readonly link_expiration: number +} + +export interface UserRegistationApi { + createSignupLink(username: string, canAddUsers: boolean): Promise<SignupToken> + getStatus(): Promise<RegistationStatus> + registerAdmin(username: string, password: string): Promise<WebMessage<string>> + completeRegistation(token: string, password: string): Promise<WebMessage<string>> +} + +declare module 'pinia' { + export interface PiniaCustomProperties { + registation:{ + api: UserRegistationApi + status: RegistationStatus | undefined + } + } +} + + +const useRegApi = (endpoint: MaybeRef<string>): UserRegistationApi => { + + const axios = useAxios(null); + + const createSignupLink = async (username: string, hasAddPerms: boolean): Promise<SignupToken> => { + const { data } = await axios.put<WebMessage<string>>(get(endpoint), { + username, + can_add_users:hasAddPerms + }) + + const token = data.getResultOrThrow(); + + return { link: `${window.location.origin}?tab=${TabId.Register}&token=${token}` } + } + + const getStatus = async (): Promise<RegistationStatus> => { + const { data } = await axios.get<WebMessage<RegistationStatus>>(get(endpoint)) + return data.getResultOrThrow(); + } + + const completeRegistation = async (token: string, password: string): Promise<WebMessage<string>> => { + const { data } = await axios.post<WebMessage<string>>(get(endpoint), { token, password }) + return data; + } + + const registerAdmin = async (username: string, password: string): Promise<WebMessage<string>> => { + const { data } = await axios.post<WebMessage<string>>(get(endpoint), { admin_username:username, password }) + return data; + } + + return { + createSignupLink, + getStatus, + completeRegistation, + registerAdmin + } +} + +export const registationPlugin = (regEndpoint: MaybeRef<string>): PiniaPlugin => { + + return ({ store }: PiniaPluginContext): any => { + + const { loggedIn } = storeToRefs(store) + + const regApi = useRegApi(regEndpoint) + const status = shallowRef<RegistationStatus | undefined>() + + const getStatus = async () => status.value = await regApi.getStatus() + + watch(loggedIn, () => defer(getStatus), { immediate: true }) + + return{ + registation: { + api: regApi, + status, + } + } + } +}
\ No newline at end of file |