KevinMidboe/seasonedRequest
1
0
Fork 0
mirror of https://github.com/KevinMidboe/seasonedRequest.git synced 2025-10-29 01:40:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added settings page for users.

Browse Source
This commit is contained in:
Kevin
2018-07-25 18:49:54 +02:00
parent c8a80d6b05
commit 6d42769f54
1 changed files with 162 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/components/Settings.vue Normal file
View File

@@ -0,0 +1,162 @@
<template>
<section class="profile">
<demo-login-modal/>
<div class="profile__content" v-if="userLoggedIn">
<section class='settings'>
<h3 class='settings__header'>Plex account</h3>
<span class="settings__info">Sign in to your plex account to get information about recently added movies and to see your watch history</span>
<form class="form">
<div class="form__group">
<svg class="form__group__input-icon"><use xlink:href="#iconEmail"></use></svg>
<input class="form__group-input" type="text" ref="plex_username" placeholder="Plex username"/>
</div>
<div class="form__group">
<svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
<input class="form__group-input" type="password" ref="plex_password" placeholder="Repeat new password">
</div>
</form>
<div class="plex">
<button type="button" class="button" @click="authenticatePlex">Link plex account</button>
</div>
<hr class='setting__divider'>
<h3 class='settings__header'>Change password</h3>
<form class="form">
<div class="form__group">
<svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
<input class="form__group-input" type="password" ref="password" placeholder="New password"/>
</div>
<div class="form__group">
<svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
<input class="form__group-input" type="password" ref="password_re" placeholder="Repeat new password">
</div>
<div class="form__group">
<button type="button" class="button" @click="$modal.show('demo-login')">Change password</button>
</div>
</form>
<hr class='setting__divider'>
</section>
</div>
<section class="not-found" v-if="!userLoggedIn">
<div class="not-found__content">
<h2 class="not-found__title">Authentication Request Failed</h2>
<router-link :to="{name: 'signin'}" exact title="Sign in here">
<button class="not-found__button button">Sign In</button>
</router-link>
</div>
</section>
</section>
</template>
<script>
import axios from 'axios'
import storage from '../storage.js'
import DemoLoginModal from './demo.vue'
// import CreatedLists from './CreatedLists.vue'
export default {
components: { DemoLoginModal },
data(){
return{
userLoggedIn: '',
}
},
methods: {
authenticatePlex() {
let username = this.$refs.plex_username.value;
let password = this.$refs.plex_password.value;
console.log(username, password)
axios({
method: 'POST',
url: `https://plex.tv/users/sign_in.json?user[login]=${username}&user[password]=${password}`,
headers: {
'Content-Type': 'application/json',
'X-Plex-Platform': 'Linux',
'X-Plex-Version': 'v2.0.24',
'X-Plex-Platform-Version': '4.13.0-36-generic',
'X-Plex-Device-Name': 'Tautulli',
'X-Plex-Client-Identifier': 'f9e0748ec84440dd8d0e759ab598326c'
},
})
.then((resp) => {
let data = resp.data;
console.log('response from plex:', data.user)
})
.catch((error) => {
console.log('error: ', error)
})
}
},
created(){
document.title = 'Settings' + storage.pageTitlePostfix;
storage.backTitle = document.title;
if(!localStorage.getItem('token')){
this.userLoggedIn = false;
} else {
this.userLoggedIn = true;
}
}
}
</script>
<style lang="scss" scoped>
@import "./src/scss/variables";
@import "./src/scss/media-queries";
a {
text-decoration: none;
}
.plex {
margin-top: 20px;
}
.form__group{
justify-content: unset;
&__input-icon {
margin-top: 8px;
height: 22px;
width: 22px;
}
&-input {
padding: 10px 5px 10px 45px;
height: 40px;
font-size: 17px;
width: 75%;
@include desktop-min {
width: 400px;
}
}
}
.settings {
padding: 35px;
&__header {
margin: 0;
line-height: 16px;
color: $c-dark;
font-weight: 300;
margin-bottom: 20px;
text-transform: uppercase;
}
&__info {
display: block;
margin-bottom: 25px;
}
hr {
display: block;
height: 1px;
border: 0;
border-bottom: 1px solid rgba(8, 28, 36, 0.05);
margin-top: 30px;
margin-bottom: 70px;
margin-left: 20px;
width: 96%;
text-align: left;
}
span {
font-weight: 200;
size: 16px;
}
}
</style>