jilo-web/app/templates/profile-edit.php

202 lines
12 KiB
PHP
Raw Normal View History

2024-09-07 22:36:57 +00:00
<!-- user profile -->
<div class="card text-center w-50 mx-auto">
<p class="h4 card-header">Profile of <?= $userDetails[0]['username'] ?></p>
<div class="card-body">
2024-09-10 11:05:38 +00:00
<form method="POST" action="<?= $app_root ?>?page=profile" enctype="multipart/form-data">
<div class="row">
<p class="border rounded bg-light mb-4"><small>edit the profile fields</small></p>
<div class="col-md-4 avatar-container">
<div class="avatar-wrapper">
<img class="avatar-img" src="<?= $app_root . htmlspecialchars($avatar) ?>" alt="avatar" />
<div class="avatar-btn-container">
<label for="avatar-upload" class="avatar-btn avatar-btn-select btn btn-primary">
<i class="fas fa-folder" data-toggle="tooltip" data-placement="right" data-offset="30.0" title="select new avatar"></i>
</label>
2024-09-09 12:20:21 +00:00
<input type="file" id="avatar-upload" name="avatar_file" accept="image/*" style="display:none;">
2024-09-09 12:54:32 +00:00
<?php if ($default_avatar) { ?>
2024-09-10 11:05:38 +00:00
<button type="button" class="avatar-btn avatar-btn-remove btn btn-secondary" data-toggle="modal" data-target="#confirmDeleteModal" disabled>
2024-09-09 12:54:32 +00:00
<?php } else { ?>
2024-09-10 11:05:38 +00:00
<button type="button" class="avatar-btn avatar-btn-remove btn btn-danger" data-toggle="modal" data-target="#confirmDeleteModal">
2024-09-09 12:54:32 +00:00
<?php } ?>
2024-09-10 11:05:38 +00:00
<i class="fas fa-trash" data-toggle="tooltip" data-placement="right" data-offset="30.0" title="remove current avatar"></i>
2024-09-09 12:54:32 +00:00
</button>
2024-09-10 11:05:38 +00:00
</div>
2024-09-09 12:54:32 +00:00
</div>
2024-09-07 22:36:57 +00:00
</div>
2024-09-10 11:05:38 +00:00
<div class="col-md-8">
2024-09-08 10:48:21 +00:00
<!--div class="row mb-3">
<div class="col-md-4 text-end">
<label for="username" class="form-label"><small>username:</small></label>
<span class="text-danger" style="margin-right: -12px;">*</span>
</div>
<div class="col-md-8 text-start bg-light">
<input class="form-control" type="text" name="username" value="<?= $userDetails[0]['username'] ?>" required />
</div>
</div-->
2024-09-07 22:36:57 +00:00
2024-09-08 10:48:21 +00:00
<div class="row mb-3">
<div class="col-md-4 text-end">
<label for="name" class="form-label"><small>name:</small></label>
</div>
<div class="col-md-8 text-start bg-light">
2024-09-10 15:29:58 +00:00
<input class="form-control" type="text" name="name" value="<?= $userDetails[0]['name'] ?>" autofocus />
2024-09-08 10:48:21 +00:00
</div>
2024-09-07 22:36:57 +00:00
</div>
2024-09-08 10:48:21 +00:00
<div class="row mb-3">
<div class="col-md-4 text-end">
<label for="email" class="form-label"><small>email:</small></label>
</div>
<div class="col-md-8 text-start bg-light">
<input class="form-control" type="text" name="email" value="<?= $userDetails[0]['email'] ?>" />
</div>
2024-09-07 22:36:57 +00:00
</div>
2024-09-08 10:48:21 +00:00
2024-09-13 10:04:15 +00:00
<div class="row mb-3">
<div class="col-md-4 text-end">
<label for="timezone" class="form-label"><small>timezone:</small></label>
</div>
<div class="col-md-8 text-start bg-light">
<select class="form-control" name="timezone" id="timezone">
<?php foreach ($allTimezones as $timezone) { ?>
<option value="<?= $timezone ?>" <?= $timezone === $userTimezone ? 'selected' : '' ?>>
<?= $timezone ?>&nbsp;&nbsp;(<?= getUTCOffset($timezone) ?>)
</option>
<?php } ?>
</select>
</div>
</div>
2024-09-08 10:48:21 +00:00
<div class="row mb-3">
<div class="col-md-4 text-end">
<label for="bio" class="form-label"><small>bio:</small></label>
</div>
<div class="col-md-8 text-start bg-light">
<textarea class="form-control" name="bio" rows="10"><?= $userDetails[0]['bio'] ?? '' ?></textarea>
</div>
2024-09-07 22:36:57 +00:00
</div>
2024-09-08 10:48:21 +00:00
<div class="row mb-3">
<div class="col-md-4 text-end">
<label for="rights" class="form-label"><small>rights:</small></label>
</div>
<div class="col-md-8 text-start bg-light">
2024-09-11 19:51:46 +00:00
<?php foreach ($allRights as $right) {
// Check if the current right exists in $userRights
2024-09-11 19:51:46 +00:00
$isChecked = false;
foreach ($userRights as $userRight) {
if ($userRight['right_id'] === $right['right_id']) {
$isChecked = true;
break;
}
} ?>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="rights[]" value="<?= htmlspecialchars($right['right_id']) ?>" id="right_<?= htmlspecialchars($right['right_id']) ?>" <?= $isChecked ? 'checked' : '' ?> />
2024-10-04 08:36:45 +00:00
<label class="form-check-label" for="right_<?= htmlspecialchars($right['right_id']) ?>"><?= $right['right_name'] ?></label>
2024-09-11 19:51:46 +00:00
</div>
<?php } ?>
2024-09-08 10:48:21 +00:00
</div>
</div>
2024-09-07 22:36:57 +00:00
2024-09-08 10:48:21 +00:00
</div>
2024-09-07 22:36:57 +00:00
2024-09-10 11:05:38 +00:00
<p>
<a href="<?= $app_root ?>?page=profile" class="btn btn-secondary">Cancel</a>
<input type="submit" class="btn btn-primary" value="Save" />
</p>
2024-09-07 22:36:57 +00:00
2024-09-08 10:48:21 +00:00
</div>
</form>
2024-09-10 11:05:38 +00:00
<!-- avatar removal modal confirmation -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Avatar Deletion</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img class="avatar-img" src="<?= $app_root . htmlspecialchars($avatar) ?>" alt="avatar" />
<br />
Are you sure you want to delete your avatar?
<br />
This action cannot be undone.
</div>
2024-09-11 13:21:05 +00:00
<div class="modal-footer">
2024-09-10 11:05:38 +00:00
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form id="remove-avatar-form" data-action="remove-avatar" method="POST" action="<?= $app_root ?>?page=profile&action=remove&item=avatar">
<button type="button" class="btn btn-danger" id="confirm-delete">Delete Avatar</button>
</form>
</div>
</div>
</div>
</div>
2024-09-07 22:36:57 +00:00
</div>
</div>
<!-- /user profile -->
2024-09-09 12:20:21 +00:00
<script>
2024-09-10 11:05:38 +00:00
// Preview the uploaded avatar
2024-09-09 12:20:21 +00:00
document.getElementById('avatar-upload').addEventListener('change', function(event) {
const reader = new FileReader();
reader.onload = function() {
document.querySelector('.avatar-img').src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
});
2024-09-09 12:54:32 +00:00
2024-09-10 11:05:38 +00:00
// Avatar file size and type control
2024-09-09 12:54:32 +00:00
document.getElementById('avatar-upload').addEventListener('change', function() {
2024-09-10 11:05:38 +00:00
const maxFileSize = 500 * 1024; // 500 KB in bytes
const currentAvatar = '<?= $app_root . htmlspecialchars($avatar) ?>'; // current avatar
2024-09-09 13:35:06 +00:00
const file = this.files[0];
if (file) {
// Check file size
if (file.size > maxFileSize) {
alert('File size exceeds 500 KB. Please select a smaller file.');
this.value = ''; // Clear the file input
document.querySelector('.avatar-img').src = currentAvatar;
}
2024-09-09 12:54:32 +00:00
}
});
2024-09-10 11:05:38 +00:00
// Submitting the avatar deletion confirmation modal form
document.getElementById('confirm-delete').addEventListener('click', function(event) {
event.preventDefault(); // Prevent the outer form from submitting
2024-09-09 12:54:32 +00:00
document.getElementById('remove-avatar-form').submit();
});
2024-09-10 11:05:38 +00:00
2024-09-13 10:04:15 +00:00
// Function to detect user's timezone and select it in the dropdown
function setTimezone() {
const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const timezoneSelect = document.getElementById("timezone");
timezoneSelect.className = 'form-control border border-danger';
// Loop through the options to find and select the user's timezone
for (let i = 0; i < timezoneSelect.options.length; i++) {
if (timezoneSelect.options[i].value === userTimezone) {
timezoneSelect.selectedIndex = i;
break;
}
}
}
// Run the function on page load
window.onload = function() {
const isTimezoneSet = <?php echo json_encode($isTimezoneSet); ?>; // Pass PHP flag to JavaScript
// If timezone is not set, run setTimezone()
if (!isTimezoneSet) {
setTimezone();
}
};
2024-09-09 12:20:21 +00:00
</script>