<template>
  <section class="container">
    <div class="columns is-centered">
      <div
        v-if="user.isAuthenticated"
        class="column is-5-fullhd is-6-widescreen is-7-desktop is-7-tablet"
      >
        <UserTable :user="user" />
      </div>
      <div v-else class="column is-3-widescreen is-4-desktop is-5-tablet">
        <LoginForm :user="user" />
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import LoginForm from "@/components/LoginForm.vue";
import { mixins } from "vue-class-component";
import { User } from "@/api";
import UserTable from "@/components/UserTable.vue";
import { NotifyMixin } from "@/mixins";

@Component({ components: { UserTable, LoginForm } })
export default class Home extends mixins(NotifyMixin) {
  private user = new User();

  public async created(): Promise<void> {
    if (this.$route.name === "confirm") {
      await this.doConfirm();
    } else if (!this.user.isAuthenticated) {
      this.$router.push({ name: "login" });
    }
  }

  private async doConfirm() {
    try {
      await User.confirm(this.$route.params.uid, this.$route.params.token);
      this.$router.push({ name: "login" });
      this.showSuccess(
        "Deine E-Mail-Adresse wurde bestätigt. Du kannst dich nun anmelden."
      );
    } catch {
      this.showError();
    }
  }
}
</script>
