From bcb87e7ae60005fae2c175b271fb9c653a60f504 Mon Sep 17 00:00:00 2001
From: V S Tharunika <1vstharu279@gmail.com>
Date: Tue, 29 Dec 2020 19:41:14 +0530
Subject: [PATCH] adding a log in button and it's functionalities

---
 book-racker/src/components/Header.vue         | 30 +++++++++--
 book-racker/src/components/Login.vue          | 52 +++++++++++++++++++
 book-racker/src/components/Register.vue       |  4 +-
 book-racker/src/router/index.js               |  8 ++-
 .../src/services/AuthenticationService.js     |  5 +-
 .../controllers/AuthenticationController.js   | 24 ++++++++-
 server/src/routes.js                          |  6 ++-
 7 files changed, 117 insertions(+), 12 deletions(-)
 create mode 100644 book-racker/src/components/Login.vue

diff --git a/book-racker/src/components/Header.vue b/book-racker/src/components/Header.vue
index 4777f376..aeec67e5 100644
--- a/book-racker/src/components/Header.vue
+++ b/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;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;">
-        <v-btn >
-            Sign Up
-        </v-btn>
+        <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>
diff --git a/book-racker/src/components/Login.vue b/book-racker/src/components/Login.vue
new file mode 100644
index 00000000..e8016333
--- /dev/null
+++ b/book-racker/src/components/Login.vue
@@ -0,0 +1,52 @@
+/* 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>
diff --git a/book-racker/src/components/Register.vue b/book-racker/src/components/Register.vue
index 6b11b639..6396f864 100644
--- a/book-racker/src/components/Register.vue
+++ b/book-racker/src/components/Register.vue
@@ -2,8 +2,8 @@
 <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>
+      <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>
         <div class="pl-4 pr-4 pt-2 pb-2">
diff --git a/book-racker/src/router/index.js b/book-racker/src/router/index.js
index b83c9200..784e8454 100644
--- a/book-racker/src/router/index.js
+++ b/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
     }
   ]
 })
diff --git a/book-racker/src/services/AuthenticationService.js b/book-racker/src/services/AuthenticationService.js
index a09970f6..b4a21b61 100644
--- a/book-racker/src/services/AuthenticationService.js
+++ b/book-racker/src/services/AuthenticationService.js
@@ -1,7 +1,10 @@
 import Api from '@/services/Api'
 /* eslint-disable no-trailing-spaces */
 export default{
-  register (credentials) {       
+  register (credentials) {
     return Api().post('register', credentials)
+  },
+  login (credentials) {
+    return Api().post('login', credentials)
   }
 }
diff --git a/server/src/controllers/AuthenticationController.js b/server/src/controllers/AuthenticationController.js
index dcc129d4..6209cfb2 100644
--- a/server/src/controllers/AuthenticationController.js
+++ b/server/src/controllers/AuthenticationController.js
@@ -12,6 +12,26 @@ module.exports={
                 error: 'This email account is already in use.'
             })
         }
-      
-  }
+
+    },
+    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
diff --git a/server/src/routes.js b/server/src/routes.js
index 99dd95e2..367526d9 100644
--- a/server/src/routes.js
+++ b/server/src/routes.js
@@ -3,8 +3,10 @@ const AuthenticationController = require('./controllers/AuthenticationController
 const AuthenticationControllerPolicy = require('./policies/AuthenticationControllerPolicy')
 
 module.exports = (app) => {
-
-    app.post('/register',
+  app.post('/register',
     AuthenticationControllerPolicy.register,
     AuthenticationController.register)
+
+  app.post('/login',
+    AuthenticationController.login)
 }
-- 
GitLab