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

- Added error handler to register form

Browse Source
This commit is contained in:
Alexis
2020-07-07 23:24:10 +02:00
parent 9b10cd473e
commit 080c46593c
8 changed files with 191 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ export default {
login(data) {
return api.post(`${resource}/login`, data)
},
addOne(data) {
register(data) {
return api.post(`${resource}`, data)
},
}

4
client/src/assets/scss/_global.scss
View File

@@ -56,6 +56,10 @@ hr {
cursor: pointer;
}
.btn {
margin-right: 5px;
}
// LAYOUTS
.fullpage {
min-height: calc(100vh - 56px);

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

@@ -10,12 +10,11 @@
<router-link :to="link.url" class="nav-link">{{ link.text }}</router-link>
</li>
</ul>
<div class="navbar-nav" v-if="loggedIn">
<div v-if="loggedIn" class="navbar-nav">
<router-link :to="'/profil'" class="nav-link">Profil</router-link>
<div @click="logoutUser()" class="nav-link">Deconnexion</div>
</div>
<div class="navbar-nav" v-else>
<router-link :to="'/inscription'" class="nav-link">S'inscrire</router-link>
<div v-else class="navbar-nav">
<router-link :to="'/connexion'" class="nav-link">Connexion</router-link>
</div>
</div>

15
client/src/pages/index-page.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="container-fluid">
<section class="fullpage">
<div class="px-4">
<section class="d-flex justify-content-center align-items-center">
<main class="px-4">
<h1 class="title text-dark mb-4 font-display line-height-100">"C'est magique, ta gueule."</h1>
<div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
<hr class="w-50">
<div class="lead"><span class="font-display" style="font-weight:700;">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.</div>
</div>
</main>
</section>
</div>
</template>
@@ -18,9 +18,16 @@ export default {
</script>
<style lang="scss" scoped>
section {
min-height: calc(100vh - 56px);
main {
width: 1000px;
.title {
font-size: 5rem;
font-weight: 900;
font-weight: 700;
text-align: center;
}
}
}
@media only screen and (max-width: 600px) {
.title {

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

@@ -1,7 +1,7 @@
<template>
<div class="container-fluid">
<section class="fullpage">
<div>
<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">
@@ -24,9 +24,11 @@
class="form-control"
autocomplete="current-password">
</div>
<button type="submit" class="btn btn-dark">Connexion</button>
<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>
</div>
</main>
</section>
</div>
</template>
@@ -42,11 +44,16 @@ export default {
return {
email: "",
password: "",
submitted: false,
errors: {
login: ""
}
}
},
methods: {
async logUser(e) {
e.preventDefault()
Users.login({
"mail": this.email,
"password": this.password
@@ -57,9 +64,8 @@ export default {
this.$store.commit('loginSucceed', user)
this.$router.push('/profil')
})
.catch(err => {
.catch(() => {
this.$store.commit('loginFailed')
console.log(err)
})
}
}
@@ -67,9 +73,16 @@ export default {
</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) {
.title {

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

@@ -1,21 +1,157 @@
<template>
<div class="container-fluid">
<section class="fullpage">
<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>
</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')
})
}
}
}
</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) {
.title {

6
client/src/routes.js
View File

@@ -27,10 +27,16 @@ const routes = [
{
path: '/connexion',
component: Login,
meta: {
antiAuthGuard: true
}
},
{
path: '/inscription',
component: Register,
meta: {
antiAuthGuard: true
}
},
{
path: '/sorts',

4
repositories/user-repository.js
View File

@@ -150,7 +150,7 @@ class UserRepository {
})
} else {
reject({
"message": "The email and passwords don't match.",
"message": "Les informations de connexion sont erronées.",
})
}
})
@@ -166,7 +166,7 @@ class UserRepository {
this.getOneByEmail(mail, false)
.then(() => {
reject({
"message": "Email is already in use !",
"message": "L'email est déjà utilisé par un autre utilisateur.",
"code": 403
})
})