add unauthenticated subscriptions

src/components/FeedPage.vue

@@ -1,7 +1,7 @@
 <template>
     <h1 v-t="'titles.feed'" class="font-bold text-center my-4" />
 
-    <button v-if="authenticated" class="btn mr-2" @click="exportHandler">
+    <button class="btn mr-2" @click="exportHandler">
         <router-link to="/subscriptions">Subscriptions</router-link>
     </button>
 
@@ -85,15 +85,6 @@ export default {
                 this.loadMoreVideos();
             }
         },
-        getUnauthenticatedChannels() {
-            const localSubscriptions = this.getLocalSubscriptions();
-            var channels = "";
-            localSubscriptions.forEach((element, index) => {
-                channels += element;
-                if (localSubscriptions.size != index) channels += ",";
-            });
-            return channels;
-        },
     },
 };
 </script>

src/components/ImportPage.vue

@@ -69,7 +69,6 @@ export default {
         },
     },
     activated() {
-        if (!this.authenticated) this.$router.push("/login");
         document.title = "Import - Piped";
     },
     methods: {
@@ -132,21 +131,25 @@ export default {
             });
         },
         handleImport() {
-            this.fetchJson(
+            if (this.authenticated) {
-                this.authApiUrl() + "/import",
+                this.fetchJson(
-                {
+                    this.authApiUrl() + "/import",
-                    override: this.override,
+                    {
-                },
+                        override: this.override,
-                {
-                    method: "POST",
-                    headers: {
-                        Authorization: this.getAuthToken(),
                     },
-                    body: JSON.stringify(this.subscriptions),
+                    {
-                },
+                        method: "POST",
-            ).then(json => {
+                        headers: {
-                if (json.message === "ok") window.location = "/feed";
+                            Authorization: this.getAuthToken(),
-            });
+                        },
+                        body: JSON.stringify(this.subscriptions),
+                    },
+                ).then(json => {
+                    if (json.message === "ok") window.location = "/feed";
+                });
+            } else {
+                this.importSubscriptionsLocally(this.subscriptions);
+            }
         },
     },
 };

src/components/SubscriptionsPage.vue

@@ -49,7 +49,14 @@ export default {
                 this.subscriptions = json;
                 this.subscriptions.forEach(subscription => (subscription.subscribed = true));
             });
-        else this.$router.push("/login");
+        else {
+            this.fetchJson(this.authApiUrl() + "/subscriptions/unauthenticated", null, {
+                channels: this.getUnauthenticatedChannels(),
+            }).then(json => {
+                this.subscriptions = json;
+                this.subscriptions.forEach(subscription => (subscription.subscribed = true));
+            });
+        }
     },
     activated() {
         document.title = "Subscriptions - Piped";

src/main.js

@@ -215,6 +215,19 @@ const mixin = {
             else localSubscriptions.push(channelId);
             localStorage.setItem("localSubscriptions", JSON.stringify(localSubscriptions));
         },
+        getUnauthenticatedChannels() {
+            const localSubscriptions = this.getLocalSubscriptions();
+            var channels = "";
+            localSubscriptions.forEach((element, index) => {
+                channels += element;
+                if (localSubscriptions.size != index) channels += ",";
+            });
+            return channels;
+        },
+        importSubscriptionsLocally(newChannels) {
+            const subscriptions = this.getLocalSubscriptions().concat(newChannels);
+            localStorage.setItem("localSubscriptions"), JSON.stringify(subscriptions);
+        },
     },
     computed: {
         theme() {