diff options
Diffstat (limited to 'front-end/src')
-rw-r--r-- | front-end/src/buttons.scss | 10 | ||||
-rw-r--r-- | front-end/src/components/Bookmarks.vue | 1 | ||||
-rw-r--r-- | front-end/src/components/Boomarks/AddOrUpdateForm.vue | 118 | ||||
-rw-r--r-- | front-end/src/components/Settings.vue | 8 | ||||
-rw-r--r-- | front-end/src/components/Settings/Bookmarks.vue | 84 | ||||
-rw-r--r-- | front-end/src/components/Settings/PkiSettings.vue | 5 | ||||
-rw-r--r-- | front-end/src/components/Settings/Registation.vue | 2 | ||||
-rw-r--r-- | front-end/src/main.ts | 4 | ||||
-rw-r--r-- | front-end/src/store/bookmarks.ts | 4 | ||||
-rw-r--r-- | front-end/src/store/socialMfaPlugin.ts | 74 | ||||
-rw-r--r-- | front-end/src/store/websiteLookup.ts | 76 |
11 files changed, 272 insertions, 114 deletions
diff --git a/front-end/src/buttons.scss b/front-end/src/buttons.scss index 7088deb..44df2c2 100644 --- a/front-end/src/buttons.scss +++ b/front-end/src/buttons.scss @@ -1,5 +1,13 @@ .btn{ - @apply focus:ring-2 focus:outline-none font-medium rounded text-sm px-4 py-2 text-center text-white; + @apply focus:ring-2 focus:outline-none font-medium rounded text-sm px-2.5 py-2 text-center text-white; + + &.sm{ + @apply text-xs px-2 py-1; + } + + &.lg{ + @apply text-lg px-4 py-3; + } &.round{ @apply rounded-full; diff --git a/front-end/src/components/Bookmarks.vue b/front-end/src/components/Bookmarks.vue index cc3cd6a..274b0b4 100644 --- a/front-end/src/components/Bookmarks.vue +++ b/front-end/src/components/Bookmarks.vue @@ -387,7 +387,6 @@ const upload = (() => { <span class="sr-only">Search</span> </button> </form> - </div> <div class="relative ml-3 md:ml-10"> diff --git a/front-end/src/components/Boomarks/AddOrUpdateForm.vue b/front-end/src/components/Boomarks/AddOrUpdateForm.vue index a4a3f1d..0370e0c 100644 --- a/front-end/src/components/Boomarks/AddOrUpdateForm.vue +++ b/front-end/src/components/Boomarks/AddOrUpdateForm.vue @@ -1,6 +1,8 @@ <script setup lang="ts"> import { computed, toRefs } from 'vue'; -import { join, split } from 'lodash-es'; +import { isEmpty, join, split } from 'lodash-es'; +import { useStore } from '../../store'; +import { useWait } from '@vnuge/vnlib.browser'; const emit = defineEmits(['submit']) const props = defineProps<{ @@ -15,54 +17,110 @@ const tags = computed({ set: (value:string) => v$.value.Tags.$model = split(value, ',') }) +const { websiteLookup:lookup } = useStore() +const { setWaiting, waiting } = useWait() + +const execLookup = async () => { + //url must be valid before searching + if(v$.value.Url.$invalid) return + + setWaiting(true) + + try{ + const { title, description, keywords } = await lookup.execLookup(v$.value.Url.$model); + + //Set the title and description + if(title){ + v$.value.Name.$model = title; + v$.value.Name.$dirty = true; + } + + if(description){ + v$.value.Description.$model = description; + v$.value.Description.$dirty = true; + } + + if(!isEmpty(keywords)){ + v$.value.Tags.$model = keywords; + v$.value.Tags.$dirty = true; + } + } + catch(e){ + //Mostly ignore errors + console.error(e) + } + finally{ + setWaiting(false) + } +} + +const showSearchButton = computed(() => lookup.isSupported && !isEmpty(v$.value.Url.$model)) + </script> <template> - <form class="grid grid-cols-1 gap-4 p-4" @submit.prevent="emit('submit')"> + <form id="bm-add-or-update-form" class="grid grid-cols-1 gap-4 p-4" @submit.prevent="emit('submit')"> <fieldset> - <label for="url" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">URL</label> - <input type="text" id="url" class="input" placeholder="https://www.example.com" - v-model="v$.Url.$model" - :class="{'dirty': v$.Url.$dirty, 'error': v$.Url.$invalid}" - required - > + <label for="url" class="flex justify-between mb-2 text-sm font-medium text-gray-900 dark:text-white"> + URL + </label> + <div class="flex gap-2"> + <input type="text" id="url" class="input" placeholder="https://www.example.com" v-model="v$.Url.$model" + :class="{'dirty': v$.Url.$dirty, 'error': v$.Url.$invalid}" required> + + <div class=""> + <button + type="button" + :disabled="!showSearchButton || waiting" + @click.self.prevent="execLookup" + id="search-btn" + class="btn blue search-btn" + > + <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" + viewBox="0 0 20 20"> + <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" + d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" /> + </svg> + </button> + </div> + </div> </fieldset> <fieldset> <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title</label> - <input type="text" id="Name" class="input" placeholder="Hello World" - v-model="v$.Name.$model" - :class="{'dirty': v$.Name.$dirty, 'error': v$.Name.$invalid}" - required - > + <input type="text" id="Name" class="input" placeholder="Hello World" v-model="v$.Name.$model" + :class="{'dirty': v$.Name.$dirty, 'error': v$.Name.$invalid}" required> </fieldset> - <fieldset> + <fieldset> <label for="tags" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tags</label> - <input type="text" id="tags" class="input" placeholder="tag1,tag2,tag3" - v-model="tags" - :class="{'dirty': v$.Tags.$dirty, 'error': v$.Tags.$invalid}" - > + <input type="text" id="tags" class="input" placeholder="tag1,tag2,tag3" v-model="tags" + :class="{'dirty': v$.Tags.$dirty, 'error': v$.Tags.$invalid}"> </fieldset> <fieldset> - <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label> + <label for="description" + class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label> <textarea type="text" id="description" rows="5" class="input" placeholder="This is a bookmark" v-model="v$.Description.$model" - :class="{'dirty': v$.Description.$dirty, 'error': v$.Description.$invalid}" - /> + :class="{'dirty': v$.Description.$dirty, 'error': v$.Description.$invalid}" /> </fieldset> - + <div class="flex justify-end"> - <button type="submit" class="btn blue"> - Submit + <button id="save-button" type="submit" form="bm-add-or-update-form" class="btn blue"> + Save </button> </div> </form> </template> -<style scoped lang="scss">input.search { - @apply ps-10 p-2.5 border block w-full text-sm rounded; - @apply bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500; -} +<style scoped lang="scss"> + +#bm-add-or-update-form { + .search-btn{ -button.search { - @apply p-2.5 ms-2 text-sm font-medium text-white bg-blue-700 rounded border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 + @apply my-auto px-3 py-2.5; + + &:disabled{ + @apply bg-gray-600; + } + } } + </style>
\ No newline at end of file diff --git a/front-end/src/components/Settings.vue b/front-end/src/components/Settings.vue index 83d3f79..504f38a 100644 --- a/front-end/src/components/Settings.vue +++ b/front-end/src/components/Settings.vue @@ -19,7 +19,7 @@ const darkMode = useDark(); <h2 class="text-2xl font-bold">Settings</h2> <div class="flex flex-col w-full max-w-3xl gap-10 mt-3"> - <div class=""> + <div class="mb-6"> <h3 class="text-xl font-bold"> General </h3> @@ -41,7 +41,7 @@ const darkMode = useDark(); </div> </div> - <div class=""> + <div class="mb-6"> <h3 class="text-xl font-bold">Boomarks</h3> <div class="relative mt-4"> @@ -51,7 +51,7 @@ const darkMode = useDark(); <PasswordReset /> - <div class=""> + <div class="mb-8"> <h3 class="text-xl font-bold">Multi Factor Auth</h3> <div class="relative mt-4 py-2.5"> @@ -66,7 +66,7 @@ const darkMode = useDark(); <Oauth2Apps /> </div> - <div v-if="store.registation.status?.can_invite" class="mb-10"> + <div v-if="store.registation.status?.can_invite" class="mt-6 mb-10"> <Registation /> </div> diff --git a/front-end/src/components/Settings/Bookmarks.vue b/front-end/src/components/Settings/Bookmarks.vue index a4ab55a..aa4ed31 100644 --- a/front-end/src/components/Settings/Bookmarks.vue +++ b/front-end/src/components/Settings/Bookmarks.vue @@ -1,13 +1,14 @@ <script setup lang="ts"> import { apiCall, useWait } from '@vnuge/vnlib.browser'; import { useStore, type DownloadContentType, TabId } from '../../store'; -import { ref } from 'vue'; +import { computed, ref } from 'vue'; import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue' -const { bookmarks } = useStore(); +const { bookmarks, websiteLookup } = useStore(); const downloadAnchor = ref(); const { waiting } = useWait() +const curlSupported = computed(() => websiteLookup.isSupported); const downloadBookmarks = (contentType: DownloadContentType) => { apiCall(async () => { @@ -58,8 +59,10 @@ javascript: (function() { </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 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> @@ -72,47 +75,66 @@ javascript: (function() { <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"/> + <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" + <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"> + 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> + <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> + <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 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 class="mt-3"> + <h4 class="mb-2 font-bold">Features</h4> + <p class="text-sm text-gray-500 dark:text-gray-400"> + Some features for Simple-Bookmark use tools and applications that are already installed on + your server such as curl. + </p> + <div class="flex flex-row gap-2 mt-4"> + <span class="w-3 h-3 my-auto rounded-full" :class="[curlSupported ? 'bg-green-500' : 'bg-amber-500']"></span> + <span class="my-auto font-bold"> + curl + </span> + <span class="my-auto text-sm text-gray-500 ms-4 dark:text-gray-400"> + Curl is used to fetch website details like title, description and tags. + {{ curlSupported ? '(supported)' : '(not supported)' }} + </span> + </div> + </div> </div> - + <a ref="downloadAnchor" class="hidden"></a> </template>
\ No newline at end of file diff --git a/front-end/src/components/Settings/PkiSettings.vue b/front-end/src/components/Settings/PkiSettings.vue index dfa4cad..885b2cb 100644 --- a/front-end/src/components/Settings/PkiSettings.vue +++ b/front-end/src/components/Settings/PkiSettings.vue @@ -32,6 +32,8 @@ const removeKey = async (key: PkiPublicKey) => { title: 'Key Removed', text: `${key.kid} has been successfully removed` }) + + store.mfaRefreshMethods() }) } @@ -117,7 +119,8 @@ const onAddKey = async () => { text: result }) - hideAddKeyDialog() + hideAddKeyDialog(); + store.mfaRefreshMethods(); }) } diff --git a/front-end/src/components/Settings/Registation.vue b/front-end/src/components/Settings/Registation.vue index a0f208e..d0dfaa7 100644 --- a/front-end/src/components/Settings/Registation.vue +++ b/front-end/src/components/Settings/Registation.vue @@ -58,7 +58,7 @@ const onCancel = () => { <div class=""> <div class="flex flex-row justify-between w-full"> - <h3 class="text-xl font-bold">Registation</h3> + <h3 class="text-xl font-bold">Invite Links</h3> <div class="flex flex-row justify-end"> <button class="btn blue" @click="toggleOpen(true)">Invite User</button> diff --git a/front-end/src/main.ts b/front-end/src/main.ts index c5be406..2f2ca8e 100644 --- a/front-end/src/main.ts +++ b/front-end/src/main.ts @@ -30,6 +30,7 @@ import { mfaSettingsPlugin } from './store/mfaSettingsPlugin' import { socialMfaPlugin } from './store/socialMfaPlugin' import { bookmarkPlugin } from './store/bookmarks' import { registationPlugin } from './store/registation'; +import { siteLookupPlugin } from './store/websiteLookup'; //Setup the vnlib api configureApi({ @@ -67,9 +68,10 @@ store.use(profilePlugin('/account/profile')) //Enable mfa with totp settings plugin (optional pki config) .use(mfaSettingsPlugin('/account/mfa', '/account/pki')) //Setup social mfa plugin - .use(socialMfaPlugin()) + .use(socialMfaPlugin("/account/social/portals")) //Add the oauth2 apps plugin .use(bookmarkPlugin('/bookmarks')) + .use(siteLookupPlugin('/lookup', 2000)) .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 2af8344..2d12a9a 100644 --- a/front-end/src/store/bookmarks.ts +++ b/front-end/src/store/bookmarks.ts @@ -18,7 +18,7 @@ import { MaybeRef, shallowRef, watch, computed, Ref, ref } from 'vue'; import { apiCall, useAxios, WebMessage } from '@vnuge/vnlib.browser'; import { useToggle, get, set, useOffsetPagination, watchDebounced, syncRef } from '@vueuse/core'; import { PiniaPluginContext, PiniaPlugin, storeToRefs } from 'pinia' -import { isArray, join, map, split, sortBy } from 'lodash-es'; +import { isArray, join, map, split, sortBy, filter, isEmpty } from 'lodash-es'; import { useQuery } from './index'; export interface Bookmark{ @@ -189,7 +189,7 @@ const searchQuery = (search: Ref<string | null>, tags: Ref<string[]>) => { const tagQuery = useQuery('t') const currentTags = computed({ - get: () => split(tagQuery.value, ' '), + get: () => filter(split(tagQuery.value, ' '), p => !isEmpty(p)), set: (value) => set(tagQuery, join(value, ' ')) }) diff --git a/front-end/src/store/socialMfaPlugin.ts b/front-end/src/store/socialMfaPlugin.ts index d8d7bb1..e0ec972 100644 --- a/front-end/src/store/socialMfaPlugin.ts +++ b/front-end/src/store/socialMfaPlugin.ts @@ -1,26 +1,19 @@ -// 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 } from 'vue'; -import { useSocialOauthLogin, useUser, SocialOAuthPortal, fromPortals, useAxios } from '@vnuge/vnlib.browser' +import { + useUser, + useOauthLogin, + useSocialDefaultLogout, + fetchSocialPortals, + fromSocialPortals, + fromSocialConnections, +} from '@vnuge/vnlib.browser' import { get } from '@vueuse/core'; import { PiniaPluginContext, PiniaPlugin, storeToRefs } from 'pinia' import { defer } from 'lodash-es'; -type SocialMfaPlugin = ReturnType<typeof useSocialOauthLogin> +type SocialMfaPlugin = ReturnType<typeof useOauthLogin> declare module 'pinia' { export interface PiniaCustomProperties { @@ -35,43 +28,40 @@ export const socialMfaPlugin = (portalEndpoint?: MaybeRef<string>): PiniaPlugin const { } = storeToRefs(store) const { logout } = useUser() - /** - * Override the logout function to default to a social logout, - * if the social logout fails, then we will logout the user - */ - const setLogoutMethod = (socialOauth: SocialMfaPlugin) => { - const logoutFunc = socialOauth.logout; + //Create social login from available portals + const defaultSocial = useSocialDefaultLogout( + useOauthLogin([]), + logout //fallback to default logout + ); - (socialOauth as any).logout = async () => { - if (await logoutFunc() === false) { - await logout() - } - } - } - - const _loadPromise = new Promise<SocialMfaPlugin>((resolve, reject) => { + const _loadPromise = new Promise<SocialMfaPlugin>((resolve, _) => { - if(get(portalEndpoint) == null) { - const socialOauth = useSocialOauthLogin([]) - setLogoutMethod(socialOauth) - return resolve(socialOauth) + if (get(portalEndpoint) == null) { + return resolve(defaultSocial) } + /* + Try to load social methods from server, if it fails, then we will + fall back to default + */ + defer(async () => { + try { - //Get axios instance - const axios = useAxios(null) - //Get all enabled portals - const { data } = await axios.get<SocialOAuthPortal[]>(get(portalEndpoint)!); - //Setup social providers from server portals - const socialOauth = useSocialOauthLogin(fromPortals(data)); - setLogoutMethod(socialOauth); + const portals = await fetchSocialPortals(get(portalEndpoint)!); + const social = fromSocialPortals(portals); + const methods = fromSocialConnections(social); + + //Create social login from available portals + const login = useOauthLogin(methods); + const socialOauth = useSocialDefaultLogout(login, logout); resolve(socialOauth) } catch (error) { - reject(error) + //Let failure fall back to default + resolve(defaultSocial) } }) }) diff --git a/front-end/src/store/websiteLookup.ts b/front-end/src/store/websiteLookup.ts new file mode 100644 index 0000000..560d00f --- /dev/null +++ b/front-end/src/store/websiteLookup.ts @@ -0,0 +1,76 @@ + +import 'pinia' +import { MaybeRef, Ref, shallowRef, watch } from 'vue'; +import { WebMessage, apiCall, useAxios } from '@vnuge/vnlib.browser' +import { get, set } from '@vueuse/core'; +import { PiniaPluginContext, PiniaPlugin, storeToRefs } from 'pinia' +import { defer, filter, isEmpty, noop } from 'lodash-es'; + +export interface WebsiteLookupResult { + readonly title: string | undefined, + readonly description: string | undefined, + keywords: string[] | undefined, +} + +export interface LookupApi{ + isSupported: Ref<boolean>, + timeout: Ref<number>, + execLookup(url:string): Promise<WebsiteLookupResult> +} + +declare module 'pinia' { + export interface PiniaCustomProperties { + websiteLookup:{ + isSupported: boolean, + execLookup(url: string): Promise<WebsiteLookupResult> + } + } +} + +const urlToBase64UrlEncoded = (url: string) => { + return btoa(url) + .replace(/-/g, '+') + .replace(/_/g, '/') + .replace(/\./g, '=') //Fix padding +} + +export const siteLookupPlugin = (lookupEndpoint: MaybeRef<string>, to: number): PiniaPlugin => { + + return ({ store }: PiniaPluginContext) => { + + const { loggedIn } = storeToRefs(store) + const axios = useAxios(null) + + const isSupported = shallowRef(false) + const timeout = shallowRef(to) + + const checkIsSupported = () => { + return apiCall(async () => { + //Execute test with the 'support' query parameter + const { data } = await axios.get<WebMessage>(`${get(lookupEndpoint)}?support`) + set(isSupported, data.success) + }); + } + + const execLookup = async (url:string) => { + const base64Url = urlToBase64UrlEncoded(url) + + //Execute test with the 'support' query parameter + const { data } = await axios.get<WebMessage<WebsiteLookupResult>>(`${get(lookupEndpoint)}?timeout=${get(timeout)}&url=${base64Url}`) + const lookup = data.getResultOrThrow(); + lookup.keywords = filter(lookup.keywords, (k) => !isEmpty(k)) + return lookup + } + + //If login status changes, recheck support + watch([loggedIn], ([li]) => li ? defer(checkIsSupported) : noop(), { immediate: true }) + + return { + websiteLookup: { + isSupported, + execLookup, + timeout + } as LookupApi + } as any + } +}
\ No newline at end of file |