From a169680afb0f3544050acd667af2158a1368577e Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Sat, 6 Jul 2024 14:37:08 -0500
Subject: [PATCH] created user profile page: personal information & change
 password functionality

---
 hotel_booking/ajax/profile.php |  51 +++++++++
 hotel_booking/profile.php      | 188 +++++++++++++++++++++++++++++++++
 2 files changed, 239 insertions(+)
 create mode 100644 hotel_booking/ajax/profile.php
 create mode 100644 hotel_booking/profile.php
diff --git a/hotel_booking/ajax/profile.php b/hotel_booking/ajax/profile.php
new file mode 100644
index 0000000..153a824
--- /dev/null
+++ b/hotel_booking/ajax/profile.php
@@ -0,0 +1,51 @@
+<?php
+
+    require('../admin/components/db_config.php');
+    require('../admin/components/utils.php');
+
+    date_default_timezone_set("America/Chicago");
+
+    if(isset($_POST['info_form'])){
+        $frm_data = filteration($_POST);
+        session_start();
+
+        $user_exist = select("SELECT * FROM `user_creds` WHERE `phone`=? AND `id` !=? LIMIT 1", [$data['email'], $_SESSION['uerID']], "ss");
+
+        if(mysqli_num_rows($user_exist) != 0){
+            echo  'phone_already';
+            exit;
+        }
+
+        $query = "UPDATE `user_creds` SET `firstname`=?, `lastname`=?, `phone`=?, `birth`=?, `address`=?   WHERE `id`=?";
+        $values = [$frm_data['firstname'], $frm_data['lastname'], $frm_data['phone'], $frm_data['birth'], $frm_data['address'], $_SESSION['uerID']];
+
+        if(update($query, $values, 'ssssss')){
+            $_SESSION['userName'] = $frm_data['firstname'];
+            echo 1;
+        } else{
+            echo 0;
+        }
+    }
+
+    if(isset($_POST['password_form'])){
+        $frm_data = filteration($_POST);
+        session_start();
+
+        if($frm_data['new_password'] != $frm_data['confirm_password']){
+            echo 'mismatch';
+            exit;
+        }
+
+        $enc_password = password_hash($frm_data['new_password'], PASSWORD_BCRYPT);
+
+        $query = "UPDATE `user_creds` SET `password` =? WHERE `id`=? LIMIT 1";
+        $values = [$enc_password, $_SESSION['uerID']];
+
+        if(update($query, $values, 'ss')){
+            echo 1;
+        } else{
+            echo 0;
+        }
+    }
+
+?>
\ No newline at end of file
diff --git a/hotel_booking/profile.php b/hotel_booking/profile.php
new file mode 100644
index 0000000..09cb57a
--- /dev/null
+++ b/hotel_booking/profile.php
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile | Midtown Hotel</title>
+    <?php require('./components/link.php') ?>
+    <style>
+        .booking-hero{
+            position: relative;
+            width: 100%;
+            background-color: #194141;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0px 3px 3px #BFCBCB;
+        }
+        .custom-alert-t{
+            position:fixed; 
+            top: 100px; 
+            right: 25px;
+            z-index: 10000;
+        }
+    </style>
+</head>
+<body>
+    <div class="booking-hero">
+        <?php 
+            require('./components/header.php') ;
+            if(!(isset($_SESSION['login']) && $_SESSION['login'] == true)){
+                redirect('index.php');
+            } 
+
+            $user_exist = select("SELECT * FROM `user_creds` WHERE `id`=? LIMIT 1", [$_SESSION['uerID']], 's');
+            if(mysqli_num_rows($user_exist) == 0){
+                redirect('index.php');
+            } 
+
+            $user_fetch = mysqli_fetch_assoc($user_exist);
+        ?>
+    </div>
+    <div class="container">
+        <div class="row">
+            <div class="col-12 mt-5">
+                <h4 style="text-transform: uppercase; letter-spacing: 2px; color: #194141;">Profile<h4>
+            </div>
+            <div class="accordion mt-4 mb-4" id="accordionExample">
+                <!--personal information-->
+                <div class="accordion-item show">
+                    <h2 class="accordion-header" id="headingOne">
+                        <button class="accordion-button" style='background-color: #F8F9FA; box-shadow: none; text-transform: capitalize; font-weight: 600; font-size: 18px; color: black;' type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                            Personal information
+                        </button>
+                    </h2>
+                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+                        <div class="accordion-body">
+                            <div class="col-12">    
+                                <form id="info-form">
+                                    <div class="row">
+                                        <div class="col-md-6 mb-3">
+                                            <label class="form-label" style="font-weight: 600; font-size: 14px;">First Name</label>
+                                            <input name="firstname" value="<?php echo $user_fetch['firstname']?>" type="text" class="form-control shadow-none" required>
+                                        </div>
+                                        <div class="col-md-6 mb-3">
+                                            <label class="form-label" style="font-weight: 600; font-size: 14px;">Last Name</label>
+                                            <input name="lastname" value="<?php echo $user_fetch['lastname']?>" type="text" class="form-control shadow-none" required>
+                                        </div>
+                                        <div class="col-md-6 mb-3">
+                                            <label class="form-label" style="font-weight: 600; font-size: 14px;">Phone</label>
+                                            <input name="phone" value="<?php echo $user_fetch['phone']?>"type="tel" class="form-control shadow-none" required>
+                                        </div>
+                                        <div class="col-md-6 mb-3">
+                                            <label class="form-label" style="font-weight: 600; font-size: 14px;">Date of Birth</label>
+                                            <input name="birth" value="<?php echo $user_fetch['birth']?>" type="date" class="form-control shadow-none" required/>
+                                        </div>
+                                        <div class="mb-3 col-md-12">
+                                            <label class="form-label" style="font-weight: 600; font-size: 14px;">Address</label>
+                                            <textarea  name="address" type="text"rows="3" class="form-control shadow-none" style="resize: none;" required><?php echo $user_fetch['address']?></textarea>
+                                        </div>
+                                    </div>
+                                    <div class="mb-3 d-grid">
+                                        <button type="submit" class="btn btn-dark shadow-none d-block ">Save</button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!--change password-->
+                <div class="accordion-item">
+                    <h2 class="accordion-header" id="headingTwo">
+                        <button class="accordion-button collapsed" style='background-color: #F8F9FA; box-shadow: none; text-transform: capitalize; font-weight: 600; font-size: 18px; color: black;' type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                            change password
+                        </button>
+                    </h2>
+                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+                        <div class="accordion-body">
+                            <div class="col-12">
+                                <form id="password-form">
+                                    <div class="row">
+                                        <div class="col-md-12 mb-3">
+                                            <label class="form-label" style="font-weight: 600; font-size: 14px;">New Password</label>
+                                            <input name="new_password" type="password" class="form-control shadow-none" required>
+                                        </div>
+                                        <div class="col-md-12 mb-3">
+                                            <label class="form-label" style="font-weight: 600; font-size: 14px;">Confirm Password</label>
+                                            <input name="confirm_password" type="password" class="form-control shadow-none" required>
+                                        </div>
+                                    </div>
+                                    <div class="mb-3 d-grid">
+                                        <button type="submit" class="btn btn-dark shadow-none d-block ">Save</button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+        </div>
+    </div>
+    
+
+    <!--footer-->
+    <?php require('./components/footer.php'); ?>
+    <?php require('./components/script.php') ?>
+    <script>
+        let info_form = document.getElementById('info-form');
+        info_form.addEventListener('submit', function(e){
+            e.preventDefault();
+
+            let data = new FormData();
+            data.append('info_form', '');
+            data.append('firstname', info_form.elements['firstname'].value);
+            data.append('lastname', info_form.elements['lastname'].value);
+            data.append('phone', info_form.elements['phone'].value);
+            data.append('birth', info_form.elements['birth'].value);
+            data.append('address', info_form.elements['address'].value);
+
+            let xhr = new XMLHttpRequest();
+            xhr.open("POST", "ajax/profile.php", true);
+            xhr.onload = function(){
+                if(this.responseText == 'phone_already'){
+                    alert('error', 'This phone number is alerady registered!');
+                } else if(this.responseText  == 0){
+                    alert('error', 'There have been no changes!');
+                } else{
+                    alert('success', 'Your information has been saved!');
+                }
+            }
+            xhr.send(data);
+        })
+
+        let password_form = document.getElementById('password-form');
+        password_form.addEventListener('submit', function(e){
+            e.preventDefault();
+            
+            let new_password = password_form.elements['new_password'].value;
+            let confirm_password = password_form.elements['confirm_password'].value;
+
+            if(new_password != confirm_password){
+                alert('error', 'Passwords do not match, please try again!');
+                return false;
+            }
+
+
+            let data = new FormData();
+            data.append('password_form', '');
+            data.append('new_password', new_password);
+            data.append('confirm_password', confirm_password);
+
+            let xhr = new XMLHttpRequest();
+            xhr.open("POST", "ajax/profile.php", true);
+            xhr.onload = function(){
+                if(this.responseText == 'mismatch'){
+                    alert('error', 'Passwords do not match, please try again!');
+                } else if(this.responseText  == 0){
+                    alert('error', 'Fail to update your password');
+                } else{
+                    alert('success', 'Your password is updated!');
+                    password_form.reset();
+                }
+            }
+            xhr.send(data);
+        })
+
+    </script>
+</body>
+</html>
\ No newline at end of file
