User Login lesson code

Author: atomjar

src/components/AppNav.vue

@@ -6,11 +6,19 @@
     <router-link to="/dashboard">
       Dashboard
     </router-link>
+    <router-link v-if="!loggedIn" to="/login" class="button">
+      Login
+    </router-link>
   </div>
 </template>
 
 <script>
-export default {}
+import { authComputed } from '../vuex/helpers.js'
+export default {
+  computed: {
+    ...authComputed
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import store from './vuex/store'
 
 Vue.config.productionTip = false
 

src/router.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import Home from './views/Home.vue'
 import Dashboard from './views/Dashboard.vue'
 import RegisterUser from './views/RegisterUser.vue'
+import LoginUser from './views/LoginUser.vue'
 
 Vue.use(Router)
 
@@ -24,6 +25,11 @@ const router = new Router({
       path: '/register',
       name: 'register',
       component: RegisterUser
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: LoginUser
     }
   ]
 })

src/views/Home.vue

@@ -1,9 +1,24 @@
 <template>
   <div class="home">
     <h1>Welcome to the App!</h1>
+    <div v-if="!loggedIn">
+      To use this app you'll need to
+      <router-link to="/login">
+        Login
+      </router-link>
+      or
+      <router-link to="/register">
+        Register
+      </router-link>
+    </div>
   </div>
 </template>
 
 <script>
-export default {}
+import { authComputed } from '../vuex/helpers.js'
+export default {
+  computed: {
+    ...authComputed
+  }
+}
 </script>

src/views/LoginUser.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <form @submit.prevent="login">
+      <label for="email">
+        Email:
+      </label>
+      <input v-model="email" type="email" name="email" value>
+
+      <label for="password">
+        Password:
+      </label>
+      <input v-model="password" type="password" name="password" value>
+
+      <button type="submit" name="button">
+        Login
+      </button>
+      <router-link to="/register">
+        Don't have an account? Register.
+      </router-link>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      email: '',
+      password: ''
+    }
+  },
+  methods: {
+    login () {
+      this.$store
+        .dispatch('login', {
+          email: this.email,
+          password: this.password
+        })
+        .then(() => {
+          this.$router.push({ name: 'dashboard' })
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/RegisterUser.vue

@@ -19,6 +19,9 @@
       <button type="submit" name="button">
         Register
       </button>
+      <router-link to="/login">
+        Already have an account? Login.
+      </router-link>
     </form>
   </div>
 </template>

src/vuex/helpers.js

@@ -0,0 +1,5 @@
+import { mapGetters } from 'vuex'
+
+export const authComputed = {
+  ...mapGetters(['loggedIn'])
+}

src/store.js src/vuex/store.jssrc/store.js renamed to src/vuex/store.js

@@ -24,6 +24,18 @@ export default new Vuex.Store({
         .then(({ data }) => {
           commit('SET_USER_DATA', data)
         })
+    },
+    login ({ commit }, credentials) {
+      return axios
+        .post('//localhost:3000/login', credentials)
+        .then(({ data }) => {
+          commit('SET_USER_DATA', data)
+        })
+    }
+  },
+  getters: {
+    loggedIn (state) {
+      return !!state.user
     }
   }
 })