<template>
  <layout>
    <div class="flex justify-center justify-items-center">
      <svg class="h-15 w-15 animate-spin" preserveAspectRatio="xMidYMid">
        <circle
          cx="50%"
          cy="50%"
          r="35"
          fill="none"
          stroke="#374151"
          stroke-width="10"
          stroke-dasharray="164 56" />
      </svg>
    </div>
    <h1 class="mt-4 text-xl text-center text-gray-700">
      {{ $t("redirect.message") }}
    </h1>
  </layout>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Layout from "~/components/Layout.vue";
import type { KcContextBase } from "~/types/context";
import type { SAMLPostData } from "~/types/samlPostData";
import { formPost } from "~/functions/utils";

export default defineComponent({
  name: "SamlPostForm",
  components: {
    Layout,
  },
  data() {
    return {
      context: (window as any).kcContext as KcContextBase.SAMLPostForm,
    };
  },
  mounted: function () {
    const postData: SAMLPostData = {
      SAMLRequest: this.context.samlPost.SAMLRequest,
      SAMLResponse: this.context.samlPost.SAMLResponse,
      RelayState: this.context.samlPost.relayState,
    };
    setTimeout(() => formPost(this.context.samlPost.url, postData), 1000);
  },
});
</script>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
