|
@@ -1,27 +1,52 @@
|
|
|
const template = `
|
|
|
-<div>
|
|
|
-<input name="user" :value="username" />
|
|
|
+<div v-if="!loggedIn">
|
|
|
+<input name="username" :value="username" />
|
|
|
<input name="password" type="password" :value="password" />
|
|
|
-<button @click="onSubmit" >Login</button>
|
|
|
+<button @click="checkLogin" >Login</button>
|
|
|
+</div>
|
|
|
+<div v-else>
|
|
|
+<button @click="logout">Logout</button>
|
|
|
</div>
|
|
|
`
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {
|
|
|
- username: "",
|
|
|
- password: "",
|
|
|
- loggedIn: false,
|
|
|
- }
|
|
|
+ return { }
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ loggedIn(){ return this.$store.state.loggedIn },
|
|
|
+ username(){ return this.$store.state.username },
|
|
|
+ password(){ return this.$store.state.password },
|
|
|
},
|
|
|
|
|
|
template: template,
|
|
|
|
|
|
methods: {
|
|
|
- onSubmit: function() {
|
|
|
- console.log('XXX should check now')
|
|
|
- this.$root.$store.commit('logIn', 'ciccio', 'puzzio')
|
|
|
- }
|
|
|
+ checkLogin: function() {
|
|
|
+ var username = document.querySelector('input[name=username]', this.$el).value
|
|
|
+ var password = document.querySelector('input[name=password]', this.$el).value
|
|
|
+ let $store = this.$root.$store
|
|
|
+ let headers = new Headers()
|
|
|
+ headers.set('Authorization', 'Basic ' + btoa(username + ":" + password))
|
|
|
+ fetch('/v1/whoami', {method: 'GET', headers: headers})
|
|
|
+ .then(function(response) {
|
|
|
+ if(response.ok) {
|
|
|
+ console.info("Login OK")
|
|
|
+ $store.commit({
|
|
|
+ type: 'logIn',
|
|
|
+ username: username,
|
|
|
+ password: password
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.warn("Login error")
|
|
|
+ // XXX: animate some form of error
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ logout: function() {
|
|
|
+ this.$root.$store.commit('logOut')
|
|
|
+ },
|
|
|
}
|
|
|
|
|
|
}
|