<template>
  <section class="container">
    <div class="columns is-centered">
      <div class="column is-3-widescreen is-4-desktop is-5-tablet">
        <b-notification
          v-if="isConfirmation"
          type="is-success"
          aria-close-label="Close notification"
        >
          Deine E-Mail-Adresse wurde erfolgreich bestätigt. Du kannst dich nun
          anmelden.
        </b-notification>
        <LoginForm v-if="!user.isAuthenticated" :user="user" />
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import LoginForm from "@/components/LoginForm.vue";
import { User } from "@/api";

@Component({ components: { LoginForm } })
export default class Home extends Vue {
  private isConfirmation = false;
  private user = new User("", "");

  private async created() {
    if (this.$route.name === "Confirm") this.isConfirmation = true;
    if (this.isConfirmation) {
      await User.confirm(this.$route.params.uid, this.$route.params.token);
    }
  }
}
</script>
