- Implemented store for register methods
This commit is contained in:
Alexis
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user