From b3342f848a54a9b0b8bf0fd134ceee86d6c9b108 Mon Sep 17 00:00:00 2001
From: SubTeno <elppa221@protonmail.com>
Date: Sat, 15 Oct 2022 00:53:28 +0000
Subject: [PATCH] Update - Fixed custom instance feature bug. - Added v-if to
 remove custom instance form - Tightened and improved URL validation custom
 instance even more. - Widen content width (lessening LR margin)

---
 src/components/CustomInstanceModal.vue | 58 ++++++++++++++++----------
 src/components/PreferencesPage.vue     | 32 +++++++-------
 src/piped.css                          |  2 +-
 3 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/components/CustomInstanceModal.vue b/src/components/CustomInstanceModal.vue
index 69975308..056c6bc0 100644
--- a/src/components/CustomInstanceModal.vue
+++ b/src/components/CustomInstanceModal.vue
@@ -3,16 +3,18 @@
         <h3 v-t="'Custom Instance'" class="font-bold my-4" />
         <hr />
         <div class="text-center">
-            <select v-model="selectedInstance">
-                <option
-                    v-for="(instance, pointer) in customInstances"
-                    :key="pointer"
-                    :value="pointer"
-                    v-text="instance.name"
-                />
-            </select>
-            <div class="flex justify-end">
-                <button @click="remove" v-t="'Remove'" />
+            <div v-if="customInstances.length" class="remove">
+                <select v-model="selectedInstance">
+                    <option
+                        v-for="(instance, index) in customInstances"
+                        :key="index"
+                        :value="index"
+                        v-text="instance.name"
+                    />
+                </select>
+                <div class="flex justify-end">
+                    <button @click="remove" v-t="'Remove'" />
+                </div>
             </div>
             <form class="children:pb-3">
                 <div>
@@ -22,7 +24,7 @@
                         type="text"
                         :placeholder="'Name'"
                         :aria-label="'Name'"
-                        v-on:keyup.enter="add"
+                        v-on:keyup.enter="add($event)"
                     />
                 </div>
                 <div>
@@ -32,11 +34,11 @@
                         type="text"
                         :placeholder="'Instance Api URL'"
                         :aria-label="'Instance Api URL'"
-                        v-on:keyup.enter="add"
+                        v-on:keyup.enter="add($event)"
                     />
                 </div>
                 <div class="flex justify-end">
-                    <button @click="add" v-t="'Add'" />
+                    <button @click="add($event)" v-t="'Add'" />
                 </div>
             </form>
         </div>
@@ -67,24 +69,36 @@ export default {
         }
     },
     methods: {
-        add() {
+        add(event) {
+            event.preventDefault();
             if (this.testLocalStorage) {
                 if (!isUrl(this.url)) {
                     alert("Not a valid URL");
                     return;
                 }
-                this.customInstances.push({
-                    name: this.name,
-                    api_url: this.url,
-                });
-                localStorage.setItem("custominstance", JSON.stringify(this.customInstances));
+                fetch(this.url + "/healthcheck")
+                    .then(res => {
+                        if (!res.ok) {
+                            alert("Error Backend URL");
+                            return;
+                        }
+                        this.customInstances.push({
+                            name: this.name,
+                            api_url: this.url,
+                        });
+                        localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
+                    })
+                    .catch(() => {
+                        alert("Cannot find URL");
+                        return;
+                    });
             }
         },
         remove() {
             if (this.testLocalStorage) {
-                this.customInstances.splice(this.selectedInstance);
-                localStorage.setItem("custominstance", JSON.stringify(this.customInstances));
-                window.location = "/preferences";
+                this.customInstances.splice(this.selectedInstance, 1);
+                localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
+                location.reload();
             }
         },
     },
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 1286e96e..bf7c6fcc 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -483,28 +483,26 @@ export default {
     },
     async mounted() {
         if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
-        this.customInstances = JSON.parse(localStorage.getItem("custominstance"));
-        this.fetchJson("https://piped-instances.kavin.rocks/")
-            .then(resp => {
-                this.instances = resp;
-                if (this.customInstances != null)
-                    this.customInstances.forEach(cusinstance => {
-                        this.instances.push(cusinstance);
-                    });
-                if (this.instances.filter(instance => instance.api_url == this.apiUrl()).length == 0)
-                    this.instances.push({
+        this.customInstances = JSON.parse(localStorage.custominstances);
+        this.fetchJson("https://piped-instances.kavin.rocks/").then(resp => {
+            this.instances = resp;
+            if (this.customInstances != null) {
+                this.instances.push(...this.customInstances);
+            }
+            if (this.instances.filter(instance => instance.api_url == this.apiUrl()).length == 0)
+                this.instances
+                    .push({
                         name: "Custom Instance",
                         api_url: this.apiUrl(),
                         locations: "Unknown",
                         cdn: false,
+                    })
+                    .catch(() => {
+                        if (this.customInstances != null) {
+                            this.instances.push(...this.customInstances);
+                        }
                     });
-            })
-            .catch(() => {
-                if (this.customInstances != null)
-                    this.customInstances.forEach(cusinstance => {
-                        this.instances.push(cusinstance);
-                    });
-            });
+        });
 
         if (this.testLocalStorage) {
             this.selectedInstance = this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
diff --git a/src/piped.css b/src/piped.css
index 5b201393..768ebc4c 100644
--- a/src/piped.css
+++ b/src/piped.css
@@ -2,7 +2,7 @@
 
 /*End of EFY Template - Documentation on how to use it coming soon at https://efy.ooo/ui . Your own css starts bellow*/
 
-/*Base*/ .pp-base {margin: 0 auto; width: 80vw;}
+/*Base*/ .pp-base {margin: 0 auto; width: 88vw;}
 /*BG: Transparent*/ .video-grid div div, .pp-show-recs div div {background: transparent}
 /*BG 1*/ .comment, .video-grid div, .pp-show-recs div, .pp-mobile-nav a, .pp-mobile-nav p, .suggestion-selected, .pp-chapters .chapter:not(.pp-chapter-active, .chapter:hover), .pp-chapters [title=chapters] {background: var(--efy_bg1)}
 /*Bold*/ .btn {font-weight: bold}