client/src/components/modalLogin.vue

@@ -0,0 +1,78 @@
+<!-- components/Login.vue -->
+<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>
+          <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>
+  </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>