Merge pull request #1412 from Bnyro/efy

convert login/register to modal

efy/piped.css

@@ -4,9 +4,9 @@
 
 
 /*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, .suggestion-selected, .pp-chapters .chapter:not(.pp-chapter-active, .chapter:hover), .pp-chapters [title=chapters] {background: var(--efy_bg1)}
+/*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}
-/*Margin: 0*/ .pp-watch-buttons .btn, .suggestions-container li, .suggestions-container ul, .pp-nav > ul, .pp-mobile-btn i, .pp-mobile-nav a, .modal-container button:first-of-type svg {margin: 0}
+/*Margin: 0*/ .pp-watch-buttons .btn, .suggestions-container li, .suggestions-container ul, .pp-nav > ul, .pp-mobile-btn i, .pp-mobile-nav a, .pp-mobile-nav p, .modal-container button:first-of-type svg {margin: 0}
 /*Text-Align: Center*/ .btn, .pp-import-channel, .pp-sortby-feed, .pp-playlist-add-modal-top, .pp-nav, .pp-nav > div.flex-1.flex.justify-start > a, .pp-watch-bellow-options .flex.items-center, .pp-channel-page-author {align-items: center} {text-align: center}
 /*Justify-Content: Space-Between*/ .pp-playlist-add-modal-top, .pp-watch-bellow-options, .pp-nav {justify-content: space-between}
 
@@ -16,7 +16,7 @@
 
 /*Border*/ .modal-container, .video-grid>div {border: 1.5px solid var(--efy_bg1);}
 
-/*Text-Fill-Color: Text*/  p, .pp-mobile-nav a, .video-grid div a, .pp-show-recs div a, .thumbnail-left, .thumbnail-right, .comment a, .pp-watch-bellow-options a, .pp-nav > ul a, .pp-nav > div.flex-1.flex.justify-start > a {-webkit-text-fill-color: var(--efy_text); text-decoration: none}
+/*Text-Fill-Color: Text*/  p, .pp-mobile-nav a, .pp-mobile-nav p, .video-grid div a, .pp-show-recs div a, .thumbnail-left, .thumbnail-right, .comment a, .pp-watch-bellow-options a, .pp-nav > ul a, .pp-nav > div.flex-1.flex.justify-start > a {-webkit-text-fill-color: var(--efy_text); text-decoration: none}
 /*Text-Fill-Color: Text2*/ .btn, .btn a, a.btn, .modal button {-webkit-text-fill-color: var(--efy_text2); text-decoration: none}
 
 /*BG: efy*/ .btn, .pp-chapter-active, .pp-chapters .chapter:hover {background: linear-gradient(165deg, var(--efy_color), var(--efy_color2)); background-clip: padding-box; color: var(--efy_text2)}
@@ -125,7 +125,7 @@ table {margin-top: 0}
 
 .pp-mobile-btn {display: none; padding: 10rem 12rem}
 .pp-mobile-nav {margin: 0 0 15rem 0}
-.pp-mobile-nav a {padding: var(--efy_padding); width: 100%}
+.pp-mobile-nav a, .pp-mobile-nav p {padding: var(--efy_padding); width: 100%; border-radius: var(--efy_radius)}
 
 /*Convergence*/
 @media (max-width: 990px) {

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" />
-            </li>
-            <li v-if="shouldShowLogin">
-                <router-link v-t="'titles.register'" to="/register" />
+                <p
+                    class="cursor-pointer font-bold"
+                    v-if="shouldShowLogin"
+                    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" />
-        <router-link v-if="shouldShowLogin" v-t="'titles.register'" to="/register" />
+        <p
+            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",