diff options
Diffstat (limited to 'extension/src/entries/contentScript')
5 files changed, 58 insertions, 72 deletions
diff --git a/extension/src/entries/contentScript/auth-popup.html b/extension/src/entries/contentScript/auth-popup.html new file mode 100644 index 0000000..42a2ce3 --- /dev/null +++ b/extension/src/entries/contentScript/auth-popup.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Authorize</title> + <link rel="stylesheet" href="auth-popup.css"> + <script src="primary/main.js"></script> +</head> + <div id="app"></div> +</html>
\ No newline at end of file diff --git a/extension/src/entries/contentScript/primary/components/PromptPopup.vue b/extension/src/entries/contentScript/primary/components/PromptPopup.vue index 156dfb8..1f62877 100644 --- a/extension/src/entries/contentScript/primary/components/PromptPopup.vue +++ b/extension/src/entries/contentScript/primary/components/PromptPopup.vue @@ -1,12 +1,12 @@ <template> - <div v-show="isOpen" id="nvault-ext-prompt" :class="{'dark': darkMode }"> + <div v-show="event" id="nvault-ext-prompt" :class="{'dark': darkMode }"> <div class="fixed top-0 bottom-0 left-0 right-0 text-white" style="z-index:9147483647 !important" > <div class="fixed inset-0 left-0 w-full h-full bg-black/50" @click.self="close" /> - <div class="relative w-full max-w-[28rem] mx-auto mt-36 mb-auto" ref="prompt"> - <div class="w-full p-5 text-gray-800 bg-white border rounded-lg shadow-lg dark:bg-dark-900 dark:border-dark-500 dark:text-gray-200"> + <div v-if="store.permissions.isPopup" class="relative w-full md:max-w-[28rem] mx-auto md:mt-36 mb-auto" ref="prompt"> + <div class="w-full h-screen p-5 text-gray-800 bg-white border shadow-lg md:h-auto md:rounded dark:bg-dark-900 dark:border-dark-500 dark:text-gray-200"> <div v-if="loggedIn" class=""> <div class="flex flex-row justify-between"> @@ -44,7 +44,7 @@ <div class="py-3 text-sm text-center"> <span class="font-bold">{{ site }}</span> - would like to access to + would like access to <span class="font-bold">{{ event?.msg }}</span> </div> @@ -53,7 +53,12 @@ <button class="rounded btn sm" @click="close">Close</button> </div> <div> - <button :disabled="selectedKey?.Id == undefined" class="rounded btn sm" @click="allow">Allow</button> + <button :disabled="selectedKey?.Id == undefined" class="rounded amber btn sm" @click="allow(true)"> + Always Allow + </button> + </div> + <div> + <button :disabled="selectedKey?.Id == undefined" class="rounded btn sm" @click="allow(false)">Allow</button> </div> </div> </div> @@ -85,13 +90,16 @@ <script setup lang="ts"> import { ref } from 'vue' -import { debugLog } from '@vnuge/vnlib.browser'; import { storeToRefs } from 'pinia'; import { computed } from 'vue'; import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue' import { clone, first } from 'lodash'; -import { usePrompt, type UserPermissionRequest } from '../../util' import { useStore } from '../../../store'; +import { type PermissionRequest } from '../../../../features' + +interface PropmtMessage extends PermissionRequest{ + msg: string; +} const store = useStore() const { loggedIn, selectedKey, darkMode } = storeToRefs(store) @@ -99,38 +107,38 @@ const keyName = computed(() => selectedKey.value?.UserName) const prompt = ref(null) -interface PopupEvent extends UserPermissionRequest { - allow: () => void - close: () => void -} - -const evStack = ref<PopupEvent[]>([]) -const isOpen = computed(() => evStack.value.length > 0) -const event = computed<PopupEvent | undefined>(() => first(evStack.value)); +const event = computed<PropmtMessage | undefined>(() => { + //Use a the current windowpending if set + if(store.permissions.windowPending){ + return getPromptMessage(store.permissions.windowPending) + } + //Otherwise use the first pending event + const pending = first(store.permissions.pending) + return getPromptMessage(pending) +}); const site = computed(() => new URL(event.value?.origin || "https://example.com").host) const evData = computed(() => JSON.stringify(event.value || {}, null, 2)) - const close = () => { - //Pop the first event off - const res = evStack.value.shift() - res?.close() + if(event.value){ + store.plugins.permission.deny(event.value.uuid); + } } -const allow = () => { - //Pop the first event off - const res = evStack.value.shift() - res?.allow() + +const allow = (addRule: boolean) => { + if (event.value) { + store.plugins.permission.allow(event.value.uuid, addRule); + } } //Listen for events -usePrompt((ev: UserPermissionRequest):Promise<boolean> => { +const getPromptMessage = (perms: PermissionRequest | undefined): PropmtMessage | undefined => { - ev = clone(ev) + if(!perms) return undefined - debugLog('[usePrompt] =>', ev) - - switch(ev.type){ + const ev = clone(perms) as PropmtMessage + switch(ev.requestType){ case 'getPublicKey': ev.msg = "your public key" break; @@ -150,14 +158,7 @@ usePrompt((ev: UserPermissionRequest):Promise<boolean> => { ev.msg = "unknown event" break; } - - return new Promise((resolve) => { - evStack.value.push({ - ...ev, - allow: () => resolve(true), - close: () => resolve(false), - }) - }) -}) + return ev +} </script> diff --git a/extension/src/entries/contentScript/primary/main.js b/extension/src/entries/contentScript/primary/main.js index bbe5edf..15fc2ec 100644 --- a/extension/src/entries/contentScript/primary/main.js +++ b/extension/src/entries/contentScript/primary/main.js @@ -1,4 +1,4 @@ -// Copyright (C) 2023 Vaughn Nugent +// 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 @@ -17,7 +17,7 @@ import { runtime } from "webextension-polyfill"; import { createApp } from "vue"; import { defer } from "lodash"; import { createPinia } from 'pinia'; -import { useBackgroundPiniaPlugin, identityPlugin, originPlugin } from '../../store' +import { useBackgroundPiniaPlugin, identityPlugin, originPlugin, permissionsPlugin } from '../../store' import { onLoad } from "../util"; import renderContent from "../renderContent"; import App from "./App.vue"; @@ -48,6 +48,7 @@ renderContent([], (appRoot, shadowRoot) => { .use(bgPlugins) .use(identityPlugin) .use(originPlugin) + .use(permissionsPlugin) //Add tailwind styles just to the shadow dom element const style = document.createElement('style') diff --git a/extension/src/entries/contentScript/renderContent.js b/extension/src/entries/contentScript/renderContent.js index ca45c4f..1a72d45 100644 --- a/extension/src/entries/contentScript/renderContent.js +++ b/extension/src/entries/contentScript/renderContent.js @@ -1,4 +1,4 @@ -// Copyright (C) 2023 Vaughn Nugent +// 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 diff --git a/extension/src/entries/contentScript/util.ts b/extension/src/entries/contentScript/util.ts index 09b515a..aecb7b2 100644 --- a/extension/src/entries/contentScript/util.ts +++ b/extension/src/entries/contentScript/util.ts @@ -1,4 +1,4 @@ -// Copyright (C) 2023 Vaughn Nugent +// 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 @@ -18,36 +18,12 @@ import { apiCall } from '@vnuge/vnlib.browser' import { Store, storeToRefs } from 'pinia' import { useScriptTag, watchOnce } from "@vueuse/core" import { useStore } from '../store' - -export type PromptHandler = (request: UserPermissionRequest) => Promise<boolean> - -export interface UserPermissionRequest { - type: string - msg: string - origin: string - data: any -} - -const _promptHandler = (() => { - let _handler: PromptHandler | undefined = undefined; - return { - invoke(event:UserPermissionRequest){ - if (!_handler) { - throw new Error('No prompt handler set') - } - return _handler(event) - }, - set(handler: PromptHandler) { - _handler = handler - } - } -})() - +import { PrStatus } from '../../features' const registerWindowHandler = (store: Store, extName: string) => { const { selectedKey } = storeToRefs(store) - const { nostr } = store.plugins; + const { nostr, permission } = store.plugins; const onAsyncCall = async ({ source, data, origin } : MessageEvent<any>) => { @@ -56,9 +32,9 @@ const registerWindowHandler = (store: Store, extName: string) => { const requestPermission = async (cb: (...args: any) => Promise<any>) => { //await propmt for user to allow the request - const allow = await _promptHandler.invoke({ ...data, origin }) + const allow = await permission.requestAndWaitResult({ ...data, requestType: data.type, origin }) //send request to background - return allow ? await cb() : { error: 'User denied permission' } + return allow == PrStatus.Approved ? await cb() : { error: 'User denied permission' } } //Confirm the message format is correct @@ -133,9 +109,7 @@ const registerWindowHandler = (store: Store, extName: string) => { }); } -export const usePrompt = (callback: PromptHandler) => _promptHandler.set(callback); - -export const onLoad = async (extName: string, scriptUrl: string) => { +export const onLoad = (extName: string, scriptUrl: string) => { const store = useStore() const { isTabAllowed } = storeToRefs(store) |