<template>
  <MainTemplate :useStagedOverviewLink="false">
    <template #topBar>
      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
        <h1 class="font-bold text-xl h-8">Meine Anmeldedaten</h1>
      </div>
    </template>
    <template #diffMain>
      <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
        <div class="flex flex-col gap-2">
          <img :src="image" alt="totp" class="w-56 h-56 self-center" />

          <div class="flex relative">
            <input type="text" :value="otp" />
            <ClipboardIcon
              class="w-5 h-5 p-2 box-content absolute right-1 top-1/2 -translate-y-1/2 bg-white cursor-pointer"
              @click="copyToClipboard"
            />
            <div v-if="copySuccess" class="absolute w-5 h-5 right-3 top-[10px]">
              <SuccessCheckmark />
            </div>
          </div>
        </div>
        <form class="flex flex-col gap-2" @submit.prevent="verify">
          <div class="-space-y-px">
            <div>
              <input id="totp" name="totp" type="text" required placeholder="TOTP prüfen" />
            </div>
          </div>

          <div class="flex flex-row gap-2">
            <button type="submit" primary :disabled="verifyStatus == 'loading' || verifyStatus == 'success'">
              TOTP prüfen
            </button>
            <Spinner v-if="verifyStatus == 'loading'" class="my-auto" />
            <SuccessCheckmark v-else-if="verifyStatus == 'success'" />
            <FailureXMark v-else-if="verifyStatus == 'failed'" />
          </div>
          <p v-if="verifyError" class="text-center">{{ verifyError }}</p>
        </form>
      </div>
    </template>
  </MainTemplate>
</template>

<script setup lang="ts">
import { defineComponent, markRaw, defineAsyncComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { ClipboardIcon } from "@heroicons/vue/24/outline";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      verification: "loading" as "success" | "loading" | "failed",
      image: undefined as undefined | string,
      otp: undefined as undefined | string,
      verifyStatus: undefined as undefined | "loading" | "success" | "failed",
      verifyError: "" as string,
      copySuccess: false,
      timeoutCopy: undefined as any,
    };
  },
  mounted() {
    this.$http
      .get(`/user/totp`)
      .then((result) => {
        this.verification = "success";
        this.image = result.data.dataUrl;
        this.otp = result.data.otp;
      })
      .catch((err) => {
        this.verification = "failed";
      });
  },
  methods: {
    verify(e: any) {
      let formData = e.target.elements;
      this.verifyStatus = "loading";
      this.verifyError = "";
      this.$http
        .post(`/user/verify`, {
          totp: formData.totp.value,
        })
        .then((result) => {
          this.verifyStatus = "success";
        })
        .catch((err) => {
          this.verifyStatus = "failed";
          this.verifyError = err.response.data;
        })
        .finally(() => {
          setTimeout(() => {
            this.verifyStatus = undefined;
          }, 2000);
        });
    },
    copyToClipboard() {
      navigator.clipboard.writeText(this.otp ?? "");
      this.copySuccess = true;
      this.timeoutCopy = setTimeout(() => {
        this.copySuccess = false;
      }, 2000);
    },
  },
});
</script>
