created user profile page: personal information & change password functionality
This commit is contained in:
parent
a6820edc3d
commit
a169680afb
2 changed files with 239 additions and 0 deletions
51
hotel_booking/ajax/profile.php
Normal file
51
hotel_booking/ajax/profile.php
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
188
hotel_booking/profile.php
Normal file
188
hotel_booking/profile.php
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Reference in a new issue