- Added more pages and fixed some links (schools, single spell, and login page)

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

@@ -1,15 +1,18 @@
 <template>
     <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
         <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="#navbarSupportedContent" aria-controls="navbarSupportedContent" 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>
         </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse" id="navbar">
             <ul class="navbar-nav mr-auto" v-if="links.length != 0">
                 <li class="nav-item" v-for="(link, index) in links" :key="index">
                     <router-link :to="link.url" class="nav-link">{{ link.text }}</router-link>
                 </li>
             </ul>
+            <div class="navbar-nav">
+                <router-link :to="'/connexion'" class="nav-link">Connexion</router-link>
+            </div>
         </div>
     </nav>
 </template>
@@ -22,8 +25,12 @@
                 links: [
                     {
                         text: 'Sortilèges',
-                        url: '/spells',
+                        url: '/sorts',
                     },
+                    {
+                        text: 'Écoles',
+                        url: '/ecoles',
+                    }
                 ]
             }
         }

client/src/components/spells/spell-card.vue

@@ -5,7 +5,7 @@
         <div class="spellcard bg-white p-4 rounded text-dark shadow" style="border-left-width:4px;border-left-style:solid;">
 
             <div :title="spell.name" class="h3 font-display font-weight-bold text-wrap word-break" style="line-height:100%;">
-                <a class="text-decoration-none" href="#">{{spell.name}}</a>
+                <router-link :to="`/sorts/${spell.id}`" class="text-decoration-none">{{spell.name}}</router-link>
             </div>
 
             <div>
@@ -14,7 +14,7 @@
                 <div class="text-muted d-inline-block">
                     <span v-for="(school,index) in spell.schools" :key="index">
                         <span v-if="index!=0">, </span>
-                        <a :href="'/school/'+school.id" class="text-secondary">{{school.name}}</a>
+                        <router-link :to="`ecoles/${school.id}`" class="text-secondary">{{school.name}}</router-link>
                     </span>
                 </div>
             </div>

client/src/pages/index-page.vue

@@ -13,7 +13,7 @@
 
 <script>
 export default {
-    name: 'index',
+    name: 'index-page',
 }
 </script>
 

client/src/pages/schools/schools-page.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="container-fluid p-4" id="spell-container">
+        <h1 class="display-3 font-display mb-3">Écoles</h1>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'schools-page'
+    }
+</script>
+
+<style>
+
+</style>

client/src/pages/schools/single-school-page.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="container-fluid p-4" id="spell-container">
+    <div class="container-fluid p-4" id="spell-container">
-    <h1 class="display-3 font-display mb-3">{{ school.name }}</h1>
+        <h1 class="display-3 font-display mb-3">{{ school.name }}</h1>
-    <p>{{ school.description }}</p>
+        <p>{{ school.description }}</p>
-    <spell-list :school_id="id"/>
+        <spell-list :school_id="id"/>
-  </div>
+    </div>
 </template>
 
 <script>
@@ -14,7 +14,7 @@ import { RepositoryFactory } from "~/api/repositories"
 const Schools = RepositoryFactory.get('schools')
 
 export default {
-    name: 'single-school',
+    name: 'single-school-page',
     components: {
         'spell-list': SpellsList,
     },

client/src/pages/spells-page.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="container-fluid p-4" id="spell-container">
-    <h1 class="display-3 font-display mb-3">Sortilèges</h1>
-    <spell-list/>
-  </div>
-</template>
-
-<script>
-  import SpellsList from "../components/spells/spells-list"
-
-  export default {
-    name: 'spells',
-    components: {
-        'spell-list': SpellsList,
-    }
-  }
-</script>
-
-<style lang="scss"></style>

client/src/pages/spells/single-spell-page.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="container-fluid p-4" id="spell-container">
+        <h1 class="display-3 font-display mb-3">Sortilège</h1>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

client/src/pages/spells/spells-page.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="container-fluid p-4" id="spell-container">
+        <h1 class="display-3 font-display mb-3">Sortilèges</h1>
+        <spell-list/>
+    </div>
+</template>
+
+<script>
+  import SpellsList from "~/components/spells/spells-list"
+
+  export default {
+    name: 'spells-page',
+    components: {
+        'spell-list': SpellsList,
+    }
+  }
+</script>
+
+<style lang="scss"></style>

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

@@ -0,0 +1,15 @@
+<template>
+    <div class="container-fluid p-4" id="spell-container">
+        <h1 class="display-3 font-display mb-3">Connexion</h1>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'login-page',
+    }
+</script>
+
+<style>
+
+</style>

client/src/routes.js

@@ -1,7 +1,13 @@
 // Pages
-import Index from "./pages/index-page";
+import Index from "~/pages/index-page"
-import Spells from "./pages/spells-page";
+
-import SchoolSingle from "./pages/schools/single-school-page";
+import Spells from "~/pages/spells/spells-page"
+import SpellSingle from "~/pages/spells/single-spell-page"
+
+import Schools from "./pages/schools/schools-page"
+import SchoolSingle from "~/pages/schools/single-school-page"
+
+import Login from "~/pages/user/login-page"
 
 // Routes
 const routes = [
@@ -12,11 +18,20 @@ const routes = [
         path: '/', component: Index,
     },
     {
-        path: '/spells', component: Spells,
+        path: '/sorts', component: Spells,
     },
     {
-        path: '/school/:id', component: SchoolSingle, props: true
+        path: '/sorts/:id', component: SpellSingle, props: true,
-    }
+    },
+    {
+        path: '/ecoles', component: Schools,
+    },
+    {
+        path: '/ecoles/:id', component: SchoolSingle, props: true,
+    },
+    {
+        path: '/connexion', component: Login,
+    },
 ];
 
 export default routes;