Joururi/spellsaurus
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Fixed the way components get store data

Browse Source
This commit is contained in:
Alexis
2020-12-19 17:04:22 +01:00
parent fa945e45c9
commit eba2669176
11 changed files with 245 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
api/repositories/user-repository.js
View File

@@ -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({

15
client/src/api/usersRepository.js
View File

@@ -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)
},
}

8
client/src/components/global/navbar/navbar.vue
View File

@@ -10,8 +10,8 @@
<router-link :to="link.url" class="nav-link">{{ link.text }}</router-link>
</li>
</ul>
<div v-if="user_token" class="navbar-nav">
<router-link :to="'/profil'" class="nav-link">{{ user_token }}</router-link>
<div v-if="user" class="navbar-nav">
<router-link :to="'/profil'" class="nav-link">{{ user.name }}</router-link>
<div @click="logoutUser()" class="nav-link">Deconnexion</div>
</div>
<div v-else class="navbar-nav">
@@ -44,8 +44,8 @@ export default {
}
},
computed: {
user_token() {
return this.$store.getters.getUserToken
user() {
return this.$store.getters.getUserProfile
}
},
methods: {

128
client/src/components/spells/spell-card.vue
View File

@@ -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)
})
}
},
}
</script>
<style lang="scss" scoped>
.spell-card {
footer {
a {
cursor: pointer;
}
.spell-card {
footer {
a {
cursor: pointer;
}
@mixin colorschool($sname,$scolor) {
&.#{$sname} {
.spellcard { border-left-color: $scolor; }
.h3>a { color: $scolor; }
}
}
@include colorschool(lumomancie,#babaa4);
@include colorschool(vitamancie,#57ab6e);
@include colorschool(obstrumancie,#bd4a66);
@include colorschool(tenebromancie,#404842);
@include colorschool(necromancie,#5d4777);
@include colorschool(morbomancie,#d8733d);
@include colorschool(pyromancie,#b6362a);
@include colorschool(hydromancie,#3f68c7);
@include colorschool(electromancie,#cd9731);
@include colorschool(terramancie,#7e5540);
@include colorschool(sidéromancie,#58697a);
@include colorschool(caelomancie,#a8a8a8);
@include colorschool(légimancie,#5dbabd);
@include colorschool(illusiomancie,#9f63a1);
@include colorschool(cruciomancie,#252451);
@include colorschool(chronomancie,#79896a);
@include colorschool(spatiomancie,#2d4776);
@include colorschool(kénomancie,#101010);
@include colorschool(lutomancie,#4e2827);
@include colorschool(échomancie,#6d9fd1);
@include colorschool(protomancie,#4f5751);
@include colorschool(rebumancie,#8e7245);
@include colorschool(vocamancie,#247864);
@include colorschool(somamancie,#976c67);
@include colorschool(antimancie,#ad95c1);
}
@mixin colorschool($sname,$scolor) {
&.#{$sname} {
.spellcard { border-left-color: $scolor; }
.h3>a { color: $scolor; }
}
}
@include colorschool(lumomancie,#babaa4);
@include colorschool(vitamancie,#57ab6e);
@include colorschool(obstrumancie,#bd4a66);
@include colorschool(tenebromancie,#404842);
@include colorschool(necromancie,#5d4777);
@include colorschool(morbomancie,#d8733d);
@include colorschool(pyromancie,#b6362a);
@include colorschool(hydromancie,#3f68c7);
@include colorschool(electromancie,#cd9731);
@include colorschool(terramancie,#7e5540);
@include colorschool(sidéromancie,#58697a);
@include colorschool(caelomancie,#a8a8a8);
@include colorschool(légimancie,#5dbabd);
@include colorschool(illusiomancie,#9f63a1);
@include colorschool(cruciomancie,#252451);
@include colorschool(chronomancie,#79896a);
@include colorschool(spatiomancie,#2d4776);
@include colorschool(kénomancie,#101010);
@include colorschool(lutomancie,#4e2827);
@include colorschool(échomancie,#6d9fd1);
@include colorschool(protomancie,#4f5751);
@include colorschool(rebumancie,#8e7245);
@include colorschool(vocamancie,#247864);
@include colorschool(somamancie,#976c67);
@include colorschool(antimancie,#ad95c1);
}
</style>

6
client/src/main.js
View File

@@ -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)

12
client/src/pages/spells/spells-page.vue
View File

@@ -6,14 +6,14 @@
</template>
<script>
import SpellsList from "~/components/spells/spells-list"
import SpellsList from "~/components/spells/spells-list"
export default {
name: 'spells-page',
components: {
'spell-list': SpellsList,
}
export default {
name: 'spells-page',
components: {
'spell-list': SpellsList,
}
}
</script>
<style lang="scss"></style>

94
client/src/pages/user/login-page.vue
View File

@@ -3,7 +3,9 @@
<section class="d-flex justify-content-center align-items-center">
<main>
<div class="title font-display mb-3">Connexion</div>
<form @submit="logUser">
<div class="form-group">
<label for="email">Addresse mail</label>
<input
@@ -11,10 +13,26 @@
type="email"
id="email"
class="form-control"
:class="{
'is-invalid': errors.mailEmpty || errors.login,
'is-valid': submitted && !errors.mailEmpty }"
placeholder="john.doe@gmail.com"
autocomplete="email">
<small class="form-text text-muted">Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion.</small>
<small
v-if="!errors.mailEmpty"
class="form-text text-muted"
>
Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion.
</small>
<small
v-if="errors.mailEmpty"
class="form-text text-danger"
>
Veuillez renseigner une adresse mail.
</small>
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input
@@ -22,11 +40,46 @@
type="password"
id="password"
class="form-control"
:class="{
'is-invalid': errors.passwordEmpty || errors.login,
'is-valid': submitted && !errors.passwordEmpty }"
autocomplete="current-password">
<small
v-if="!errors.passwordEmpty"
class="form-text text-muted"
>
Nous vous conseillons d'utiliser un mot de passe unique pour cette application seulement.
</small>
<small
v-if="errors.passwordEmpty"
class="form-text text-danger"
>
Veuillez renseigner un mot de passe.
</small>
</div>
<div class="form-check">
<input
type="checkbox"
v-model="remember_me"
id="remember-me"
class="form-check-input">
<label
class="form-check-label"
for="remember-me"
>
Rester connecté
</label>
</div>
<div class="form-group">
<small v-if="errors.login" class="text-danger">{{ errors.login }}</small>
</div>
<button type="submit" class="btn btn-primary">Connexion</button>
<router-link :to="'/inscription'" class="btn btn-dark">Inscription</router-link>
<small class="form-text text-muted">Vous avez oublié votre mot de passe ? Cliquez-ici pour le changer !</small>
<small class="form-text text-muted">Mot de passe oublié ? <a href="#">Vous pouvez le changer ici !</a></small>
</form>
</main>
</section>
@@ -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: "",
}
}
}
}

31
client/src/pages/user/profile-page.vue
View File

@@ -1,20 +1,35 @@
<template>
<div class="container-fluid p-4" id="spell-container">
<div class="display-3 font-display mb-3">
<span class="username">{{ user_token }}</span>
<!-- <span v-if="user.verified" class="verified"><i class="mad">check_circle</i></span> -->
</div>
<div
v-if="user"
class="container-fluid p-4"
id="spell-container"
>
<h2 class="display-3 font-display mb-3">
<span class="username">{{ user.name }}</span>
<span
v-if="user.verified"
class="verified"
>
<i class="mad">check_circle</i>
</span>
</h2>
</div>
</template>
<script>
export default {
name: 'profile-page',
computed: {
user_token() {
return this.$store.getters.getUserToken
data() {
return {
}
},
computed: {
user() {
return this.$store.getters.getUserProfile
}
}
}
</script>

8
client/src/pages/user/register-page.vue
View File

@@ -17,7 +17,7 @@
placeholder="John Doe"
autocomplete="username">
<small v-if="!errors.name" class="form-text text-muted">Vous pouvez changer votre pseudo à tout moment.</small>
<small v-if="errors.name" class="text-danger">{{ errors.name }}</small>
<small v-if="errors.name" class="form-text text-danger">{{ errors.name }}</small>
</div>
<div class="form-group">
<label for="email">Addresse mail</label>
@@ -32,7 +32,7 @@
placeholder="john.doe@gmail.com"
autocomplete="email">
<small v-if="!errors.email" class="form-text text-muted">Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion.</small>
<small v-if="errors.email" class="text-danger">{{ errors.email }}</small>
<small v-if="errors.email" class="form-text text-danger">{{ errors.email }}</small>
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
@@ -58,8 +58,8 @@
class="form-control"
autocomplete="password-verification">
<small v-if="!errors.password && !errors.password_check" class="form-text text-muted">Votre mot de passe doit idéalement contenir des symboles ainsi que des lettres et des chiffres.</small>
<small v-if="errors.password" class="text-danger">{{ errors.password }}</small>
<small v-if="errors.password_check" class="text-danger">{{ errors.password_check }}</small>
<small v-if="errors.password" class="form-text text-danger">{{ errors.password }}</small>
<small v-if="errors.password_check" class="form-text text-danger">{{ errors.password_check }}</small>
</div>
<button type="submit" class="btn btn-dark">Inscription</button>
</form>

39
client/src/routes.js
View File

@@ -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;

35
client/src/store/modules/user.store.js
View File

@@ -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,