Added login & register

src/assets/style.scss

 // Import Bulma's core
 @import "~bulma/sass/utilities/_all";
 
+$primary: #642ec9;
+$primary-invert: findColorInvert($primary);
+$colors: (
+    "white": ($white, $black),
+    "black": ($black, $white),
+    "light": ($light, $light-invert),
+    "dark": ($dark, $dark-invert),
+    "primary": ($primary, $primary-invert),
+    "info": ($info, $info-invert),
+    "success": ($success, $success-invert),
+    "warning": ($warning, $warning-invert),
+    "danger": ($danger, $danger-invert)
+);
+
+$link: $primary;
+$link-invert: $primary-invert;
+$link-focus-border: $primary;
+
 $body-background-color: #f2f2f2;
 
 @import "~bulma";

src/components/LoginForm.vue

+<template>
+  <form action="">
+    <div class="modal-card" style="width: auto">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Se connecter</p>
+      </header>
+      <section class="modal-card-body">
+        <b-field label="Email">
+          <b-input type="email" v-model="email" placeholder="email" required/>
+        </b-field>
+
+        <b-field label="Mot de passe">
+          <b-input type="password" v-model="password" password-reveal placeholder="mot de passe" required/>
+        </b-field>
+
+        <b-button class="is-text is-small">mot de passe oublié ?</b-button >
+
+      </section>
+      <footer class="modal-card-foot">
+        <button class="button is-primary" @click="onLogin">Connexion</button>
+      </footer>
+    </div>
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'LoginForm',
+  data () {
+    return {
+      email: '',
+      password: ''
+    }
+  },
+  methods: {
+    async onLogin () {
+      var response = await this.login(this.email, this.password)
+      if (response.token !== null) {
+        await localStorage.setItem('token', response.token)
+        this.$parent.close()
+        this.$router.push({ name: 'Account', params: { account: response } })
+      } else {
+        this.$buefy.toast.open('Email ou mot de passe incorect')
+      }
+    },
+    async login (email, password) {
+      const url = this.$serverurl + 'auth'
+      try {
+        const response = await fetch(
+          url, {
+            method: 'POST',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              email: email,
+              password: password
+            })
+          }
+        )
+        return await response.json()
+      } catch (error) {
+        return null
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Navbar.vue

 <template>
+  <div>
     <b-navbar type="is-dark"  wrapper-class="container">
       <template slot="brand">
         <b-navbar-item tag="router-link" :to="{ path: '/' }">
@@ -36,26 +37,53 @@
         </b-navbar-item>
         <b-navbar-item tag="div">
           <div class="buttons">
-          <a class="button is-inverted">
-            <strong>Connexion</strong>
-          </a>
+            <b-button @click="openRegisterPrompt" type="is-primary">
+              <strong>S'inscrire</strong>
+            </b-button>
+            <b-button @click="openLoginPrompt" type="is-light">
+              Se connecter
+            </b-button>
           </div>
         </b-navbar-item>
       </template>
     </b-navbar>
+
+    <b-modal :active.sync="isLoginModalActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
+      <LoginForm/>
+    </b-modal>
+
+    <b-modal :active.sync="isRegisterModalActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
+      <RegisterForm/>
+    </b-modal>
+  </div>
 </template>
 
 <script>
+import LoginForm from '@/components/LoginForm.vue'
+import RegisterForm from '@/components/RegisterForm.vue'
+
 export default {
   name: 'Navbar',
+  components: {
+    LoginForm,
+    RegisterForm
+  },
   data () {
     return {
+      isLoginModalActive: false,
+      isRegisterModalActive: false,
       search: ''
     }
   },
   methods: {
     onSearch () {
       this.$router.push({ name: 'Search', query: { n: this.search }, force: true })
+    },
+    openLoginPrompt () {
+      this.isLoginModalActive = true
+    },
+    openRegisterPrompt () {
+      this.isRegisterModalActive = true
     }
   }
 }

src/components/RegisterForm.vue

+<template>
+  <form action="">
+    <div class="modal-card" style="width: auto">
+      <header class="modal-card-head">
+        <p class="modal-card-title">S'inscrire</p>
+      </header>
+      <section class="modal-card-body">
+        <b-field label="Email">
+          <b-input type="email" v-model="email" placeholder="email" required/>
+        </b-field>
+
+        <b-field label="Nom d'utilisateur">
+          <b-input v-model="username" placeholder="nom d'utilisateur" required/>
+        </b-field>
+
+        <b-field label="Mot de passe">
+          <b-input type="password" v-model="password" password-reveal placeholder="mot de passe" required/>
+        </b-field>
+
+        <b-field label="Confirmer le mot de passe">
+          <b-input type="password" v-model="passwordConfirm" password-reveal placeholder="mot de passe" required/>
+        </b-field>
+
+      </section>
+      <footer class="modal-card-foot">
+        <button class="button is-primary">Créer un compte</button>
+      </footer>
+    </div>
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'RegisterForm',
+  data () {
+    return {
+      email: '',
+      username: '',
+      password: '',
+      passwordConfirm: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -29,6 +29,12 @@ const routes = [
     path: '/model',
     name: 'Model',
     component: () => import('../views/Model.vue')
+  },
+  {
+    path: '/account',
+    name: 'Account',
+    component: () => import('../views/Account.vue'),
+    props: true
   }
 ]
 

src/views/Account.vue

+<template>
+  <div class="account container">
+    <h1 class="title">Bienvenue {{account.username}}</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Account',
+  props: ['account'],
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>