convert login/register to modal

This commit is contained in:
Bnyro 2022-09-09 12:18:11 +02:00
parent 416681e477
commit a390df8ee6
5 changed files with 108 additions and 148 deletions

View file

@ -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>

View file

@ -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>

View file

@ -32,10 +32,12 @@
<router-link v-t="'titles.preferences'" to="/preferences" /> <router-link v-t="'titles.preferences'" to="/preferences" />
</li> </li>
<li v-if="shouldShowLogin"> <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>
<li v-if="shouldShowHistory"> <li v-if="shouldShowHistory">
<router-link v-t="'titles.history'" to="/history" /> <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"> <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-if="shouldShowTrending" v-t="'titles.trending'" to="/trending" />
<router-link v-t="'titles.preferences'" to="/preferences" /> <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="shouldShowHistory" v-t="'titles.history'" to="/history" />
<router-link v-if="authenticated" v-t="'titles.playlists'" to="/playlists" /> <router-link v-if="authenticated" v-t="'titles.playlists'" to="/playlists" />
<router-link v-if="!shouldShowTrending" v-t="'titles.feed'" to="/feed" /> <router-link v-if="!shouldShowTrending" v-t="'titles.feed'" to="/feed" />
@ -78,20 +84,24 @@
:search-text="searchText" :search-text="searchText"
@searchchange="onSearchTextChange" @searchchange="onSearchTextChange"
/> />
<LoginModal v-if="showLoginModal" @close="showLoginModal = !showLoginModal" />
</template> </template>
<script> <script>
import SearchSuggestions from "./SearchSuggestions.vue"; import SearchSuggestions from "./SearchSuggestions.vue";
import hotkeys from "hotkeys-js"; import hotkeys from "hotkeys-js";
import LoginModal from "./LoginModal.vue";
export default { export default {
components: { components: {
SearchSuggestions, SearchSuggestions,
LoginModal,
}, },
data() { data() {
return { return {
searchText: "", searchText: "",
suggestionsVisible: false, suggestionsVisible: false,
showTopNav: false, showTopNav: false,
showLoginModal: false,
}; };
}, },
mounted() { mounted() {

View file

@ -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>

View file

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