client/src/components/chainetv.vue

@@ -74,28 +74,34 @@
       </div>
     </div>
     <modalLogin v-bind:class="{'is-active': showModalLogin}" @close="showModalLogin = false"/>
+    <modal v-bind:class="{'is-active': showModal}" @close="showModal = false">{{modalmessage}}</modal>
   </div>
 </template>
 
 <script>
 import { putparsechaine } from '../api';
 import modalLogin from './modalLogin'
+import modal from './modal'
 
 export default {
   name: 'chainetv',
   components: {
-    modalLogin
+    modalLogin,
+    modal,
   },
   data() {
     return {
       chaine: '',
       showModalLogin: false,
+      showModal: false,
+      modalmessage:''
     };
   },
   methods: {
     checkchaine() {
       if (this.chaine === '') {
-        alert('rentrer un numéro');
+        this.modalmessage='rentrer un numéro de chaine';
+        this.showModal=true;
         return;
       }
       this.$store.state.arrayresultchaines = [];
@@ -121,13 +127,15 @@ export default {
         return putparsechaine(this.$store.state.jwt.token)
           .then((res) => {
             if (res.data === 'OK') {
-              alert('update database OK');
+              this.modalmessage='update database OK';
+              this.showModal=true;
             }
           })
           .catch((error) => {
           // eslint-disable-next-line
             if (error.response) {
-              alert(error.response.data.message);
+              this.modalmessage=error.response.data.message;
+              this.showModal=true;
             } else {
               console.error(error);
             }

client/src/components/modal.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="modal">
+    <div class="modal-background"></div>
+     <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
+    <div class="modal-content box">
+         <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+};
+</script>
+

client/src/components/modalLogin.vue

@@ -2,34 +2,30 @@
 <template>
   <div class="modal">
     <div class="modal-background"></div>
-     <button class="modal-close is-large" aria-label="close"></button>
-    <div class="modal-content">
-    <section class="hero is-success">
-      <div class="hero-body">
-        <div class="container has-text-centered">
-          <h2 class="title">Login </h2>
+    <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
+    <div class="modal-content box">
+      <div class="section is-success">
+        <div class="has-text-centered">
+          <h2 class="title">Login</h2>
           <p class="subtitle error-msg">{{ errorMsg }}</p>
         </div>
       </div>
-    </section>
       <section class="section">
-      <div class="container">
       <div class="field">
-          <label class="label is-large" for="name">Name:</label>
+        <label class="label" for="name">Name:</label>
         <div class="control">
-            <input type="name" class="input is-large" id="email" v-model="name">
+          <input type="name" class="input" id="email" v-model="name">
         </div>
       </div>
       <div class="field">
-          <label class="label is-large" for="password">Password:</label>
+        <label class="label" for="password">Password:</label>
         <div class="control">
-            <input type="password" class="input is-large" id="password" v-model="password">
+          <input type="password" class="input" id="password" v-model="password">
         </div>
       </div>
 
       <div class="control">
-          <a class="button is-large is-success" @click="authenticate">Login</a>
-        </div>
+        <a class="button is-success is-large" @click="authenticate">Login</a>
       </div>
       </section>
     </div>
@@ -37,42 +33,43 @@
 </template>
 
 <script>
-import { EventBus } from '../utils';
+import { EventBus } from "../utils";
 
 export default {
   data() {
     return {
-      name: '',
-      password: '',
-      errorMsg: '',
+      name: "",
+      password: "",
+      errorMsg: ""
     };
   },
   methods: {
     authenticate() {
-      this.$store.dispatch('login', { name: this.name, password: this.password })
+      this.$store
+        .dispatch("login", { name: this.name, password: this.password })
         .then(() => {
           if (this.$store.getters.isAuthenticated) {
-            this.$router.push('/');
+            this.$emit("close");
           }
-        },
-        );
+        });
     },
     register() {
-      this.$store.dispatch('register', { name: this.name, password: this.password })
-        .then(() => this.$router.push('/'));
-    },
+      this.$store
+        .dispatch("register", { name: this.name, password: this.password })
+        .then(() => this.$router.push("/"));
+    }
   },
   mounted() {
-    EventBus.$on('failedRegistering', (msg) => {
+    EventBus.$on("failedRegistering", msg => {
       this.errorMsg = msg;
     });
-    EventBus.$on('failedAuthentication', (msg) => {
+    EventBus.$on("failedAuthentication", msg => {
       this.errorMsg = msg;
     });
   },
   beforeDestroy() {
-    EventBus.$off('failedRegistering');
-    EventBus.$off('failedAuthentication');
-  },
+    EventBus.$off("failedRegistering");
+    EventBus.$off("failedAuthentication");
+  }
 };
 </script>

client/src/router/index.js

@@ -18,7 +18,7 @@ export default new Router({
       component: ping,
       beforeEnter(to, from, next) {
         if (!store.getters.isAuthenticated) {
-          next('/');
+          next('/')
         } else {
           next();
         }