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

Merge branch 'develop/vue/store' into dev

Browse Source
This commit is contained in:
Alexis
2020-12-23 20:46:48 +01:00
parent 597307be40 65abb41a9f
commit 772b225072
17 changed files with 786 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,7 +31,7 @@ class UserRepository {
})
.catch(() => {
reject({
"message": "Database error, couldn't get all users.",
"message": "Erreur de base de données, les utilisateurs n'ont pas pu être récupérés.",
"code": 500
})
})
@@ -48,7 +48,7 @@ class UserRepository {
})
.catch(err => {
reject({
"message": "User with this UUID was not found.",
"message": "L'utilisateur avec cet UUID n'a pas été trouvé.",
"code": 404
})
})
@@ -65,7 +65,7 @@ class UserRepository {
})
.catch(() => {
reject({
"message": "User with this email was not found.",
"message": "L'utilisateur avec cet email n'a pas été trouvé.",
"code": 404
})
})
@@ -77,17 +77,17 @@ class UserRepository {
// Checks if body exists and if the model fits, and throws errors if it doesn't
if (isEmptyObject(u)) {
reject({
"message": "Request body cannot be empty.",
"message": "Le corps de requête ne peut être vide.",
"code": 403
})
} else if (!v.validate(u, UserValidation).valid) {
reject({
"message": "Schema is not valid - " + v.validate(u, UserValidation).errors,
"message": "Structure de la requête invalide - " + v.validate(u, UserValidation).errors,
"code": 403
})
} else if (isXSSAttempt(u.name) || isXSSAttempt(u.password) || isXSSAttempt(u.mail)) {
reject({
"message": "Injection attempt detected, aborting the request.",
"message": "Essai d'injection détecté, avortement de la requête.",
"code": 403
})
} else {
@@ -115,13 +115,14 @@ class UserRepository {
})
.then(newUser => {
resolve({
"message": "Account successfully created !",
"message": `Compte utilisateur #${newUser.id} créé avec succès.`,
"code": 201,
"user": newUser,
})
})
.catch(err => {
resolve({
"message": "An error has occured while creating your account.",
"message": "Une erreur s'est produite en créant votre compte. Veuillez réessayer ultérieurement ou contactez l'administrateur.",
"code": 500,
})
})
@@ -145,12 +146,14 @@ class UserRepository {
if (match) {
resolve({
"message": "User successfully logged in !",
"message": `L'utilisateur #${fetchedUser.id} s'est connecté.`,
"code": 200,
"user": fetchedUser,
})
} else {
reject({
"message": "Les informations de connexion sont erronées.",
"message": "Les informations de connexions sont erronées.",
"code": 400,
})
}
})
@@ -163,18 +166,34 @@ class UserRepository {
// Check if one user already has that email
checkIfEmailAvailable(mail) {
return new Promise((resolve, reject) => {
if (!this.validateEmail(mail)) {
reject({
"message": "La requête n'est pas un email valide.",
"code": 400,
})
}
this.getOneByEmail(mail, false)
.then(() => {
reject({
"message": "L'email est déjà utilisé par un autre utilisateur.",
"code": 403
"message": "Cet email est déjà lié à un compte.",
"code": 409
})
})
.catch(() => {
resolve(true)
resolve({
"message": "Cet email est disponible.",
"code": 200
})
})
})
}
validateEmail(email) {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
}
module.exports = UserRepository

29
api/routes/users.js
View File

@@ -17,7 +17,6 @@ const Users = new UserRepository();
const getUsers = () => {
return Users.getAll()
.catch(err => {
console.log(err)
throw err
})
}
@@ -38,11 +37,10 @@ router.get('/', async (req, res) => {
})
// GET ONE FORM UUID ------------------
// GET ONE FROM UUID ------------------
const getUserByUUID = (uuid) => {
return Users.getOneByUUID(uuid)
.catch(err => {
console.log(err)
throw err
})
}
@@ -63,11 +61,34 @@ router.get('/:uuid/', async (req, res) => {
})
// CHECK IF MAIL IS AVAILABLE ------------------
const checkIfEmailAvailable = (mail) => {
return Users.checkIfEmailAvailable(mail)
.catch(err => {
throw err
})
}
router.get('/available/:mail/', async (req, res) => {
checkIfEmailAvailable(req.params.mail)
.then(v => {
res.setHeader('Content-Type', 'application/json;charset=utf-8')
res.end(JSON.stringify(v))
})
.catch(err => {
res.status(err.code).send(JSON.stringify(
{
"error": err.message,
"code": err.code
})
)
})
})
// LOG A USER ------------------
const logUser = (mail, password) => {
return Users.logUser(mail, password)
.catch(err => {
console.log(err)
throw err
})
}

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

@@ -3,10 +3,16 @@ 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}`,)
},
checkEmailAvailable(mail) {
return api.get(`${resource}/available/${mail}`)
},
login(data) {
return api.post(`${resource}/login`, data)
},
register(data) {
return api.post(`${resource}`, data)
},
}

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

@@ -1,60 +1,61 @@
<template>
<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
<router-link :to="'/'" class="navbar-brand font-display font-weight-700">Auracle</router-link>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto" v-if="links.length != 0">
<li class="nav-item" v-for="(link, index) in links" :key="index">
<router-link :to="link.url" class="nav-link">{{ link.text }}</router-link>
</li>
</ul>
<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">
<router-link :to="'/connexion'" class="nav-link">Connexion</router-link>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
<router-link :to="'/'" class="navbar-brand font-display font-weight-700">Auracle</router-link>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto" v-if="links.length != 0">
<li class="nav-item" v-for="(link, index) in links" :key="index">
<router-link :to="link.url" class="nav-link">{{ link.text }}</router-link>
</li>
</ul>
<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">
<router-link :to="'/connexion'" class="nav-link">Connexion</router-link>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'navbar',
data() {
return {
links: [
{
text: 'Sortilèges',
url: '/sorts',
},
{
text: 'Écoles',
url: '/ecoles',
},
{
text: 'Chronologie',
url: '/ages',
}
]
}
export default {
name: 'navbar',
data() {
return {
links: [
{
text: 'Sortilèges',
url: '/sorts',
},
computed: {
user() {
return this.$store.state.user
}
{
text: 'Écoles',
url: '/ecoles',
},
methods: {
logoutUser() {
this.$cookies.remove('U_')
this.$store.commit('logout')
this.$router.push('/')
}
{
text: 'Chronologie',
url: '/ages',
}
]
}
},
computed: {
user() {
return this.$store.getters.getUserProfile
}
},
methods: {
logoutUser() {
this.$store.dispatch('user_logout');
this.$router.push('/');
}
}
}
</script>
<style lang="scss"></style>

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

@@ -61,6 +61,7 @@
<template v-slot:modal-footer="{ close }">
<button type="button" class="btn btn-danger" data-dismiss="modal" @click="close()">Fermer</button>
<!-- <input type="button" class="btn btn-success" value="Enregistrer comme nouveau" @click="cloneSpell()"> -->
<input type="submit" class="btn btn-primary" value="Enregistrer" form="update-spell">
</template>
</b-modal>

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>

41
client/src/main.js
View File

@@ -1,17 +1,18 @@
// Core
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import App from './app.vue'
// Environment
require('dotenv').config()
import store from './store'
import Globals from './global-components.js'
Globals.forEach(component => {
Vue.component(component.name, component)
});
// Environment
require('dotenv').config()
// Cookies
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
@@ -55,38 +56,6 @@ Vue.filter('truncate', filter)
import router from './routes'
Vue.use(VueRouter)
// Store
Vue.use(Vuex)
let user = Vue.$cookies.get('U_')
const store = new Vuex.Store({
state: user ?
{ status: { loggedIn: true }, user }
: { status: { loggedIn: false }, user: null },
mutations: {
loginSucceed (state, user) {
state.status.loggedIn = true
state.user = user
},
loginFail (state) {
state.status.loggedIn = false
state.user = null
},
logout(state) {
state.status.loggedIn = false;
state.user = null;
},
registerSucceed (state, user) {
state.status.loggedIn = true
state.user = user
},
registerFail (state) {
state.status.loggedIn = false
state.user = null
},
}
})
// Mount Vue
const app = new Vue({
render: h => h(App),

10
client/src/pages/spells/single-spell-page.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="container-fluid p-4" id="spell-container">
<h1 class="display-3 font-display mb-3">Sortilège</h1>
</div>
<div class="container-fluid p-4" id="spell-container">
<h1 class="display-3 font-display mb-3">Sortilège</h1>
</div>
</template>
<script>
export default {
export default {
}
}
</script>
<style>

14
client/src/pages/timelines/timeline-page.vue
View File

@@ -1,18 +1,12 @@
<template>
<div class="container-fluid p-4" id="spell-container">
<h1 class="display-3 font-display mb-3">Chronologie</h1>
<timeline/>
</div>
<div class="container-fluid p-4" id="spell-container">
<h1 class="display-3 font-display mb-3">Chronologie</h1>
</div>
</template>
<script>
import Timeline from '~/components/timeline/timeline'
export default {
name: 'timeline-page',
components: {
'timeline': Timeline,
}
name: 'timeline-page',
}
</script>

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

@@ -1,92 +1,176 @@
<template>
<div class="container-fluid">
<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
v-model="email"
type="email"
id="email"
class="form-control"
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>
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input
v-model="password"
type="password"
id="password"
class="form-control"
autocomplete="current-password">
</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>
</form>
</main>
</section>
</div>
<div class="container-fluid">
<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
v-model="email"
type="email"
id="email"
class="form-control"
:class="{
'is-invalid': errors.email || errors.login,
'is-valid': submitted && !errors.email }"
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="form-text text-danger"
>
{{ errors.email }}
</small>
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input
v-model="password"
type="password"
id="password"
class="form-control"
:class="{ 'is-invalid': errors.password || errors.login }"
autocomplete="current-password">
<small
v-if="!errors.password"
class="form-text text-muted"
>
Nous vous conseillons d'utiliser un mot de passe unique pour cette application seulement.
</small>
<small
v-if="errors.password"
class="form-text text-danger"
>
{{ errors.password }}
</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">Mot de passe oublié ? <a href="#">Vous pouvez le changer ici !</a></small>
</form>
</main>
</section>
</div>
</template>
<script>
// API
import { RepositoryFactory } from "~/api/repositories"
const Users = RepositoryFactory.get('users')
export default {
name: 'login-page',
data() {
return {
email: "",
password: "",
submitted: false,
errors: {
login: ""
}
return {
email: "",
password: "",
remember_me: false,
submitted: false,
errors: {
email: "",
password: "",
login: "",
}
}
},
methods: {
async logUser(e) {
e.preventDefault()
async logUser(e) {
e.preventDefault();
Users.login({
"mail": this.email,
"password": this.password
})
.then(v => {
let user = v.data.user
this.$cookies.set("U_", user, 60 * 60 * 24 * 30)
this.$store.commit('loginSucceed', user)
this.$router.push('/profil')
})
.catch(() => {
this.$store.commit('loginFailed')
})
// Resets old errors if any
for (const o in this.errors) {
this.errors[o] = ""
}
this.submitted = true;
let userInput = {
"mail": this.email,
"password": this.password
};
if (!userInput.mail) {
this.errors.email = "Vous devez renseigner une addresse mail."
}
if (!userInput.password) {
this.errors.password = "Vous devez renseigner un mot de passe."
}
// Stops the method if any errors exist
for (const o in this.errors) {
if (this.errors[o] != "") {
this.submitted = false;
}
}
if (this.submitted) {
this.$store.dispatch('user_login', userInput)
.then(() => {
this.$router.push('/profil')
})
.catch(err => {
if (err.status === 404) {
this.errors.email = err.data.error;
} else {
this.errors.login = "Une erreur inconnue est survenue, rééssayez plus tard.";
}
});
}
},
}
}
</script>
<style lang="scss" scoped>
section {
min-height: calc(100vh - 56px);
main {
width: 600px;
.title {
font-size: 5rem;
font-weight: 700;
text-align: center;
}
}
}
@media only screen and (max-width: 600px) {
min-height: calc(100vh - 56px);
main {
width: 600px;
.title {
font-size: 3.5rem;
font-size: 5rem;
font-weight: 700;
text-align: center;
}
}
}
@media only screen and (max-width: 600px) {
section {
main {
.title {
font-size: 3.5rem;
}
}
}
}
</style>

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

@@ -1,24 +1,40 @@
<template>
<div class="container-fluid p-4" id="spell-container">
<div 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>
</div>
</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() {
return this.$store.state.user
}
},
name: 'profile-page',
data() {
return {
}
},
computed: {
user() {
return this.$store.getters.getUserProfile
}
}
}
</script>
<style lang="scss" scoped>
.title {
font-size: 5rem;
font-weight: 700;
@@ -28,4 +44,5 @@ export default {
font-size: 3.5rem;
}
}
</style>

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

@@ -1,143 +1,193 @@
<template>
<div class="container-fluid">
<section class="d-flex justify-content-center align-items-center">
<main>
<div class="title font-display mb-3">Inscription</div>
<form @submit="registerUser">
<div class="form-group">
<label for="email">Pseudo</label>
<input
v-model="name"
:class="{
'is-invalid': errors.name,
'is-valid': submitted && !errors.name }"
type="text"
id="username"
class="form-control"
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>
</div>
<div class="form-group">
<label for="email">Addresse mail</label>
<input
v-model="email"
:class="{
'is-invalid': errors.email,
'is-valid': submitted && !errors.email }"
type="email"
id="email"
class="form-control"
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>
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input
:class="{
'is-invalid': errors.password,
'is-valid': submitted && !errors.password }"
v-model="password"
type="password"
id="password"
class="form-control"
autocomplete="password">
</div>
<div class="form-group">
<label for="password_check">Confirmer le mot de passe</label>
<input
v-model="password_check"
:class="{
'is-invalid': errors.password_check || errors.password,
'is-valid': submitted && !errors.password_check}"
type="password"
id="password_check"
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>
</div>
<button type="submit" class="btn btn-dark">Inscription</button>
</form>
</main>
</section>
</div>
<div class="container-fluid">
<section class="d-flex justify-content-center align-items-center">
<main>
<div class="title font-display mb-3">Inscription</div>
<form @submit="registerUser">
<div class="form-group">
<label for="email">Nom d'utilisateur</label>
<input
v-model="name"
:class="{
'is-invalid': errors.name,
'is-valid': submitted && !errors.name }"
type="text"
id="username"
class="form-control"
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="form-text text-danger"
>
{{ errors.name }}
</small>
</div>
<div class="form-group">
<label for="email">Adresse mail</label>
<input
v-model="email"
:class="{
'is-invalid': errors.email,
'is-valid': submitted && !errors.email }"
type="email"
id="email"
class="form-control"
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="form-text text-danger"
>
{{ errors.email }}
</small>
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input
:class="{
'is-invalid': errors.password,
'is-valid': submitted && !errors.password }"
v-model="password"
type="password"
id="password"
class="form-control"
autocomplete="password">
</div>
<div class="form-group">
<label for="password_check">Confirmer le mot de passe</label>
<input
v-model="password_check"
:class="{
'is-invalid': errors.password_check || errors.password,
'is-valid': submitted && !errors.password_check}"
type="password"
id="password_check"
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="form-text text-danger"
>
{{ errors.password }}
</small>
<small
v-if="errors.password_check"
class="form-text text-danger"
>
{{ errors.password_check }}
</small>
</div>
<div class="form-group">
<small v-if="errors.register" class="text-danger">{{ errors.register }}</small>
</div>
<button type="submit" class="btn btn-dark">Inscription</button>
</form>
</main>
</section>
</div>
</template>
<script>
// API
import { RepositoryFactory } from "~/api/repositories"
const Users = RepositoryFactory.get('users')
export default {
name: 'register-page',
data() {
return {
name: "",
email: "",
password: "",
password_check: "",
submitted: false,
errors: {
name: "",
email: "",
password: "",
password_check: "",
},
}
},
methods: {
async registerUser(e) {
e.preventDefault()
// Resets old errors if any
for (const o in this.errors) {
this.errors[o] = ""
}
this.submitted = true
if (!this.name) {
this.errors.name = "Vous devez renseigner un pseudonyme."
}
if (!this.email) {
this.errors.email = "Vous devez renseigner une addresse mail."
}
if (!this.password) {
this.errors.password = "Vous devez renseigner un mot de passe."
}
if ((this.password.localeCompare(this.password_check)) != 0) {
this.errors.password_check = "Les mots de passe ne correspondent pas."
}
// Stops the method if any errors exist
for (const o in this.errors) {
if (this.errors[o]) {
return true
}
}
Users.register({
"name": this.name,
"mail": this.email,
"password": this.password
})
.then(v => {
let user = v.data.user
this.$cookies.set("U_", user, 60 * 60 * 24 * 30)
this.$store.commit('registerSucceed', user)
this.$router.push('/profil')
})
.catch(err => {
let error = err.response.data.error
this.errors.email = error
this.$store.commit('registerFail')
})
}
name: 'register-page',
data() {
return {
name: "",
email: "",
password: "",
password_check: "",
submitted: false,
errors: {
name: "",
email: "",
password: "",
password_check: "",
register: "",
},
}
},
methods: {
async registerUser(e) {
e.preventDefault();
// Resets old errors if any
for (const o in this.errors) {
this.errors[o] = ""
}
this.submitted = true;
let userInput = {
"name": this.name,
"mail": this.email,
"password": this.password
}
if (!userInput.name) {
this.errors.name = "Vous devez renseigner un pseudonyme."
}
if (!userInput.mail) {
this.errors.email = "Vous devez renseigner une addresse mail."
}
if (!userInput.password) {
this.errors.password = "Vous devez renseigner un mot de passe."
}
if ((userInput.password.localeCompare(this.password_check)) != 0) {
this.errors.password_check = "Les mots de passe ne correspondent pas."
}
// Stops the method if any errors exist
for (const o in this.errors) {
if (this.errors[o] != "") {
this.submitted = false;
}
}
if (this.submitted) {
this.$store.dispatch('user_register', userInput)
.then(() => {
this.$router.push('/');
})
.catch(err => {
if (err.status === 409) {
this.errors.email = err.data.error;
} else {
this.errors.register = "Une erreur inconnue est survenue, rééssayez plus tard.";
}
});
}
}
}
}
</script>

147
client/src/routes.js
View File

@@ -1,6 +1,7 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
// import store from './store'
// Pages
import Index from "~/pages/index-page"
@@ -18,80 +19,84 @@ import Profile from "~/pages/user/profile-page"
// Routes
const routes = [
{
path: "*",
redirect: "/",
},
{
path: '/',
component: Index,
},
{
path: '/connexion',
component: Login,
meta: {
antiAuthGuard: true
}
},
{
path: '/inscription',
component: Register,
meta: {
antiAuthGuard: true
}
},
{
path: '/sorts',
component: Spells,
},
{
path: '/sorts/:id',
component: SpellSingle,
props: true,
},
{
path: '/ecoles',
component: Schools,
},
{
path: '/ecoles/:id',
component: SchoolSingle,
props: true,
},
{
path: '/ages',
component: Timeline,
},
{
path: '/profil',
component: Profile,
props: true,
meta: {
authGuard: true,
}
},
{
path: "*",
redirect: "/",
},
{
path: '/',
component: Index,
},
{
path: '/connexion',
component: Login,
meta: {
loginFilter: true
}
},
{
path: '/inscription',
component: Register,
meta: {
loginFilter: true
}
},
{
path: '/sorts',
component: Spells,
},
{
path: '/sorts/:id',
component: SpellSingle,
props: true,
},
{
path: '/ecoles',
component: Schools,
},
{
path: '/ecoles/:id',
component: SchoolSingle,
props: true,
},
{
path: '/ages',
component: Timeline,
},
{
path: '/profil',
component: Profile,
props: true,
meta: {
logoutFilter: true,
}
},
]
const router = new VueRouter({
mode: 'history',
routes,
linkActiveClass: "",
linkExactActiveClass: "active",
mode: 'history',
routes,
linkActiveClass: "",
linkExactActiveClass: "active",
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.authGuard)) {
if (Vue.$cookies.get('U_') == null) {
next({
path: '/connexion',
params: { nextUrl: to.fullPath },
})
} else {
next()
}
} else {
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;

19
client/src/store/index.js Normal file
View File

@@ -0,0 +1,19 @@
import Vue from 'vue';
import Vuex from 'vuex';
import VueCookies from 'vue-cookies';
Vue.use(VueCookies);
Vue.$cookies.config('30d','','');
Vue.use(Vuex);
import user from './modules/user.store';
const debug = process.env.NODE_ENV !== 'production';
export default new Vuex.Store({
modules: {
user
},
strict: debug
});

23
client/src/store/modules/spell.store.js Normal file
View File

@@ -0,0 +1,23 @@
const state = {
}
const getters = {
}
const actions = {
}
const mutations = {
}
export default {
namespaced: true,
state,
getters,
actions,
mutations,
}

88
client/src/store/modules/user.store.js Normal file
View File

@@ -0,0 +1,88 @@
// import cookie from 'vue-cookies';
// API
import { RepositoryFactory } from "~/api/repositories";
const Users = RepositoryFactory.get('users');
export const namespaced = true;
const state = {
status: {
logged: false,
profile: null,
}
};
const getters = {
getUserProfile: state => {
if (state.status.logged) {
return state.status.profile
} else {
return false
}
}
};
const mutations = {
loginUser(state, user) {
state.status.profile = user;
state.status.logged = true;
},
logoutUser(state) {
state.status.profile = null;
state.status.logged = false;
},
registerUser() {
}
};
const actions = {
user_login ({ commit }, data) {
return new Promise((resolve, reject) => {
Users.login(data)
.then(v => {
let user = v.data.user;
// cookie.set('user_token', user.uuid);
commit('loginUser', user);
resolve(user);
})
.catch(err => {
reject(err.response);
});
})
},
user_logout ({ commit }) {
// cookie.remove('user_token');
commit('logoutUser');
},
user_register ({ commit }, data) {
return new Promise((resolve, reject) => {
Users.register(data)
.then(() => {
commit('registerUser');
resolve();
})
.catch(err => {
reject(err.response);
});
})
}
};
// Check if a cookie with user token exists
// if (cookie.get('user_token')) {
// mutations.loginUser(state, cookie.get('user_token'));
// }
export default {
state,
getters,
actions,
mutations,
};

30
client/vue.config.js
View File

@@ -1,20 +1,20 @@
const path = require('path')
module.exports = {
configureWebpack: {
resolve: {
alias: {
"~": path.resolve(__dirname, 'src/')
}
}
},
css: {
loaderOptions: {
scss: {
prependData: `
@import "@/assets/scss/_variables.scss";
`
}
}
configureWebpack: {
resolve: {
alias: {
"~": path.resolve(__dirname, 'src/')
}
}
},
css: {
loaderOptions: {
scss: {
prependData: `
@import "@/assets/scss/_variables.scss";
`
}
}
}
};