Skip to content

Commit

Permalink
Implements authentication
Browse files Browse the repository at this point in the history
  • Loading branch information
Agusnez committed Mar 24, 2019
1 parent d5d8703 commit bd7c6ee
Show file tree
Hide file tree
Showing 10 changed files with 191 additions and 40 deletions.
32 changes: 26 additions & 6 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Footer.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
48 changes: 19 additions & 29 deletions src/components/HelloWorld.vue
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Navbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -24,7 +24,7 @@
<script>
export default {
name: 'Navbar',
props: {
props:{
}
}
Expand Down
6 changes: 5 additions & 1 deletion src/pages/home/App.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div id="app">
<Navbar />

<Footer />
</div>
</template>
Expand Down Expand Up @@ -29,7 +30,10 @@ export default {
}
html {
background-color: #E8EDF0;
background-color: #ffffff;
}
</style>
84 changes: 84 additions & 0 deletions src/pages/login/App.vue
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 20 additions & 0 deletions src/pages/login/main.js
Original file line number Diff line number Diff line change
@@ -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')
17 changes: 17 additions & 0 deletions src/pages/router/index.js
Original file line number Diff line number Diff line change
@@ -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"
})
12 changes: 12 additions & 0 deletions vue.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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']
}
}
}

0 comments on commit bd7c6ee

Please sign in to comment.