diff options
author | vnugent <public@vaughnnugent.com> | 2023-09-06 13:51:13 -0400 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2023-09-06 13:51:13 -0400 |
commit | cd8e865dad326f85ff2357ad90bbd6aa65dea68e (patch) | |
tree | 0d4a0bb8bafc4f807407e99c5e6bf4e1cb34217a /extension/src/entries/contentScript/primary/components |
initial commit
Diffstat (limited to 'extension/src/entries/contentScript/primary/components')
-rw-r--r-- | extension/src/entries/contentScript/primary/components/PromptPopup.vue | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/extension/src/entries/contentScript/primary/components/PromptPopup.vue b/extension/src/entries/contentScript/primary/components/PromptPopup.vue new file mode 100644 index 0000000..057f66a --- /dev/null +++ b/extension/src/entries/contentScript/primary/components/PromptPopup.vue @@ -0,0 +1,148 @@ +<template> + <div v-show="isOpen" id="nvault-ext-prompt"> + <div class="relative text-white" style="z-index:9147483647 !important" ref="prompt"> + <div class="fixed inset-0 left-0 flex justify-center w-full h-full p-4 bg-black/50"> + <div class="relative w-full max-w-md mx-auto mt-20 mb-auto"> + <div class="w-full p-4 border rounded-lg shadow-lg bg-dark-700 border-dark-400"> + <div v-if="loggedIn" class=""> + <h3 class="">Allow access</h3> + <div class="pl-1 text-sm"> + Identity: + </div> + <div class="p-2 mt-1 text-center border rounded border-dark-400 bg-dark-600"> + <div :class="[selectedKey?.UserName ? '' : 'text-red-500']"> + {{ selectedKey?.UserName ?? 'Select Identity' }} + </div> + </div> + <div class="mt-5 text-center"> + <span class="text-primary-500">{{ site }}</span> + would like to access to + <span class="text-yellow-500">{{ event.msg }}</span> + </div> + <div class="flex gap-2 mt-4"> + <div class=""> + <Popover class="relative"> + <PopoverButton class="rounded btn sm">View Raw</PopoverButton> + <PopoverPanel class="absolute z-10"> + <div class="min-w-[22rem] p-2 border rounded bg-dark-700 border-dark-400 shadow-md text-sm"> + <p class="pl-1"> + Event Data: + </p> + <div class="p-2 mt-1 text-left border rounded border-dark-400 bg-dark-600 overflow-y-auto max-h-[22rem]"> +<pre> +{{ evData }} +</pre> + </div> + </div> + </PopoverPanel> + </Popover> + </div> + <div class="ml-auto"> + <button :disabled="selectedKey?.Id == undefined" class="rounded btn primary sm" @click="allow">Allow</button> + </div> + <div> + <button class="rounded btn sm red" @click="close">Close</button> + </div> + </div> + </div> + <div v-else class=""> + <h3 class="">Log in!</h3> + <div class=""> + You must log in before you can allow access. + </div> + <div class="flex justify-end gap-2 mt-4"> + <div> + <button class="rounded btn sm red" @click="close">Close</button> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</template> + +<script setup lang="ts"> +import { ref } from 'vue' +import { usePrompt } from '~/entries/contentScript/nostr-shim' +import { computed } from '@vue/reactivity'; +import { onClickOutside } from '@vueuse/core'; +import { useStatus } from '~/bg-api/content-script.ts'; +import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue' +import { first } from 'lodash'; + +const { loggedIn, selectedKey } = useStatus() + +const prompt = ref(null) + +interface PopupEvent{ + type: string + msg: string + origin: string + data: any + allow: () => void + close: () => void +} + +const evStack = ref<PopupEvent[]>([]) +const isOpen = computed(() => evStack.value.length > 0) +const event = computed<PopupEvent | undefined>(() => first(evStack.value)); + +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() +} +const allow = () => { + //Pop the first event off + const res = evStack.value.shift() + res?.allow() +} + +//Setup click outside +//onClickOutside(prompt, () => isOpen.value ? close() : null) + +//Listen for events +usePrompt(async (ev: PopupEvent) => { + + console.log('usePrompt', ev) + + switch(ev.type){ + case 'getPublicKey': + ev.msg = "your public key" + break; + case 'signEvent': + ev.msg = "sign an event" + break; + case 'getRelays': + ev.msg = "get your preferred relays" + break; + case 'nip04.encrypt': + ev.msg = "encrypt data" + break; + case 'nip04.decrypt': + ev.msg = "decrypt data" + break; + } + + return new Promise((resolve, reject) => { + evStack.value.push({ + ...ev, + allow: () => resolve(true), + close: () => resolve(false), + }) + }) +}) + + +</script> + +<style lang="scss"> + + +</style> |