client/src/components/chainetv.vue

@@ -73,17 +73,23 @@
         </div>
       </div>
     </div>
+    <modalLogin v-bind:class="{'is-active': showModalLogin}" @close="showModalLogin = false"/>
   </div>
 </template>
 
 <script>
 import { putparsechaine } from '../api';
+import modalLogin from './modalLogin'
 
 export default {
   name: 'chainetv',
+  components: {
+    modalLogin
+  },
   data() {
     return {
       chaine: '',
+      showModalLogin: false,
     };
   },
   methods: {
@@ -110,7 +116,7 @@ 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) => {

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/router/index.js

@@ -2,7 +2,6 @@ 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';
 
 Vue.use(Router);
@@ -13,18 +12,13 @@ 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) {
-          next('/login');
+          next('/');
         } else {
           next();
         }