<template>
  <div class="container h-screen-main">
    <div class="flex justify-center items-center min-h-full">
      <div class="w-full max-w-md p-8">
        <h2 class="text-center text-2xl mb-4 font-semibold">LOGIN</h2>
        <form
          action="#"
          method="post"
          class="w-full grid gap-2"
          @submit.prevent="signIn"
        >
          <label for="account" class="relative">
            <p class="text-sm font-normal mb-2">Account</p>
            <span
              class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]"
            >
              <IconMember class="h-5 w-5 fill-current" />
            </span>
            <input
              type="text"
              id="account"
              class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1"
              :class="{ 'border-danger': isInvalid }"
              required
              autofocus
              v-model.trim="auth.username"
              @change="changeHandler($event)"
            />
          </label>
          <label for="passwordt" class="relative block">
            <p class="text-sm font-normal mb-2">Password</p>
            <span
              class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]"
            >
              <IconLockKey class="h-5 w-5 fill-current" />
            </span>
            <input
              :type="showPassword ? 'text' : 'password'"
              id="password"
              aria-describedby="password-addon"
              class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1"
              :class="{ 'border-danger': isInvalid }"
              required
              v-model.trim="auth.password"
              @change="changeHandler($event)"
            />
            <span
              class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer"
              v-show="auth.password"
              @click="showPassword = !showPassword"
            >
              <IconEyeOpen class="h-5 w-5" v-if="showPassword" />
              <IconEyeClose class="h-5 w-5" v-else />
            </span>
          </label>
          <p class="my-4 text-danger">
            <span v-show="isInvalid">
              <IconWarnTriangle
                class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"
              />
              Incorrect account or password.
            </span>
          </p>
          <button
            id="login_btn_main_btn"
            type="submit"
            class="w-full btn btn-lg"
            :class="isDisabledButton ? 'btn-disable' : 'btn-c-primary'"
            :disabled="isDisabledButton"
          >
            Log in
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
// The Lucia project.
// Copyright 2024-2026 DSP, inc.  All rights reserved.
// Authors:
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
/**
 * @module views/Login/Login Login page with account/password
 *   form, password visibility toggle, and return-to URL support.
 */

import { ref, computed } from "vue";
import { useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { useLoginStore } from "@/stores/login";
import IconMember from "@/components/icons/IconMember.vue";
import IconLockKey from "@/components/icons/IconLockKey.vue";
import IconEyeOpen from "@/components/icons/IconEyeOpen.vue";
import IconEyeClose from "@/components/icons/IconEyeClose.vue";
import IconWarnTriangle from "@/components/icons/IconWarnTriangle.vue";

const route = useRoute();

// Store
const store = useLoginStore();
const { auth, isInvalid } = storeToRefs(store);
const { signIn, setRememberedReturnToUrl } = store;

// Data
const showPassword = ref(false);
const isJustFocus = ref(true);

// Computed
const isDisabledButton = computed(() => {
  return (
    auth.value.username === "" || auth.value.password === "" || isInvalid.value
  );
});

// Methods
/**
 * Clears the invalid state when the user modifies input.
 * @param {Event} event - The input change event.
 */
function changeHandler(event) {
  const inputValue = event.target.value;
  if (inputValue !== "") {
    isInvalid.value = false;
  }
}

// Created logic
// Handle the case where a user pastes a page URL into the browser without being logged in
// btoa: Base64-encode the string
if (route.query["return-to"]) {
  setRememberedReturnToUrl(route.query["return-to"]);
}
</script>

<style scoped>
/* Hide the eyes from a password input in MS Edge */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}
/* Hide the keys from the inputs in safair */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}
</style>
