From a390df8ee656c3c0d94dbbfaf204b7ac22498ad4 Mon Sep 17 00:00:00 2001 From: Bnyro <yannick.fehler@web.de> Date: Fri, 9 Sep 2022 12:18:11 +0200 Subject: [PATCH] convert login/register to modal --- src/components/LoginModal.vue | 90 +++++++++++++++++++++++++++++++++ src/components/LoginPage.vue | 70 ------------------------- src/components/NavBar.vue | 22 +++++--- src/components/RegisterPage.vue | 70 ------------------------- src/router/router.js | 4 +- 5 files changed, 108 insertions(+), 148 deletions(-) create mode 100644 src/components/LoginModal.vue delete mode 100644 src/components/LoginPage.vue delete mode 100644 src/components/RegisterPage.vue diff --git a/src/components/LoginModal.vue b/src/components/LoginModal.vue new file mode 100644 index 00000000..589c7bba --- /dev/null +++ b/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> diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue deleted file mode 100644 index fc3598b2..00000000 --- a/src/components/LoginPage.vue +++ /dev/null @@ -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> diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index 86818752..9d6d48a4 100644 --- a/src/components/NavBar.vue +++ b/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() { diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue deleted file mode 100644 index aaf0c156..00000000 --- a/src/components/RegisterPage.vue +++ /dev/null @@ -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> diff --git a/src/router/router.js b/src/router/router.js index 29bb7c61..8e04149c 100644 --- a/src/router/router.js +++ b/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",