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

- Implemented store for register methods

Browse Source
This commit is contained in:
Alexis
2020-12-23 20:25:43 +01:00
parent fdad47e84e
commit 65abb41a9f
6 changed files with 264 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
api/routes/users.js
View File

@@ -17,7 +17,6 @@ const Users = new UserRepository();
const getUsers = () => { const getUsers = () => {
return Users.getAll() return Users.getAll()
.catch(err => { .catch(err => {
console.log(err)
throw err throw err
}) })
} }
@@ -42,7 +41,6 @@ router.get('/', async (req, res) => {
const getUserByUUID = (uuid) => { const getUserByUUID = (uuid) => {
return Users.getOneByUUID(uuid) return Users.getOneByUUID(uuid)
.catch(err => { .catch(err => {
console.log(err)
throw err throw err
}) })
} }
@@ -67,7 +65,6 @@ router.get('/:uuid/', async (req, res) => {
const checkIfEmailAvailable = (mail) => { const checkIfEmailAvailable = (mail) => {
return Users.checkIfEmailAvailable(mail) return Users.checkIfEmailAvailable(mail)
.catch(err => { .catch(err => {
console.log(err)
throw err throw err
}) })
} }
@@ -92,7 +89,6 @@ router.get('/available/:mail/', async (req, res) => {
const logUser = (mail, password) => { const logUser = (mail, password) => {
return Users.logUser(mail, password) return Users.logUser(mail, password)
.catch(err => { .catch(err => {
console.log(err)
throw err throw err
}) })
} }

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

@@ -6,6 +6,9 @@ export default {
getOneFromUUID(uuid) { getOneFromUUID(uuid) {
return api.get(`${resource}/${uuid}`,) return api.get(`${resource}/${uuid}`,)
}, },
checkEmailAvailable(mail) {
return api.get(`${resource}/available/${mail}`)
},
login(data) { login(data) {
return api.post(`${resource}/login`, data) return api.post(`${resource}/login`, data)
}, },

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

@@ -14,22 +14,22 @@
id="email" id="email"
class="form-control" class="form-control"
:class="{ :class="{
'is-invalid': errors.mailEmpty || errors.login, 'is-invalid': errors.email || errors.login,
'is-valid': submitted && !errors.mailEmpty }" 'is-valid': submitted && !errors.email }"
placeholder="john.doe@gmail.com" placeholder="john.doe@gmail.com"
autocomplete="email"> autocomplete="email">
<small <small
v-if="!errors.mailEmpty" v-if="!errors.email"
class="form-text text-muted" class="form-text text-muted"
> >
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.
</small> </small>
<small <small
v-if="errors.mailEmpty" v-if="errors.email"
class="form-text text-danger" class="form-text text-danger"
> >
Veuillez renseigner une adresse mail. {{ errors.email }}
</small> </small>
</div> </div>
@@ -40,21 +40,19 @@
type="password" type="password"
id="password" id="password"
class="form-control" class="form-control"
:class="{ :class="{ 'is-invalid': errors.password || errors.login }"
'is-invalid': errors.passwordEmpty || errors.login,
'is-valid': submitted && !errors.passwordEmpty }"
autocomplete="current-password"> autocomplete="current-password">
<small <small
v-if="!errors.passwordEmpty" v-if="!errors.password"
class="form-text text-muted" class="form-text text-muted"
> >
Nous vous conseillons d'utiliser un mot de passe unique pour cette application seulement. Nous vous conseillons d'utiliser un mot de passe unique pour cette application seulement.
</small> </small>
<small <small
v-if="errors.passwordEmpty" v-if="errors.password"
class="form-text text-danger" class="form-text text-danger"
> >
Veuillez renseigner un mot de passe. {{ errors.password }}
</small> </small>
</div> </div>
@@ -98,50 +96,55 @@ export default {
submitted: false, submitted: false,
errors: { errors: {
mailEmpty: "", email: "",
passwordEmpty: "", password: "",
login: "", login: "",
} }
} }
}, },
methods: { methods: {
async logUser(e) { async logUser(e) {
e.preventDefault();
// Resets old errors if any
for (const o in this.errors) {
this.errors[o] = ""
}
this.submitted = true; this.submitted = true;
this.errors = this.resetErrors();
let userInput = { let userInput = {
"mail": this.email, "mail": this.email,
"password": this.password "password": this.password
}; };
if (this.email && this.password) { if (!userInput.mail) {
this.$store.dispatch('user_login', userInput) this.errors.email = "Vous devez renseigner une addresse mail."
.then(() => { }
this.$router.push('/profil'); if (!userInput.password) {
}) this.errors.password = "Vous devez renseigner un mot de passe."
.catch(() => { }
this.errors.login = "Erreur d'authentification. Les identifiants ne correspondent pas."
}); // Stops the method if any errors exist
} else { for (const o in this.errors) {
if (!userInput.mail) { if (this.errors[o] != "") {
this.errors.mailEmpty = "Veuillez entrer une addresse mail valide." this.submitted = false;
}
if (!userInput.password) {
this.errors.passwordEmpty = "Veuillez entrer un mot de passe."
} }
} }
e.preventDefault(); if (this.submitted) {
}, this.$store.dispatch('user_login', userInput)
resetErrors() { .then(() => {
return { this.$router.push('/profil')
mailEmpty: "", })
passwordEmpty: "", .catch(err => {
login: "", if (err.status === 404) {
this.errors.email = err.data.error;
} else {
this.errors.login = "Une erreur inconnue est survenue, rééssayez plus tard.";
}
});
} }
} },
} }
} }
</script> </script>

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

@@ -1,143 +1,193 @@
<template> <template>
<div class="container-fluid"> <div class="container-fluid">
<section class="d-flex justify-content-center align-items-center"> <section class="d-flex justify-content-center align-items-center">
<main> <main>
<div class="title font-display mb-3">Inscription</div> <div class="title font-display mb-3">Inscription</div>
<form @submit="registerUser"> <form @submit="registerUser">
<div class="form-group">
<label for="email">Pseudo</label> <div class="form-group">
<input <label for="email">Nom d'utilisateur</label>
v-model="name" <input
:class="{ v-model="name"
'is-invalid': errors.name, :class="{
'is-valid': submitted && !errors.name }" 'is-invalid': errors.name,
type="text" 'is-valid': submitted && !errors.name }"
id="username" type="text"
class="form-control" id="username"
placeholder="John Doe" class="form-control"
autocomplete="username"> placeholder="John Doe"
<small v-if="!errors.name" class="form-text text-muted">Vous pouvez changer votre pseudo à tout moment.</small> autocomplete="username">
<small v-if="errors.name" class="form-text text-danger">{{ errors.name }}</small> <small
</div> v-if="!errors.name"
<div class="form-group"> class="form-text text-muted"
<label for="email">Addresse mail</label> >
<input Vous pouvez changer votre pseudo à tout moment.
v-model="email" </small>
:class="{
'is-invalid': errors.email, <small
'is-valid': submitted && !errors.email }" v-if="errors.name"
type="email" class="form-text text-danger"
id="email" >
class="form-control" {{ errors.name }}
placeholder="john.doe@gmail.com" </small>
autocomplete="email"> </div>
<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 class="form-group">
</div> <label for="email">Adresse mail</label>
<div class="form-group"> <input
<label for="password">Mot de passe</label> v-model="email"
<input :class="{
:class="{ 'is-invalid': errors.email,
'is-invalid': errors.password, 'is-valid': submitted && !errors.email }"
'is-valid': submitted && !errors.password }" type="email"
v-model="password" id="email"
type="password" class="form-control"
id="password" placeholder="john.doe@gmail.com"
class="form-control" autocomplete="email">
autocomplete="password"> <small
</div> v-if="!errors.email"
<div class="form-group"> class="form-text text-muted"
<label for="password_check">Confirmer le mot de passe</label> >
<input Votre addresse mail nous servira principalement à vous identifier et à retrouver votre compte si vous oubliez vos informations de connexion.
v-model="password_check" </small>
:class="{
'is-invalid': errors.password_check || errors.password, <small
'is-valid': submitted && !errors.password_check}" v-if="errors.email"
type="password" class="form-text text-danger"
id="password_check" >
class="form-control" {{ errors.email }}
autocomplete="password-verification"> </small>
<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> </div>
<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 class="form-group">
</div> <label for="password">Mot de passe</label>
<button type="submit" class="btn btn-dark">Inscription</button> <input
</form> :class="{
</main> 'is-invalid': errors.password,
</section> 'is-valid': submitted && !errors.password }"
</div> 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> </template>
<script> <script>
// API
import { RepositoryFactory } from "~/api/repositories"
const Users = RepositoryFactory.get('users')
export default { export default {
name: 'register-page', name: 'register-page',
data() { data() {
return { return {
name: "", name: "",
email: "", email: "",
password: "", password: "",
password_check: "", password_check: "",
submitted: false, submitted: false,
errors: { errors: {
name: "", name: "",
email: "", email: "",
password: "", password: "",
password_check: "", 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
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')
})
}
} }
},
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> </script>

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

@@ -14,6 +14,7 @@ const state = {
}; };
const getters = { const getters = {
getUserProfile: state => { getUserProfile: state => {
if (state.status.logged) { if (state.status.logged) {
return state.status.profile return state.status.profile
@@ -28,9 +29,14 @@ const mutations = {
state.status.profile = user; state.status.profile = user;
state.status.logged = true; state.status.logged = true;
}, },
logoutUser(state) { logoutUser(state) {
state.status.profile = null; state.status.profile = null;
state.status.logged = false; state.status.logged = false;
},
registerUser() {
} }
}; };
@@ -44,14 +50,28 @@ const actions = {
commit('loginUser', user); commit('loginUser', user);
resolve(user); resolve(user);
}) })
.catch(() => { .catch(err => {
reject(); reject(err.response);
}); });
}) })
}, },
user_logout ({ commit }) { user_logout ({ commit }) {
// cookie.remove('user_token'); // cookie.remove('user_token');
commit('logoutUser'); commit('logoutUser');
},
user_register ({ commit }, data) {
return new Promise((resolve, reject) => {
Users.register(data)
.then(() => {
commit('registerUser');
resolve();
})
.catch(err => {
reject(err.response);
});
})
} }
}; };

30
client/vue.config.js
View File

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