<script setup lang="ts"></script>

<template>
  <el-card class="login-card">
    <div class="title">
      <span class="welcome">Welcome to KLN Portal</span>
      <span class="tips">Login to your account</span>
    </div>
    <div class="send-email-tips" :style="{ display: isEmailTips ? 'block' : 'none' }">
      <span class="font_family icon-icon_confirm_b success-icon"></span>
      New Password sent to registered email.
      <span
        @click="handleDeleteEmailTips"
        class="font_family icon-icon_reject_b delete-icon"
      ></span>
    </div>
    <div class="login-form">
      <div class="label">
        <span>User Name</span>
      </div>
      <el-input
        ref="userNameRef"
        :class="{ 'is-error': loginError.username }"
        v-model="loginForm.username"
        class="user-name"
        placeholder="Please input user name"
        @focus="handleDeleteEmailTips"
        @change="isUserNameExit = true"
      >
        <template #prefix>
          <span class="font_family icon-icon_username_b"></span>
        </template>
        <template #suffix>
          <span v-if="isUserNameExit" class="font_family icon-icon_confirm_b confirm-icon"></span>
        </template>
      </el-input>
      <div class="error" v-if="loginError.username">This account does not exist.</div>
      <div class="label">
        <span>Password</span>
        <span class="forgot-password" @click="handleForgot">Forgot Password?</span>
      </div>
      <el-input
        ref="passWordRef"
        :class="{ 'is-error': loginError.password }"
        v-model="loginForm.password"
        type="password"
        placeholder="Please input password"
        show-password
        @focus="handleDeleteEmailTips"
        ><template #prefix>
          <span class="font_family icon-icon_password_b"></span>
        </template>
      </el-input>
      <div class="error" v-if="loginError.password">Incorrect password. Please try again.</div>
      <el-input
        ref="codeRef"
        :class="{ 'is-error': loginError.code }"
        class="verification-code"
        v-model="loginForm.code"
        placeholder="Verification Code"
        @focus="handleDeleteEmailTips"
      >
        <template #append>
          <img class="verification-code-img" src="./image/code.png" alt="" />
        </template>
      </el-input>
      <div class="error" v-if="loginError.code">Incorrect verification code.</div>
      <el-button @click="handleSubmit" class="el-button--dark login-btn">Login</el-button>
    </div>
    <template #footer>
      <div class="license">
        <span>© 2024 KTreker from <span class="company">Kerry Logistics</span></span>
        <span>Version 0.67</span>
      </div>
    </template>
  </el-card>
</template>

<style lang="scss" scoped></style>
