diff options
author | vnugent <public@vaughnnugent.com> | 2023-10-03 22:44:31 -0400 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2023-10-03 22:44:31 -0400 |
commit | 8f75b74c1cdc7a9bd4a29392b481b8902eafba53 (patch) | |
tree | 1172761360c7b003d5a3f254e274b3597b0f7fa4 /extension/src/entries | |
parent | cc3c808fbb83ad54691046e2d30211d25fc10cbb (diff) |
tiny ui updates & backend lib patches
Diffstat (limited to 'extension/src/entries')
-rw-r--r-- | extension/src/entries/background/server-api/endpoints.ts | 6 | ||||
-rw-r--r-- | extension/src/entries/background/server-api/index.ts | 17 | ||||
-rw-r--r-- | extension/src/entries/contentScript/primary/main.js | 2 | ||||
-rw-r--r-- | extension/src/entries/options/App.vue | 20 | ||||
-rw-r--r-- | extension/src/entries/options/components/Identities.vue | 100 | ||||
-rw-r--r-- | extension/src/entries/options/components/SiteSettings.vue | 84 | ||||
-rw-r--r-- | extension/src/entries/options/index.html | 2 | ||||
-rw-r--r-- | extension/src/entries/options/main.js | 6 | ||||
-rw-r--r-- | extension/src/entries/popup/Components/IdentitySelection.vue | 2 | ||||
-rw-r--r-- | extension/src/entries/popup/Components/Login.vue | 2 | ||||
-rw-r--r-- | extension/src/entries/popup/Components/PageContent.vue | 4 | ||||
-rw-r--r-- | extension/src/entries/popup/main.js | 2 |
12 files changed, 128 insertions, 119 deletions
diff --git a/extension/src/entries/background/server-api/endpoints.ts b/extension/src/entries/background/server-api/endpoints.ts index a7f1488..b27bfa9 100644 --- a/extension/src/entries/background/server-api/endpoints.ts +++ b/extension/src/entries/background/server-api/endpoints.ts @@ -20,7 +20,7 @@ import { Method } from "axios"; export interface EndpointDefinition { readonly method: Method path(request?: any): string - onRequest: (request?: any) => Promise<any> + onRequest: (...request: any) => Promise<any> onResponse: (response: any, request?: any) => Promise<any> } @@ -42,7 +42,7 @@ export const initEndponts = () => { return endpoints.get(id); } - const execRequest = async <T>(id: string, request?: any): Promise<T> => { + const execRequest = async <T>(id: string, ...request: any): Promise<T> => { const endpoint = getEndpoint(id); if (!endpoint) { throw new Error(`Endpoint ${id} not found`); @@ -52,7 +52,7 @@ export const initEndponts = () => { const path = endpoint.path(request); //Execute the request handler - const req = await endpoint.onRequest(request); + const req = await endpoint.onRequest(...request); //Get axios const axios = useAxios(null); diff --git a/extension/src/entries/background/server-api/index.ts b/extension/src/entries/background/server-api/index.ts index 3e1ada0..ee6582d 100644 --- a/extension/src/entries/background/server-api/index.ts +++ b/extension/src/entries/background/server-api/index.ts @@ -15,9 +15,10 @@ import { Ref } from "vue" +import { get } from '@vueuse/core' import { WebMessage } from "@vnuge/vnlib.browser" import { initEndponts } from "./endpoints" -import { NostrEvent, NostrPubKey, NostrRelay } from "../types" +import { NostrEvent } from "../types" export enum Endpoints { GetKeys = 'getKeys', @@ -35,7 +36,7 @@ export const initApi = (nostrUrl: Ref<string>) => { registerEndpoint({ id: Endpoints.GetKeys, method: 'GET', - path: () => `${nostrUrl.value}?type=getKeys`, + path: () => `${get(nostrUrl)}?type=getKeys`, onRequest: () => Promise.resolve(), onResponse: (response) => Promise.resolve(response) }) @@ -43,7 +44,7 @@ export const initApi = (nostrUrl: Ref<string>) => { registerEndpoint({ id: Endpoints.DeleteKey, method: 'DELETE', - path: (key: NostrPubKey) => `${nostrUrl.value}?type=identity&key_id=${key.Id}`, + path: ([key]) => `${get(nostrUrl)}?type=identity&key_id=${key.Id}`, onRequest: () => Promise.resolve(), onResponse: (response: WebMessage) => response.getResultOrThrow() }) @@ -51,8 +52,8 @@ export const initApi = (nostrUrl: Ref<string>) => { registerEndpoint({ id: Endpoints.SignEvent, method: 'POST', - path: () => `${nostrUrl.value}?type=signEvent`, - onRequest: (event: NostrEvent) => Promise.resolve(event), + path: () => `${get(nostrUrl)}?type=signEvent`, + onRequest: ([event]) => Promise.resolve(event), onResponse: async (response: WebMessage<NostrEvent>) => { return response.getResultOrThrow() } @@ -61,7 +62,7 @@ export const initApi = (nostrUrl: Ref<string>) => { registerEndpoint({ id: Endpoints.GetRelays, method: 'GET', - path: () => `${nostrUrl.value}?type=getRelays`, + path: () => `${get(nostrUrl)}?type=getRelays`, onRequest: () => Promise.resolve(), onResponse: (response) => Promise.resolve(response) }) @@ -69,8 +70,8 @@ export const initApi = (nostrUrl: Ref<string>) => { registerEndpoint({ id: Endpoints.SetRelay, method: 'POST', - path: () => `${nostrUrl.value}?type=relay`, - onRequest: (relay: NostrRelay) => Promise.resolve(relay), + path: () => `${get(nostrUrl)}?type=relay`, + onRequest: ([relay]) => Promise.resolve(relay), onResponse: (response) => Promise.resolve(response) }) diff --git a/extension/src/entries/contentScript/primary/main.js b/extension/src/entries/contentScript/primary/main.js index 24ef4ef..047d0e9 100644 --- a/extension/src/entries/contentScript/primary/main.js +++ b/extension/src/entries/contentScript/primary/main.js @@ -21,7 +21,7 @@ import Notification from '@kyvg/vue3-notification' import '@fontsource/noto-sans-masaram-gondi' //We need inline styles to inject into the shadow dom -import tw from "~/assets/tailwind.scss?inline"; +import tw from "~/assets/all.scss?inline"; import localStyle from './style.scss?inline' renderContent([], (appRoot, shadowRoot) => { diff --git a/extension/src/entries/options/App.vue b/extension/src/entries/options/App.vue index f22feb0..f55b73b 100644 --- a/extension/src/entries/options/App.vue +++ b/extension/src/entries/options/App.vue @@ -3,25 +3,25 @@ <notifications class="toaster" group="form" position="top-right" /> - <div class="container flex w-full p-4 mx-auto mt-8 text-gray-800 dark:text-gray-200"> + <div class="container flex w-full p-4 mx-auto mt-8 text-black dark:text-white"> <div class="w-full max-w-4xl mx-auto"> <div class=""> - <h3>NVault</h3> + <h2>NVault</h2> </div> <TabGroup :selected-index="selectedTab" @change="id => selectedTab = id" > <TabList class="flex gap-3 pb-2 border-b border-gray-300 dark:border-dark-500"> <Tab v-slot="{ selected }"> - <button class="border-b-2" :class="[selected ? 'border-primary-500' : 'border-transparent']"> + <button class="tab-title" :class="{ selected }"> Identities </button> </Tab> <Tab v-slot="{ selected }"> - <button class="border-b-2" :class="[selected ? 'border-primary-500' : 'border-transparent']"> + <button class="tab-title" :class="{ selected }"> Privacy </button> </Tab> <Tab v-slot="{ selected }"> - <button class="border-b-2" :class="[selected ? 'border-primary-500' : 'border-transparent']"> + <button class="tab-title" :class="{ selected }"> Settings </button> </Tab> @@ -82,7 +82,7 @@ <div class="flex flex-col w-full max-w-md mx-auto mt-3"> <div class=""> <div class="text-sm">User Name</div> - <input class="w-full primary" type="text" v-model="keyBuffer.UserName"/> + <input class="w-full input" type="text" v-model="keyBuffer.UserName"/> </div> <div class="gap-2 my-3 ml-auto"> <button class="rounded btn sm primary" @click="onUpdate">Update</button> @@ -187,6 +187,14 @@ main { max-width: 230px; } +.tab-title{ + @apply border-b-2 border-transparent dark:text-gray-200; + + &.selected{ + @apply dark:border-gray-200 border-black; + } +} + .id-card{ @apply flex md:flex-row flex-col gap-2 p-3 text-sm duration-75 ease-in-out border-2 rounded-lg shadow-md cursor-pointer; @apply bg-white dark:bg-dark-700 border-gray-200 hover:border-gray-400 dark:border-dark-500 hover:dark:border-dark-200; diff --git a/extension/src/entries/options/components/Identities.vue b/extension/src/entries/options/components/Identities.vue index c86a6ac..d7fd75d 100644 --- a/extension/src/entries/options/components/Identities.vue +++ b/extension/src/entries/options/components/Identities.vue @@ -1,6 +1,6 @@ <template> <div class="sm:px-3"> - <div class="flex justify-end gap-2"> + <div class="flex justify-end gap-2 text-black dark:text-white"> <div class=""> <div class=""> <button class="rounded btn sm" @click="onNip05Download"> @@ -11,24 +11,26 @@ </div> <div class="mb-2"> <Popover class="relative" v-slot="{ open }"> - <PopoverButton class="rounded btn primary sm">Create</PopoverButton> - <PopoverOverlay v-if="open" class="fixed inset-0 bg-black opacity-30" /> - <PopoverPanel class="absolute z-10 mt-2 md:-left-12" v-slot="{ close }"> - <div class="p-4 bg-white border border-gray-200 rounded-md shadow-lg dark:border-dark-300 dark:bg-dark-700"> - <div class="text-sm w-72"> + <PopoverButton class="rounded btn sm">Create</PopoverButton> + <PopoverOverlay v-if="open" class="fixed inset-0 bg-black opacity-50" /> + <PopoverPanel class="absolute z-10 mt-2 md:-right-0" v-slot="{ close }"> + <div class="p-3 bg-white border border-gray-200 rounded shadow-lg dark:border-dark-600 dark:bg-dark-900"> + <div class="text-sm w-80"> <form @submit.prevent="e => onCreate(e, close)"> - Create new nostr identity - <div class="mt-2"> - <input class="w-full primary" type="text" name="username" placeholder="User Name"/> + <span class="text-lg dark:text-gray-200"> + Create keypair + </span> + <div class="mt-4"> + <input class="w-full rounded input" type="text" name="username" placeholder="username"/> </div> - <div class="mt-2"> - <input class="w-full primary" type="text" name="key" placeholder="Existing key?"/> - <div class="p-1.5 text-xs text-gray-600 dark:text-gray-300"> + <div class="mt-3"> + <input class="w-full rounded input" type="text" name="key" placeholder="Existing secret key?"/> + <div class="p-1.5 text-xs text-gray-600 dark:text-gray-400"> Optional, hexadecimal private key (64 characters) </div> </div> <div class="flex justify-end mt-2"> - <button class="rounded btn sm primary" type="submit">Create</button> + <button class="rounded sm btn" type="submit">Create</button> </div> </form> </div> @@ -38,47 +40,38 @@ </div> </div> <div v-for="key in allKeys" :key="key" class="mt-2 mb-3"> - <div class="id-card" :class="{'selected': isSelected(key)}" @click.self="selectKey(key)"> + <div class="" :class="{'selected': isSelected(key)}" @click.self="selectKey(key)"> - <div class="flex flex-col min-w-0" @click="selectKey(key)"> - <div class="py-2"> - - <table class="w-full text-sm text-left border-collapse"> - <thead class=""> - <tr> - <th scope="col" class="p-2 font-medium">Nip 05</th> - <th scope="col" class="p-2 font-medium">Modified</th> - <th scope="col" class="p-2 font-medium"></th> - </tr> - </thead> - <tbody class="border-t border-gray-100 divide-y divide-gray-100 dark:border-dark-500 dark:divide-dark-500"> - <tr> - <th class="p-2 font-medium">{{ key.UserName }}</th> - <td class="p-2">{{ prettyPrintDate(key) }}</td> - <td class="flex justify-end p-2 ml-auto text-sm font-medium"> - <div class="ml-auto button-group"> - <button class="btn sm borderless" @click="copy(key.PublicKey)"> - <fa-icon icon="copy"/> - </button> - <button class="btn sm borderless" @click="editKey(key)"> - <fa-icon icon="edit"/> - </button> - <button class="btn sm red borderless" @click="onDeleteKey(key)"> - <fa-icon icon="trash" /> - </button> - </div> - </td> - </tr> - </tbody> - </table> - - </div> - <div class="py-2 overflow-hidden border-gray-500 border-y dark:border-dark-500 text-ellipsis"> - <span class="font-semibold">pub:</span> - <span class="ml-1">{{ key.PublicKey }}</span> + <div class="mb-8"> + <div class="cursor-pointer w-fit" @click="selectKey(key)"> + <h3 :class="[ isSelected(key) ? 'underline' : 'dark:hover:text-gray-300 hover:text-gray-700']" class="duration-100 ease-out"> + {{ key.UserName }} + </h3> </div> - <div class="py-2"> - <strong>Id:</strong> {{ key.Id }} + <div class="mt-3"> + <p class="text-xs text-gray-700 truncate dark:text-gray-300"> + {{ key.PublicKey }} + </p> + <div class="flex flex-row gap-3 mt-1 text-xs text-gray-600 dark:text-gray-500"> + <div class=""> + {{ prettyPrintDate(key) }} + </div> + <div class=""> + <button class="text-red-700" @click="onDeleteKey(key)"> + Delete + </button> + </div> + <div class=""> + <button class="" @click="editKey(key)"> + Edit + </button> + </div> + <div class=""> + <button class="" @click="copy(key.PublicKey)"> + Copy + </button> + </div> + </div> </div> </div> </div> @@ -94,7 +87,8 @@ import { ref, toRefs } from "vue"; import { Popover, PopoverButton, - PopoverPanel + PopoverPanel, + PopoverOverlay } from '@headlessui/vue' import { apiCall, configureNotifier } from '@vnuge/vnlib.browser'; import { useManagment, useStatus } from '~/bg-api/options.ts'; diff --git a/extension/src/entries/options/components/SiteSettings.vue b/extension/src/entries/options/components/SiteSettings.vue index eafe8f3..01d3eac 100644 --- a/extension/src/entries/options/components/SiteSettings.vue +++ b/extension/src/entries/options/components/SiteSettings.vue @@ -8,32 +8,51 @@ </h3> <div class="my-6"> <fieldset :disabled="waiting"> - <div class="w-full"> - <div class="flex flex-row justify-between"> - <label class="mr-2">Always on NIP-07</label> + <div class=""> + <div class="w-full"> + <div class="flex flex-row w-full"> + <Switch + v-model="buffer.autoInject" + :class="buffer.autoInject ? 'bg-black dark:bg-gray-50' : 'bg-gray-200 dark:bg-dark-600'" + class="relative inline-flex items-center h-5 rounded-full w-11" + > + <span class="sr-only">NIP-07</span> + <span + :class="buffer.autoInject ? 'translate-x-6' : 'translate-x-1'" + class="inline-block w-4 h-4 transition transform bg-white rounded-full dark:bg-dark-900" + /> + </Switch> + <div class="my-auto ml-2 text-sm dark:text-gray-200"> + Always on NIP-07 + </div> + </div> + </div> + </div> + + <div class="mt-3"> + <div class="flex flex-row w-fit"> <Switch - v-model="buffer.autoInject" - :class="buffer.autoInject ? 'bg-primary-500 dark:bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'" - class="relative inline-flex items-center h-6 ml-auto rounded-full w-11" + v-model="v$.heartbeat.$model" + :class="v$.heartbeat.$model ? 'bg-black dark:bg-white' : 'bg-gray-200 dark:bg-dark-600'" + class="relative inline-flex items-center h-5 mx-auto rounded-full w-11" > - <span class="sr-only">NIP-07</span> + <span class="sr-only">Stay logged in</span> <span - :class="buffer.autoInject ? 'translate-x-6' : 'translate-x-1'" - class="inline-block w-4 h-4 transition transform bg-white rounded-full" + :class="v$.heartbeat.$model ? 'translate-x-6' : 'translate-x-1'" + class="inline-block w-4 h-4 transition transform rounded-full bg-gray-50 dark:bg-dark-900" /> </Switch> + <div class="my-auto ml-2 text-sm dark:text-gray-200"> + Stay logged-in + </div> </div> </div> - <p class="mt-1 text-xs"> - Enable auto injection of <code>window.nostr</code> support to all websites. Sites may be able to - track you if you enable this feature. - </p> </fieldset> </div> <h3 class="text-center"> Server settings </h3> - <p class="text-sm"> + <p class="text-xs dark:text-gray-400"> You must be careful when editing these settings as you may loose connection to your vault server if you input the wrong values. </p> @@ -52,43 +71,25 @@ </div> <fieldset :disabled="waiting || !editMode"> <div class="pl-1 mt-2"> - <div class="flex flex-row w-full"> - <div> - <label class="mb-2">Stay logged in</label> - <Switch - v-model="v$.heartbeat.$model" - :class="v$.heartbeat.$model ? 'bg-primary-500 dark:bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'" - class="relative inline-flex items-center h-6 mx-auto rounded-full w-11" - > - <span class="sr-only">Stay logged in</span> - <span - :class="v$.heartbeat.$model ? 'translate-x-6' : 'translate-x-1'" - class="inline-block w-4 h-4 transition transform bg-white rounded-full" - /> - </Switch> - </div> - <div class="my-auto text-xs"> - Enables keepalive messages to regenerate credentials when they expire - </div> - </div> + </div> <div class="mt-2"> <label class="pl-1">BaseUrl</label> - <input class="w-full primary" v-model="v$.apiUrl.$model" :class="{'error': v$.apiUrl.$invalid }" /> + <input class="w-full input" v-model="v$.apiUrl.$model" :class="{'error': v$.apiUrl.$invalid }" /> <p class="pl-1 mt-1 text-xs text-red-500"> * The http path to the vault server (must start with http:// or https://) </p> </div> <div class="mt-2"> <label class="pl-1">Account endpoint</label> - <input class="w-full primary" v-model="v$.accountBasePath.$model" :class="{ 'error': v$.accountBasePath.$invalid }" /> + <input class="w-full input" v-model="v$.accountBasePath.$model" :class="{ 'error': v$.accountBasePath.$invalid }" /> <p class="pl-1 mt-1 text-xs text-red-500"> * This is the path to the account server endpoint (must start with /) </p> </div> <div class="mt-2"> <label class="pl-1">Nostr endpoint</label> - <input class="w-full primary" v-model="v$.nostrEndpoint.$model" :class="{ 'error': v$.nostrEndpoint.$invalid }" /> + <input class="w-full input" v-model="v$.nostrEndpoint.$model" :class="{ 'error': v$.nostrEndpoint.$invalid }" /> <p class="pl-1 mt-1 text-xs text-red-500"> * This is the path to the Nostr plugin endpoint path (must start with /) </p> @@ -155,6 +156,7 @@ const editMode = ref(false); const toggleEdit = useToggle(editMode); const autoInject = computed(() => buffer.autoInject) +const heartbeat = computed(() => buffer.heartbeat) const onSave = async () => { @@ -217,16 +219,20 @@ const testConnection = async () =>{ const loadConfig = async () => { const config = await getSiteConfig(); apply(config); +} + +const init = async () => { + await loadConfig(); //Watch for changes to autoinject value and publish changes when it does - watchDebounced(autoInject, publishConfig, { debounce: 500 }) + watchDebounced(autoInject, publishConfig, { debounce: 500, immediate: false }) + watchDebounced(heartbeat, publishConfig, { debounce: 500, immediate: false }) } //If edit mode is toggled off, reload config watch(editMode, v => v ? null : loadConfig()); - -loadConfig(); +init(); </script> diff --git a/extension/src/entries/options/index.html b/extension/src/entries/options/index.html index 72f2de7..976e7ea 100644 --- a/extension/src/entries/options/index.html +++ b/extension/src/entries/options/index.html @@ -10,7 +10,7 @@ @apply bg-dark-900; } body{ - @apply bg-gray-50; + @apply bg-white; } </style> </head> diff --git a/extension/src/entries/options/main.js b/extension/src/entries/options/main.js index 92a4868..b9892ba 100644 --- a/extension/src/entries/options/main.js +++ b/extension/src/entries/options/main.js @@ -17,15 +17,15 @@ import { createApp } from "vue"; import App from "./App.vue"; import '@fontsource/noto-sans-masaram-gondi' -import "~/assets/tailwind.scss"; +import "~/assets/all.scss"; import Notifications from "@kyvg/vue3-notification"; /* FONT AWESOME CONFIG */ import { library } from '@fortawesome/fontawesome-svg-core' -import { faChevronLeft, faCopy, faDownload, faEdit, faExternalLinkAlt, faLock, faLockOpen, faMoon, faSun, faTrash } from '@fortawesome/free-solid-svg-icons' +import { faChevronLeft, faChevronRight, faCopy, faDownload, faEdit, faExternalLinkAlt, faLock, faLockOpen, faMoon, faSun, faTrash } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' -library.add(faCopy, faEdit, faChevronLeft, faMoon, faSun, faLock, faLockOpen, faExternalLinkAlt, faTrash, faDownload) +library.add(faCopy, faEdit, faChevronLeft, faMoon, faSun, faLock, faLockOpen, faExternalLinkAlt, faTrash, faDownload, faChevronRight) createApp(App) .use(Notifications) diff --git a/extension/src/entries/popup/Components/IdentitySelection.vue b/extension/src/entries/popup/Components/IdentitySelection.vue index d95dedb..d1a7333 100644 --- a/extension/src/entries/popup/Components/IdentitySelection.vue +++ b/extension/src/entries/popup/Components/IdentitySelection.vue @@ -2,7 +2,7 @@ <div class="px-3 text-left"> <div class="w-full"> <div class=""> - <select class="w-full primary" + <select class="w-full input" :disabled="waiting" :value="selected?.Id" @change.prevent="onSelected" diff --git a/extension/src/entries/popup/Components/Login.vue b/extension/src/entries/popup/Components/Login.vue index 495b64e..c863430 100644 --- a/extension/src/entries/popup/Components/Login.vue +++ b/extension/src/entries/popup/Components/Login.vue @@ -3,7 +3,7 @@ <form class="" @submit.prevent="onSubmit"> <fieldset class="px-4 input-container"> <label class="">Please enter your authentication token</label> - <textarea class="w-full primary" v-model="token" rows="5"> + <textarea class="w-full input" v-model="token" rows="5"> </textarea> </fieldset> <div class="flex justify-end mt-2"> diff --git a/extension/src/entries/popup/Components/PageContent.vue b/extension/src/entries/popup/Components/PageContent.vue index c9b2d5f..eda9bab 100644 --- a/extension/src/entries/popup/Components/PageContent.vue +++ b/extension/src/entries/popup/Components/PageContent.vue @@ -5,8 +5,8 @@ > <div class="flex flex-row w-full px-1 pl-4"> - <div class="flex-auto my-auto font-mono text-sm"> - A nostr credential vault + <div class="flex-auto my-auto"> + <h3>NVault</h3> </div> <div class="my-auto" v-if="loggedIn"> <button class="rounded btn sm red" @click.prevent="logout"> diff --git a/extension/src/entries/popup/main.js b/extension/src/entries/popup/main.js index d9101ab..4a32bb7 100644 --- a/extension/src/entries/popup/main.js +++ b/extension/src/entries/popup/main.js @@ -17,7 +17,7 @@ import { createApp } from "vue"; import App from "./App.vue"; import Notifications from "@kyvg/vue3-notification"; import '@fontsource/noto-sans-masaram-gondi' -import "~/assets/tailwind.scss"; +import "~/assets/all.scss"; /* FONT AWESOME CONFIG */ import { library } from '@fortawesome/fontawesome-svg-core' |