<script setup lang="ts">
import { usePocketBase } from '@/pocketbase';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const pb = usePocketBase();
const router = useRouter();

const username = ref("");
const password = ref("");

const login = async () => {
    await pb.collection('users').authWithPassword(username.value, password.value);
    await router.push('/');
}
</script>

<template>
    <div class="p-4 mx-auto mt-10 grid justify-center gap-2 w-64">
        <div class="grid">
            Login:
            <input type="text" name="username" v-model="username" @keyup.enter="login" />
        </div>
        <div class="grid">
            Password:
            <input type="password" name="password" v-model="password" @keyup.enter="login" />
        </div>
        <button class="justify-self-end" name="login" @click="login">Login</button>
    </div>
</template>
