login request to plex is now working, and saves the token in store. made export routes and component

package-lock.json

@@ -2168,6 +2168,37 @@
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -3521,6 +3552,11 @@
         "randomfill": "^1.0.3"
       }
     },
+    "crypto-js": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz",
+      "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q=="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -6705,6 +6741,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "lz-string": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
+      "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY="
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -9082,6 +9123,15 @@
         "ajv-keywords": "^3.4.1"
       }
     },
+    "secure-ls": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/secure-ls/-/secure-ls-1.2.6.tgz",
+      "integrity": "sha512-g8vUSKl6elSfyAUHodybnNkuZW+mUYEOWj4SZIDg+xoQ1dq5ddktBoOFrtxQBUl88ZyAJOtGWQ1PRaOxkTAuZQ==",
+      "requires": {
+        "crypto-js": "^3.1.6",
+        "lz-string": "^1.4.4"
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",

package.json

@@ -9,9 +9,11 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
+    "axios": "^0.19.2",
     "buefy": "^0.8.17",
     "bulma": "^0.8.2",
     "core-js": "^3.6.4",
+    "secure-ls": "^1.2.6",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
     "vue-sidebar-menu": "^4.5.3",

src/components/Export.vue

@@ -0,0 +1,18 @@
+<template>
+  <section class="section">
+    <h1 class="title is-2">Welcome to Export</h1>
+    <h2 class="subtitle">Export can export stuff</h2>
+    <br>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'export'
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

src/components/Login.vue

@@ -24,14 +24,14 @@
             <div class="field">
               <label for="" class="label">Password</label>
               <div class="control has-icons-left">
-                <input type="password" placeholder="1234" class="input is-dark" v-model="input.password" v-on:keyup.enter="login()" required>
+                <input type="password" placeholder="1234" class="input is-dark" v-model="input.password" v-on:keyup.enter="loginToPlex()" required>
                 <span class="icon is-small is-left">
                   <i class="fa fa-lock"></i>
                 </span>
               </div>
             </div>
             <div class="field">
-              <button type="button" class="button is-success" v-on:click="login()">
+              <button type="button" class="button is-success" v-on:click="loginToPlex()">
                 Login
               </button>
             </div>
@@ -41,10 +41,15 @@
     </div>
   </div>
 </section>
-
 </template>
 
+
+
 <script>
+const axios = require('axios').default;
+import store from '../store'
+import router from '../router'
+
 export default {
   name: 'Login',
   data() {
@@ -52,7 +57,7 @@ export default {
       input: {
         username: "",
         password: ""
-      }
+      },
     }
   },
   methods: {
@@ -68,12 +73,51 @@ export default {
     danger(){
        this.$buefy.toast.open({
                     duration: 3000,
-                    message: `Wrong username or password`,
+                    message: "Wrong password or username",
+                    /*${status}: ${msg}*/
                     type: 'is-danger'
                 })
+    },
+    loginToPlex(){
+      axios({
+        method: 'POST',
+        url: 'https://plex.tv/users/sign_in.json',
+        responseType: 'json',
+        auth: {
+          username : this.input.username,
+          password:  this.input.password
+        },
+        headers: 
+        { 'X-Plex-Product' : 'webtools',
+          'X-Plex-Version' : '1.19.2',
+          'X-Plex-Client-Identifier' : 'Insert ID here',
+        }
+      })  
+        .then(function (response) {
+          store.commit("setAuthToken", response.data.user.authToken);
+          store.commit("setAuthentication", true);
+          router.replace({name: "home"}); 
+  })
+        .catch(function (error) {
+           if (error.response) {                  
+      // The request was made and the server responded with a status code
+      // that falls out of the range of 2xx
+      console.log(error.response.data)
+      console.log(error.response.status)
+      alert(error.response.data.error)
+      //this.danger(error.response.status, error.response.data.error);
+    } else if (error.request) {
+      // The request was made but no response was received
+      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+      // http.ClientRequest in node.js
+      console.log(error.request);
+    } else {
+      // Something happened in setting up the request that triggered an Error
+      console.log('Error', error.message);
     }    
-  }
-}
+  })
+    }
+  }}
 
 </script>
 

src/components/layout/Menu.vue

@@ -3,7 +3,6 @@
   :menu="menu"
   :collapsed="collapsed"
   @toggle-collapse="onToggleCollapse"
-  @item-click="onItemClick"
  />
 </template>
 
@@ -120,15 +119,7 @@ import '@fortawesome/fontawesome-free/css/all.css'
                 console.log(collapsed)
 
               },
-              onItemClick(event, item) {
-                      console.log('onItemClick')
-                             console.log(event)
-                      console.log(item)
-
-              }
-
         },  
-        
     }
 </script>
 

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Login from '../components/Login.vue'
 import Home from '../components/Home.vue'
+import Export from '../components/Export.vue'
 import Store from '../store/index.js'
 Vue.use(VueRouter)
 
@@ -26,6 +27,12 @@ Vue.use(VueRouter)
     name: "home",
     component: Home,
     meta: {requiresAuth: true}
+  },
+  {
+    path: '/export',
+    name: "export",
+    component: Export,
+    meta: {requiresAuth: true}
   }
 ]});
 

src/store/index.js

@@ -2,24 +2,28 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist';
 
-
 Vue.use(Vuex)
 
 const vuexLocal = new VuexPersistence({
-  storage: window.localStorage,
+  storage: window.sessionStorage,
 });
 
 
-
 export default new Vuex.Store({
   state: {
-    authenticated: false
+    authenticated: false,
+    authToken: ''
   },
   mutations: {
     setAuthentication(state, status) {
       state.authenticated = status;
+    },
+    setAuthToken(state, token){
+      state.authToken = token
     }
   },
+  getters: {
+  },
   actions: {
   },
   modules: {