Login and subscriptions. (#256)

* WIP login and subscriptions.

* Add a working feed and unsubscribe button.

* Allow importing subscriptions from Google Takeout, NewPipe and Invidious.

src/components/Channel.vue

@@ -6,6 +6,16 @@
         <img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
         <p style="white-space: pre-wrap">{{ channel.description }}</p>
 
+        <button
+            v-if="authenticated"
+            @click="subscribeHandler"
+            class="uk-button uk-button-small"
+            style="background: #222"
+            type="button"
+        >
+            {{ subscribed ? "Unsubscribe" : "Subscribe" }}
+        </button>
+
         <hr />
 
         <div class="uk-grid-xl" uk-grid="parallax: 0">
@@ -28,6 +38,7 @@ export default {
     data() {
         return {
             channel: null,
+            subscribed: false,
         };
     },
     mounted() {
@@ -40,6 +51,21 @@ export default {
         window.removeEventListener("scroll", this.handleScroll);
     },
     methods: {
+        async fetchSubscribedStatus() {
+            this.fetchJson(
+                this.apiUrl() + "/subscribed",
+                {
+                    channelId: this.channel.id,
+                },
+                {
+                    headers: {
+                        Authorization: this.getAuthToken(),
+                    },
+                },
+            ).then(json => {
+                this.subscribed = json.subscribed;
+            });
+        },
         async fetchChannel() {
             const url = this.apiUrl() + "/" + this.$route.params.path + "/" + this.$route.params.channelId;
             return await this.fetchJson(url);
@@ -48,7 +74,10 @@ export default {
             this.fetchChannel()
                 .then(data => (this.channel = data))
                 .then(() => {
-                    if (!this.channel.error) document.title = this.channel.name + " - Piped";
+                    if (!this.channel.error) {
+                        document.title = this.channel.name + " - Piped";
+                        if (this.authenticated) this.fetchSubscribedStatus();
+                    }
                 });
         },
         handleScroll() {
@@ -65,6 +94,19 @@ export default {
                 });
             }
         },
+        subscribeHandler() {
+            this.fetchJson(this.apiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
+                method: "POST",
+                body: JSON.stringify({
+                    channelId: this.channel.id,
+                }),
+                headers: {
+                    Authorization: this.getAuthToken(),
+                    "Content-Type": "application/json",
+                },
+            });
+            this.subscribed = !this.subscribed;
+        },
     },
     components: {
         ErrorHandler,

src/components/FeedPage.vue

@@ -0,0 +1,74 @@
+<template>
+    <h1 class="uk-text-bold uk-text-center">Feed</h1>
+
+    <small>You can import subscriptions from <router-link to="/import">here</router-link>.</small>
+
+    <hr />
+
+    <div class="uk-grid-xl" uk-grid="parallax: 0">
+        <div
+            :style="[{ background: backgroundColor }]"
+            class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
+            v-bind:key="video.url"
+            v-for="video in videos"
+        >
+            <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
+                <router-link class="uk-text-emphasis" v-bind:to="'/watch?v=' + video.id">
+                    <img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" />
+                    <p>{{ video.title }}</p>
+                </router-link>
+
+                <div>
+                    <div>
+                        <router-link class="uk-link-muted" :to="'/channel/' + video.uploader_id">
+                            <a>{{ video.uploader }}</a>
+                        </router-link>
+                        <br />
+                    </div>
+                </div>
+
+                <b class="uk-text-small uk-align-left">
+                    <div v-if="video.views >= 0">
+                        <font-awesome-icon icon="eye"></font-awesome-icon>
+                        {{ numberFormat(video.views) }} views
+                        <br />
+                    </div>
+                    <div>
+                        {{ timeAgo(video.uploaded) }}
+                    </div>
+                </b>
+                <div class="uk-align-right">
+                    <b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
+
+                    <br />
+
+                    <router-link :to="'/watch?v=' + video.id + '&listen=1'">
+                        <font-awesome-icon icon="headphones"></font-awesome-icon>
+                    </router-link>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            videos: [],
+        };
+    },
+    mounted() {
+        document.title = "Feed - Piped";
+
+        this.fetchFeed().then(videos => (this.videos = videos));
+    },
+    methods: {
+        async fetchFeed() {
+            return await this.fetchJson(this.apiUrl() + "/feed", {
+                authToken: this.getAuthToken(),
+            });
+        },
+    },
+};
+</script>

src/components/ImportPage.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="uk-vertical-align uk-text-center uk-height-1-1 ">
+        <form class="uk-panel uk-panel-box">
+            <div class="uk-form-row">
+                <input type="file" @change="fileChange" ref="fileSelector" />
+            </div>
+            <div class="uk-form-row">
+                <b>Selected Subscriptions: {{ selectedSubscriptions }}</b>
+            </div>
+            <div class="uk-form-row">
+                <a
+                    class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
+                    style="background: #222"
+                    @click="handleImport"
+                    >Import</a
+                >
+            </div>
+        </form>
+        <br />
+        <b>Importing Subscriptions from YouTube</b>
+        <br />
+        <div>
+            Open
+            <a href="https://takeout.google.com/takeout/custom/youtube">takeout.google.com/takeout/custom/youtube</a>
+            <br />
+            In "Select data to include", click on "All YouTube data included" and select only "subscriptions".
+            <br />
+            Create the export and download the zip file.
+            <br />
+            Extract subscriptions.json from the zip file.
+            <br />
+            Select and import the file above.
+        </div>
+        <br />
+        <b>Importing Subscriptions from Invidious</b>
+        <br />
+        <div>
+            Open
+            <a href="https://invidio.us/data_control">invidiou.us/data_control</a>
+            <br />
+            Click on any of the export options.
+            <br />
+            Select and import the file above.
+        </div>
+        <br />
+        <b>Importing Subscriptions from NewPipe</b>
+        <br />
+        <div>
+            Go to the Feed tab.
+            <br />
+            Click on the arrow on where it says "Subscriptions".
+            <br />
+            Save the file somewhere.
+            <br />
+            Select and import the file above.
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            subscriptions: [],
+        };
+    },
+    computed: {
+        selectedSubscriptions() {
+            return this.subscriptions.length;
+        },
+    },
+    activated() {
+        if (!this.authenticated) this.$router.push("/login");
+    },
+    methods: {
+        fileChange() {
+            this.$refs.fileSelector.files[0].text().then(text => {
+                this.subscriptions = [];
+
+                // Invidious
+                if (text.indexOf("opml") != -1) {
+                    const parser = new DOMParser();
+                    const xmlDoc = parser.parseFromString(text, "text/xml");
+                    xmlDoc.querySelectorAll("outline[xmlUrl]").forEach(item => {
+                        const url = item.getAttribute("xmlUrl");
+                        const id = url.substr(-24);
+                        this.subscriptions.push(id);
+                    });
+                }
+                // NewPipe
+                if (text.indexOf("app_version") != -1) {
+                    const json = JSON.parse(text);
+                    json.subscriptions
+                        .filter(item => item.service_id == 0)
+                        .forEach(item => {
+                            const url = item.url;
+                            const id = url.substr(-24);
+                            this.subscriptions.push(id);
+                        });
+                }
+                // Invidious JSON
+                if (text.indexOf("thin_mode") != -1) {
+                    const json = JSON.parse(text);
+                    this.subscriptions = json.subscriptions;
+                }
+                // Google Takeout
+                if (text.indexOf("contentDetails") != -1) {
+                    const json = JSON.parse(text);
+                    json.forEach(item => {
+                        const id = item.snippet.resourceId.channelId;
+                        this.subscriptions.push(id);
+                    });
+                }
+            });
+        },
+        handleImport() {
+            this.fetchJson(this.apiUrl() + "/import", null, {
+                method: "POST",
+                headers: {
+                    Authorization: this.getAuthToken(),
+                },
+                body: JSON.stringify(this.subscriptions),
+            }).then(json => {
+                if (json.message === "ok") window.location = "/feed";
+            });
+        },
+    },
+};
+</script>

src/components/LoginPage.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="uk-vertical-align uk-text-center uk-height-1-1 ">
+        <form class="uk-panel uk-panel-box">
+            <div class="uk-form-row">
+                <input
+                    class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
+                    type="text"
+                    v-model="username"
+                    autocomplete="username"
+                    placeholder="Username"
+                />
+            </div>
+            <div class="uk-form-row">
+                <input
+                    class="uk-width-1-1 uk-form-large uk-input  uk-width-auto"
+                    type="password"
+                    v-model="password"
+                    autocomplete="password"
+                    placeholder="Password"
+                />
+            </div>
+            <div class="uk-form-row">
+                <a
+                    class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
+                    style="background: #222"
+                    @click="login"
+                    >Login</a
+                >
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            username: null,
+            password: null,
+        };
+    },
+    mounted() {
+        //TODO: Add Server Side check
+        if (this.getAuthToken()) {
+            this.$router.push("/");
+        }
+    },
+    methods: {
+        login() {
+            console.log("authToken" + this.hashCode(this.apiUrl()));
+            this.fetchJson(this.apiUrl() + "/login", null, {
+                method: "POST",
+                body: JSON.stringify({
+                    username: this.username,
+                    password: this.password,
+                }),
+            }).then(resp => {
+                if (resp.token) {
+                    this.setPreference("authToken" + this.hashCode(this.apiUrl()), resp.token);
+                    window.location = "/"; // done to bypass cache
+                } else alert(resp.error);
+            });
+        },
+    },
+};
+</script>

src/components/Navigation.vue

@@ -25,6 +25,15 @@
                 <li>
                     <router-link to="/preferences">Preferences</router-link>
                 </li>
+                <li v-if="shouldShowLogin">
+                    <router-link to="/login">Login</router-link>
+                </li>
+                <li v-if="shouldShowLogin">
+                    <router-link to="/register">Register</router-link>
+                </li>
+                <li v-if="authenticated">
+                    <router-link to="/feed">Feed</router-link>
+                </li>
             </ul>
         </div>
     </nav>
@@ -60,6 +69,11 @@ export default {
             suggestionsVisible: false,
         };
     },
+    computed: {
+        shouldShowLogin(_this) {
+            return _this.getAuthToken() == null;
+        },
+    },
     methods: {
         onKeyUp(e) {
             if (e.key === "Enter") {

src/components/RegisterPage.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="uk-vertical-align uk-text-center uk-height-1-1 ">
+        <form class="uk-panel uk-panel-box">
+            <div class="uk-form-row">
+                <input
+                    class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
+                    type="text"
+                    v-model="username"
+                    autocomplete="username"
+                    placeholder="Username"
+                />
+            </div>
+            <div class="uk-form-row">
+                <input
+                    class="uk-width-1-1 uk-form-large uk-input  uk-width-auto"
+                    type="password"
+                    v-model="password"
+                    autocomplete="password"
+                    placeholder="Password"
+                />
+            </div>
+            <div class="uk-form-row">
+                <a
+                    class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
+                    style="background: #222"
+                    @click="register"
+                    >Register</a
+                >
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            username: null,
+            password: null,
+        };
+    },
+    mounted() {
+        //TODO: Add Server Side check
+        if (this.getAuthToken()) {
+            this.$router.push("/");
+        }
+    },
+    methods: {
+        register() {
+            console.log("authToken" + this.hashCode(this.apiUrl()));
+            this.fetchJson(this.apiUrl() + "/register", null, {
+                method: "POST",
+                body: JSON.stringify({
+                    username: this.username,
+                    password: this.password,
+                }),
+            }).then(resp => {
+                if (resp.token) {
+                    this.setPreference("authToken" + this.hashCode(this.apiUrl()), resp.token);
+                    window.location = "/"; // done to bypass cache
+                } else alert(resp.error);
+            });
+        },
+    },
+};
+</script>

src/main.js

@@ -34,6 +34,14 @@ import App from "./App.vue";
 
 import DOMPurify from "dompurify";
 
+import TimeAgo from "javascript-time-ago";
+
+import en from "javascript-time-ago/locale/en";
+
+TimeAgo.addDefaultLocale(en);
+
+const timeAgo = new TimeAgo("en-US");
+
 import("./registerServiceWorker");
 
 const mixin = {
@@ -136,6 +144,18 @@ const mixin = {
                     window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
             return theme;
         },
+        getAuthToken() {
+            return this.getPreferenceString("authToken" + this.hashCode(this.apiUrl()));
+        },
+        hashCode(s) {
+            return s.split("").reduce(function(a, b) {
+                a = (a << 5) - a + b.charCodeAt(0);
+                return a & a;
+            }, 0);
+        },
+        timeAgo(time) {
+            return timeAgo.format(time);
+        },
     },
     computed: {
         backgroundColor() {
@@ -153,6 +173,9 @@ const mixin = {
         darkMode() {
             return this.getEffectiveTheme() !== "light";
         },
+        authenticated(_this) {
+            return _this.getAuthToken() !== undefined;
+        },
     },
 };
 

src/router/router.js

@@ -29,6 +29,26 @@ const routes = [
         path: "/:path(channel|user|c)/:channelId/:videos?",
         component: () => import("../components/Channel.vue"),
     },
+    {
+        path: "/login",
+        name: "Login",
+        component: () => import("../components/LoginPage.vue"),
+    },
+    {
+        path: "/register",
+        name: "Register",
+        component: () => import("../components/RegisterPage.vue"),
+    },
+    {
+        path: "/feed",
+        name: "Feed",
+        component: () => import("../components/FeedPage.vue"),
+    },
+    {
+        path: "/import",
+        name: "Import",
+        component: () => import("../components/ImportPage.vue"),
+    },
 ];
 
 const router = createRouter({