From bd7c6ee870a746582b026c42b8a7e43ee770ac9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20N=C3=BA=C3=B1ez?= <seviagus@gmail.com>
Date: Sun, 24 Mar 2019 12:41:41 +0100
Subject: [PATCH] Implements authentication

---
 package-lock.json             | 32 ++++++++++---
 package.json                  |  4 ++
 src/components/Footer.vue     |  4 +-
 src/components/HelloWorld.vue | 48 ++++++++------------
 src/components/Navbar.vue     |  4 +-
 src/pages/home/App.vue        |  6 ++-
 src/pages/login/App.vue       | 84 +++++++++++++++++++++++++++++++++++
 src/pages/login/main.js       | 20 +++++++++
 src/pages/router/index.js     | 17 +++++++
 vue.config.js                 | 12 +++++
 10 files changed, 191 insertions(+), 40 deletions(-)
 create mode 100644 src/pages/login/App.vue
 create mode 100644 src/pages/login/main.js
 create mode 100644 src/pages/router/index.js

diff --git a/package-lock.json b/package-lock.json
index 20b16c6..43f41b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1894,6 +1894,15 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -4889,7 +4898,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
       "integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
-      "dev": true,
       "requires": {
         "debug": "^3.2.6"
       },
@@ -4898,7 +4906,6 @@
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
           "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -6313,8 +6320,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-callable": {
       "version": "1.1.4",
@@ -6716,6 +6722,11 @@
         "verror": "1.10.0"
       }
     },
+    "jwt-decode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
+      "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -7236,8 +7247,7 @@
     "ms": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-      "dev": true
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -10609,6 +10619,16 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.8.tgz",
       "integrity": "sha512-+vp9lEC2Kt3yom673pzg1J7T1NVGuGzO9j8Wxno+rQN2WYVBX2pyo/RGQ3fXCLh2Pk76Skw/laAPCuBuEQ4diw=="
     },
+    "vue-axios": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.4.tgz",
+      "integrity": "sha512-DS8Q+WFT3i7nS0aZ/NMmTPf2yhbtlXhj4QEZmY69au/BshsGzGjC6dXaniZaPQlErP3J3Sv1HtQ4RVrXaUTkxA=="
+    },
+    "vue-cookies": {
+      "version": "1.5.12",
+      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.5.12.tgz",
+      "integrity": "sha512-NaXbxyJIyi8/UgC8ZLQ6O+6OQze5taToCWOkRo28NP4ZRtEyQ04qkEu6KL9g/1w/BGsuhUw5puSi13V0qz8vnw=="
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
diff --git a/package.json b/package.json
index 8931009..c21b873 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.0.0-rc.13",
+    "jwt-decode": "^2.2.0",
     "vue": "^2.6.8",
+    "vue-axios": "^2.1.4",
+    "vue-cookies": "^1.5.12",
     "vue-router": "^3.0.2"
   },
   "devDependencies": {
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 7d24c1f..a10d4b7 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,6 +1,6 @@
 <template>
-    <div>
-    <b-navbar type="dark" variant="dark" fixed="bottom" >
+    <div id="footer">
+    <b-navbar type="dark" variant="dark" fixed="bottom">
         <b-nav-text>© Copyright 2019 | Made with ❤️ in Sevilla</b-nav-text>
          <b-navbar-nav class="ml-auto">
             <b-nav-item href="#">About us</b-nav-item>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 879051a..004b5a9 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,46 +1,36 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
+    <br/>
+    <h1>{{msg}}</h1>
   </div>
 </template>
 
 <script>
 export default {
   name: 'HelloWorld',
-  props: {
-    msg: String
+  data () {
+    return {
+      msg: '',
+    }
+  },
+    mounted: function () {
+    var token = 'JWT ' + this.$cookies.get('token')
+    this.$http.get('http://localhost:8000/api/v1/helloworld', { headers: 
+      { Authorization: token }
+      }).then((result) => {
+        this.msg = result.data.saludo
+      })
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+h1 {
+  text-align: left;
+  margin-left: 1em;
+  
+}
 h3 {
   margin: 40px 0 0;
 }
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index ba280ff..b543842 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -11,7 +11,7 @@
         <b-navbar-nav class="ml-auto">
             <b-nav-item href="/explore">Explore</b-nav-item>
             <b-nav-item href="#">Pricing</b-nav-item>
-            <b-nav-item href="#">Log In</b-nav-item>
+            <b-nav-item href="/login">Log In</b-nav-item>
             <b-nav-item-dropdown text="Lang" right>
             <b-dropdown-item href="#">EN</b-dropdown-item>
             <b-dropdown-item href="#">ES</b-dropdown-item>
@@ -24,7 +24,7 @@
 <script>
 export default {
   name: 'Navbar',
-  props: {
+  props:{
       
   }
 }
diff --git a/src/pages/home/App.vue b/src/pages/home/App.vue
index 47fe7f9..a686b13 100644
--- a/src/pages/home/App.vue
+++ b/src/pages/home/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="app">
     <Navbar />
+
     <Footer />
   </div>
 </template>
@@ -29,7 +30,10 @@ export default {
 }
 
 html {
-  background-color: #E8EDF0;
+  background-color: #ffffff;
 }
 
+
+
+
 </style>
diff --git a/src/pages/login/App.vue b/src/pages/login/App.vue
new file mode 100644
index 0000000..3cf88b2
--- /dev/null
+++ b/src/pages/login/App.vue
@@ -0,0 +1,84 @@
+<template>
+  <div id="app">
+    <Navbar />
+        <b-form id="form" @submit.prevent @submit="onSubmit" v-if="show">
+    <label for="textUsername">Username</label>
+    <b-input type="text" v-model="form.username" id="textUsername"/>
+    <br/>
+    <label for="textPassword">Password</label>
+    <b-input type="password" id="textPassword" v-model="form.password" aria-describedby="passwordHelpBlock" />
+    <br/>
+    <b-button type="submit" variant="primary">Log in</b-button>
+   </b-form>
+
+  <router-view></router-view>
+
+    <Footer />
+  </div>
+</template>
+
+<script>
+import Navbar from '../../components/Navbar.vue'
+import Footer from '../../components/Footer.vue'
+
+export default {
+  name: 'app',
+  components: {
+    Navbar,
+    Footer
+  },
+  data() {
+      return {
+        form: {
+          username: '',
+          password: ''
+        },
+        show: true
+      }
+    },
+  methods: {
+    onSubmit(evt) {
+      evt.preventDefault()
+
+      var username = this.form.username
+      var password = this.form.password
+
+      const baseURI = 'http://localhost:8000/api/v1/login'
+      this.$http.post(baseURI, {
+          'username':username,
+          'password':password
+      })
+      .then((result) => {
+        //alert(JSON.stringify(result.data))
+        this.$cookies.set('token',result.data.token)
+        this.$router.replace({path:'/helloworld'})
+        this.show = false
+      })
+    }
+  }
+}
+
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  
+}
+
+#form {
+  padding-top: 5em;
+  width: 50%;
+  text-align: center;
+  display: inline-block;
+}
+
+html {
+  background-color: #ffffff;
+}
+
+</style>
diff --git a/src/pages/login/main.js b/src/pages/login/main.js
new file mode 100644
index 0000000..ced1fda
--- /dev/null
+++ b/src/pages/login/main.js
@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import App from './App.vue'
+import BootstrapVue from 'bootstrap-vue'
+import VueCookies from 'vue-cookies'
+import axios from 'axios'
+import router from '../router'
+
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+Vue.prototype.$http = axios
+
+Vue.config.productionTip = false
+Vue.use(BootstrapVue)
+Vue.use(VueCookies)
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')
diff --git a/src/pages/router/index.js b/src/pages/router/index.js
new file mode 100644
index 0000000..3414b19
--- /dev/null
+++ b/src/pages/router/index.js
@@ -0,0 +1,17 @@
+import Vue    from 'vue'
+import Router from 'vue-router'
+
+import HelloWorld    from '@/components/HelloWorld'
+
+Vue.use(Router)
+
+export default new Router({
+    routes: [
+        {
+            path: '/helloworld',
+            component: HelloWorld
+        }
+    ],
+    linkActiveClass: "active",
+    mode: "history"
+})
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index c599814..5567bd2 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -35,6 +35,18 @@ module.exports = {
         // chunks to include on this page, by default includes
         // extracted common chunks and vendor chunks.
         chunks: ['chunk-vendors', 'chunk-common', 'explore']
+      },
+      'login': {
+        // entry for the page
+        entry: 'src/pages/login/main.js',
+        // the source template
+        template: 'public/index.html',
+        // when using title option,
+        // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
+        title: 'Log in',
+        // chunks to include on this page, by default includes
+        // extracted common chunks and vendor chunks.
+        chunks: ['chunk-vendors', 'chunk-common', 'login']
       }
     }
   }
\ No newline at end of file