improve relay management on settings page.

quasar.conf.js

@@ -114,7 +114,7 @@ module.exports = configure(function (ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ['Notify']
+      plugins: ['Notify', 'Dialog']
     }
   }
 })

src/pages/Settings.vue

@@ -29,45 +29,66 @@
     <q-separator />
     <div class="my-8">
       <div class="text-lg p-4">Relays</div>
+      <q-list class="mb-3" dense>
+        <q-item v-for="(opts, url) in $store.state.relays" :key="url">
+          <q-item-section class="text-slate-800">
+            <div class="flex-inline">
+              <q-btn
+                round
+                flat
+                color="red-10"
+                icon="cancel"
+                size="xs"
+                @click="removeRelay(url)"
+              />
+              {{ url }}
+            </div>
+          </q-item-section>
+          <q-item-section side>
+            <div class="flex-inline">
+              <span
+                class="cursor-pointer tracking-wide"
+                :class="{'font-bold': opts.read, 'text-secondary': opts.read}"
+                @click="setRelayOpt(url, 'read', !opts.read)"
+              >
+                read
+              </span>
+              <span
+                class="cursor-pointer tracking-wide"
+                :class="{'font-bold': opts.write, 'text-secondary': opts.write}"
+                @click="setRelayOpt(url, 'write', !opts.write)"
+              >
+                write
+              </span>
+            </div>
+          </q-item-section>
+        </q-item>
+      </q-list>
       <q-form @submit="addRelay">
-        <div>
-          <q-input
-            v-model="addingRelay"
-            filled
-            type="textarea"
-            autogrow
-            label="Add a relay"
-          >
-            <template #append>
-              <q-btn label="Add" type="submit" color="primary" class="ml-3" />
-            </template>
-          </q-input>
-        </div>
-      </q-form>
-
-      <q-form class="mt-3" @submit="removeRelay">
-        <q-select
-          v-model="removingRelay"
+        <q-input
+          v-model="addingRelay"
+          class="mx-3"
           filled
-          :options="Object.keys($store.state.relays)"
-          label="Remove a relay"
+          dense
+          label="Add a relay"
         >
           <template #append>
-            <q-btn label="Remove" type="submit" color="primary" />
+            <q-btn
+              label="Add"
+              type="submit"
+              color="primary"
+              class="ml-3"
+              @click="addRelay"
+            />
           </template>
-        </q-select>
+        </q-input>
       </q-form>
     </div>
 
     <q-separator />
 
     <div class="my-8">
-      <div class="text-lg p-4">Other</div>
-      <q-btn
-        label="Delete Local Storage"
-        color="primary"
-        @click="deleteAccDialog = true"
-      />
+      <q-btn label="Delete Local Storage" color="primary" @click="hardReset" />
       <q-btn
         class="q-ml-md"
         label="View your keys"
@@ -113,25 +134,11 @@
         </q-card-actions>
       </q-card>
     </q-dialog>
-
-    <q-dialog v-model="deleteAccDialog">
-      <q-card style="min-width: 350px">
-        <q-card-section>
-          <div class="text-h6">Are you sure?</div>
-          <p>Deleting storage will remove all traces of this account!</p>
-        </q-card-section>
-
-        <q-card-actions align="right" class="text-primary">
-          <q-btn v-close-popup flat label="Cancel" />
-          <q-btn flat label="Yes, delete storage" @click="hardReset" />
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
   </q-page>
 </template>
 
 <script>
-import {LocalStorage, copyToClipboard} from 'quasar'
+import {LocalStorage} from 'quasar'
 
 import helpersMixin from '../utils/mixin'
 import {db} from '../db'
@@ -143,9 +150,7 @@ export default {
     const {name, picture, about} = this.$store.state.me
 
     return {
-      deleteAccDialog: false,
       keysDialog: false,
-      removingRelay: '',
       addingRelay: '',
       metadata: {
         name,
@@ -158,29 +163,36 @@ export default {
     setMetadata() {
       this.$store.dispatch('setMetadata', this.metadata)
     },
-    copyToClip(text) {
-      copyToClipboard(text)
-        .then(() => {
-          this.$q.notify({
-            message: 'COPIED'
-          })
-        })
-        .catch(() => {
-          this.$q.notify({type: 'negative', message: 'FAILED'})
-        })
-    },
     addRelay() {
       this.$store.commit('addRelay', this.addingRelay)
       this.addingRelay = ''
     },
-    removeRelay() {
-      this.$store.commit('removeRelay', this.removingRelay)
-      this.removingRelay = ''
+    removeRelay(url) {
+      this.$q
+        .dialog({
+          title: 'Are you sure?',
+          message: `Do you really want to remove ${url} from the list of relays?`,
+          cancel: true
+        })
+        .onOk(() => {
+          this.$store.commit('removeRelay', url)
+        })
+    },
+    setRelayOpt(url, opt, value) {
+      this.$store.commit('setRelayOpt', {url, opt, value})
     },
     async hardReset() {
-      LocalStorage.clear()
-      await db.destroy()
-      window.location.reload()
+      this.$q
+        .dialog({
+          title: 'Are you sure?',
+          message: 'Do you really want to delete all data from this device?',
+          cancel: true
+        })
+        .onOk(async () => {
+          LocalStorage.clear()
+          await db.destroy()
+          window.location.reload()
+        })
     }
   }
 }

src/store/mutations.js

@@ -1,4 +1,5 @@
 import {getPublicKey} from 'nostr-tools'
+import {normalizeRelayURL} from 'nostr-tools/relay'
 import {
   generateSeedWords,
   seedFromWords,
@@ -27,6 +28,13 @@ export function setMetadata(state, {name, picture, about}) {
 }
 
 export function addRelay(state, url) {
+  try {
+    normalizeRelayURL(url)
+    new URL(url)
+  } catch (err) {
+    return
+  }
+
   state.relays[url] = {
     read: true,
     write: true
@@ -37,6 +45,12 @@ export function removeRelay(state, url) {
   delete state.relays[url]
 }
 
+export function setRelayOpt(state, {url, opt, value}) {
+  if (url in state.relays) {
+    state.relays[url][opt] = value
+  }
+}
+
 export function follow(state, key) {
   if (state.keys.pub === key) return
   if (state.following.includes(key)) return

src/store/storage.js

@@ -11,6 +11,7 @@ export default function (store) {
         break
       case 'addRelay':
       case 'removeRelay':
+      case 'setRelayOpt':
         LocalStorage.set('relays', state.relays)
         break
       case 'follow':