<template>
  <layout>
    <h1 class="mb-8 text-3xl font-semibold text-center text-gray-700">
      {{ $t("login.title") }}
    </h1>
    <p
      v-if="context.realm.registrationAllowed"
      class="mt-4 text-sm font-light text-center text-gray-700">
      {{ $t("login.noAccount") }}
      <a
        :href="context.url.registrationUrl"
        class="font-medium text-blue-500 hover:underline"
        >{{ $t("login.signupLink") }}</a
      >
    </p>
    <div v-if="context.message?.type == 'error'">
      <ErrorBox>{{ context.message?.summary }}</ErrorBox>
    </div>
    <form
      class="flex flex-col justify-center mt-6"
      :action="context.url.loginAction"
      method="post">
      <div>
        <label for="username" class="block text-sm text-gray-800">{{
          context.realm.loginWithEmailAllowed ? $t("login.usernameOrEmail") : $t("login.username")
        }}</label>
        <input
          name="username"
          type="text"
          :placeholder="
            context.realm.loginWithEmailAllowed
              ? 'jane.doe@example.com'
              : 'JDoe'
          "
          :value="context.login.username ? context.login.username : ''"
          class="block w-full px-4 py-2 mt-2 text-gray-800 bg-white border rounded-md focus:border-blue-500 focus:ring-transparent focus:outline-none focus:ring focus:ring-opacity-40" />
      </div>
      <div class="mt-4">
        <div>
          <label for="password" class="block text-sm text-gray-800"
            >{{ $t("login.password") }}</label
          >
          <input
            type="password"
            name="password"
            placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"
            class="block w-full px-4 py-2 mt-2 text-gray-800 bg-white border rounded-md focus:border-blue-500 focus:ring-transparent focus:outline-none focus:ring focus:ring-opacity-40" />
        </div>
        <a
          v-if="context.realm.resetPasswordAllowed"
          :href="context.url.loginResetCredentialsUrl"
          class="text-xs text-gray-600 hover:underline"
          >{{ $t("login.forgotPassword") }}</a
        >
      </div>
      <div
        v-if="context.realm.rememberMe"
        class="mt-5 flex flex-row items-center">
        <input
          type="checkbox"
          name="rememberMe"
          class="w-4 h-4 text-blue-500 bg-gray-100 border-gray-400 rounded dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600" />
        <label for="rememberMe" class="block ml-3 text-sm text-gray-800"
          >{{ $t("login.rememberMe") }}</label
        >
      </div>
      <input
        type="hidden"
        name="credentialId"
        :value="
          context.auth.selectedCredential ? context.auth.selectedCredential : ''
        " />
      <button
        class="w-full mt-6 px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400">
        {{ $t("login.login") }}
      </button>
    </form>
  </layout>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Layout from "~/components/Layout.vue";
import ErrorBox from "~/components/ErrorBox.vue";
import type { KcContextBase } from "~/types/context";

export default defineComponent({
  name: "Login",
  components: {
    Layout,
    ErrorBox,
  },
  data() {
    return {
      context: (window as any).kcContext as KcContextBase.Login,
    };
  },
});
</script>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
