
<script setup lang="ts">

import { onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";

import * as authApi from "../api/AuthApi";

const router = useRouter();

const user = reactive({
    username: "",
    password: ""
});

onMounted(() => {

});

async function login(): Promise<void> {

    const success: boolean = await authApi.login(user);

    if(success) {
        router.push("/users"); // redirect
    } else {
        // prompt try again
    }

}

</script>

<template>

    <div>
        <h2>Login</h2>

        <form @submit.prevent="login">
            <input v-model="user.username" placeholder="username" />
            <input v-model="user.password" type="password" placeholder="password" />
            
            <button type="submit">Submit</button>
        </form>
    </div>

</template>