diff --git a/Shared (Extension)/Resources/options.build.css b/Shared (Extension)/Resources/options.build.css index 1ddc0a7..a93cc67 100644 --- a/Shared (Extension)/Resources/options.build.css +++ b/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); diff --git a/Shared (Extension)/Resources/options.html b/Shared (Extension)/Resources/options.html index 20643be..5931873 100644 --- a/Shared (Extension)/Resources/options.html +++ b/Shared (Extension)/Resources/options.html @@ -39,7 +39,8 @@ - + +
diff --git a/Shared (Extension)/Resources/options.js b/Shared (Extension)/Resources/options.js index 64c0bc2..b636922 100644 --- a/Shared (Extension)/Resources/options.js +++ b/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 }); - await this.saveRelaysForProfile(); + try { + 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();