<template>
    <div class="login-page">
        <page-title pagetitle="Se Connecter"/>
        <form action="#" @submit.prevent="onSubmit">
            <div class="form-content">
                <text-input id="login" label="Pseudo"/>
                <pwd-input id="password" label="Mot de passe"/>
            </div>
            <div class="submit-buttons">
                <svg-button id="validate" svg="/icons/validate.svg"/>
                <svg-button id="back" svg="/icons/back.svg"/>
            </div> 
        </form>
    </div>
</template>

<script>
import bcrypt from 'bcryptjs'
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'
export default {
    name: 'Login',
    components: {
        PageTitle,
        SvgButton,
        TextInput,
        PwdInput
    },
    beforeCreate () {
        if (localStorage.getItem('user') != null) {
            this.$router.push('/lobby');
        }
    },
    data() {
        return {
            showNotFilledError : false,
        }
    },
    methods: {
        onSubmit: async function(event){
            if (event.submitter.id=='back') {
                this.$router.push('/');
            }
            
            // Test if all fields are filled
            this.showNotFilledError = (
                document.getElementById('login').value == ''
            || document.getElementById('password').value == ''
            );
            if (this.showNotFilledError) {
                return;
            }

            // Get auth token if everything is okay
            if (event.submitter.id=='validate') {
                let request = await fetch(this.$apiRoot+'/login',
                {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                    },
                body: JSON.stringify({
                        login: document.getElementById('login').value,
                        pwd: bcrypt.hashSync(document.getElementById('password').value, "$2a$10$4AAhcsd4FpiPvUS718Bemu"),
                })
                }); //creating the content and sending the request

                let response = await request;
                if (response.ok){
                    let json = await response.json();
                    localStorage.setItem('user', JSON.stringify(json));
                    this.$router.push('lobby');
                }
            }
        }
    }
}
</script>

<style>
.login-page{
    top: 100px;
    position: relative;
}

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

.submit-buttons{
    flex-direction: row-reverse;
    display: flex;
    justify-content: center;
}


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