si può mandare avanti il contatore!

pizzicore/static/js/spa.js

@@ -13,10 +13,10 @@ const store = createStore({
     }
   },
   mutations: {
-      logIn(state, username, password) {
+      logIn(state, payload) {
           state.loggedIn = true
-          state.username = username
-          state.password = password
+          state.username = payload.username
+          state.password = payload.password
       },
       logOut(state) {
           state.loggedIn = false

pizzicore/static/vue/counter.js

@@ -26,7 +26,11 @@ export default {
 
     methods: {
         callNext() {
-            console.log("I should call the next", this.$store.state.username, this.$store.state.password)
+            let headers = new Headers()
+            let username = this.$store.state.username
+            let password = this.$store.state.password
+            headers.set('Authorization', 'Basic ' + btoa(username + ":" + password))
+            fetch('/v1/counter/' + this.queue_num + '/increment', {method: 'POST', headers: headers})
         }
     }
 }

pizzicore/static/vue/counterlist.js

@@ -28,7 +28,6 @@ export default {
             .then((response) => response.json())
             .then(function(data) {
                 me.queue_count = data.counters
-                console.log('qc', me.queue_count)
             })
         }
     },

pizzicore/static/vue/userlogin.js

@@ -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')
+        },
     }
 
 }