Code restructure push
This commit is contained in:
twotalesanimation
249
src/pages/other/account_settings.php
Normal file
249
src/pages/other/account_settings.php
Normal file
@@ -0,0 +1,249 @@
|
||||
<?php
|
||||
$headerStyle = 'light';
|
||||
include_once(dirname(dirname(dirname(__DIR__))) . '/header.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">
|
||||
<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>
|
||||
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
|
||||
<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" method="post">
|
||||
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
|
||||
<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',
|
||||
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',
|
||||
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',
|
||||
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(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
|
||||
Reference in New Issue
Block a user