<script setup>
import { reactive } from 'vue'
import { userApi } from '@/components/userInfo'

const loginForm = reactive({
  username: '',
  password: '',
})

async function loginProcess() {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(loginForm.username)) {
    alert('사용자 아이디를 이메일 형식으로 입력하여 주십시오.')
    return
  }
  if (!loginForm.password) {
    alert('비밀번호를 입력하여 주십시오.')
    return
  }
  let loginResult = await userApi.loginProcess(loginForm.username, loginForm.password)
  if (!loginResult) {
    alert('사용자 아이디 또는 비밀번호가 일치하지 않습니다.')
    document.getElementById('floatingPassword').focus()
    return
  }
}
</script>

<template>
  <main class="form-signin container flex-fill">
    <form @submit.prevent="loginProcess">
      <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

      <div class="form-floating">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" :value="loginForm.username" />
        <label for="floatingInput">Email address</label>
      </div>
      <div class="form-floating">
        <input type="password" class="form-control" id="floatingPassword" placeholder="Password" :value="loginForm.password" @keydown.enter="loginProcess" />
        <label for="floatingPassword">Password</label>
      </div>

      <div class="checkbox mb-3">
        <label> <input type="checkbox" value="remember-me" /> Remember me </label>
      </div>
      <button class="w-100 btn btn-lg btn-primary" type="submit" @submit="loginProcess">Sign in</button>
      <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
    </form>
  </main>
</template>

<style scoped>
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
  margin-top: 20%;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type='email'] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type='password'] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
</style>
