From 709e201fec3033bb133e624b67cfb26961b826a7 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Tue, 7 Feb 2023 16:41:57 +0200
Subject: [PATCH] feat: add UI for blocked/allowed public keys

---
 .../relay-details/relay-details.html          | 88 ++++++++++++++++++-
 .../components/relay-details/relay-details.js | 23 ++++-
 2 files changed, 107 insertions(+), 4 deletions(-)

diff --git a/static/components/relay-details/relay-details.html b/static/components/relay-details/relay-details.html
index 3730477..c108a16 100644
--- a/static/components/relay-details/relay-details.html
+++ b/static/components/relay-details/relay-details.html
@@ -3,7 +3,8 @@
     <q-tab name="info" label="Relay Info"></q-tab>
     <q-tab name="payment" label="Payment"></q-tab>
     <q-tab name="config" label="Config"></q-tab>
-    <q-tab name="access" label="Access Control"></q-tab>
+    <q-tab name="allowed" label="Allowed"></q-tab>
+    <q-tab name="blocked" label="Blocked"></q-tab>
   </q-tabs>
   <q-tab-panels v-model="tab">
     <q-tab-panel name="info">
@@ -156,8 +157,89 @@
     <q-tab-panel name="config">
       <span>zzz</span>
     </q-tab-panel>
-    <q-tab-panel name="access">
-      <span>qqq</span>
+    <q-tab-panel name="allowed">
+      <div v-if="relay">
+        <div class="row items-center no-wrap q-mb-md">
+          <div class="col-3 q-pr-lg">Allowed Public Key</div>
+          <div class="col-7 q-pr-lg">
+            <q-input
+              filled
+              dense
+              v-model.trim="allowedPubkey"
+              type="text"
+            ></q-input>
+          </div>
+          <div class="col-2 q-pr-lg">
+            <q-btn
+              unelevated
+              color="secondary"
+              class="float-right"
+              @click="allowPublicKey()"
+              >Add</q-btn
+            >
+          </div>
+        </div>
+        <div
+          :key="p"
+          v-for="p in relay.config.allowedPublicKeys"
+          class="row q-mb-xs"
+        >
+          <div class="col-3 q-pr-lg"></div>
+          <div class="col-9 q-pr-lg">
+            {{p}}
+            <q-btn
+              size="sm"
+              unelevated
+              color="pink"
+              icon="cancel"
+              class="float-right"
+              @click="deleteAllowedPublicKey(p)"
+            ></q-btn>
+          </div>
+        </div>
+      </div>
+    </q-tab-panel>
+    <q-tab-panel name="blocked">
+      <div v-if="relay">
+        <div class="row items-center no-wrap q-mb-md">
+          <div class="col-3 q-pr-lg">Blocked Public Key</div>
+          <div class="col-7 q-pr-lg">
+            <q-input
+              filled
+              dense
+              v-model.trim="blockedPubkey"
+              type="text"
+            ></q-input>
+          </div>
+          <div class="col-2 q-pr-lg">
+            <q-btn
+              unelevated
+              color="secondary"
+              class="float-right"
+              @click="blockPublicKey()"
+              >Add</q-btn
+            >
+          </div>
+        </div>
+        <div
+          :key="p"
+          v-for="p in relay.config.blockedPublicKeys"
+          class="row q-mb-xs"
+        >
+          <div class="col-3 q-pr-lg"></div>
+          <div class="col-9 q-pr-lg">
+            {{p}}
+            <q-btn
+              unelevated
+              size="sm"
+              color="pink"
+              icon="cancel"
+              class="float-right"
+              @click="deleteBlockedPublicKey(p)"
+            ></q-btn>
+          </div>
+        </div>
+      </div>
     </q-tab-panel>
   </q-tab-panels>
   <div class="row items-center q-mt-md q-mb-lg">
diff --git a/static/components/relay-details/relay-details.js b/static/components/relay-details/relay-details.js
index 9f002c0..09266ec 100644
--- a/static/components/relay-details/relay-details.js
+++ b/static/components/relay-details/relay-details.js
@@ -9,6 +9,8 @@ async function relayDetails(path) {
       return {
         tab: 'info',
         relay: null,
+        blockedPubkey: '',
+        allowedPubkey: '',
         formDialogItem: {
           show: false,
           data: {
@@ -59,7 +61,9 @@ async function relayDetails(path) {
             wallet: '',
             costToJoin: 0,
             freeStorage: 0,
-            storageCostPerKb: 0
+            storageCostPerKb: 0,
+            allowedPublicKeys: [],
+            blockedPublicKeys: []
           }
           this.relay = data
 
@@ -90,6 +94,23 @@ async function relayDetails(path) {
       togglePaidRelay: async function () {
         this.relay.config.wallet =
           this.relay.config.wallet || this.walletOptions[0].value
+      },
+      allowPublicKey: function () {
+        this.relay.config.allowedPublicKeys.push(this.allowedPubkey)
+        this.allowedPubkey = ''
+      },
+      blockPublicKey: function () {
+        this.relay.config.blockedPublicKeys.push(this.blockedPubkey)
+        this.blockedPubkey = ''
+      },
+      deleteAllowedPublicKey: function (pubKey) {
+        this.relay.config.allowedPublicKeys =
+          this.relay.config.allowedPublicKeys.filter(p => p !== pubKey)
+      },
+
+      deleteBlockedPublicKey: function (pubKey) {
+        this.relay.config.blockedPublicKeys =
+          this.relay.config.blockedPublicKeys.filter(p => p !== pubKey)
       }
     },