From d9d2fb682bb05e2073c7bc335f4385fcf0706bde Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Sat, 22 Jun 2024 21:02:01 -0500
Subject: [PATCH] add registration functionality

---
 hotel_booking/components/header.php | 99 +++++++++++++++++++++++++----
 1 file changed, 86 insertions(+), 13 deletions(-)

diff --git a/hotel_booking/components/header.php b/hotel_booking/components/header.php
index 0260fab..53265f9 100644
--- a/hotel_booking/components/header.php
+++ b/hotel_booking/components/header.php
@@ -119,7 +119,7 @@
 <div class="modal fade" id="registerBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
-            <form>
+            <form id = "register-form">
                 <div class="modal-header" style="border: none;">
                     <button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
@@ -130,42 +130,115 @@
                     <div class="row">
                         <div class="mb-3 col-md-6">
                             <label>First Name</label>
-                            <input type="text" class="form-control shadow-none"/>
+                            <input type="text" name="firstname" class="form-control shadow-none" required/>
                         </div>
                         <div class="mb-3 col-md-6">
                             <label>Last Name</label>
-                            <input type="text" class="form-control shadow-none"/>
+                            <input type="text" name="lastname" class="form-control shadow-none" required/>
                         </div>
                         <div class="mb-3 col-md-6">
                             <label>Phone Number</label>
-                            <input type="tel" class="form-control shadow-none"/>
+                            <input type="tel" name="phone" class="form-control shadow-none" required/>
                         </div>
                         <div class="mb-3 col-md-6">
                             <label>Date of Birth</label>
-                            <input type="date" class="form-control shadow-none"/>
+                            <input type="date" name="birth" class="form-control shadow-none" required/>
                         </div>
                         <div class="mb-3 col-md-12">
                             <label>Address</label>
-                            <textarea type="text" rows="3" class="form-control shadow-none" style="resize: none;"></textarea>
+                            <textarea type="text" name="address" rows="3" class="form-control shadow-none" style="resize: none;" required></textarea>
                         </div>
                         <div class="mb-3 col-md-12">
                             <label>Email</label>
-                            <input type="email" class="form-control shadow-none"/>
+                            <input type="email" name="email" class="form-control shadow-none" required/>
                         </div>
                         <div class="mb-3 col-md-6">
                             <label>Password</label>
-                            <input type="password" class="form-control shadow-none"/>
+                            <input type="password" name="password" class="form-control shadow-none" required/>
                         </div>
                         <div class="mb-5 col-md-6">
                             <label>Confirm Password</label>
-                            <input type="password" class="form-control shadow-none"/>
-                        </div>
-                        <div class="mb-3 d-grid">
-                            <button type="submit" class="btn btn-dark shadow-none d-block ">Register</button>
+                            <input type="password" name="cpassword" class="form-control shadow-none" required/>
                         </div>
                     </div>
                 </div>
+                <div class="mb-3 d-grid mx-3">
+                    <button type="submit" class="btn btn-dark shadow-none d-block ">Register</button>
+                </div>
             </form>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+
+<script>
+
+    function alert(type, msg, position='body'){
+        let bs_class = (type == 'success') ? 'alert-success' : 'alert-danger';
+        let element = document.createElement('div');
+        element.innerHTML = 
+        `<div class="d-flex justify-content-end align-items-start">
+            <div class="alert ${bs_class} alert-dismissible fade show" role="alert">
+                <strong class="me-3">${msg}</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        </div>`;
+        if(position == 'body'){
+            document.body.append(element);
+            element.classList.add('custom-alert-t');
+
+        } else{
+            document.getElementById(position).appendChild(element);
+        }
+
+        
+        setTimeout(removeAlert, 3000)
+    }
+    function removeAlert(){
+        document.getElementsByClassName('alert')[0].remove();
+    }
+
+    let register_form = document.getElementById('register-form');
+    register_form.addEventListener('submit', (e) => {
+        e.preventDefault();
+
+        let data = new FormData();
+        data.append('firstname', register_form.elements['firstname'].value);
+        data.append('lastname', register_form.elements['lastname'].value);
+        data.append('phone', register_form.elements['phone'].value);
+        data.append('birth', register_form.elements['birth'].value);
+        data.append('address', register_form.elements['address'].value);
+        data.append('email', register_form.elements['email'].value);
+        data.append('password', register_form.elements['password'].value);
+        data.append('cpassword', register_form.elements['cpassword'].value);
+        data.append('register', '');
+
+        var myModal = document.getElementById('registerBackdrop');
+        var modal = bootstrap.Modal.getInstance(myModal);
+        modal.hide();
+
+        let xhr = new XMLHttpRequest();
+        xhr.open("POST", "ajax/login_register.php", true);
+
+        xhr.onload = function(){
+            if(this.responseText == 'pass_mismatch'){
+                alert('error', 'Wrong password, please try again!');
+            } else if(this.responseText == 'email_already'){
+                alert('error', 'This email is alerady registered!');
+            } else if(this.responseText == 'phone_already'){
+                alert('error', 'This phone number is alerady registered!');
+            } else if(this.responseText == 'mail_failed'){
+                alert('error', 'We cannot sent you an email confirmation');
+            } else if(this.responseText == 'ins_failed'){
+                alert('error', 'Registration error');
+            } else{
+                alert('success' , 'Registration successful. The confirmation is sent to your email.');
+                register_form.reset();
+            }
+        }
+
+        xhr.send(data);
+
+    });
+
+</script>
\ No newline at end of file