convert login/register to modal

src/components/LoginModal.vue

@@ -0,0 +1,90 @@
+<template>
+    <ModalComponent>
+        <h3 v-t="'titles.account'" class="font-bold my-4" />
+        <hr />
+        <div class="text-center">
+            <form class="children:pb-3">
+                <div>
+                    <input
+                        v-model="username"
+                        class="input w-full"
+                        type="text"
+                        autocomplete="username"
+                        :placeholder="$t('login.username')"
+                        :aria-label="$t('login.username')"
+                        v-on:keyup.enter="login"
+                    />
+                </div>
+                <div>
+                    <input
+                        v-model="password"
+                        class="input w-full"
+                        type="password"
+                        autocomplete="password"
+                        :placeholder="$t('login.password')"
+                        :aria-label="$t('login.password')"
+                        v-on:keyup.enter="login"
+                    />
+                </div>
+                <div class="flex justify-end">
+                    <a class="btn mr-2 cursor-pointer" @click="register" v-t="'titles.register'" />
+                    <a class="btn cursor-pointer" @click="login" v-t="'titles.login'" />
+                </div>
+            </form>
+        </div>
+    </ModalComponent>
+</template>
+
+<script>
+import ModalComponent from "./ModalComponent.vue";
+export default {
+    data() {
+        return {
+            username: null,
+            password: null,
+        };
+    },
+    mounted() {
+        //TODO: Add Server Side check
+        if (this.getAuthToken()) {
+            this.$router.push("/");
+        }
+    },
+    activated() {
+        document.title = this.$t("titles.account") + " - Piped";
+    },
+    methods: {
+        login() {
+            if (!this.username || !this.password) return;
+            this.fetchJson(this.authApiUrl() + "/login", null, {
+                method: "POST",
+                body: JSON.stringify({
+                    username: this.username,
+                    password: this.password,
+                }),
+            }).then(resp => {
+                if (resp.token) {
+                    this.setPreference("authToken" + this.hashCode(this.authApiUrl()), resp.token);
+                    window.location = "/"; // done to bypass cache
+                } else alert(resp.error);
+            });
+        },
+        register() {
+            if (!this.username || !this.password) return;
+            this.fetchJson(this.authApiUrl() + "/register", null, {
+                method: "POST",
+                body: JSON.stringify({
+                    username: this.username,
+                    password: this.password,
+                }),
+            }).then(resp => {
+                if (resp.token) {
+                    this.setPreference("authToken" + this.hashCode(this.authApiUrl()), resp.token);
+                    window.location = "/"; // done to bypass cache
+                } else alert(resp.error);
+            });
+        },
+    },
+    components: { ModalComponent },
+};
+</script>

src/components/LoginPage.vue

@@ -1,70 +0,0 @@
-<template>
-    <h1 v-t="'titles.login'" class="font-bold text-center my-4" />
-    <hr />
-    <div class="text-center">
-        <form class="children:pb-3">
-            <div>
-                <input
-                    v-model="username"
-                    class="input w-auto"
-                    type="text"
-                    autocomplete="username"
-                    :placeholder="$t('login.username')"
-                    :aria-label="$t('login.username')"
-                    v-on:keyup.enter="login"
-                />
-            </div>
-            <div>
-                <input
-                    v-model="password"
-                    class="input w-auto"
-                    type="password"
-                    autocomplete="password"
-                    :placeholder="$t('login.password')"
-                    :aria-label="$t('login.password')"
-                    v-on:keyup.enter="login"
-                />
-            </div>
-            <div>
-                <a class="btn w-auto" @click="login" v-t="'titles.login'" />
-            </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("/");
-        }
-    },
-    activated() {
-        document.title = this.$t("titles.login") + " - Piped";
-    },
-    methods: {
-        login() {
-            if (!this.username || !this.password) return;
-            this.fetchJson(this.authApiUrl() + "/login", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    username: this.username,
-                    password: this.password,
-                }),
-            }).then(resp => {
-                if (resp.token) {
-                    this.setPreference("authToken" + this.hashCode(this.authApiUrl()), resp.token);
-                    window.location = "/"; // done to bypass cache
-                } else alert(resp.error);
-            });
-        },
-    },
-};
-</script>

src/components/NavBar.vue

@@ -32,10 +32,12 @@
                 <router-link v-t="'titles.preferences'" to="/preferences" />
             </li>
             <li v-if="shouldShowLogin">
-                <router-link v-t="'titles.login'" to="/login" />
+                <p
-            </li>
+                    class="cursor-pointer font-bold"
-            <li v-if="shouldShowLogin">
+                    v-if="shouldShowLogin"
-                <router-link v-t="'titles.register'" to="/register" />
+                    v-t="'titles.account'"
+                    @click="showLoginModal = !showLoginModal"
+                />
             </li>
             <li v-if="shouldShowHistory">
                 <router-link v-t="'titles.history'" to="/history" />
@@ -52,8 +54,12 @@
     <div v-if="showTopNav" class="pp-mobile-nav flex flex-col" @click="showTopNav = false">
         <router-link v-if="shouldShowTrending" v-t="'titles.trending'" to="/trending" />
         <router-link v-t="'titles.preferences'" to="/preferences" />
-        <router-link v-if="shouldShowLogin" v-t="'titles.login'" to="/login" />
+        <p
-        <router-link v-if="shouldShowLogin" v-t="'titles.register'" to="/register" />
+            class="cursor-pointer font-bold"
+            v-if="shouldShowLogin"
+            v-t="'titles.account'"
+            @click="showLoginModal = !showLoginModal"
+        />
         <router-link v-if="shouldShowHistory" v-t="'titles.history'" to="/history" />
         <router-link v-if="authenticated" v-t="'titles.playlists'" to="/playlists" />
         <router-link v-if="!shouldShowTrending" v-t="'titles.feed'" to="/feed" />
@@ -78,20 +84,24 @@
         :search-text="searchText"
         @searchchange="onSearchTextChange"
     />
+    <LoginModal v-if="showLoginModal" @close="showLoginModal = !showLoginModal" />
 </template>
 
 <script>
 import SearchSuggestions from "./SearchSuggestions.vue";
 import hotkeys from "hotkeys-js";
+import LoginModal from "./LoginModal.vue";
 export default {
     components: {
         SearchSuggestions,
+        LoginModal,
     },
     data() {
         return {
             searchText: "",
             suggestionsVisible: false,
             showTopNav: false,
+            showLoginModal: false,
         };
     },
     mounted() {

src/components/RegisterPage.vue

@@ -1,70 +0,0 @@
-<template>
-    <h1 v-t="'titles.register'" class="font-bold text-center my-4" />
-    <hr />
-    <div class="text-center">
-        <form class="children:pb-3">
-            <div>
-                <input
-                    v-model="username"
-                    class="input w-auto"
-                    type="text"
-                    autocomplete="username"
-                    :placeholder="$t('login.username')"
-                    :aria-label="$t('login.username')"
-                    v-on:keyup.enter="register"
-                />
-            </div>
-            <div>
-                <input
-                    v-model="password"
-                    class="input w-auto"
-                    type="password"
-                    autocomplete="password"
-                    :placeholder="$t('login.password')"
-                    :aria-label="$t('login.password')"
-                    v-on:keyup.enter="register"
-                />
-            </div>
-            <div>
-                <a class="btn w-auto" @click="register" v-t="'titles.register'" />
-            </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("/");
-        }
-    },
-    activated() {
-        document.title = "Register - Piped";
-    },
-    methods: {
-        register() {
-            if (!this.username || !this.password) return;
-            this.fetchJson(this.authApiUrl() + "/register", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    username: this.username,
-                    password: this.password,
-                }),
-            }).then(resp => {
-                if (resp.token) {
-                    this.setPreference("authToken" + this.hashCode(this.authApiUrl()), resp.token);
-                    window.location = "/"; // done to bypass cache
-                } else alert(resp.error);
-            });
-        },
-    },
-};
-</script>

src/router/router.js

@@ -44,12 +44,12 @@ const routes = [
     {
         path: "/login",
         name: "Login",
-        component: () => import("../components/LoginPage.vue"),
+        component: () => import("../components/LoginModal.vue"),
     },
     {
         path: "/register",
         name: "Register",
-        component: () => import("../components/RegisterPage.vue"),
+        component: () => import("../components/LoginModal.vue"),
     },
     {
         path: "/feed",