aboutsummaryrefslogtreecommitdiff
path: root/front-end/src
diff options
context:
space:
mode:
Diffstat (limited to 'front-end/src')
-rw-r--r--front-end/src/App.vue26
-rw-r--r--front-end/src/components/Bookmarks.vue77
-rw-r--r--front-end/src/components/Login.vue21
-rw-r--r--front-end/src/components/Login/AdminReg.vue84
-rw-r--r--front-end/src/components/Login/UserPass.vue2
-rw-r--r--front-end/src/components/Registation.vue137
-rw-r--r--front-end/src/components/Settings.vue10
-rw-r--r--front-end/src/components/Settings/Bookmarks.vue119
-rw-r--r--front-end/src/components/Settings/Registation.vue130
-rw-r--r--front-end/src/components/global/ConfirmPrompt.vue2
-rw-r--r--front-end/src/components/global/Dialog.vue4
-rw-r--r--front-end/src/components/global/PasswordPrompt.vue2
-rw-r--r--front-end/src/main.ts2
-rw-r--r--front-end/src/store/bookmarks.ts1
-rw-r--r--front-end/src/store/index.ts13
-rw-r--r--front-end/src/store/registation.ts110
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
generated by cgit (git 2.46.0) at 2024-10-01 19:32:44 +0000