From 02edcd600b9e46e2b78d727cd471e56473647568 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Sun, 23 Jun 2024 21:20:19 -0500
Subject: [PATCH] added login/logout functionality

---
 hotel_booking/admin/components/utils.php |  4 +-
 hotel_booking/components/header.php      | 77 ++++++++++++++++++++----
 hotel_booking/components/link.php        |  6 +-
 hotel_booking/logout.php                 |  6 ++
 4 files changed, 78 insertions(+), 15 deletions(-)
 create mode 100644 hotel_booking/logout.php

diff --git a/hotel_booking/admin/components/utils.php b/hotel_booking/admin/components/utils.php
index 32c6d10..64df24c 100644
--- a/hotel_booking/admin/components/utils.php
+++ b/hotel_booking/admin/components/utils.php
@@ -1,9 +1,7 @@
 <?php 
     
-
-
     //frontend data
-    define('SITE_URL', 'http://127.0.0.1:3000/');
+    define('SITE_URL', 'http://127.0.0.1:3500/');
     define('MANAGMENT_IMG_PATH', SITE_URL.'images/admin/management/');
     define('ROOM_IMG_PATH', SITE_URL.'images/admin/rooms/');
 
diff --git a/hotel_booking/components/header.php b/hotel_booking/components/header.php
index 53265f9..b25d389 100644
--- a/hotel_booking/components/header.php
+++ b/hotel_booking/components/header.php
@@ -31,13 +31,32 @@
                 <li class="nav-item">
                     <a class="nav-link" href="../contact.php">Contact</a>
                 </li>
-                <div class="dropdown">
-                    <a class="btn btn-secondary dropdown-toggle" style="outline: none; box-shadow: none; background-color: transparent;" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Join</a>
-                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background-color: #272829;">
-                        <li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="cursor: pointer;">Login</a></li>
-                        <li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="cursor: pointer;">Register</a></li>
-                    </ul>
-                </div>
+                <?php 
+                    if(isset($_SESSION['login']) && $_SESSION['login'] == true){
+                        echo <<<data
+                            <div class="btn-group">
+                                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" style="outline: none; box-shadow: none;">
+                                    $_SESSION[userName]
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-lg-end">
+                                    <li><a href="profile.php" class="dropdown-item">Profile</a></li>
+                                    <li><a href="user_booking.php" class="dropdown-item">Booking</a></li>
+                                    <li><a href="logout.php" class="dropdown-item">Logout</a></li>
+                                </ul>
+                            </div>
+                        data;
+                    } else{
+                        echo <<<data
+                            <div class="dropdown">
+                                <a class="btn btn-secondary dropdown-toggle" style="outline: none; box-shadow: none; background-color: transparent;" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Join</a>
+                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background-color: #272829;">
+                                    <li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="cursor: pointer;">Login</a></li>
+                                    <li class="nav-item"><a class="nav-link" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="cursor: pointer;">Register</a></li>
+                                </ul>
+                            </div>
+                        data;
+                    }
+                ?>   
             </ul>
         </div>
     </div>
@@ -88,7 +107,7 @@
 <div class="modal fade" id="loginBackdrop" 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="login-form">
                 <div class="modal-header" style="border: none;">
                     <button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
@@ -97,12 +116,12 @@
                 </div>
                 <div class="modal-body">
                     <div class="mb-3">
-                        <label class="form-label">Email address</label>
-                        <input type="email" class="form-control shadow-none">
+                        <label class="form-label">Email</label>
+                        <input type="text" name="email" required class="form-control shadow-none">
                     </div>
                     <div class="mb-2">
                         <label class="form-label">Password</label>
-                        <input type="password" class="form-control shadow-none">
+                        <input type="password" name="password" required class="form-control shadow-none">
                     </div>
                     <div class="mb-3">
                         <a href="javascript: void(0)" style="font-size: 14px; color: gray;">Forgot your password?</a>
@@ -199,6 +218,8 @@
     }
 
     let register_form = document.getElementById('register-form');
+    let login_form = document.getElementById('login-form');
+    /*=== register ===*/
     register_form.addEventListener('submit', (e) => {
         e.preventDefault();
 
@@ -240,5 +261,39 @@
         xhr.send(data);
 
     });
+    /*=== login ===*/ 
+    login_form.addEventListener('submit', (e) => {
+        e.preventDefault();
+
+        let data = new FormData();
+        data.append('email', login_form.elements['email'].value);
+        data.append('password', login_form.elements['password'].value);
+        data.append('login', '');
+
+        var myModal = document.getElementById('loginBackdrop');
+        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 == 'inv_email'){
+                alert('error', 'Wrong credentials, please try again!');
+            } else if(this.responseText == 'not_verified'){
+                alert('error', 'Please verify your email');
+            } else if(this.responseText == 'inactive'){
+                alert('error', 'Your account is suspended, please try again later!');
+            } else if(this.responseText == 'invalid_pass'){
+                alert('error', 'Wrong credentials, please try again!');
+            } else{
+                window.location = window.location.pathname;
+            }
+        }
+
+        xhr.send(data);
+    });
+
+
 
 </script>
\ No newline at end of file
diff --git a/hotel_booking/components/link.php b/hotel_booking/components/link.php
index fcc4f4e..0c255b5 100644
--- a/hotel_booking/components/link.php
+++ b/hotel_booking/components/link.php
@@ -4,4 +4,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 <link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/><link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Righteous&display=swap" rel="stylesheet">
\ No newline at end of file
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/><link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Righteous&display=swap" rel="stylesheet">
+
+<?php
+    session_start();
+?>
\ No newline at end of file
diff --git a/hotel_booking/logout.php b/hotel_booking/logout.php
new file mode 100644
index 0000000..1adb790
--- /dev/null
+++ b/hotel_booking/logout.php
@@ -0,0 +1,6 @@
+<?php 
+    require('admin/components/utils.php');
+    session_start();
+    session_destroy();
+    redirect('index.php');
+?>
\ No newline at end of file