- Added basic user login

client/package-lock.json

@@ -11960,6 +11960,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-cookies": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.7.0.tgz",
+      "integrity": "sha512-vuEUm6wYMMrFAHFCrkzIUAy8+MgPAbBGmYXnk2M6X6O2KHbMT1wuDD2izacmsSUp6ZM02e23MJRtPRobl88VMg=="
+    },
     "vue-eslint-parser": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",

client/package.json

@@ -35,6 +35,7 @@
         "popper.js": "^1.16.1",
         "v-clipboard": "^2.2.3",
         "vue": "^2.6.11",
+        "vue-cookies": "^1.7.0",
         "vue-masonry": "^0.11.8"
     },
     "devDependencies": {

client/src/api/repositories.js

@@ -3,6 +3,7 @@ import schoolsRepository from './schoolsRepository'
 import metaschoolsRepository from './metaschoolsRepository'
 import variablesRepository from './variablesRepository'
 import ingredientsRepository from './ingredientsRepository'
+import usersRepository from './usersRepository'
 
 // List of possible repositories
 const repositories = {
@@ -11,6 +12,7 @@ const repositories = {
     metaschools: metaschoolsRepository,
     variables: variablesRepository,
     ingredients: ingredientsRepository,
+    users: usersRepository,
 }
 
 // Usage : RepositoryFactoryInstance.get('reponame');

client/src/api/usersRepository.js

@@ -0,0 +1,12 @@
+import api from './api'
+
+const resource = "/users"
+
+export default {
+    login(data) {
+        return api.post(`${resource}/login`, data)
+    },
+    addOne(data) {
+        return api.post(`${resource}`, data)
+    },
+}

client/src/components/global/navbar/navbar.vue

@@ -11,6 +11,7 @@
                 </li>
             </ul>
             <div class="navbar-nav">
+                <router-link :to="'/profil'" class="nav-link">Profil</router-link>
                 <router-link :to="'/inscription'" class="nav-link">S'inscrire</router-link>
                 <router-link :to="'/connexion'" class="nav-link">Se connecter</router-link>
             </div>

client/src/main.js

@@ -8,9 +8,13 @@ Globals.forEach(component => {
     Vue.component(component.name, component)
 });
 
-// Auth
+// Environment
 require('dotenv').config()
 
+// Cookies
+import VueCookies from 'vue-cookies'
+Vue.use(VueCookies)
+
 // Jquery
 import jquery from 'jquery'
 window.$ = jquery
@@ -26,7 +30,7 @@ import 'bootstrap/dist/js/bootstrap.js'
 import { BootstrapVue } from 'bootstrap-vue'
 Vue.use(BootstrapVue)
 
-import { VueMasonryPlugin } from 'vue-masonry';
+import { VueMasonryPlugin } from 'vue-masonry'
 Vue.use(VueMasonryPlugin)
 
 import clipboard from 'v-clipboard'
@@ -39,18 +43,12 @@ var filter = function(text, length, clamp){
     node.innerHTML = text;
     var content = node.textContent;
     return content.length > length ? content.slice(0, length) + clamp : content;
-};
-Vue.filter('truncate', filter);
+}
+Vue.filter('truncate', filter)
 
 // Router
-import routes from './routes'
+import router from './routes'
 Vue.use(VueRouter)
-const router = new VueRouter({
-    mode: 'history',
-    routes,
-    linkActiveClass: "",
-    linkExactActiveClass: "active",
-});
 
 // Mount Vue
 const app = new Vue({

client/src/pages/user/login-page.vue

@@ -1,14 +1,65 @@
 <template>
     <div class="container-fluid">
         <section class="fullpage">
-            <div class="title font-display mb-3">Connexion</div>
+            <div>
+                <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-dark">Connexion</button>
+                </form>
+            </div>
         </section>
     </div>
 </template>
 
 <script>
+// API
+import { RepositoryFactory } from "~/api/repositories"
+const Users = RepositoryFactory.get('users')
+
 export default {
     name: 'login-page',
+    data() {
+        return {
+            email: "",
+            password: "",
+        }
+    },
+    methods: {
+        async logUser(e) {
+            e.preventDefault()
+            Users.login({
+                "mail": this.email,
+                "password": this.password
+            })
+            .then(v => {
+                let user = v.data
+                this.$cookies.set("loggedUser", user, 60 * 60 * 24 * 30)
+            })
+            .catch(err => {
+                console.log(err)
+            })
+        }
+    }
 }
 </script>
 

client/src/pages/user/profile-page.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="container-fluid">
+        <section class="fullpage">
+            <div class="title font-display mb-3">Profil</div>
+        </section>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'profile-page',
+}
+</script>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 5rem;
+    font-weight: 700;
+}
+@media only screen and (max-width: 600px) {
+    .title {
+        font-size: 3.5rem;
+    }
+}
+</style>

client/src/routes.js

@@ -1,3 +1,6 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
 // Pages
 import Index from "~/pages/index-page"
 
@@ -9,33 +12,74 @@ import SchoolSingle from "~/pages/schools/single-school-page"
 
 import Login from "~/pages/user/login-page"
 import Register from "~/pages/user/register-page"
+import Profile from "~/pages/user/profile-page"
 
 // Routes
 const routes = [
     {
-        path: "*", redirect: "/",
+        path: "*",
+        redirect: "/",
     },
     {
-        path: '/', component: Index,
+        path: '/',
+        component: Index,
     },
     {
-        path: '/sorts', component: Spells,
+        path: '/connexion',
+        component: Login,
     },
     {
-        path: '/sorts/:id', component: SpellSingle, props: true,
+        path: '/inscription',
+        component: Register,
     },
     {
-        path: '/ecoles', component: Schools,
+        path: '/sorts',
+        component: Spells,
     },
     {
-        path: '/ecoles/:id', component: SchoolSingle, props: true,
+        path: '/sorts/:id',
+        component: SpellSingle,
+        props: true,
     },
     {
-        path: '/connexion', component: Login,
+        path: '/ecoles',
+        component: Schools,
     },
     {
-        path: '/inscription', component: Register,
+        path: '/ecoles/:id',
+        component: SchoolSingle,
+        props: true,
     },
-];
+    {
+        path: '/profil',
+        component: Profile,
+        props: true,
+        meta: {
+            authGuard: true,
+        }
+    },
+]
 
-export default routes;
+const router = new VueRouter({
+    mode: 'history',
+    routes,
+    linkActiveClass: "",
+    linkExactActiveClass: "active",
+})
+
+router.beforeEach((to, from, next) => {
+    if (to.matched.some(record => record.meta.authGuard)) {
+        if (Vue.$cookies.get('loggedUser') == null) {
+            next({
+                path: '/connexion',
+                params: { nextUrl: to.fullPath }
+            })
+        } else {
+            next()
+        }
+    } else {
+        next()
+    }
+})
+
+export default router;