- Fixed my revert hahaha :)
This commit is contained in:
Alexis
@@ -1,92 +1,93 @@
|
||||
<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"
|
||||
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>
|
||||
</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: "",
|
||||
submitted: false,
|
||||
errors: {
|
||||
login: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async logUser(e) {
|
||||
e.preventDefault()
|
||||
async logUser(e) {
|
||||
|
||||
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')
|
||||
})
|
||||
}
|
||||
let userInput = {
|
||||
"mail": this.email,
|
||||
"password": this.password
|
||||
};
|
||||
|
||||
this.$store.dispatch('user_login', userInput)
|
||||
.then(() => {
|
||||
this.$router.push('/profil');
|
||||
})
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -1,24 +1,25 @@
|
||||
<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 class="container-fluid p-4" id="spell-container">
|
||||
<div class="display-3 font-display mb-3">
|
||||
<span class="username">{{ user_token }}</span>
|
||||
<!-- <span v-if="user.verified" class="verified"><i class="mad">check_circle</i></span> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'profile-page',
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.state.user
|
||||
}
|
||||
},
|
||||
name: 'profile-page',
|
||||
computed: {
|
||||
user_token() {
|
||||
return this.$store.getters.getUserToken
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.title {
|
||||
font-size: 5rem;
|
||||
font-weight: 700;
|
||||
@@ -28,4 +29,5 @@ export default {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user