<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { apiPost } from "../api";
import FormStatus from "../components/FormStatus.vue";
import PageHeader from "../components/PageHeader.vue";

const router = useRouter();
const form = reactive({ token: "", new_password: "", new_password_confirm: "" });
const status = ref("");
const kind = ref<"info" | "success" | "error">("info");

async function submit() {
  const result = await apiPost("/api/v1/auth/accept-invitation", form);
  status.value = result.ok ? "Einladung angenommen. Anmeldung ist jetzt möglich." : result.message;
  kind.value = result.ok ? "success" : "error";
  if (result.ok) setTimeout(() => router.push("/login"), 800);
}
</script>

<template>
  <PageHeader title="Einladung annehmen" description="Einladungstoken einlösen und eigenes Passwort setzen." />
  <section class="panel form-panel">
    <form @submit.prevent="submit">
      <label class="field"><span>Einladungstoken</span><input v-model="form.token" required /></label>
      <label class="field"><span>Passwort</span><input v-model="form.new_password" type="password" required /></label>
      <label class="field"><span>Passwort wiederholen</span><input v-model="form.new_password_confirm" type="password" required /></label>
      <div class="form-actions"><button type="submit">Einladung annehmen</button></div>
      <FormStatus :message="status" :kind="kind" />
    </form>
  </section>
</template>
