<template>
  <div>
    <div class="column-container">
      <LoginForm
          path="/register"
          v-on:success="onSuccess"
          v-on:error="onError"
          buttonValue="Create Account"
      />
      <div>{{ message }}</div>
      <p id="msg-already-account" class="column-container">
        Already have an account?
        <router-link to="/login">Log in here</router-link>
      </p>
    </div>
  </div>
</template>

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

export default {
  components: { LoginForm },
  data() {
    return {
      message: undefined,
    };
  },
  methods: {
    onSuccess() {
      this.$router.push("login");
    },
    onError(data) {
      this.message = data.message;
    },
  },
};
</script>
<style scoped>
#login > label {
  display: block;
  margin: 10px;
}
</style>