246 lines
11 KiB
PHP
246 lines
11 KiB
PHP
<?php
|
|
include_once('header02.php');
|
|
|
|
// Assuming you have the user ID stored in the session
|
|
$user_id = $_SESSION['user_id'];
|
|
|
|
// Fetch user data from the database
|
|
|
|
$sql = "SELECT * FROM users WHERE user_id = ?";
|
|
$stmt = $conn->prepare($sql);
|
|
$stmt->bind_param("i", $user_id);
|
|
$stmt->execute();
|
|
$result = $stmt->get_result();
|
|
$user = $result->fetch_assoc();
|
|
?>
|
|
|
|
<style>
|
|
.profile-picture:hover .edit-icon {
|
|
display: block;
|
|
}
|
|
|
|
.profile-picture {
|
|
position: relative;
|
|
width: 150px;
|
|
height: 150px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.profile-pic-display {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.edit-icon {
|
|
display: none;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.edit-icon i {
|
|
color: white;
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- Account Settings Area start -->
|
|
<section class="account-settings-area py-70 rel z-1">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-12">
|
|
<div class="comment-form bgc-lighter z-1 rel mb-30 rmb-55">
|
|
<form id="accountForm" name="accountForm" method="post" action="update_user.php">
|
|
<div class="section-title py-20">
|
|
<h2>Account Settings</h2>
|
|
<div id="responseMessage"></div> <!-- Message display area -->
|
|
</div>
|
|
|
|
<!-- Display Profile Picture -->
|
|
<div class="profile-picture" style="position: relative; width: 150px; height: 150px; margin: 0 auto;">
|
|
<img id="profile-pic" src="<?php echo $user['profile_pic']; ?>?v=<?php echo time(); ?>" alt="Profile Picture" class="profile-pic-display"
|
|
style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;">
|
|
<button type="button" id="uploadPictureBtn" class="edit-icon">
|
|
<i class="fas fa-pencil-alt"></i>
|
|
</button>
|
|
<input type="file" id="profile_picture" name="profile_picture" accept="image/*" style="display:none;">
|
|
</div>
|
|
|
|
<!-- Form Fields -->
|
|
<div class="row mt-35">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="first_name">First Name</label>
|
|
<input type="text" id="first_name" name="first_name" class="form-control" value="<?php echo $user['first_name']; ?>" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="last_name">Last Name</label>
|
|
<input type="text" id="last_name" name="last_name" class="form-control" value="<?php echo $user['last_name']; ?>" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="phone_number">Phone Number</label>
|
|
<input type="text" id="phone_number" name="phone_number" class="form-control" value="<?php echo $user['phone_number']; ?>" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" class="form-control" value="<?php echo $user['email']; ?>" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group mb-0">
|
|
<button type="submit" class="theme-btn style-two" style="width:100%;">Update Info</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<?php if (getUserType($user_id) !== 'google'){?>
|
|
|
|
|
|
<!-- Change Password Form -->
|
|
<form id="changePasswordForm" name="changePasswordForm" action="change_password.php" method="post">
|
|
<div class="col-md-12 mt-20">
|
|
<h4>Change Password</h4>
|
|
<div id="responseMessage2"></div> <!-- Message display area -->
|
|
<div class="form-group">
|
|
<label for="current_password">Current Password</label>
|
|
<input type="password" id="current_password" name="current_password" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="new_password">New Password</label>
|
|
<input type="password" id="new_password" name="new_password" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirm_password">Confirm New Password</label>
|
|
<input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
|
|
</div>
|
|
<div class="form-group mb-0">
|
|
<button type="submit" class="theme-btn style-two" style="width:100%;">Change Password</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<?php }?>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Account Settings Area end -->
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Clear the responseMessage when the user changes any form input
|
|
$('#accountForm input, #changePasswordForm input').on('input', function() {
|
|
$('#responseMessage').html(''); // Clear the message
|
|
$('#responseMessage2').html(''); // Clear the message
|
|
});
|
|
// Profile Picture Upload
|
|
$('#uploadPictureBtn').click(function() {
|
|
$('#profile_picture').click();
|
|
});
|
|
|
|
$('#profile_picture').on('change', function() {
|
|
var formData = new FormData();
|
|
formData.append('profile_picture', $('#profile_picture')[0].files[0]);
|
|
|
|
$.ajax({
|
|
url: 'upload_profile_picture.php',
|
|
type: 'POST',
|
|
data: formData,
|
|
contentType: false,
|
|
processData: false,
|
|
success: function(response) {
|
|
// Parse response if needed
|
|
if (typeof response === "string") {
|
|
response = JSON.parse(response);
|
|
}
|
|
|
|
if (response.status === 'success') {
|
|
// Update the profile picture source with cache-busting query string
|
|
// Reload the current page
|
|
window.location.reload();
|
|
|
|
$('#responseMessage').html('<div class="alert alert-success">' + response.message + '</div>');
|
|
} else {
|
|
$('#responseMessage').html('<div class="alert alert-danger">' + response.message + '</div>');
|
|
}
|
|
},
|
|
error: function() {
|
|
$('#responseMessage').html('<div class="alert alert-danger">Error uploading profile picture.</div>');
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// Account Info Update
|
|
$('#accountForm').on('submit', function(event) {
|
|
event.preventDefault(); // Prevent default form submission
|
|
|
|
$.ajax({
|
|
url: 'update_user.php',
|
|
type: 'POST',
|
|
data: $(this).serialize(),
|
|
success: function(response) {
|
|
// Parse response if needed
|
|
if (typeof response === "string") {
|
|
response = JSON.parse(response);
|
|
}
|
|
|
|
if (response.status === 'success') {
|
|
$('#responseMessage').html('<div class="alert alert-success">' + response.message + '</div>');
|
|
} else {
|
|
$('#responseMessage').html('<div class="alert alert-danger">' + response.message + '</div>');
|
|
}
|
|
},
|
|
error: function() {
|
|
$('#responseMessage').html('<div class="alert alert-danger">Error updating information.</div>');
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// Change Password
|
|
$('#changePasswordForm').on('submit', function(event) {
|
|
event.preventDefault(); // Prevent default form submission
|
|
|
|
$.ajax({
|
|
url: 'change_password.php',
|
|
type: 'POST',
|
|
data: $(this).serialize(),
|
|
success: function(response) {
|
|
// Parse response if needed
|
|
if (typeof response === "string") {
|
|
response = JSON.parse(response);
|
|
}
|
|
|
|
if (response.status === 'success') {
|
|
$('#responseMessage2').html('<div class="alert alert-success">' + response.message + '</div>');
|
|
} else {
|
|
$('#responseMessage2').html('<div class="alert alert-danger">' + response.message + '</div>');
|
|
}
|
|
},
|
|
error: function() {
|
|
$('#responseMessage2').html('<div class="alert alert-danger">Error changing password.</div>');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<?php include_once("insta_footer.php"); ?>
|