Merge branch 'master' of github.com:KevinMidboe/seasonedRequest

ISSUE_TEMPLATE.md

@@ -16,3 +16,4 @@
 
 ## Screenshot?  📷
 *A image tells a thousands words*
+

index.html

@@ -109,6 +109,20 @@
     <div id="app"></div>
     <script src="dist/build.js"></script>
   </body>
+  <script>
+    (function(w, d){
+      var b = d.getElementsByTagName('body')[0];
+      var s = d.createElement("script"); s.async = true;
+      var v = !("IntersectionObserver" in w) ? "8.7.1" : "10.5.2";
+      s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
+      w.lazyLoadOptions = {
+      	container: '.movies__list',
+	elements_selector: 'img',
+	threshold: 300,
+      }; // Your options here. See "recipes" for more information about async.
+      b.appendChild(s);
+    }(window, document));
+  </script>
   <script src="https://cdn.jsdelivr.net/vue/2.0.0-rc/vue.min.js"></script>
   <script src="https://cdn.ravenjs.com/3.23.1/vue/raven.min.js" crossorigin="anonymous"></script>
   <script>Raven.config('https://c1fa1a17de3d4b24abcd05161648fe4d@sentry.io/300063').install();</script>

package.json

@@ -19,6 +19,7 @@
     "vue": "^2.1.0",
     "vue-axios": "^1.2.2",
     "vue-data-tablee": "^0.12.1",
+    "vue-js-modal": "^1.3.12",
     "vue-router": "^2.2.1"
   },
   "devDependencies": {

server.js

@@ -5,19 +5,17 @@ var history = require('connect-history-api-fallback');
 app = express();
 
 app.use('/dist', express.static(path.join(__dirname + "/dist")));
+app.use('/dist', express.static(path.join(__dirname + "/dist/")));
 app.use('/favicons', express.static(path.join(__dirname + "/favicons")));
 app.use(history({
     index: '/'
 }));
 
 
-var port = process.env.PORT || 5000;
 
 app.get('/', function(req, res) {
     res.sendFile(path.join(__dirname + '/index.html'));
 });
 
 
-
 app.listen(port);
-console.log('server started '+ port);

src/App.vue

@@ -3,7 +3,7 @@
     <navigation></navigation>
     <header class="header">
       <div class="header__search">
-        <input class="header__search-input" type="text" v-model.trim="searchQuery" @keyup.enter="search" @blur="search" placeholder="Search for a movie or show...">
+        <input class="header__search-input" type="text" v-model.trim="searchQuery" @keyup.enter="search" placeholder="Search for a movie or show...">
         <svg class="header__search-icon">
           <use xlink:href="#iconSearch"></use>
         </svg>
@@ -301,6 +301,11 @@ img{
     background: $c-dark;
     color: $c-white;
   }
+  &__active {
+    @extend .button;
+    background: $c-dark;
+    color: $c-white;
+  }
 }
 
 

src/components/Movie.vue

@@ -19,6 +19,9 @@
       </header>
       <div class="movie__main">
         <div class="movie__wrap movie__wrap--main" :class="{'movie__wrap--page': type=='page'}">
+          <!-- <div class="movie__ratings">
+            <p>here</p>
+          </div> -->
           <!-- <div class="movie__actions" v-if="userLoggedIn && favoriteChecked"> -->
           <div class="movie__actions">
 
@@ -76,20 +79,18 @@
                 </div>
               </div> -->
               <div v-if="movie.year" class="movie__details-block">
-                <h2 class="movie__details-title">
+                <h2 class="movie__details-title">Release Date</h2>
-                  Release Date
+                <div class="movie__details-text">{{ movie.year }}</div>
-                </h2>
-                <div class="movie__details-text">
-                  {{ movie.year }}
-                </div>
               </div>
+
+               <!-- <div v-if="movie.score" class="movie__details-block">
+                <h2 class="movie__details-title">Rating</h2>
+                <div class="movie__details-text">{{ rating }}</div>
+              </div> -->
+
               <div v-if="movie.type == 'show'" class="movie__details-block">
-                <h2 class="movie__details-title">
+                <h2 class="movie__details-title">Seasons</h2>
-                  Seasons
+                <div class="movie__details-text">{{ movie.seasons }}</div>
-                </h2>
-                <div class="movie__details-text">
-                  10
-                </div>
               </div>
             </div>
           </div>
@@ -142,10 +143,7 @@ export default {
     fetchMovie(id){
       this.id = id;
       (this.mediaType == 'show') ? this.tmdbType = 'show' : this.tmdbType = 'movie'
-      // Fetch from seasoned to get matched status
-      // axios.get(`https://apollo.kevinmidboe.com/api/v1/plex/request/${id}?type=${'show'}&api_key=${storage.apiKey}&language=en-US`)
       axios.get(`https://api.kevinmidboe.com/api/v1/plex/request/${id}?type=${this.mediaType}`)
-      // axios.get(`http://localhost:31459/api/v1/plex/request/${id}?type=${this.mediaType}&api_key=${storage.apiKey}&language=en-US`)
       .then(function(resp){
           let movie = resp.data;
           this.movie = movie;
@@ -161,7 +159,7 @@ export default {
           }
           // Push state
           if(storage.createMoviePopup){
-            storage.moviePath = '/request/' + this.mediaType + '/' + id;
+            storage.moviePath = this.mediaType + '/' + id;
             history.pushState({ popup: true }, null, storage.moviePath);
             storage.createMoviePopup = false;
           }
@@ -216,9 +214,16 @@ export default {
     // Send a request for a specific movie
     sendRequest(){
       this.requested = ''
-      axios.post(`https://api.kevinmidboe.com/api/v1/plex/request/${this.id}?type=${this.mediaType}`,
+      axios({
-        { headers: {authorization: storage.token} },
+        method: 'post', //you can set what request you want to be
-      )
+        url: `https://api.kevinmidboe.com/api/v1/plex/request/${this.id}?type=${this.mediaType}`,
+        headers: {
+          authorization: storage.token
+        }
+      })
+      // axios.post(`https://api.kevinmidboe.com/api/v1/plex/request/${this.id}?type=${this.mediaType}`, {}, {
+      //   authorization: storage.token
+      // })
       // axios.post(`https://api.kevinmidboe.com/api/v1/plex/request/${this.id}?api_key=${storage.apiKey}&session_id=${storage.sessionId}`, {
       .then(function(resp){
         if (resp.data.success)

src/components/MoviesList.vue

@@ -4,18 +4,34 @@
       <header class="movies__header">
         <h2 class="movies__title">{{ listTitle }}</h2>
         <span class="movies__results" v-if="!shortList">{{ countResults }}</span>
+
         <router-link v-if="shortList && mode != 'user-requests'" class="movies__link" :to="{name: 'home-category', params: {category: category}}">
           View All
         </router-link>
          <router-link v-if="shortList && mode == 'user-requests'" class="movies__link" :to="{name: 'user-requests'}">
           View All
         </router-link>
+
+        <span v-if="!shortList && (this.$route.params.category === 'requests' || mode == 'user-requests')" class="movies__filters">
+          <button type="button" class="button" @click="toggleFilter">Filter</button>
+          <span class="movies__filters__button-spacing"></span>
+          <!-- <button type="button" class="button" @click="sort">Sort</button>  -->
+          <span class="movies__filters__button-spacing"></span>
+          <div class="form__group">
+             <input v-model="filter_query" class="form__group-input" placeholder="Filter by search"/>
+          </div>
+        </span>
       </header>
+
+      <ul v-if="showFilter" class="movies__filters-list">
+        <li v-for="(item, index) in filters.status.elms" @click="applyFilter(item, index)" :class="{'active': index === filters.status.selected}">{{ item }}</li>
+      </ul>
+
       <ul class="movies__list">
         <movies-list-item class="movies__item" v-for="(movie, index) in movies" :movie="movie"></movies-list-item>
       </ul>
       <div class="movies__nav" v-if="!shortList" :class="{'is-hidden' : currentPage == pages}">
-        <button @click="loadMore" class="button">Load More</button>
+        <button @click="loadMore" class="button">Load Mores</button>
       </div>
     </div>
     <i v-if="!listLoaded" class="loader"></i>
@@ -40,20 +56,30 @@ let removed;
 export default {
   props: ['type', 'mode', 'category', 'shortList'],
   components: { MoviesListItem },
-  beforeRouteLeave (to, from, next) {
+  // beforeRouteLeave (to, from, next) {
-    if(from.name == 'search'){
+  //   if(from.name == 'search'){
-      eventHub.$emit('setSearchQuery', true);
+  //     eventHub.$emit('setSearchQuery', true);
-    }
+  //   }
-    next();
+  //   next();
-  },
+  // },
   data() {
     return {
       listTitle: '',
       movies: [],
+      unfiltered_movies: [],
       pages: '',
+      filter: '',
+      filter_query: '',
       results: '',
       currentPage: 1,
-      listLoaded: false
+      listLoaded: false,
+      showFilter: false,
+      filters: {
+        status: {
+          elms: ['all', 'requested', 'downloading', 'downloaded'],
+          selected: 0,
+        }
+      }
     }
   },
   computed: {
@@ -68,7 +94,7 @@ export default {
       if(this.mode == 'search'){
         return `https://api.kevinmidboe.com/api/v1/plex/request?query=${this.query}&page=${this.currentPage}`;
       } else if(this.mode == 'requests' || this.$route.params.category == 'requests') {
-        return `https://api.kevinmidboe.com/api/v1/plex/requests/all?page=${this.currentPage}&status=requested`;
+        return `https://api.kevinmidboe.com/api/v1/plex/requests/all?page=${this.currentPage}&status=${this.filter}`;
       } else if(this.mode == 'collection') {
         let category = this.$route.params.category || this.category;
         return `https://api.kevinmidboe.com/api/v1/tmdb/list/${category}?page=${this.currentPage}`;
@@ -104,6 +130,7 @@ export default {
             this.pages = data.total_pages;
             this.results = data.total_results;
           }
+          this.unfiltered_movies = this.movies;
           this.listLoaded = true;
           // Change Page title
           if(this.type == 'page'){
@@ -123,32 +150,29 @@ export default {
           this.movies = newData;
       }.bind(this));
     },
-    updateFavorite(){
+    // sort() {
-      if(this.mode == 'favorite'){
+    //   console.log(this.showFilters)
-        let promises = [], movies = [], pages, results;
+    // },
-        for(let i = 1; i <= this.currentPage; i++){
+    toggleFilter(item, index){
-          promises.push(axios.get(`https://api.themoviedb.org/3/account/${storage.userId}/favorite/movies?api_key=${storage.apiKey}&session_id=${storage.sessionId}&language=en-US&sort_by=created_at.desc&page=${i}`))
+      this.showFilter = this.showFilter ? false : true;
-        }
+      // this.results = this.results.filter(result => result.status != 'downloaded')
-        axios.all(promises).then(function(results) {
+    },
-          results.forEach(function(resp) {
+    applyFilter(item, index) {
-            let data = resp.data;
+      this.filter = item;
-            movies = movies.concat(data.results);
+      this.filters.status.selected = index;
-            pages = data.total_pages;
+      console.log('applied query filter: ', item, index)
-            results = data.total_results;
+      this.fetchCategory()
-          });
-          this.movies = movies;
-          this.pages = pages;
-          if(this.currentPage > pages){
-            this.currentPage -= 1;
-          }
-          this.results = results;
-        }.bind(this));
-      }
     }
   },
   watch: {
-    query(value){
+    filter_query: function(val, oldVal) {
-      this.fetchCategory(value);
+      let movies = this.unfiltered_movies;
+      val = val.toLowerCase()
+      if (val.length > 0)
+        movies = movies.filter(movie => movie.title.toLowerCase().startsWith(val))
+
+      if (movies.length > 0)
+        this.movies = movies;
     }
   },
   created(){
@@ -171,7 +195,21 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+  @import "./src/scss/media-queries";
+  .form__group-input {
+    padding: 10px 5px 10px 15px;
+    margin-left: 0;
+    height: 38px;
+    width: 150px;
+    font-size: 15px;
+    @include desktop-min {
+      width: 200px;
+      font-size: 17px;
+    }
+  }
 
+</style>
 <style lang="scss">
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
@@ -188,9 +226,11 @@ export default {
   }
   &__header{
     display: flex;
+    flex-flow: row wrap;
     align-items: center;
     justify-content: space-between;
     padding: 20px 10px;
+
     @include tablet-min{
       padding: 23px 15px;
     }
@@ -207,6 +247,8 @@ export default {
       line-height: 16px;
       color: $c-dark;
       font-weight: 300;
+
+      flex-basis: 50%;
       @include tablet-min{
         font-size: 18px;
         line-height: 18px;
@@ -217,6 +259,12 @@ export default {
       font-weight: 300;
       letter-spacing: 0.5px;
       color: rgba($c-dark, 0.5);
+      
+      text-align: right;
+      flex-basis: 50%;
+      @include mobile-only {
+        display: none;
+      }
     }
     &__link{
       font-size: 12px;
@@ -232,6 +280,71 @@ export default {
         color: $c-dark;
       }
     }
+  &__filters{
+    margin-top: 10px;
+    line-height: 22px;
+    color: $c-dark;
+    font-size: 18px;
+    display: flex;
+    justify-content: flex-end;
+    transition: opacity 1s ease;
+
+    &__button-spacing {
+      @include tablet-min {
+        width: 15px;
+      }
+      @include mobile-only {
+        width: 10px;
+      }
+    }
+    &-list {
+      margin: 0px 10px;
+      padding: 0;
+      list-style: none;
+      border: solid 1px;
+      border-radius: 2px;
+      overflow: hidden;
+      display: flex;
+      transition: color 0.2s ease;
+
+      justify-content: space-evenly;
+
+      @include tablet-min{
+        margin: 0px 15px;
+      }
+      @include tablet-landscape-min {
+        margin: 0px 25px;
+      }
+      @include desktop-min{
+        margin: 0px 30px;
+      }
+      li {
+        padding: 6px 14px;
+        background-color: $c-white;
+        transition: color 0.2s ease;
+        font-size: 13px;
+        font-weight: 200;
+        text-transform: capitalize;
+        text-align: center;
+        width: 100%;
+        &:nth-child(n+2) {
+          border-left: solid 1px;
+        }
+        &.active, &:hover {
+          border-color: transparent;
+          background-color: #091c24;
+          color: $c-white;
+          cursor: pointer;
+        }
+        @include tablet-min {
+          font-size: 16px;
+        }
+      }
+    }
+    &-toggle {
+      margin-left: 15px;
+    }
+  }
   &__list{
     padding: 0;
     margin: 0;

src/components/Profile.vue

@@ -3,9 +3,18 @@
     <div class="profile__content" v-if="userLoggedIn">
       <header class="profile__header">
         <h2 class="profile__title">{{ emoji }} Welcome {{ userName }}</h2>
-        <button class="button" @click="logOut">Log Out</button>
+        
+        <div>
+           <router-link class="" :to="{name: 'settings'}">
+          </router-link>
+            <button v-if="showSettings" class="button__active" @click="toggleSettings" style="margin-right: 2em;">Hide settings</button>
+            <button v-else class="button" @click="toggleSettings" style="margin-right: 2em;">Show settings</button>
+          <button class="button" @click="logOut">Log Out</button>
+        </div>
       </header>
-      <movies-list v-for="item in listTypes" v-if="item.isProfileContent" :type="'component'" :mode="item.type" :category="item.query" :shortList="true"></movies-list>
+      <settings v-if="showSettings"></settings>
+
+      <movies-list v-for="item in listTypes" v-if="!showSettings && item.isProfileContent" :type="'component'" :mode="item.type" :category="item.query" :shortList="true"></movies-list>
       <!-- <movies-list v-for="item in listTypes" v-if="item.isCategory" :type="'component'" :mode="item.type" :shortList="true"></movies-list> -->
       <!-- <created-lists></created-lists> -->
     </div>
@@ -24,15 +33,17 @@
 import axios from 'axios'
 import storage from '../storage.js'
 import MoviesList from './MoviesList.vue'
+import Settings from './Settings.vue'
 // import CreatedLists from './CreatedLists.vue'
 
 export default {
-  components: { MoviesList },
+  components: { MoviesList, Settings },
   data(){
     return{
       userLoggedIn: '',
       userName: '',
       emoji: '',
+      showSettings: false,
       listTypes: storage.listTypes
     }
   },
@@ -62,6 +73,9 @@ export default {
     requestToken(){
       eventHub.$emit('requestToken');
     },
+    toggleSettings() {
+      this.showSettings = this.showSettings ? false : true;
+    },
     logOut(){
       localStorage.clear();
       eventHub.$emit('setUserStatus');

src/components/Register.vue

@@ -8,7 +8,7 @@
       <form class="form">
         <div class="form__buffer"></div>
 
-        <div>
+        <div class="center">
           <div class="form__group">
             <svg class="form__group__input-icon">
               <use xlink:href="#iconEmail"></use>
@@ -203,6 +203,9 @@ export default {
   color: #3e7549;
 }
 
+.center {
+  justify-content: center;
+}
 .form{
   z-index: 15;
   background-color: $c-light;
@@ -229,7 +232,6 @@ export default {
       font-weight: 100;
       font-size: 20px;
       border: 1px solid $c-dark;
-      margin-bottom: 1rem;
       margin-left: -2.2rem;
       z-index: 3;
       &:focus, &:hover {

src/components/Settings.vue

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

src/components/Signin.vue

@@ -18,7 +18,7 @@
             <svg class="form__group__input-icon">
               <use xlink:href="#iconKeyhole"></use>
             </svg>
-            <input class="form__group-input" type="password" ref="password" placeholder="Password">
+            <input class="form__group-input" type="password" ref="password" placeholder="Password" v-on:keyup.enter="signin">
           </div>
           
           <transition name="message-fade">

src/components/TorrentList.vue

@@ -63,7 +63,7 @@ export default {
       renderName: tablet,
       cols: [
         { label: 'Name', field: 'name', sort: true, hidden: tablet },
-        { label: 'Seeders', field: 'seed', sort: true },
+        { label: 'Seeders', field: 'seed', sort: (a, b) => parseInt(a) - parseInt(b) },
         { label: 'Size', field: 'size', sort: (a, b) => this.sortableSize(a) - this.sortableSize(b) },
         { label: 'Add', align: 'center' }
       ],

src/components/demo.vue

@@ -0,0 +1,221 @@
+<template>
+<modal name="demo-login" transition="pop-out" :width="modalWidth" :height="400">
+  <div class="box">
+      <div class="partition" id="partition-register">
+        <div class="partition-title">CREATE ACCOUNT</div>
+        <div class="partition-form">
+          <form autocomplete="false">
+
+            <div class="autocomplete-fix">
+              <input type="password">
+            </div>
+
+            <input id="n-username" type="text" placeholder="Username">
+            <input id="n-password1" type="password" placeholder="Password">
+            <input id="n-password2" type="password" placeholder="Retype password">
+          </form>
+
+          <div style="margin-top: 42px">
+          </div>
+
+          <div class="button-set">
+            <button id="goto-signin-btn">Sign In</button>
+            <button id="register-btn">Register</button>
+          </div>
+
+          <button class="large-btn github-btn">connect with <span>github</span></button>
+          <button class="large-btn facebook-btn">connect with <span>facebook</span></button>
+        </div>
+      </div>
+  </div>
+</modal>
+</template>
+<script>
+const MODAL_WIDTH = 370
+
+export default {
+  name: 'DemoLoginModal',
+  data () {
+    return {
+      modalWidth: MODAL_WIDTH
+    }
+  },
+  created () {
+    this.modalWidth = window.innerWidth < MODAL_WIDTH
+      ? MODAL_WIDTH / 2
+      : MODAL_WIDTH
+  }
+}
+</script>
+<style lang="scss">
+$background_color: #404142;
+$github_color: #DBA226;
+$facebook_color: #3880FF;
+
+.box {
+  background: white;
+  overflow: hidden;
+  width: 100%;
+  height: 400px;
+  border-radius: 2px;
+  box-sizing: border-box;
+  box-shadow: 0 0 40px black;
+  color: #8b8c8d;
+  font-size: 0;
+
+  .box-part {
+    display: inline-block;
+    position: relative;
+    vertical-align: top;
+    box-sizing: border-box;
+    height: 100%;
+
+    &#bp-right {
+      background: url("/static/panorama.jpg") no-repeat top left;
+      border-left: 1px solid #eee;
+    }
+  }
+
+  .box-messages {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .box-error-message {
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    height: 0;
+    line-height: 32px;
+    padding: 0 12px;
+    text-align: center;
+    width: 100%;
+    font-size: 11px;
+    color: white;
+    background: #F38181;
+  }
+
+  .partition {
+    width: 100%;
+    height: 100%;
+
+    .partition-title {
+      box-sizing: border-box;
+      padding: 30px;
+      width: 100%;
+      text-align: center;
+      letter-spacing: 1px;
+      font-size: 20px;
+      font-weight: 300;
+    }
+
+    .partition-form {
+      padding: 0 20px;
+      box-sizing: border-box;
+    }
+  }
+
+  input[type=password],
+  input[type=text] {
+    display: block;
+    box-sizing: border-box;
+    margin-bottom: 4px;
+    width: 100%;
+    font-size: 12px;
+    line-height: 2;
+    border: 0;
+    border-bottom: 1px solid #DDDEDF;
+    padding: 4px 8px;
+    font-family: inherit;
+    transition: 0.5s all;
+    outline: none;
+  }
+
+  button {
+    background: white;
+    border-radius: 4px;
+    box-sizing: border-box;
+    padding: 10px;
+    letter-spacing: 1px;
+    font-family: "Open Sans", sans-serif;
+    font-weight: 400;
+    min-width: 140px;
+    margin-top: 8px;
+    color: #8b8c8d;
+    cursor: pointer;
+    border: 1px solid #DDDEDF;
+    text-transform: uppercase;
+    transition: 0.1s all;
+    font-size: 10px;
+    outline: none;
+    &:hover {
+      border-color: mix(#DDDEDF, black, 90%);
+      color: mix(#8b8c8d, black, 80%);
+    }
+  }
+
+  .large-btn {
+    width: 100%;
+    background: white;
+
+    span {
+      font-weight: 600;
+    }
+    &:hover {
+      color: white !important;
+    }
+  }
+
+  .button-set {
+    margin-bottom: 8px;
+  }
+
+  #register-btn,
+  #signin-btn {
+    margin-left: 8px;
+  }
+
+  .facebook-btn {
+    border-color: $facebook_color;
+    color: $facebook_color;
+    &:hover {
+      border-color: $facebook_color;
+      background: $facebook_color;
+    }
+  }
+
+  .github-btn {
+    border-color: $github_color;
+    color: $github_color;
+    &:hover {
+      border-color: $github_color;
+      background: $github_color;
+    }
+  }
+
+  .autocomplete-fix {
+    position: absolute;
+    visibility: hidden;
+    overflow: hidden;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    left: 0;
+    top: 0;
+  }
+}
+
+.pop-out-enter-active,
+.pop-out-leave-active {
+  transition: all 0.5s;
+}
+
+.pop-out-enter,
+.pop-out-leave-active {
+  opacity: 0;
+  transform: translateY(24px);
+}
+</style>

src/main.js

@@ -2,7 +2,9 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import axios from 'axios'
 import router from './routes'
+
 import DataTablee from 'vue-data-tablee'
+import VModal from 'vue-js-modal'
 
 import App from './App.vue'
 
@@ -10,6 +12,7 @@ window.eventHub = new Vue();
 
 Vue.use(VueRouter, axios)
 Vue.use(DataTablee)
+Vue.use(VModal, { dialog: true })
 
 new Vue({
   el: '#app',

src/routes.js

@@ -85,6 +85,13 @@ let routes = [
       'search-router-view': require('./components/Profile.vue')
     }
   },
+  {
+    name: 'settings',
+    path: '/profile/settings',
+    components: {
+      'search-router-view': require('./components/Settings.vue')
+    }
+  },
   {
     name: '404',
     path: '/404',
@@ -99,8 +106,8 @@ let routes = [
 ];
 
 const router =  new VueRouter({
-  mode: 'history',
+  // mode: 'history',
-  base: '/request',
+  base: '/request/',
   routes,
   linkActiveClass: 'is-active'
 });

src/storage.js

@@ -6,12 +6,13 @@ let storage = {
   pageTitlePostfix: ' — ' + document.title,
   listTypes: [
     {
-      title: 'Upcoming Movies',
+      title: 'Your Requests',
-      shortTitle: 'Upcoming',
+      shortTitle: 'User Requests',
-      query: 'upcoming',
+      query: 'user-requests',
-      name: 'home-category',
+      name: 'user-requests',
-      type: 'collection',
+      type: 'user-requests',
-      isCategory: true
+      isProfileContent: true
+      // isCategory: true,
     },
     {
       title: 'Requested Movies & Shows',
@@ -22,6 +23,14 @@ let storage = {
       isCategory: true,
       isProfileContent: true
     },
+    {
+      title: 'Upcoming Movies',
+      shortTitle: 'Upcoming',
+      query: 'upcoming',
+      name: 'home-category',
+      type: 'collection',
+      isCategory: true
+    },
     {
       title: 'Now Playing Movies',
       shortTitle: 'Now Playing',
@@ -47,15 +56,6 @@ let storage = {
       title: 'Your Favorite Movies',
       query: 'favorite',
       isCategory: false
-    },
-    {
-      title: 'Your Requests',
-      shortTitle: 'User Requests',
-      query: 'user-requests',
-      name: 'user-requests',
-      type: 'user-requests',
-      isProfileContent: true
-      // isCategory: true,
     }
   ],
   categories: {},

webpack.config.js

@@ -5,7 +5,7 @@ module.exports = {
   entry: './src/main.js',
   output: {
     path: path.resolve(__dirname, './dist'),
-    publicPath: '/request/dist/',
+    publicPath: '/dist/',
     filename: 'build.js'
   },
   module: {