client/src/components/chainetv.vue

@@ -73,23 +73,39 @@
         </div>
       </div>
     </div>
+    <modalLogin  v-show="showModalLogin" @close="showModalLogin = false" />
+    <modal v-show="showModal" @close="showModal = false">
+      <p>{{modalmessage}}</p>
+      <button class="button is-success" @click="showModal = false">close</button>
+    </modal>
   </div>
 </template>
 
 <script>
 import { putparsechaine } from '../api';
+import modalLogin from './modalLogin'
+import modal from './modal'
+import { EventBus } from '../utils';
 
 export default {
   name: 'chainetv',
+  components: {
+    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 = [];
@@ -110,18 +126,20 @@ export default {
     },
     parsechaine() {
       if (!this.$store.getters.isAuthenticated) {
-        this.$router.push('/login');
+        this.showModalLogin=true;
       } else {
         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);
             }
@@ -131,6 +149,11 @@ export default {
       return true;
     },
   },
+  mounted() {
+    EventBus.$on('showmodallogin',()=>{
+      this.showModalLogin=true;
+    })
+  },
 };
 </script>
 <style >

client/src/components/login.vue

@@ -1,76 +0,0 @@
-<!-- components/Login.vue -->
-<template>
-  <div>
-    <section class="hero is-success">
-      <div class="hero-body">
-        <div class="container 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>
-          <div class="control">
-            <input type="name" class="input is-large" id="email" v-model="name">
-          </div>
-        </div>
-        <div class="field">
-          <label class="label is-large" for="password">Password:</label>
-          <div class="control">
-            <input type="password" class="input is-large" id="password" v-model="password">
-          </div>
-        </div>
-
-        <div class="control">
-          <a class="button is-large is-success" @click="authenticate">Login</a>
-        </div>
-
-      </div>
-    </section>
-
-  </div>
-</template>
-
-<script>
-import { EventBus } from '../utils';
-
-export default {
-  data() {
-    return {
-      name: '',
-      password: '',
-      errorMsg: '',
-    };
-  },
-  methods: {
-    authenticate() {
-      this.$store.dispatch('login', { name: this.name, password: this.password })
-        .then(() => {
-          if (this.$store.getters.isAuthenticated) {
-            this.$router.push('/');
-          }
-        },
-        );
-    },
-    register() {
-      this.$store.dispatch('register', { name: this.name, password: this.password })
-        .then(() => this.$router.push('/'));
-    },
-  },
-  mounted() {
-    EventBus.$on('failedRegistering', (msg) => {
-      this.errorMsg = msg;
-    });
-    EventBus.$on('failedAuthentication', (msg) => {
-      this.errorMsg = msg;
-    });
-  },
-  beforeDestroy() {
-    EventBus.$off('failedRegistering');
-    EventBus.$off('failedAuthentication');
-  },
-};
-</script>

client/src/components/modal.vue

@@ -0,0 +1,16 @@
+<template>
+<div>
+  <div class="modal is-active">
+    <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>
+  </div>
+</template>
+
+<script>
+export default {
+};
+</script>

client/src/components/modalLogin.vue

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

client/src/router/index.js

@@ -2,8 +2,8 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import ping from '@/components/ping';
 import chainetv from '@/components/chainetv';
-import login from '@/components/login';
 import store from '@/store';
+import { EventBus } from '../utils';
 
 Vue.use(Router);
 export default new Router({
@@ -13,22 +13,22 @@ export default new Router({
       name: 'chaineTV',
       component: chainetv,
     },
-    {
-      path: '/login',
-      name: 'Login',
-      component: login,
-    },
     {
       path: '/ping',
       name: 'ping',
       component: ping,
       beforeEnter(to, from, next) {
-        if (!store.getters.isAuthenticated) {
+          autent(to,from,next)
-          next('/login');
-        } else {
-          next();
-        }
       },
     },
   ],
 });
+
+function autent(to,from,next) {
+  if (!store.getters.isAuthenticated) {
+    next('/')
+    EventBus.$emit("showmodallogin")
+  } else {
+    next();
+  }
+}