adding a log in button and it's functionalities

book-racker/src/components/Header.vue

@@ -6,7 +6,13 @@
   >
     <v-app-bar-nav-icon ></v-app-bar-nav-icon>
 
-    <v-toolbar-title>Book Racker</v-toolbar-title>
+    <v-toolbar-title>
+        <span
+        class="home"
+        @click="navigateTo({name: 'root'})">
+        Book Racker
+        </span>
+    </v-toolbar-title>
 
     <v-spacer></v-spacer>
     <v-toolbar-items style="padding-top: 50px;padding-bottom: 20px;padding-right: 20px;">
@@ -15,10 +21,20 @@
         </v-btn>
     </v-toolbar-items>
 
-    <v-toolbar-items style="padding-top: 50px;padding-bottom: 20px;">
+    <v-toolbar-items style="padding-top: 50px;padding-bottom: 20px;padding-right: 20px;">
+        <router-link to="register">
             <v-btn >
               Sign Up
             </v-btn>
+        </router-link>
+    </v-toolbar-items>
+
+    <v-toolbar-items style="padding-top: 50px;padding-bottom: 20px;">
+        <router-link to="login">
+            <v-btn>
+               Log In
+            </v-btn>
+        </router-link>
     </v-toolbar-items>
   </v-toolbar>
 </template>
@@ -30,4 +46,10 @@ export default {
 </script>
 
 <style scoped>
+.home {
+    cursor: pointer;
+}
+.home:hover{
+    color: rgb(108, 236, 48);
+}
 </style>

book-racker/src/components/Login.vue

+/* eslint-disable */
+<template>
+  <v-layout column>
+    <v-flex xs3 offset-xs6>
+      <div class="white elevation-2" style="width: 1455px;padding-top: 100px;padding-left: 50px;height: 400px;">
+        <v-toolbar flat dense class="cyan" dark >
+        <v-toolbar-title>Login</v-toolbar-title>
+        </v-toolbar>
+        <div class="pl-4 pr-4 pt-2 pb-2">
+          <v-text-field  label="email" v-model="email"></v-text-field>
+          <br>
+          <v-text-field  label="password" v-model="password"></v-text-field>
+          <br>
+          <div class="error" v-html ="error"/>
+          <br>
+          <v-btn class="cyan" @click="login">Login</v-btn>
+        </div>
+      </div>
+    </v-flex>
+  </v-layout>
+</template>
+
+<script>
+import AuthentiacationService from '@/services/AuthenticationService'
+export default {
+  data () {
+    return {
+      email: '',
+      password: '',
+      error: null
+    }
+  },
+  methods: {
+    async login () {
+      try {
+        await AuthentiacationService.login({
+          email: this.email,
+          password: this.password
+        })
+      } catch (error) {
+        this.error = error.response.data.error
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .error{
+    color:red;
+  }
+</style>

book-racker/src/components/Register.vue

@@ -2,7 +2,7 @@
 <template>
   <v-layout column>
     <v-flex xs3 offset-xs6>
-      <div class="white elevation-2" style="width: 1455px;padding-top: 100px;padding-left: 50px;height: 400px">
+      <div class="white elevation-2" style="width: 1455px;padding-top: 100px;padding-left: 50px;height: 400px;">
         <v-toolbar flat dense class="cyan" dark >
         <v-toolbar-title>Register</v-toolbar-title>
         </v-toolbar>

book-racker/src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
 import Register from '@/components/Register'
+import Login from '@/components/Login'
 
 Vue.use(Router)
 
@@ -9,13 +10,18 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
+      name: 'root',
       component: HelloWorld
     },
     {
       path: '/register',
       name: 'register',
       component: Register
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: Login
     }
   ]
 })

book-racker/src/services/AuthenticationService.js

@@ -3,5 +3,8 @@ import Api from '@/services/Api'
 export default{
   register (credentials) {
     return Api().post('register', credentials)
+  },
+  login (credentials) {
+    return Api().post('login', credentials)
   }
 }

server/src/controllers/AuthenticationController.js

@@ -13,5 +13,25 @@ module.exports={
             })
         }
 
+    },
+    async login(req, res) {
+        try{
+            const {email, password} = req.body
+            const user= await User.findOne({
+                where: {
+                    email: email
+                }
+            })
+            if (!user) {
+                res.status(403).send({
+                    error: 'The login information was incorrect'
+                })
+            }
+            res.send(user.toJSON())
+            }catch (err){
+                res.status(400).send({
+                    error: 'This email account is already in use.'
+                })
+            }
     }
 }
\ No newline at end of file

server/src/routes.js

@@ -3,8 +3,10 @@ const AuthenticationController = require('./controllers/AuthenticationController
 const AuthenticationControllerPolicy = require('./policies/AuthenticationControllerPolicy')
 
 module.exports = (app) => {
-
   app.post('/register',
     AuthenticationControllerPolicy.register,
     AuthenticationController.register)
+
+  app.post('/login',
+    AuthenticationController.login)
 }