<template>
	<form v-on:submit="register" id="register-form" class="login" action="">
	<h3>Registration</h3>
	<div>
	<label for='sender_name'>Name</label>
	<input id='register-name' required type='name' name='sender_name' placeholder=''
	spellcheck='false'>
	</div>
	<div>
	<label for='sender_email'>Email</label>
	<input id='register-email' required type='email' name='sender_email' placeholder=''
	spellcheck='false'>
	</div>
	<div>
	<label for='sender_password'>Password</label>
	<input id='register-password' required type='password' name='sender_password'
	placeholder='' spellcheck='false'>
	</div>
	<div>
	<label for='sender_password'>Confirm Password</label>
	<input id='confirm-password' required type='password'
	name='sender_password' placeholder='' spellcheck='false'>
	</div>
	<button class="submit-btn" type="submit">Submit</button>
	<div v-on:click="closeArea" class="cancel-button"></div>
	</form>
</template>

<script>
	function register(event) {
		fetch("/register", {
			method: 'POST',
			headers: {'Content-Type': 'application/json',
			'X-XSRF-TOKEN': window.token},
			body: JSON.stringify({"name": document.getElementById("register-name").value,
			"email": document.getElementById("register-email").value,
			"password": document.getElementById("register-password").value}),
			"password_confirmation": document.getElementById("confirm-password").value})
		.then(response => {
			console.log(response.json())
			console.log(response.ok)
			console.log(response.message)
		});
		event.preventDefault();
	}

	/* document.getElementById('register-form').addEventListener('submit', register) */
	/* document.getElementById('register-form').addEventListener('submit', register) */
	module.exports = {
		methods: {
			register,
			closeArea() {
				document.querySelector(".register-area").classList.remove("active")
			}
		}
	}
</script>