feature: login actions

Author: enricodeleo

auth/src/App.vue

@@ -19,23 +19,13 @@
               Profile
             </router-link>
           </div>
-
-          <div class="navbar-end">
-            <div class="navbar-item">
-              <div class="buttons">
-                <router-link :to="{ name: 'index' }" class="button is-light">
-                  Log in
-                </router-link>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </nav>
-    <div class="container">
-      <!-- component matched by the route will render here -->
-      <router-view></router-view>
-    </div>
+
+    <!-- component matched by the route will render here -->
+    <router-view></router-view>
+
     <footer class="footer">
       <div class="content has-text-centered">
         <p>&copy; Copyleft {{ new Date().toLocaleString('it-IT', { year: 'numeric' }) }} Point of Vue</p>
@@ -55,11 +45,6 @@ export default {
 
   html,
   body {
-    width: 100%;
-    height: 100%;
-    min-height: 100%;
-    padding: 0;
-    margin: 0;
     overflow-x: hidden;
   }
 </style>

auth/src/pages/Login.vue

@@ -1,7 +1,28 @@
 <template>
-  <div class="container">
-
-  </div>
+  <section class="hero is-medium">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <div class="column is-4 is-offset-4">
+          <p class="subtitle has-text-black">Please login to proceed.</p>
+          <div class="box">
+            <form @submit.prevent="loginSubmit">
+              <div class="field">
+                <div class="control">
+                  <input v-model="email" class="input" type="text" placeholder="Your Email" autofocus="">
+                </div>
+              </div>
+              <div class="field">
+                <div class="control">
+                  <input v-model="password" class="input" type="password" placeholder="Your Password">
+                </div>
+              </div>
+              <button class="button is-block is-info is-fullwidth">Login</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script>
@@ -10,8 +31,18 @@ export default {
 
   data() {
     return {
-
+      email: null,
+      password: null,
     };
   },
+
+  methods: {
+    loginSubmit() {
+      this.$store.dispatch('doLogin', {
+        email: this.email,
+        password: this.password,
+      });
+    }
+  }
 }
 </script>

auth/src/router.js

@@ -33,10 +33,10 @@ const router = new VueRouter({
  * Redirect to login if the user is not authenticated
  */
 router.beforeEach((to, from, next) => {
-  if (to.name !== 'login' && !store.state.accessToken) {
-    next('/login');
+  if (store.state.accessToken || to.name === 'login' ) {
+    next();
   }
-  next();
+  next('/login');
 });
 
 Vue.use(VueRouter);

auth/src/store/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
+import router from '../router';
+
 Vue.use(Vuex);
 
 const user = {
@@ -14,7 +16,12 @@ const user = {
   },
   mutations: {
     updateUser: (state, data) => {
-      state = data;
+      state.id = data.id;
+      state.registeredAt = data.registeredAt;
+      state.avatar = data.avatar;
+      state.name = data.name;
+      state.email = data.email;
+      state.accessToken = data.accessToken;
     },
     logout: (state) => {
       state.accessToken = null;
@@ -32,10 +39,13 @@ const user = {
       });
       const response = await rawResponse.json();
       commit('updateUser', response);
+      console.log(response);
+      router.push('/');
     },
 
     doLogout({ commit }) {
       commit('logout');
+      router.push('/');
     }
   },
   getters: {},