
<script setup lang="ts">

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

import type { RegisterDto } from "../models/User.ts";
import * as authApi from "../api/AuthApi";

const router = useRouter();

const user = reactive<RegisterDto>({ // the template ensures type consistency
    username: "",
    email: "",
    password: "",
});

onMounted(() => {

});

async function register(): Promise<void> {

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

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

}


</script>

<template>

    <div>
        <h2>Register</h2>

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

</template>