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

- Fixed my revert hahaha :)

Browse Source
This commit is contained in:
Alexis
2020-12-18 20:34:47 +01:00
parent 0587656ba6
commit fa945e45c9
6 changed files with 215 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
api/repositories/user-repository.js
View File

@@ -116,7 +116,8 @@ class UserRepository {
.then(newUser => { .then(newUser => {
resolve({ resolve({
"message": "Account successfully created !", "message": "Account successfully created !",
"user": newUser, "code": 201,
"token": newUser.uuid,
}) })
}) })
.catch(err => { .catch(err => {
@@ -146,11 +147,13 @@ class UserRepository {
if (match) { if (match) {
resolve({ resolve({
"message": "User successfully logged in !", "message": "User successfully logged in !",
"user": fetchedUser, "code": 200,
"token": fetchedUser.uuid,
}) })
} else { } else {
reject({ reject({
"message": "Les informations de connexion sont erronées.", "message": "Authentification attempt failed ; credentials are incorrect.",
"code": 400,
}) })
} }
}) })
@@ -166,7 +169,7 @@ class UserRepository {
this.getOneByEmail(mail, false) this.getOneByEmail(mail, false)
.then(() => { .then(() => {
reject({ reject({
"message": "L'email est déjà utilisé par un autre utilisateur.", "message": "This email is already linked to an account.",
"code": 403 "code": 403
}) })
}) })

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

@@ -1,60 +1,61 @@
<template> <template>
<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark"> <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
<router-link :to="'/'" class="navbar-brand font-display font-weight-700">Auracle</router-link> <router-link :to="'/'" class="navbar-brand font-display font-weight-700">Auracle</router-link>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbar"> <div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto" v-if="links.length != 0"> <ul class="navbar-nav mr-auto" v-if="links.length != 0">
<li class="nav-item" v-for="(link, index) in links" :key="index"> <li class="nav-item" v-for="(link, index) in links" :key="index">
<router-link :to="link.url" class="nav-link">{{ link.text }}</router-link> <router-link :to="link.url" class="nav-link">{{ link.text }}</router-link>
</li> </li>
</ul> </ul>
<div v-if="user" class="navbar-nav"> <div v-if="user_token" class="navbar-nav">
<router-link :to="'/profil'" class="nav-link">{{ user.name }}</router-link> <router-link :to="'/profil'" class="nav-link">{{ user_token }}</router-link>
<div @click="logoutUser()" class="nav-link">Deconnexion</div> <div @click="logoutUser()" class="nav-link">Deconnexion</div>
</div> </div>
<div v-else class="navbar-nav"> <div v-else class="navbar-nav">
<router-link :to="'/connexion'" class="nav-link">Connexion</router-link> <router-link :to="'/connexion'" class="nav-link">Connexion</router-link>
</div> </div>
</div> </div>
</nav> </nav>
</template> </template>
<script> <script>
export default {
name: 'navbar', export default {
data() { name: 'navbar',
return { data() {
links: [ return {
{ links: [
text: 'Sortilèges', {
url: '/sorts', text: 'Sortilèges',
}, url: '/sorts',
{
text: 'Écoles',
url: '/ecoles',
},
{
text: 'Chronologie',
url: '/ages',
}
]
}
}, },
computed: { {
user() { text: 'Écoles',
return this.$store.state.user url: '/ecoles',
}
}, },
methods: { {
logoutUser() { text: 'Chronologie',
this.$cookies.remove('U_') url: '/ages',
this.$store.commit('logout')
this.$router.push('/')
}
} }
]
} }
},
computed: {
user_token() {
return this.$store.getters.getUserToken
}
},
methods: {
logoutUser() {
this.$store.dispatch('user_logout');
this.$router.push('/');
}
}
}
</script> </script>
<style lang="scss"></style> <style lang="scss"></style>

35
client/src/main.js
View File

@@ -1,9 +1,10 @@
// Core // Core
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import App from './app.vue' import App from './app.vue'
import store from './store'
import Globals from './global-components.js' import Globals from './global-components.js'
Globals.forEach(component => { Globals.forEach(component => {
Vue.component(component.name, component) Vue.component(component.name, component)
@@ -55,38 +56,6 @@ Vue.filter('truncate', filter)
import router from './routes' import router from './routes'
Vue.use(VueRouter) Vue.use(VueRouter)
// Store
Vue.use(Vuex)
let user = Vue.$cookies.get('U_')
const store = new Vuex.Store({
state: user ?
{ status: { loggedIn: true }, user }
: { status: { loggedIn: false }, user: null },
mutations: {
loginSucceed (state, user) {
state.status.loggedIn = true
state.user = user
},
loginFail (state) {
state.status.loggedIn = false
state.user = null
},
logout(state) {
state.status.loggedIn = false;
state.user = null;
},
registerSucceed (state, user) {
state.status.loggedIn = true
state.user = user
},
registerFail (state) {
state.status.loggedIn = false
state.user = null
},
}
})
// Mount Vue // Mount Vue
const app = new Vue({ const app = new Vue({
render: h => h(App), render: h => h(App),

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

@@ -1,92 +1,93 @@
<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">Connexion</div> <div class="title font-display mb-3">Connexion</div>
<form @submit="logUser"> <form @submit="logUser">
<div class="form-group"> <div class="form-group">
<label for="email">Addresse mail</label> <label for="email">Addresse mail</label>
<input <input
v-model="email" v-model="email"
type="email" type="email"
id="email" id="email"
class="form-control" class="form-control"
placeholder="john.doe@gmail.com" placeholder="john.doe@gmail.com"
autocomplete="email"> 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> <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>
<div class="form-group"> <div class="form-group">
<label for="password">Mot de passe</label> <label for="password">Mot de passe</label>
<input <input
v-model="password" v-model="password"
type="password" type="password"
id="password" id="password"
class="form-control" class="form-control"
autocomplete="current-password"> autocomplete="current-password">
</div> </div>
<button type="submit" class="btn btn-primary">Connexion</button> <button type="submit" class="btn btn-primary">Connexion</button>
<router-link :to="'/inscription'" class="btn btn-dark">Inscription</router-link> <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> <small class="form-text text-muted">Vous avez oublié votre mot de passe ? Cliquez-ici pour le changer !</small>
</form> </form>
</main> </main>
</section> </section>
</div> </div>
</template> </template>
<script> <script>
// API
import { RepositoryFactory } from "~/api/repositories"
const Users = RepositoryFactory.get('users')
export default { export default {
name: 'login-page', name: 'login-page',
data() { data() {
return { return {
email: "", email: "",
password: "", password: "",
submitted: false, submitted: false,
errors: { errors: {
login: "" login: ""
}
} }
}
}, },
methods: { methods: {
async logUser(e) { async logUser(e) {
e.preventDefault()
Users.login({ let userInput = {
"mail": this.email, "mail": this.email,
"password": this.password "password": this.password
}) };
.then(v => {
let user = v.data.user this.$store.dispatch('user_login', userInput)
this.$cookies.set("U_", user, 60 * 60 * 24 * 30) .then(() => {
this.$store.commit('loginSucceed', user) this.$router.push('/profil');
this.$router.push('/profil') })
})
.catch(() => { e.preventDefault();
this.$store.commit('loginFailed') }
})
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
section { section {
min-height: calc(100vh - 56px); min-height: calc(100vh - 56px);
main { main {
width: 600px; width: 600px;
.title {
font-size: 5rem;
font-weight: 700;
text-align: center;
}
}
}
@media only screen and (max-width: 600px) {
.title { .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> </style>

24
client/src/pages/user/profile-page.vue
View File

@@ -1,24 +1,25 @@
<template> <template>
<div class="container-fluid p-4" id="spell-container"> <div class="container-fluid p-4" id="spell-container">
<div class="display-3 font-display mb-3"> <div class="display-3 font-display mb-3">
<span class="username">{{ user.name }}</span> <span class="username">{{ user_token }}</span>
<span v-if="user.verified" class="verified"><i class="mad">check_circle</i></span> <!-- <span v-if="user.verified" class="verified"><i class="mad">check_circle</i></span> -->
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'profile-page', name: 'profile-page',
computed: { computed: {
user() { user_token() {
return this.$store.state.user return this.$store.getters.getUserToken
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .title {
font-size: 5rem; font-size: 5rem;
font-weight: 700; font-weight: 700;
@@ -28,4 +29,5 @@ export default {
font-size: 3.5rem; font-size: 3.5rem;
} }
} }
</style> </style>

140
client/src/routes.js
View File

@@ -1,5 +1,5 @@
import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import store from './store'
// Pages // Pages
import Index from "~/pages/index-page" import Index from "~/pages/index-page"
@@ -18,80 +18,84 @@ import Profile from "~/pages/user/profile-page"
// Routes // Routes
const routes = [ const routes = [
{ {
path: "*", path: "*",
redirect: "/", redirect: "/",
}, },
{ {
path: '/', path: '/',
component: Index, component: Index,
}, },
{ {
path: '/connexion', path: '/connexion',
component: Login, component: Login,
meta: { meta: {
antiAuthGuard: true loginFilter: true
} }
}, },
{ {
path: '/inscription', path: '/inscription',
component: Register, component: Register,
meta: { meta: {
antiAuthGuard: true loginFilter: true
} }
}, },
{ {
path: '/sorts', path: '/sorts',
component: Spells, component: Spells,
}, },
{ {
path: '/sorts/:id', path: '/sorts/:id',
component: SpellSingle, component: SpellSingle,
props: true, props: true,
}, },
{ {
path: '/ecoles', path: '/ecoles',
component: Schools, component: Schools,
}, },
{ {
path: '/ecoles/:id', path: '/ecoles/:id',
component: SchoolSingle, component: SchoolSingle,
props: true, props: true,
}, },
{ {
path: '/ages', path: '/ages',
component: Timeline, component: Timeline,
}, },
{ {
path: '/profil', path: '/profil',
component: Profile, component: Profile,
props: true, props: true,
meta: { meta: {
authGuard: true, logoutFilter: true,
} }
}, },
] ]
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',
routes, routes,
linkActiveClass: "", linkActiveClass: "",
linkExactActiveClass: "active", linkExactActiveClass: "active",
}) })
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.authGuard)) { if (to.matched.some(record => record.meta.loginFilter)) {
if (Vue.$cookies.get('U_') == null) { if (store.getters.getUserToken) {
next({ next({
path: '/connexion', path: '/',
params: { nextUrl: to.fullPath }, });
})
} else {
next()
}
} else {
next()
} }
next();
} else if (to.matched.some(record => record.meta.logoutFilter)) {
if (!store.getters.getUserToken) {
next({
path: '/connexion',
});
}
next();
}
next();
}) })
export default router; export default router;