TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

WIP login and subscriptions.

Browse source
This commit is contained in:
FireMasterK 2021-07-12 03:20:44 +05:30
parent 4cb06c3569
commit 096208c070
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
6 changed files with 193 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/components/Channel.vue
View file

@ -6,6 +6,16 @@
<img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
<p style="white-space: pre-wrap">{{ channel.description }}</p>
<button
v-if="authenticated"
@click="subscribeHandler"
class="uk-button uk-button-small"
style="background: #222"
type="button"
>
Subscribe
</button>
<hr />
<div class="uk-grid-xl" uk-grid="parallax: 0">
@ -30,6 +40,11 @@ export default {
channel: null,
};
},
computed: {
authenticated(_this) {
return _this.getAuthToken() !== undefined;
},
},
mounted() {
this.getChannelData();
},
@ -65,6 +80,22 @@ export default {
});
}
},
subscribeHandler() {
this.fetchJson(this.apiUrl() + "/subscribe", null, {
method: "POST",
body: JSON.stringify({
// channelId: this.channel.id,
}),
headers: {
"Auth-Token": this.getAuthToken(),
"Content-Type": "application/json",
},
}).then(resp => {
if (resp.status === "ok") {
alert("Subscribed!");
}
});
},
},
components: {
ErrorHandler,

66
src/components/LoginPage.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<div class="uk-vertical-align uk-text-center uk-height-1-1 ">
<form class="uk-panel uk-panel-box">
<div class="uk-form-row">
<input
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
type="text"
v-model="username"
autocomplete="username"
placeholder="Username"
/>
</div>
<div class="uk-form-row">
<input
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
type="password"
v-model="password"
autocomplete="password"
placeholder="Password"
/>
</div>
<div class="uk-form-row">
<a
class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
style="background: #222"
@click="login"
>Login</a
>
</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("/");
}
},
methods: {
login() {
console.log("authToken" + this.hashCode(this.apiUrl()));
this.fetchJson(this.apiUrl() + "/login", null, {
method: "POST",
body: JSON.stringify({
username: this.username,
password: this.password,
}),
}).then(resp => {
if (resp.token) {
this.setPreference("authToken" + this.hashCode(this.apiUrl()), resp.token);
window.location = "/"; // done to bypass cache
} else alert(resp.error);
});
},
},
};
</script>

11
src/components/Navigation.vue
View file

@ -25,6 +25,12 @@
<li>
<router-link to="/preferences">Preferences</router-link>
</li>
<li v-if="shouldShowLogin">
<router-link to="/login">Login</router-link>
</li>
<li v-if="shouldShowLogin">
<router-link to="/register">Register</router-link>
</li>
</ul>
</div>
</nav>
@ -60,6 +66,11 @@ export default {
suggestionsVisible: false,
};
},
computed: {
shouldShowLogin(_this) {
return _this.getAuthToken() == null;
},
},
methods: {
onKeyUp(e) {
if (e.key === "Enter") {

66
src/components/RegisterPage.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<div class="uk-vertical-align uk-text-center uk-height-1-1 ">
<form class="uk-panel uk-panel-box">
<div class="uk-form-row">
<input
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
type="text"
v-model="username"
autocomplete="username"
placeholder="Username"
/>
</div>
<div class="uk-form-row">
<input
class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
type="password"
v-model="password"
autocomplete="password"
placeholder="Password"
/>
</div>
<div class="uk-form-row">
<a
class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
style="background: #222"
@click="register"
>Register</a
>
</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("/");
}
},
methods: {
register() {
console.log("authToken" + this.hashCode(this.apiUrl()));
this.fetchJson(this.apiUrl() + "/register", null, {
method: "POST",
body: JSON.stringify({
username: this.username,
password: this.password,
}),
}).then(resp => {
if (resp.token) {
this.setPreference("authToken" + this.hashCode(this.apiUrl()), resp.token);
window.location = "/"; // done to bypass cache
} else alert(resp.error);
});
},
},
};
</script>

9
src/main.js
View file

@ -136,6 +136,15 @@ const mixin = {
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
return theme;
},
getAuthToken() {
return this.getPreferenceString("authToken" + this.hashCode(this.apiUrl()));
},
hashCode(s) {
return s.split("").reduce(function(a, b) {
a = (a << 5) - a + b.charCodeAt(0);
return a & a;
}, 0);
},
},
computed: {
backgroundColor() {

10
src/router/router.js
View file

@ -29,6 +29,16 @@ const routes = [
path: "/:path(channel|user|c)/:channelId/:videos?",
component: () => import("../components/Channel.vue"),
},
{
path: "/login",
name: "Login",
component: () => import("../components/LoginPage.vue"),
},
{
path: "/register",
name: "Register",
component: () => import("../components/RegisterPage.vue"),
},
];
const router = createRouter({