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

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

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

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

@@ -14,22 +14,22 @@
id="email"
class="form-control"
:class="{
'is-invalid': errors.mailEmpty || errors.login,
'is-valid': submitted && !errors.mailEmpty }"
'is-invalid': errors.email || errors.login,
'is-valid': submitted && !errors.email }"
placeholder="john.doe@gmail.com"
autocomplete="email">
<small
v-if="!errors.mailEmpty"
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.mailEmpty"
v-if="errors.email"
class="form-text text-danger"
>
Veuillez renseigner une adresse mail.
{{ errors.email }}
</small>
</div>
@@ -40,21 +40,19 @@
type="password"
id="password"
class="form-control"
:class="{
'is-invalid': errors.passwordEmpty || errors.login,
'is-valid': submitted && !errors.passwordEmpty }"
:class="{ 'is-invalid': errors.password || errors.login }"
autocomplete="current-password">
<small
v-if="!errors.passwordEmpty"
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.passwordEmpty"
v-if="errors.password"
class="form-text text-danger"
>
Veuillez renseigner un mot de passe.
{{ errors.password }}
</small>
</div>
@@ -98,50 +96,55 @@ export default {
submitted: false,
errors: {
mailEmpty: "",
passwordEmpty: "",
email: "",
password: "",
login: "",
}
}
},
methods: {
async logUser(e) {
e.preventDefault();
// Resets old errors if any
for (const o in this.errors) {
this.errors[o] = ""
}
this.submitted = true;
this.errors = this.resetErrors();
let userInput = {
"mail": this.email,
"password": this.password
};
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."
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;
}
}
e.preventDefault();
},
resetErrors() {
return {
mailEmpty: "",
passwordEmpty: "",
login: "",
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>

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="form-text 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="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>
<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>

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

@@ -14,6 +14,7 @@ const state = {
};
const getters = {
getUserProfile: state => {
if (state.status.logged) {
return state.status.profile
@@ -28,9 +29,14 @@ const mutations = {
state.status.profile = user;
state.status.logged = true;
},
logoutUser(state) {
state.status.profile = null;
state.status.logged = false;
},
registerUser() {
}
};
@@ -44,14 +50,28 @@ const actions = {
commit('loginUser', user);
resolve(user);
})
.catch(() => {
reject();
.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);
});
})
}
};

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";
`
}
}
}
};