diff options
Diffstat (limited to 'extension/src/entries/popup')
| -rw-r--r-- | extension/src/entries/popup/App.vue | 2 | ||||
| -rw-r--r-- | extension/src/entries/popup/Components/IdentitySelection.vue | 20 | ||||
| -rw-r--r-- | extension/src/entries/popup/Components/Login.vue | 16 | ||||
| -rw-r--r-- | extension/src/entries/popup/Components/PageContent.vue | 113 | ||||
| -rw-r--r-- | extension/src/entries/popup/local.scss | 18 | ||||
| -rw-r--r-- | extension/src/entries/popup/main.js | 15 |
6 files changed, 116 insertions, 68 deletions
diff --git a/extension/src/entries/popup/App.vue b/extension/src/entries/popup/App.vue index 0181bbb..8c49fa6 100644 --- a/extension/src/entries/popup/App.vue +++ b/extension/src/entries/popup/App.vue @@ -17,6 +17,6 @@ main { text-align: center; color: #2c3e50; - @apply dark:bg-dark-800 bg-white dark:text-gray-200; + @apply dark:bg-dark-900 bg-white dark:text-gray-200; } </style> diff --git a/extension/src/entries/popup/Components/IdentitySelection.vue b/extension/src/entries/popup/Components/IdentitySelection.vue index d1a7333..99d8e34 100644 --- a/extension/src/entries/popup/Components/IdentitySelection.vue +++ b/extension/src/entries/popup/Components/IdentitySelection.vue @@ -1,5 +1,5 @@ <template> - <div class="px-3 text-left"> + <div class="text-left"> <div class="w-full"> <div class=""> <select class="w-full input" @@ -19,28 +19,22 @@ <script setup lang="ts"> import { find } from 'lodash' import { computed } from "vue"; -import { useStatus, useManagment, NostrPubKey } from "~/bg-api/popup.ts"; +import { useStore } from "../../store"; import { useWait } from '@vnuge/vnlib.browser' -import { computedAsync } from '@vueuse/core'; +import { storeToRefs } from 'pinia'; -const { selectedKey } = useStatus(); const { waiting } = useWait(); -const { getAllKeys, selectKey } = useManagment(); - -const allKeys = computedAsync<NostrPubKey[]>(async () => await getAllKeys(), []); +const store = useStore(); +const { selectedKey, allKeys } = storeToRefs(store); const onSelected = async ({target}) =>{ //Select the key of the given id const selected = find(allKeys.value, {Id: target.value}) if(selected){ - await selectKey(selected) + await store.selectKey(selected) } } -const selected = computed(() => selectedKey?.value || { Id:"0" }) +const selected = computed(() => selectedKey?.value || { Id:"" }) </script> - -<style lang="scss"> - -</style>
\ No newline at end of file diff --git a/extension/src/entries/popup/Components/Login.vue b/extension/src/entries/popup/Components/Login.vue index c863430..44df714 100644 --- a/extension/src/entries/popup/Components/Login.vue +++ b/extension/src/entries/popup/Components/Login.vue @@ -19,18 +19,24 @@ </template> <script setup lang="ts"> -import { useWait } from "@vnuge/vnlib.browser"; +import { apiCall, useWait } from "@vnuge/vnlib.browser"; import { ref } from "vue"; -import { useManagment } from "~/bg-api/popup.ts"; +import { useStore } from "../../store"; -const { login } = useManagment() +const { login } = useStore() const { waiting } = useWait() const token = ref('') const onSubmit = async () => { - //console.log(token.value) - await login(token.value) + await apiCall(async ({ toaster }) => { + await login(token.value) + toaster.general.success({ + 'title': 'Login successful', + 'text': 'Successfully logged into your profile' + }) + }) + } </script> diff --git a/extension/src/entries/popup/Components/PageContent.vue b/extension/src/entries/popup/Components/PageContent.vue index eda9bab..1a3995e 100644 --- a/extension/src/entries/popup/Components/PageContent.vue +++ b/extension/src/entries/popup/Components/PageContent.vue @@ -4,35 +4,49 @@ class="flex flex-col text-left w-[20rem] min-h-[25rem]" > - <div class="flex flex-row w-full px-1 pl-4"> - <div class="flex-auto my-auto"> - <h3>NVault</h3> + <div class="flex flex-row w-full gap-2 p-1.5 bg-black text-white dark:bg-dark-600 shadow"> + <div class="flex flex-row flex-auto my-auto"> + <div class="my-auto mr-2"> + <img class="h-6" src="/icons/32.png" /> + </div> + <h3 class="block my-auto">NVault</h3> + <div class="px-3 py-.5 m-auto text-sm rounded-full h-fit active-badge" :class="[isTabAllowed ? 'active' : 'inactive']"> + {{ isTabAllowed ? 'Active' : 'Inactive' }} + </div> </div> <div class="my-auto" v-if="loggedIn"> - <button class="rounded btn sm red" @click.prevent="logout"> + <button class="rounded btn xs" @click.prevent="logout"> <fa-icon icon="arrow-right-from-bracket" /> </button> </div> - <div class="p-2 my-auto"> - <button class="rounded btn sm" @click="openOptions"> + <div class="my-auto"> + <button class="rounded btn xs" @click="openOptions"> <fa-icon :icon="['fas', 'gear']"/> </button> </div> </div> + <div v-if="!loggedIn"> <Login></Login> </div> - <div v-else class="flex justify-center pb-4"> - <div class="w-full m-auto"> - <div class="mt-2 text-center"> - {{ userName }} - <div class="mt-4"> + + <div v-else class="flex justify-center"> + <div class="w-full px-3 m-auto"> + + <div class="text-sm text-center"> + {{ userName }} + </div> + + <div class=""> + <label class="mb-0.5 text-sm dark:text-dark-100"> + Identity + </label> <IdentitySelection></IdentitySelection> </div> - <div class="mt-2.5 min-h-[6rem]"> - <div class="flex flex-col justify-center"> - - <div class="flex flex-row gap-2 p-2 mx-3 my-3 bg-gray-100 border border-gray-200 rounded dark:bg-dark-700 dark:border-dark-400"> + + <div class="w-full mt-1"> + <div class="flex flex-col"> + <div class="flex flex-row gap-2 p-1.5 bg-gray-100 border border-gray-200 dark:bg-dark-800 dark:border-dark-400"> <div class="text-sm break-all"> {{ pubKey ?? 'No key selected' }} </div> @@ -40,13 +54,30 @@ <fa-icon class="mr-1" icon="copy" @click="copy(pubKey)"/> </div> </div> - </div> </div> - <div class="mt-3 text-sm"> - Always on NIP-07: <span class="font-semibold" :class="{'text-blue-500':autoInject}">{{ autoInject }}</span> + + <div class="mt-4"> + <label class="block mb-1 text-xs text-left dark:text-dark-100" > + Current origin + </label> + + <div v-if="isOriginProtectionOn" class="flex flex-row w-full gap-2"> + <input :value="currentOrigin" class="flex-1 p-1 mx-0 text-sm input" readonly/> + + <button v-if="isTabAllowed" class="btn xs" @click="store.dissallowOrigin()"> + <fa-icon icon="minus" /> + </button> + <button v-else class="btn xs" @click="store.allowOrigin()"> + <fa-icon icon="plus" /> + </button> + </div> + + <div v-else class="text-xs text-center"> + <span class="">Tracking protection disabled</span> + </div> </div> - </div> + </div> </div> @@ -57,9 +88,10 @@ <script setup lang="ts"> import { computed, watchEffect } from "vue"; -import { useStatus, useManagment } from "~/bg-api/popup.ts"; -import { configureNotifier } from "@vnuge/vnlib.browser"; -import { asyncComputed, useClipboard, watchDebounced } from '@vueuse/core' +import { storeToRefs } from "pinia"; +import { useStore } from "../../store"; +import { apiCall, configureNotifier } from "@vnuge/vnlib.browser"; +import { useClipboard } from '@vueuse/core' import { notify } from "@kyvg/vue3-notification"; import { runtime } from "webextension-polyfill"; import Login from "./Login.vue"; @@ -67,38 +99,25 @@ import IdentitySelection from "./IdentitySelection.vue"; configureNotifier({notify, close:notify.close}) -const { loggedIn, userName, selectedKey, darkMode } = useStatus() -const { logout, getProfile, getSiteConfig } = useManagment() - +const store = useStore() +const { loggedIn, selectedKey, userName, darkMode, isTabAllowed, currentOrigin, isOriginProtectionOn } = storeToRefs(store) const { copy, copied } = useClipboard() -const pubKey = computed(() => selectedKey.value?.PublicKey) -const qrCode = computed(() => pubKey.value ? `nostr:npub1${pubKey.value}` : null) - -watchDebounced(loggedIn, async () => { - //Manually update the user's profile if they are logged in and the profile is not yet loaded - if(loggedIn.value && !userName.value){ - getProfile() - } -},{ debounce:100, immediate: true }) +const pubKey = computed(() => selectedKey!.value?.PublicKey) const openOptions = () => runtime.openOptionsPage(); //Watch for dark mode changes and update the body class watchEffect(() => darkMode.value ? document.body.classList.add('dark') : document.body.classList.remove('dark')); -const autoInject = asyncComputed(() => getSiteConfig().then<Boolean>(p => p.autoInject), false) - -</script> - -<style lang="scss"> - -.toaster{ - position: fixed; - top: 15px; - right: 0; - z-index: 9999; - max-width: 230px; +const logout = () =>{ + apiCall(async ({ toaster }) =>{ + await store.logout() + toaster.general.success({ + 'title':'Success', + 'text': 'You have been logged out' + }) + }) } -</style> +</script> diff --git a/extension/src/entries/popup/local.scss b/extension/src/entries/popup/local.scss new file mode 100644 index 0000000..9c64b98 --- /dev/null +++ b/extension/src/entries/popup/local.scss @@ -0,0 +1,18 @@ + +.toaster { + position: fixed; + top: 15px; + right: 0; + z-index: 9999; + max-width: 230px; +} + +.active-badge{ + @apply text-white; + &.active{ + @apply bg-primary-500 dark:bg-primary-600; + } + &.inactive{ + + } +}
\ No newline at end of file diff --git a/extension/src/entries/popup/main.js b/extension/src/entries/popup/main.js index 4a32bb7..a259e63 100644 --- a/extension/src/entries/popup/main.js +++ b/extension/src/entries/popup/main.js @@ -14,19 +14,30 @@ // along with this program. If not, see <https://www.gnu.org/licenses/>. import { createApp } from "vue"; +import { createPinia } from "pinia"; +import { identityPlugin, originPlugin, useBackgroundPiniaPlugin } from '../store' import App from "./App.vue"; import Notifications from "@kyvg/vue3-notification"; import '@fontsource/noto-sans-masaram-gondi' import "~/assets/all.scss"; +import "./local.scss" /* FONT AWESOME CONFIG */ import { library } from '@fortawesome/fontawesome-svg-core' -import { faArrowRightFromBracket, faCopy, faEdit, faGear, faSpinner } from '@fortawesome/free-solid-svg-icons' +import { faArrowRightFromBracket, faCopy, faEdit, faGear, faMinus, faPlus, faSpinner } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' -library.add(faSpinner, faEdit, faGear, faCopy, faArrowRightFromBracket) +library.add(faSpinner, faEdit, faGear, faCopy, faArrowRightFromBracket, faPlus, faMinus) + +const bgPlugin = useBackgroundPiniaPlugin('popup') + +const pinia = createPinia() + .use(bgPlugin) //Add the background pinia plugin + .use(identityPlugin) + .use(originPlugin) createApp(App) .use(Notifications) + .use(pinia) .component('fa-icon', FontAwesomeIcon) .mount("#app"); |