Lesson 3 changes

Author: atomjar

db/user.json

@@ -1,5 +1,5 @@
 {
-  "name": "John Smith",
-  "email": "john@gmail.com",
+  "name": "Kate Mary",
+  "email": "kate@gmail.com",
   "password": "pass123"
 }

server.js

@@ -16,9 +16,15 @@ app.get('/', (req, res) => {
   })
 })
 
-app.get('/dashboard', (req, res) => {
-  res.json({
-    events: events
+app.get('/dashboard', verifyToken, (req, res) => {
+  jwt.verify(req.token, 'the_secret_key', err => {
+    if (err) {
+      res.sendStatus(401)
+    } else {
+      res.json({
+        events: events
+      })
+    }
   })
 })
 

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>