alllowed sites UI

Shared (Extension)/Resources/nostr.js

@@ -1,5 +1,3 @@
-console.log("hello from nostr module");
-
 window.nostr = {
     async getPublicKey() {
         console.log("getting public key!");

Shared (Extension)/Resources/popup.css

@@ -9,6 +9,10 @@ body {
     font-family: system-ui;
 }
 
+#priv-key {
+    font-family: monospace;
+}
+
 .profiles label {
     width: 80px;
     display: inline-block;
@@ -22,4 +26,20 @@ body {
     margin-bottom: 15px;
 }
 
+.buttons {
+    margin-bottom: 15px;
+}
+
+td:first-child {
+    width: 50px;
+}
+
+td:nth-child(2) {
+    width: 100px;
+}
+
+tr {
+    margin-bottom: 10px;
+}
+
 /* @media (prefers-color-scheme: dark) {} */

Shared (Extension)/Resources/popup.html

@@ -17,12 +17,25 @@
 
     <div class="key">
         <label for="priv-key">Private Key</label>
-        <input x-model="privKey" :type="visibleKey ? 'text' : 'password'">
+        <input id="priv-key" x-model="privKey" :type="visibleKey ? 'text' : 'password'" width="65">
     </div>
 
     <div class="buttons">
         <button @click="visibleKey = !visibleKey" x-text="visibleKey ? 'Hide' : 'Show'"></button>
         <button @click="saveKey()">Save</button>
     </div>
+
+    <div class="allowed-sites" x-show="allowedSites.length > 0">
+        <h3>Allowed Sites</h3>
+        <table>
+            <template x-for="(site, index) in allowedSites" :key="site.site">
+                <tr>
+                    <td class="allowed" x-text="site.allowed ? 'Yes' : 'No'"></td>
+                    <td x-text="site.site"></td>
+                    <td><button @click="deleteSite(index)">Delete</button></td>
+                </tr>
+            </template>
+        </table>
+    </div>
 </body>
 </html>

Shared (Extension)/Resources/popup.js

@@ -6,10 +6,12 @@ Alpine.data('popup', () => ({
     profiles: [],
     profile: '',
     visibleKey: false,
+    allowedSites: [],
 
     async init() {
         await this.getProfiles();
         await this.getPrivKeyForProfile();
+        await this.getAllowedSites();
     },
 
     saveKey() {
@@ -23,6 +25,19 @@ Alpine.data('popup', () => ({
 
     async getPrivKeyForProfile() {
         this.privKey = this.profile;
+    },
+
+    async getAllowedSites() {
+        this.allowedSites = [
+            {site: 'yosupp.app', allowed: true},
+            {site: 'iris.to', allowed: false},
+        ];
+    },
+
+    async deleteSite(index) {
+        let newSites = [...this.allowedSites];
+        newSites.splice(index, 1);
+        this.allowedSites = newSites;
     }
 }));