From 8b72093b3f64a0036fe7aab05e1e93fca171e291 Mon Sep 17 00:00:00 2001
From: ItsOnlyBinary <git@itsonlybinary.com>
Date: Mon, 7 Dec 2020 16:55:26 +0000
Subject: [PATCH 1/2] Add support for infoBackground with a base url for
 proxy/cache

---
 src/App.vue                      |  1 +
 src/components/StartupScreen.vue | 28 ++++++++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 38d7f01..3268c9a 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,6 +66,7 @@ const data = new Vue({
             iframeSnippet: '',
             saving: false,
             networkType: 'default',
+            baseBackgroundUrl: 'http://127.0.0.1:8088/image-cache/x1000/',
         };
     },
 });
diff --git a/src/components/StartupScreen.vue b/src/components/StartupScreen.vue
index 7e19cf5..13fd41f 100755
--- a/src/components/StartupScreen.vue
+++ b/src/components/StartupScreen.vue
@@ -70,6 +70,16 @@
                     >
                 </div>
             </div>
+            <div class="input-column">
+                <label for="welcome-background">Background URL</label>
+                <input
+                    id="welcome-background"
+                    v-model="startupBackground"
+                    type="text"
+                    @change="update"
+                    @keyup="update"
+                >
+            </div>
         </div>
     <!--
     <div v-for="field in ZNCfields" :key="field">
@@ -119,6 +129,23 @@ function infoContent(defaultVal) {
     };
 }
 
+function infoBackground(defaultVal) {
+    return {
+        get() {
+            const baseBackgroundUrl = this.localData.baseBackgroundUrl;
+            const startupOptions = this.localData.config.startupOptions;
+            return startupOptions.infoBackground === undefined ?
+                defaultVal :
+                startupOptions.infoBackground.replace(baseBackgroundUrl, '');
+        },
+        set(newVal) {
+            const baseBackgroundUrl = this.localData.baseBackgroundUrl;
+            const startupOptions = this.localData.config.startupOptions;
+            this.$set(startupOptions, 'infoBackground', baseBackgroundUrl + newVal);
+        },
+    };
+}
+
 export default {
     name: 'StartupScreen',
     props: ['localData'],
@@ -129,6 +156,7 @@ export default {
         startupShowChannel: startupOption('showChannel', true),
         startupShowNick: startupOption('showNick', true),
         startupShowPassword: startupOption('showPassword', true),
+        startupBackground: infoBackground(''),
     },
     methods: {
         update() {

From f080f3c00076cb94a7bf19ac98e00c160333bb8a Mon Sep 17 00:00:00 2001
From: ItsOnlyBinary <git@itsonlybinary.com>
Date: Mon, 7 Dec 2020 19:13:31 +0000
Subject: [PATCH 2/2] Check background url is valid

---
 src/components/StartupScreen.vue | 59 ++++++++++++++++++++------------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/src/components/StartupScreen.vue b/src/components/StartupScreen.vue
index 13fd41f..c708447 100755
--- a/src/components/StartupScreen.vue
+++ b/src/components/StartupScreen.vue
@@ -74,10 +74,10 @@
                 <label for="welcome-background">Background URL</label>
                 <input
                     id="welcome-background"
-                    v-model="startupBackground"
+                    v-model="backgroundUrl"
                     type="text"
-                    @change="update"
-                    @keyup="update"
+                    :style="{'border-color': isValidBackground ? '' : '#f00'}"
+                    @blur="updateBackground"
                 >
             </div>
         </div>
@@ -129,26 +129,15 @@ function infoContent(defaultVal) {
     };
 }
 
-function infoBackground(defaultVal) {
-    return {
-        get() {
-            const baseBackgroundUrl = this.localData.baseBackgroundUrl;
-            const startupOptions = this.localData.config.startupOptions;
-            return startupOptions.infoBackground === undefined ?
-                defaultVal :
-                startupOptions.infoBackground.replace(baseBackgroundUrl, '');
-        },
-        set(newVal) {
-            const baseBackgroundUrl = this.localData.baseBackgroundUrl;
-            const startupOptions = this.localData.config.startupOptions;
-            this.$set(startupOptions, 'infoBackground', baseBackgroundUrl + newVal);
-        },
-    };
-}
-
 export default {
     name: 'StartupScreen',
     props: ['localData'],
+    data() {
+        return {
+            backgroundUrl: '',
+            urlRegex: null,
+        };
+    },
     computed: {
         startupGreetingText: startupOption('greetingText', ''),
         startupButtonText: startupOption('buttonText', ''),
@@ -156,12 +145,40 @@ export default {
         startupShowChannel: startupOption('showChannel', true),
         startupShowNick: startupOption('showNick', true),
         startupShowPassword: startupOption('showPassword', true),
-        startupBackground: infoBackground(''),
+        isValidBackground() {
+            if (!this.backgroundUrl) {
+                return true;
+            }
+            return this.isValidUrl(this.backgroundUrl);
+        },
     },
     methods: {
         update() {
             this.$emit('setConfig', { reload: true });
         },
+        updateBackground() {
+            if (this.backgroundUrl && !this.isValidUrl(this.backgroundUrl)) {
+                // only return if the url is not empty and invalid
+                return;
+            }
+            const baseBackgroundUrl = this.localData.baseBackgroundUrl;
+            const startupOptions = this.localData.config.startupOptions;
+            const newUrl = this.backgroundUrl ? baseBackgroundUrl + this.backgroundUrl : '';
+            this.$set(startupOptions, 'infoBackground', newUrl);
+            this.update();
+        },
+        isValidUrl(url) {
+            if (!this.urlRegex) {
+                // regex from https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url
+                this.urlRegex = new RegExp('^(https?:\\/\\/)?' + // protocol
+                    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+                    '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+                    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+                    '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+                    '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+            }
+            return this.urlRegex.test(url);
+        },
     },
 };
 </script>