<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>
    <div class="container">
        <div class="formulaire">
            <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>
        </div>
    </div>
</template>

<style scoped>
.container {
    display: flex;
    justify-content: center;
}

.formulaire {
    margin: 50px;
    padding: 20px;
    border: 1px solid #e6007e;
    border-radius: 25px;
}


form label {
    display: block;
    margin: 10px 0;
    font-size: 20px;

}

form input {
    display: block;
    margin: 10px auto;
    padding: 10px;
    font-size: 20px;
    border: 1px solid #e6007e;
    border-radius: 5px;
    outline: none;
    background-color: var(--color-background);
    color: var(--color-text);
}


form button {
    display: block;
    margin: 10px auto;
    padding: 10px;
    font-size: 20px;
    border-radius: 5px;
    border: 1px solid #e6007e;
    background-color: var(--color-background);
    color: var(--color-text);
}

form button:hover {
    background-color: var(--color-background-soft);

}
</style>