WIP login and subscriptions.

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"
+        >
+            Subscribe
+        </button>
+
         <hr />
 
         <div class="uk-grid-xl" uk-grid="parallax: 0">
@@ -30,6 +40,11 @@ export default {
             channel: null,
         };
     },
+    computed: {
+        authenticated(_this) {
+            return _this.getAuthToken() !== undefined;
+        },
+    },
     mounted() {
         this.getChannelData();
     },
@@ -65,6 +80,22 @@ export default {
                 });
             }
         },
+        subscribeHandler() {
+            this.fetchJson(this.apiUrl() + "/subscribe", null, {
+                method: "POST",
+                body: JSON.stringify({
+                    // channelId: this.channel.id,
+                }),
+                headers: {
+                    "Auth-Token": this.getAuthToken(),
+                    "Content-Type": "application/json",
+                },
+            }).then(resp => {
+                if (resp.status === "ok") {
+                    alert("Subscribed!");
+                }
+            });
+        },
     },
     components: {
         ErrorHandler,

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,12 @@
                 <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>
             </ul>
         </div>
     </nav>
@@ -60,6 +66,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

@@ -136,6 +136,15 @@ 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);
+        },
     },
     computed: {
         backgroundColor() {

src/router/router.js

@@ -29,6 +29,16 @@ 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"),
+    },
 ];
 
 const router = createRouter({