convert login/register to modal
This commit is contained in:
Bnyro
parent
416681e477
commit
a390df8ee6
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue