diff options
author | vnugent <public@vaughnnugent.com> | 2024-01-28 19:56:02 -0500 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2024-01-28 19:56:02 -0500 |
commit | 87645bfad3943e1110e4cb2e038124083e8ae793 (patch) | |
tree | c327a4437c98d973f45c313cf8259ad75515c4fe /extension/src/entries/contentScript | |
parent | c438ee90e3be4e5e01ae3d045d6b841a03bd46eb (diff) |
progress update
Diffstat (limited to 'extension/src/entries/contentScript')
3 files changed, 77 insertions, 17 deletions
diff --git a/extension/src/entries/contentScript/primary/components/PromptPopup.vue b/extension/src/entries/contentScript/primary/components/PromptPopup.vue index 1f62877..b2415b9 100644 --- a/extension/src/entries/contentScript/primary/components/PromptPopup.vue +++ b/extension/src/entries/contentScript/primary/components/PromptPopup.vue @@ -1,11 +1,12 @@ <template> - <div v-show="event" id="nvault-ext-prompt" :class="{'dark': darkMode }"> + <div v-show="showPrompt" 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" > - + + <!-- Only show backdrop when prompt is on the same origin --> <div class="fixed inset-0 left-0 w-full h-full bg-black/50" @click.self="close" /> - <div v-if="store.permissions.isPopup" class="relative w-full md:max-w-[28rem] mx-auto md:mt-36 mb-auto" ref="prompt"> + <div v-if="showPopup" 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=""> @@ -49,16 +50,14 @@ </div> <div class="flex gap-2 mt-4"> + + <ListBox class="max-w-40" v-model="allowRuleType" :groups="lbOptions" :modelToString="modelToString" /> + <div class="ml-auto"> <button class="rounded btn sm" @click="close">Close</button> </div> <div> - <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> + <button :disabled="selectedKey?.Id == undefined" class="rounded btn sm" @click="allow()">Allow</button> </div> </div> </div> @@ -89,13 +88,14 @@ </template> <script setup lang="ts"> -import { ref } from 'vue' +import { ref, shallowRef } from 'vue' import { storeToRefs } from 'pinia'; import { computed } from 'vue'; import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue' -import { clone, first } from 'lodash'; +import { clone, first, isEqual } from 'lodash'; import { useStore } from '../../../store'; -import { type PermissionRequest } from '../../../../features' +import { CreateRuleType, type PermissionRequest } from '../../../../features' +import ListBox, { Option, OptionGroup } from '../../../../components/ListBox.vue'; interface PropmtMessage extends PermissionRequest{ msg: string; @@ -106,6 +106,7 @@ const { loggedIn, selectedKey, darkMode } = storeToRefs(store) const keyName = computed(() => selectedKey.value?.UserName) const prompt = ref(null) +const allowRuleType = shallowRef<CreateRuleType>(CreateRuleType.AllowOnce) const event = computed<PropmtMessage | undefined>(() => { //Use a the current windowpending if set @@ -120,16 +121,26 @@ const event = computed<PropmtMessage | undefined>(() => { const site = computed(() => new URL(event.value?.origin || "https://example.com").host) const evData = computed(() => JSON.stringify(event.value || {}, null, 2)) +const onSameOrigin = computed(() => isEqual(event.value?.origin, window.location.origin)) +//Only show in-page popup if the event is from the same origin +const showPopup = computed(() => (store.permissions.isPopup || !store.settings.authPopup)) +const showPrompt = computed(() => (onSameOrigin.value || store.permissions.isPopup) && event.value) + const close = () => { if(event.value){ store.plugins.permission.deny(event.value.uuid); } + + //Reset the rule type + allowRuleType.value = CreateRuleType.AllowOnce } -const allow = (addRule: boolean) => { +const allow = () => { if (event.value) { - store.plugins.permission.allow(event.value.uuid, addRule); + store.plugins.permission.allow(event.value.uuid, allowRuleType.value); } + //Reset the rule type + allowRuleType.value = CreateRuleType.AllowOnce } //Listen for events @@ -161,4 +172,51 @@ const getPromptMessage = (perms: PermissionRequest | undefined): PropmtMessage | return ev } -</script> +const getRuleName = (rule: CreateRuleType) => { + switch (rule) { + default: + return 'None' + case CreateRuleType.AllowOnce: + return "Allow Once" + case CreateRuleType.AllowForever: + return "Allow Forever" + case CreateRuleType.FiveMinutes: + return "5 Minutes" + case CreateRuleType.OneHour: + return "1 Hour" + case CreateRuleType.OneDay: + return "1 Day" + case CreateRuleType.OneWeek: + return "1 Week" + case CreateRuleType.OneMonth: + return "1 Month" + } +} + +const createOption = (rule: CreateRuleType): Option<CreateRuleType> => { + return { name: getRuleName(rule), value: rule } +} + +const creatGroup = (name: string, options: Option<CreateRuleType>[]): OptionGroup<CreateRuleType> => { + return { name, options } +} + +const lbOptions = ((): OptionGroup<CreateRuleType>[] => { + return[ + creatGroup('Allow', [ + createOption(CreateRuleType.AllowOnce), + createOption(CreateRuleType.AllowForever) + ]), + creatGroup('Allow for', [ + createOption(CreateRuleType.FiveMinutes), + createOption(CreateRuleType.OneHour), + createOption(CreateRuleType.OneDay), + createOption(CreateRuleType.OneWeek), + createOption(CreateRuleType.OneMonth) + ]) + ] +})() + +const modelToString = (rule: CreateRuleType) => getRuleName(rule) + +</script>
\ No newline at end of file diff --git a/extension/src/entries/contentScript/primary/main.js b/extension/src/entries/contentScript/primary/main.js index 15fc2ec..2e05ca3 100644 --- a/extension/src/entries/contentScript/primary/main.js +++ b/extension/src/entries/contentScript/primary/main.js @@ -19,6 +19,7 @@ import { defer } from "lodash"; import { createPinia } from 'pinia'; import { useBackgroundPiniaPlugin, identityPlugin, originPlugin, permissionsPlugin } from '../../store' import { onLoad } from "../util"; +import ListBox from '../../../components/ListBox.vue' import renderContent from "../renderContent"; import App from "./App.vue"; import Notification from '@kyvg/vue3-notification' @@ -64,6 +65,7 @@ renderContent([], (appRoot, shadowRoot) => { .use(store) .use(Notification) .component('fa-icon', FontAwesomeIcon) + .component('list-box', ListBox) .mount(appRoot); //Load the nostr shim diff --git a/extension/src/entries/contentScript/util.ts b/extension/src/entries/contentScript/util.ts index aecb7b2..192f1c1 100644 --- a/extension/src/entries/contentScript/util.ts +++ b/extension/src/entries/contentScript/util.ts @@ -25,7 +25,7 @@ const registerWindowHandler = (store: Store, extName: string) => { const { selectedKey } = storeToRefs(store) const { nostr, permission } = store.plugins; - const onAsyncCall = async ({ source, data, origin } : MessageEvent<any>) => { + const onAsyncCall = async ({ data, origin } : MessageEvent<any>) => { //clean any junk/methods with json parse/stringify data = JSON.parse(JSON.stringify(data)) @@ -38,7 +38,7 @@ const registerWindowHandler = (store: Store, extName: string) => { } //Confirm the message format is correct - if (!isEqual(source, window) || isEmpty(data) || isNil(data.type)) { + if (isEmpty(data) || isNil(data.type)) { return } //Confirm extension is for us |