<template>
  <div>
    <div class="column-container">
      <LoginForm
          path="/login"
          v-on:success="onSuccess"
          v-on:error="onError"
          buttonValue="Login"
      />
      <div>{{ message }}</div>
    </div>
    <p id="msg-already-account" class="column-container">
      Need to create an account?
      <router-link to="/register">Register here</router-link>
    </p>
  </div>
</template>

<script>
import LoginForm from "@/components/LoginForm";

export default {
  components: { LoginForm },
  data() {
    return {
      message: undefined,
    };
  },
  methods: {
    onSuccess() {
      this.$router.push("/");
    },
    onError(data) {
      this.message = data.message;
    },
  },
};
</script>