Make buttons add instead of toggle states of register area

resources/js/main.js

@@ -7,10 +7,7 @@ let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
 let registerToggles = document.querySelectorAll(".register-btn, .register-area\
 	.cancel-button, .services-cards button")
 let token = getCookie('XSRF-TOKEN')
-const app = createApp(RegisterArea)
-
-// app.component('register-area', {template: RegisterArea})
-app.mount('#app')
+const app = createApp(RegisterArea).mount('#app')
 
 function importAll(r) {
 	return r.keys().map(r)
@@ -31,16 +28,6 @@ function getToken() {
 	})
 }
 
-function checkPasswords() {
-	let passInput = document.getElementById('register-password')
-	let passInput2 = document.getElementById('confirm-password')
-	if (passInput.value != passInput2.value) {
-		passInput2.setCustomValidity('Passwords must be matching')
-	} else {
-		passInput2.setCustomValidity('');
-	}
-}
-
 function login(event) {
 	fetch("/login", {
 		method: 'POST',
@@ -78,12 +65,20 @@ if (!token) {getToken()}
 if (window.location.pathname == '/') {
 	document.getElementById('nav_toggle').addEventListener('click', toggleNav)
 	document.getElementById('login_form').addEventListener('submit', login)
+	// console.log(app.$data.active)
 
 	//Triggers for registration menu
 	for (let i = 0; i < registerToggles.length; i++) {
 		registerToggles[i].addEventListener("click", function() {
-		document.querySelector(".register-area").classList.toggle("active")
-		});
+		document.querySelector(".register-area").classList.add("active")
+		app.active = 'register'
+		})
+	}
+	document.getElementById("forgot-password-btn").onclick = event => {
+		document.querySelector(".register-area").classList.add("active")
+		app.active = 'forgot'
+		console.log(app.active)
+		event.preventDefault()
 	}
 
 	//FAQ collapsibles
@@ -94,8 +89,6 @@ if (window.location.pathname == '/') {
 			this.classList.toggle("active");
 		});
 	}
-	document.getElementById("register-password").oninput = checkPasswords
-	document.getElementById("confirm-password").oninput = checkPasswords
 } else if (window.location.pathname == '/verify-email') {
 	document.getElementById('resend_verification').addEventListener("click", resendLink)
 }

resources/js/register-area/register-area.vue

@@ -8,17 +8,17 @@
 		</div>
 		<div>
 		<label for='sender_email'>Email</label>
-		<input id='register-email' required type='email' name='sender_email' placeholder=''
+		<input v-on:input="checkPasswords" 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'
+		<input v-on:input="checkPasswords" 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'
+		<label for='confirm_password'>Confirm Password</label>
+		<input v-on:input="checkPasswords" id='confirm-password' required type='password'
 		name='sender_password' placeholder='' spellcheck='false'>
 		</div>
 		<button class="submit-btn" type="submit">Submit</button>
@@ -54,12 +54,23 @@
 		event.preventDefault();
 	}
 
+	function checkPasswords() {
+		let passInput = document.getElementById('register-password')
+		let passInput2 = document.getElementById('confirm-password')
+		if (passInput.value != passInput2.value) {
+			passInput2.setCustomValidity('Passwords must be matching')
+		} else {
+			passInput2.setCustomValidity('');
+		}
+	}
+
 	module.exports = {
 		data() {
 		return {active: 'loading'}
 		},
 		methods: {
 			register,
+			checkPasswords,
 			closeArea() {
 				document.querySelector(".register-area").classList.remove("active")
 			}

resources/views/master.blade.php

@@ -48,7 +48,7 @@ spellcheck='false'>
 		<div class='foot-links'>
 			<a href="/terms">Terms & Policy</a>
 			<a href="mail:support@trendplays.com">Help</a>
-			<a id="reset-password" href="/reset-password">Reset Password</a>
+			<a id="forgot-password-btn" href="/reset-password">Reset Password</a>
 		</div>
 		<small>©Copyright 2021 Trendplays Network, Inc.</small>
 	</footer>