From 87645bfad3943e1110e4cb2e038124083e8ae793 Mon Sep 17 00:00:00 2001
From: vnugent <public@vaughnnugent.com>
Date: Sun, 28 Jan 2024 19:56:02 -0500
Subject: progress update

---
 .../primary/components/PromptPopup.vue             | 88 ++++++++++++++++++----
 .../src/entries/contentScript/primary/main.js      |  2 +
 extension/src/entries/contentScript/util.ts        |  4 +-
 3 files changed, 77 insertions(+), 17 deletions(-)

(limited to 'extension/src/entries/contentScript')

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
-- 
cgit