Validation for relay URL entry.

Shared (Extension)/Resources/options.build.css

@@ -637,6 +637,11 @@ video {
   color: rgb(232 121 249 / var(--tw-text-opacity));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);

Shared (Extension)/Resources/options.html

@@ -39,7 +39,8 @@
     </template>
   </table>
 
-  <input x-model="newRelay" type="text"> <button @click="await addRelay()">Add</button>
+  <input x-model="newRelay" type="text" @keyup.enter="await addRelay()"> <button @click="await addRelay()">Add</button>
+  <div class="text-red-500 font-bold" x-show="urlError.length > 0" x-text="urlError"></div>
 
 </body>
 

Shared (Extension)/Resources/options.js

@@ -6,6 +6,7 @@ Alpine.data('options', () => ({
     profileIndex: 0,
     relays: [],
     newRelay: '',
+    urlError: '',
 
     async init() {
         await this.getProfileNames();
@@ -35,17 +36,38 @@ Alpine.data('options', () => ({
             payload: [this.profileIndex, this.relays],
         });
         await this.getRelaysForProfile();
+        this.newRelay = '';
     },
 
     async addRelay() {
-        this.relays.push({ url: this.newRelay, read: true, write: true });
+        try {
-        await this.saveRelaysForProfile();
+            let url = new URL(this.newRelay);
+            if (url.protocol !== 'wss:') {
+                this.setUrlError('Must be a websocket url');
+            }
+            let urls = this.relays.map(v => v.url);
+            if (urls.includes(url.href)) {
+                this.setUrlError('URL already exists');
+                return;
+            }
+            this.relays.push({ url: url.href, read: true, write: true });
+            await this.saveRelaysForProfile();
+        } catch (error) {
+            this.setUrlError('Invalid websocket URL');
+        }
     },
 
     async deleteRelay(index) {
         this.relays.splice(index, 1);
         await this.saveRelaysForProfile();
     },
+
+    setUrlError(message) {
+        this.urlError = message;
+        setTimeout(() => {
+            this.urlError = '';
+        }, 3000);
+    },
 }));
 
 Alpine.start();