<script setup>
import Header from '@/components/Header.vue'
import router from '@/router/index.js'

let username = '';
let firstname = '';
let lastname = '';
let birthdate = '';
let password = '';

function submit() {
    const request = fetch("http://localhost:3000/user/signup", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        credentials: 'include',
        body: JSON.stringify({
             username: username,
             firstname: firstname,
             lastname: lastname,
             birthdate: birthdate,
             password: password })
    }).then(response => {
        if (response.status == 201) {
            router.push('/connexion');
        } else {
            alert("Erreur lors de l'inscription");
        }
    })
}
</script>

<template>
    <Header>
    </Header>
    <h1>S'inscrire</h1>
    <form @submit.prevent="submit">
        <label for="username">Nom d'utilisateur : </label>
        <input type="text" placeholder="Nom d'utilisateur" id="username" v-model="username">
        <br>

        <label for="firstname">Prénom : </label>
        <input type="text" placeholder="Prénom" id="firstname" v-model="firstname">
        <br>

        <label for="lastname">Nom : </label>
        <input type="text" placeholder="Nom" id="lastname" v-model="lastname">
        <br>

        <label for="birthdate">Date de naissance : </label>
        <input type="date" placeholder="a" id="birthdate" v-model="birthdate">
        <br>

        <label for="password">Mot de passe : </label>
        <input type="password" placeholder="Mot de passe" id="password" v-model="password">
        <br>

        <button type="submit" name="submit">S'inscrire</button>
    </form>
</template>

<style scoped></style>