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