Lesson 3 finish code

Author: atomjar

src/router.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Home from './views/Home.vue'
 import Dashboard from './views/Dashboard.vue'
+import RegisterUser from './views/RegisterUser.vue'
 
 Vue.use(Router)
 
@@ -18,6 +19,11 @@ const router = new Router({
       path: '/dashboard',
       name: 'dashboard',
       component: Dashboard
+    },
+    {
+      path: '/register',
+      name: 'register',
+      component: RegisterUser
     }
   ]
 })

src/store.js

@@ -1,10 +1,29 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import axios from 'axios'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {}
+  state: {
+    user: null
+  },
+  mutations: {
+    SET_USER_DATA (state, userData) {
+      state.user = userData
+      localStorage.setItem('user', JSON.stringify(userData))
+      axios.defaults.headers.common['Authorization'] = `Bearer ${
+        userData.token
+      }`
+    }
+  },
+  actions: {
+    register ({ commit }, credentials) {
+      return axios
+        .post('//localhost:3000/register', credentials)
+        .then(({ data }) => {
+          commit('SET_USER_DATA', data)
+        })
+    }
+  }
 })

src/views/RegisterUser.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <form @submit.prevent="register">
+      <label for="name">
+        Name:
+      </label>
+      <input v-model="name" type="text" name="name" value>
+
+      <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">
+        Register
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      name: '',
+      email: '',
+      password: ''
+    }
+  },
+  methods: {
+    register () {
+      this.$store
+        .dispatch('register', {
+          name: this.name,
+          email: this.email,
+          password: this.password
+        })
+        .then(() => {
+          this.$router.push({ name: 'dashboard' })
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>