trendplays/resources/js/main.js

let toggle = document.querySelector(".nav-toggle")
let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
let registerToggles = document.querySelectorAll(".register-btn, .register-area\
	.cancel-button, .services-cards button")
const passInput = document.getElementById("password")
const passInput2 = document.getElementById("confirm_password")
let token = getCookie('XSRF-TOKEN')

function register(event) {
	fetch("/sanctum/csrf-cookie", {
		method: 'GET'
	}).then( function(response) {
		token = getCookie('XSRF-TOKEN')
		fetch("/register", {
			method: 'POST',
			headers: {'Content-Type': 'application/json',
			'X-XSRF-TOKEN': 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('sent registration');
			console.log(response.json())
		});
	event.preventDefault();
}

function getCookie(name) {
  var re = new RegExp(name + "=([^;]+)");
  var value = re.exec(document.cookie);
  return (value != null) ? unescape(value[1]) : null;
  }

function checkPasswords() {
	if (passInput.value != passInput2.value) {
		passInput2.setCustomValidity('Passwords must be matching')
	} else {
		passInput2.setCustomValidity('');
	}
}

function login(event) {
	fetch("/sanctum/csrf-cookie", {
		method: 'GET'
	}).then( function(response) {
		token = getCookie('XSRF-TOKEN')
		fetch("/login", {
			method: 'POST',
			headers: {'Content-Type': 'application/json',
			'X-XSRF-TOKEN': token},
			body: JSON.stringify({"email": document.getElementById("login_email").value,
			"password": document.getElementById("login_password").value}),
		}).then(response => {
			console.log('sent login');
			console.log(response.json())
		});
	})
	event.preventDefault();
}

toggle.addEventListener("click", function() {
	heroText.forEach(item => {
		item.classList.toggle("hidden")
	})
	document.querySelector("nav form.login").classList.toggle("active")
	this.classList.toggle("toggled")
	// this.src = "/images/close.svg"
})

//Triggers for registration menu
for (i = 0; i < registerToggles.length; i++) {
	registerToggles[i].addEventListener("click", function() {
	document.querySelector(".register-area").classList.toggle("active")
	});
}


//FAQ code
let cols = document.getElementsByClassName("collapsible");
// let ;

for (i = 0; i < cols.length; i++) {
	cols[i].addEventListener("click", function() {
		this.classList.toggle("active");
	});
}

document.getElementById('register-form').addEventListener('submit', register)
document.getElementById('login_form').addEventListener('submit', login)
passInput2.oninput = checkPasswords
passInput.oninput = checkPasswords