From eba2669176917a355a03d867be7a442be5ee059c Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Sat, 19 Dec 2020 17:04:22 +0100 Subject: [PATCH] - Fixed the way components get store data --- api/repositories/user-repository.js | 4 +- client/src/api/usersRepository.js | 15 +- .../src/components/global/navbar/navbar.vue | 8 +- client/src/components/spells/spell-card.vue | 128 +++++++++--------- client/src/main.js | 6 +- client/src/pages/spells/spells-page.vue | 12 +- client/src/pages/user/login-page.vue | 94 ++++++++++++- client/src/pages/user/profile-page.vue | 31 +++-- client/src/pages/user/register-page.vue | 8 +- client/src/routes.js | 39 +++--- client/src/store/modules/user.store.js | 35 +++-- 11 files changed, 245 insertions(+), 135 deletions(-) diff --git a/api/repositories/user-repository.js b/api/repositories/user-repository.js index 631b8c7..9aceec5 100644 --- a/api/repositories/user-repository.js +++ b/api/repositories/user-repository.js @@ -117,7 +117,7 @@ class UserRepository { resolve({ "message": "Account successfully created !", "code": 201, - "token": newUser.uuid, + "user": newUser, }) }) .catch(err => { @@ -148,7 +148,7 @@ class UserRepository { resolve({ "message": "User successfully logged in !", "code": 200, - "token": fetchedUser.uuid, + "user": fetchedUser, }) } else { reject({ diff --git a/client/src/api/usersRepository.js b/client/src/api/usersRepository.js index 2e041a9..dfa0283 100644 --- a/client/src/api/usersRepository.js +++ b/client/src/api/usersRepository.js @@ -3,10 +3,13 @@ import api from './api' const resource = "/users" export default { - login(data) { - return api.post(`${resource}/login`, data) - }, - register(data) { - return api.post(`${resource}`, data) - }, + getOneFromUUID(uuid) { + return api.get(`${resource}/${uuid}`,) + }, + login(data) { + return api.post(`${resource}/login`, data) + }, + register(data) { + return api.post(`${resource}`, data) + }, } \ No newline at end of file diff --git a/client/src/components/global/navbar/navbar.vue b/client/src/components/global/navbar/navbar.vue index 8ae82e0..59a6df3 100644 --- a/client/src/components/global/navbar/navbar.vue +++ b/client/src/components/global/navbar/navbar.vue @@ -10,8 +10,8 @@ {{ link.text }} -
- {{ user_token }} +
+ {{ user.name }}
Deconnexion
@@ -44,8 +44,8 @@ export default { } }, computed: { - user_token() { - return this.$store.getters.getUserToken + user() { + return this.$store.getters.getUserProfile } }, methods: { diff --git a/client/src/components/spells/spell-card.vue b/client/src/components/spells/spell-card.vue index 6af67df..8ddec33 100644 --- a/client/src/components/spells/spell-card.vue +++ b/client/src/components/spells/spell-card.vue @@ -76,75 +76,77 @@ import { RepositoryFactory } from "~/api/repositories" const Spells = RepositoryFactory.get('spells') export default { - name: 'spell-card', - props: { - spell: Object, - }, - data() { - return { - main_school: this.spell.schools[0].name, - } - }, - created() { - this.main_school = this.main_school.toLowerCase() - }, - computed: { - user() { - return this.$store.state.user - } - }, - methods: { - editSpell(spell) { - this.$emit('editSpell', spell) - }, - deleteSpell(spell) { - Spells.deleteOne(this.spell.id) - .then(() => { - this.$emit('deleteSpell', spell) - }) - } + name: 'spell-card', + props: { + spell: Object, + }, + data() { + return { + main_school: this.spell.schools[0].name, + } + }, + created() { + this.main_school = this.main_school.toLowerCase() + }, + computed: { + user() { + return this.$store.getters.getUserProfile + } + }, + methods: { + editSpell(spell) { + this.$emit('editSpell', spell) }, + deleteSpell(spell) { + Spells.deleteOne(this.spell.id) + .then(() => { + this.$emit('deleteSpell', spell) + }) + } + }, } \ No newline at end of file diff --git a/client/src/main.js b/client/src/main.js index eeadef3..e90e995 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -3,6 +3,9 @@ import Vue from 'vue' import VueRouter from 'vue-router' import App from './app.vue' +// Environment +require('dotenv').config() + import store from './store' import Globals from './global-components.js' @@ -10,9 +13,6 @@ Globals.forEach(component => { Vue.component(component.name, component) }); -// Environment -require('dotenv').config() - // Cookies import VueCookies from 'vue-cookies' Vue.use(VueCookies) diff --git a/client/src/pages/spells/spells-page.vue b/client/src/pages/spells/spells-page.vue index 91388ae..00351e1 100644 --- a/client/src/pages/spells/spells-page.vue +++ b/client/src/pages/spells/spells-page.vue @@ -6,14 +6,14 @@ \ No newline at end of file diff --git a/client/src/pages/user/login-page.vue b/client/src/pages/user/login-page.vue index 0399ded..cf8e2a9 100644 --- a/client/src/pages/user/login-page.vue +++ b/client/src/pages/user/login-page.vue @@ -3,7 +3,9 @@
Connexion
+
+
- Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion. + + + Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion. + + + Veuillez renseigner une adresse mail. +
+
+ + Nous vous conseillons d'utiliser un mot de passe unique pour cette application seulement. + + + Veuillez renseigner un mot de passe. +
+ +
+ + +
+ +
+ {{ errors.login }} +
+ Inscription - Vous avez oublié votre mot de passe ? Cliquez-ici pour le changer ! + Mot de passe oublié ? Vous pouvez le changer ici ! +
@@ -41,26 +94,53 @@ export default { return { email: "", password: "", + remember_me: false, submitted: false, + errors: { - login: "" + mailEmpty: "", + passwordEmpty: "", + login: "", } } }, methods: { async logUser(e) { + this.submitted = true; + + this.errors = this.resetErrors(); + let userInput = { "mail": this.email, "password": this.password }; - this.$store.dispatch('user_login', userInput) - .then(() => { - this.$router.push('/profil'); - }) + if (this.email && this.password) { + this.$store.dispatch('user_login', userInput) + .then(() => { + this.$router.push('/profil'); + }) + .catch(() => { + this.errors.login = "Erreur d'authentification. Les identifiants ne correspondent pas." + }); + } else { + if (!userInput.mail) { + this.errors.mailEmpty = "Veuillez entrer une addresse mail valide." + } + if (!userInput.password) { + this.errors.passwordEmpty = "Veuillez entrer un mot de passe." + } + } e.preventDefault(); + }, + resetErrors() { + return { + mailEmpty: "", + passwordEmpty: "", + login: "", + } } } } diff --git a/client/src/pages/user/profile-page.vue b/client/src/pages/user/profile-page.vue index 1aa4071..be7234f 100644 --- a/client/src/pages/user/profile-page.vue +++ b/client/src/pages/user/profile-page.vue @@ -1,20 +1,35 @@ diff --git a/client/src/pages/user/register-page.vue b/client/src/pages/user/register-page.vue index f55518c..db9a38d 100644 --- a/client/src/pages/user/register-page.vue +++ b/client/src/pages/user/register-page.vue @@ -17,7 +17,7 @@ placeholder="John Doe" autocomplete="username"> Vous pouvez changer votre pseudo à tout moment. - {{ errors.name }} + {{ errors.name }}
@@ -32,7 +32,7 @@ placeholder="john.doe@gmail.com" autocomplete="email"> Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion. - {{ errors.email }} + {{ errors.email }}
@@ -58,8 +58,8 @@ class="form-control" autocomplete="password-verification"> Votre mot de passe doit idéalement contenir des symboles ainsi que des lettres et des chiffres. - {{ errors.password }} - {{ errors.password_check }} + {{ errors.password }} + {{ errors.password_check }}
diff --git a/client/src/routes.js b/client/src/routes.js index 9c0a412..12668aa 100644 --- a/client/src/routes.js +++ b/client/src/routes.js @@ -1,5 +1,6 @@ import VueRouter from 'vue-router' -import store from './store' + +// import store from './store' // Pages import Index from "~/pages/index-page" @@ -79,23 +80,23 @@ const router = new VueRouter({ linkExactActiveClass: "active", }) -router.beforeEach((to, from, next) => { - if (to.matched.some(record => record.meta.loginFilter)) { - if (store.getters.getUserToken) { - next({ - path: '/', - }); - } - next(); - } else if (to.matched.some(record => record.meta.logoutFilter)) { - if (!store.getters.getUserToken) { - next({ - path: '/connexion', - }); - } - next(); - } - next(); -}) +// router.beforeEach((to, from, next) => { +// if (to.matched.some(record => record.meta.loginFilter)) { +// if (store.getters.getUserProfile) { +// next({ +// path: '/', +// }); +// } +// next(); +// } else if (to.matched.some(record => record.meta.logoutFilter)) { +// if (!store.getters.getUserProfile) { +// next({ +// path: '/connexion', +// }); +// } +// next(); +// } +// next(); +// }) export default router; \ No newline at end of file diff --git a/client/src/store/modules/user.store.js b/client/src/store/modules/user.store.js index 80f1e8e..c3a8824 100644 --- a/client/src/store/modules/user.store.js +++ b/client/src/store/modules/user.store.js @@ -1,20 +1,22 @@ -// API -import { RepositoryFactory } from "~/api/repositories" -const Users = RepositoryFactory.get('users') +// import cookie from 'vue-cookies'; -export const namespaced = true +// API +import { RepositoryFactory } from "~/api/repositories"; +const Users = RepositoryFactory.get('users'); + +export const namespaced = true; const state = { status: { logged: false, - user_token: null, + profile: null, } }; const getters = { - getUserToken: state => { + getUserProfile: state => { if (state.status.logged) { - return state.status.user_token + return state.status.profile } else { return false } @@ -22,12 +24,12 @@ const getters = { }; const mutations = { - loginUser(state, user_token) { - state.status.user_token = user_token; + loginUser(state, user) { + state.status.profile = user; state.status.logged = true; }, logoutUser(state) { - state.status.user_token = null; + state.status.profile = null; state.status.logged = false; } }; @@ -37,9 +39,10 @@ const actions = { return new Promise((resolve, reject) => { Users.login(data) .then(v => { - let user_token = v.data.token; - commit('loginUser', user_token); - resolve(user_token); + let user = v.data.user; + // cookie.set('user_token', user.uuid); + commit('loginUser', user); + resolve(user); }) .catch(() => { reject(); @@ -47,10 +50,16 @@ const actions = { }) }, user_logout ({ commit }) { + // cookie.remove('user_token'); commit('logoutUser'); } }; +// Check if a cookie with user token exists +// if (cookie.get('user_token')) { +// mutations.loginUser(state, cookie.get('user_token')); +// } + export default { state, getters,