<template>
  <div class="form-container">
    <h2>Login</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="email-login">Email:</label>
        <input id="email-login" v-model="email" type="email" required />
      </div>

      <div class="form-group">
        <label for="password-login">Passwort:</label>
        <input id="password-login" v-model="password" type="password" required />
      </div>

      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const email = ref('')
const password = ref('')

const handleLogin = () => {
  if (!email.value || !password.value) {
    alert('Bitte alle Felder ausfüllen')
    return
  }
  authClient.signIn.email(
    {
      email: email.value,
      password: password.value
    },
    {
      onRequest: (ctx) => {
        console.log('Sending login request', ctx)
      },
      onSuccess: (ctx) => {
        console.log('Successfully logged in!')
      },
      onError: (ctx) => {
        console.log(ctx.error.message)
      }
    }
  )
}
</script>

<style scoped>
.form-container {
  max-width: 300px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}
.form-group {
  margin-bottom: 10px;
}
input {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
}
button {
  width: 100%;
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background: #0056b3;
}
</style>
