navigation and pages

js/app.ts

@@ -1,11 +1,20 @@
+
+
 $(document).ready(function() {
+    $('#mmlMainContent').load('../components/homepage.html');
     $('#top_nav_bar').load('../components/top_nav.html');
-    $('#main_nav_bar').load('../components/main_nav.html');
-    $('#mmlcarousel').load('../components/banner.html');
+    $('#main_nav_bar').load('../components/main_nav.html', function() {
+        document.getElementById('registerLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/register.html');
+        },);
+        document.getElementById('homeLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/homepage.html');
+        },);
+        document.getElementById('loginLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/login.html');
+        },);
+    });
     $('#mmlMainContent').load('../components/ftProducts.html');
     $('#marmeladenladen_footer').load('../components/footer.html');
     $('#marmeladenladen_search').load('../components/modal.html');
-    $('#marmeladenladenLogin').load('../components/loginModal.html');
-    $('#marmeladenladenRegister').load('../components/registerModal.html');
 });
-

js/registration.js

@@ -2,20 +2,38 @@ const email = document.getElementById('email');
 const password = document.getElementById('password');
 const password2 = document.getElementById('password2');
 password2.addEventListener('change', checkPassword);
-
+const form = document.getElementById('marmeladenLadenRegisterForm');
+form.addEventListener('submit', register);
 
 
 function register() {
-    if (!checkPassword()) {
-        return;
-    }
-    const form = document.querySelector('#marmeladenLadenRegisterForm');
+
+
+    $.ajax({
+        url: 'php/registration.php',
+        type: 'POST',
+        data: {
+            email: email.value,
+            password: password.value,
+            password2: password2.value
+        },
+        success: function (data) {
+            if (data == 'success') {
+                window.location.href = 'index.html';
+            } else {
+                alert(data);
+            }
+        }
+    });
+    return false;
+}
+
     var formData = new FormData(form);
     const jSONdata = JSON.stringify(Object.fromEntries(formData));
 
     //print elements of jSONdata
     console.log(jSONdata);
-}
+
 
 function checkPassword() {
     if (password.value != password2.value) {
@@ -25,4 +43,14 @@ function checkPassword() {
         password2.setCustomValidity('');
         return true;
     }
+}
+
+function checkemail() {
+    if (email.value != '') {
+        email.setCustomValidity('');
+        return true;
+    } else {
+        email.setCustomValidity('Email is required');
+        return false;
+    }
 }