<template>
    <div class="register-page">
        <page-title pagetitle="S'Inscrire"/>
        <form action="#" @submit.prevent="onSubmit">
            <div class="form-content">
                <text-input id="mail" label="Email"/>
                <text-input id="pseudo" label="Pseudo"/>
                <pwd-input id="password1" label="Mot de passe"/>
                <pwd-input id="password2" label="Confirmer"/>
                <error-message id="error-password" errormessage="Les mots de passe ne correspondent pas." v-show="this.showPwdError"/>
                <error-message id="error-back"  errormessage="Cet email ou ce pseudo est déjà pris." v-show="this.showBackError"/>
                
                
            </div>
            <svg-button id="back" svg="/icons/back.svg"/>
            <svg-button id="validate" svg="/icons/validate.svg"/>
        </form>
    </div>
</template>

<script>
import PageTitle from '@/components/PageTitle.vue'
import SvgButton from '@/components/SvgButton.vue'
import TextInput from '@/components/form/TextInput.vue'
import PwdInput from '@/components/form/PwdInput.vue'
import ErrorMessage from '@/components/form/ErrorMessage.vue'
export default {
    name: 'Register',
    components: {
        PageTitle,
        SvgButton,
        TextInput,
        PwdInput,
        ErrorMessage
    },
    data() {
        return {
            showPwdError : false,
            showBackError : false,
            
        }
    },
    methods: {
        updateShowPwdError: function(){
            this.showPwdError = (document.getElementById('password1').value !== document.getElementById('password2').value);
        },
        updateShowBackError: function(){
            this.showBackError = false; //TODO
        },
        onSubmit: async function(){
            this.showPwdError = (document.getElementById('password1').value !== document.getElementById('password2').value);
            if (this.showPwdError) {
                return;
            }
            this.showBackError = false; //TODO
            if (this.showBackError) {
                return;
            }
            if (event.submitter.id=='back') {
                this.$router.push('/');
            }
            if (event.submitter.id=='validate') {
                let request = await fetch('http://localhost/index.php/user',
                {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                    },
                body: JSON.stringify({
                        login: document.getElementById('pseudo').value,
                        pwd: document.getElementById('password1').value,
                        avatar: "default.png",
                        lastname: "",
                        firstname: "",
                        mail: document.getElementById('mail').value
                })
                }); //creating the content and sending the request

                let response = await request;
                if (response.ok){
                    this.$router.push('lobby');
                }
            }
        }
    }
}
</script>

<style>

.register-page .form-content{
    flex-direction: column;
    display: flex;
    width: 900px;
    background-color: rgba(196, 196, 196, 0.6);
    margin: 0 auto;
    padding-top: 50px;
}


*, ::before, ::after {
    box-sizing: border-box;
}
</style>