lindeas
/
jilo-web
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Fixes avatar management

main
Yasen Pramatarov 2024-09-09 15:54:32 +03:00
parent fd949f6f4f
commit 573df0fe4f
2 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/pages/profile.php
View File

@ -55,6 +55,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// no form submitted, show the templates // no form submitted, show the templates
} else { } else {
$avatar = !empty($userDetails[0]['avatar']) ? $config['avatars_path'] . $userDetails[0]['avatar'] : $config['default_avatar']; $avatar = !empty($userDetails[0]['avatar']) ? $config['avatars_path'] . $userDetails[0]['avatar'] : $config['default_avatar'];
$default_avatar = empty($userDetails[0]['avatar']) ? true : false;
switch ($action) { switch ($action) {

51
app/templates/profile-edit.php
View File

@ -13,16 +13,42 @@
<img class="avatar-img" src="<?= $app_root . htmlspecialchars($avatar) ?>" alt="avatar" /> <img class="avatar-img" src="<?= $app_root . htmlspecialchars($avatar) ?>" alt="avatar" />
<form method="POST" action="<?= $app_root ?>?page=profile&action=edit&item=avatar" enctype="multipart/form-data"> <form method="POST" action="<?= $app_root ?>?page=profile&action=edit&item=avatar" enctype="multipart/form-data">
<label for="avatar-upload" class="avatar-btn btn btn-primary"><small>select avatar</small></label> <label for="avatar-upload" class="avatar-btn btn btn-primary"><small>select new</small></label>
<input type="file" id="avatar-upload" name="avatar_file" accept="image/*" style="display:none;"> <input type="file" id="avatar-upload" name="avatar_file" accept="image/*" style="display:none;">
<input type="submit" class="avatar-btn btn btn-success" value="upload new avatar"> <input type="submit" id="avatar-upload-button" class="avatar-btn btn btn-secondary" value="upload" disabled>
</form> </form>
<form method="POST" action="<?= $app_root ?>?page=profile&action=remove&item=avatar"> <form id="remove-avatar-form" method="POST" action="<?= $app_root ?>?page=profile&action=remove&item=avatar">
<input type="submit" id="avatar-remove" class="avatar-btn btn btn-danger" value="remove avatar" /> <?php if ($default_avatar) { ?>
<button type="button" class="avatar-btn btn btn-secondary" data-toggle="modal" data-target="#confirmDeleteModal" disabled>
<?php } else { ?>
<button type="button" class="avatar-btn btn btn-danger" data-toggle="modal" data-target="#confirmDeleteModal">
<?php } ?>
<small>remove current avatar</small>
</button>
</form> </form>
<!-- avatar removal moda 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">
Are you sure you want to delete your avatar? This action cannot be undone.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm-delete">Delete Avatar</button>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
<div class="col-md-8"> <div class="col-md-8">
@ -95,4 +121,21 @@ document.getElementById('avatar-upload').addEventListener('change', function(eve
}; };
reader.readAsDataURL(event.target.files[0]); reader.readAsDataURL(event.target.files[0]);
}); });
document.getElementById('avatar-upload').addEventListener('change', function() {
// Enable the "Upload" button when a file is selected
const uploadButton = document.getElementById('avatar-upload-button');
if (this.files.length > 0) {
uploadButton.disabled = false;
uploadButton.className = 'avatar-btn btn btn-success';
} else {
uploadButton.disabled = true;
uploadButton.className = 'avatar-btn btn btn-secondary';
}
});
document.getElementById('confirm-delete').addEventListener('click', function() {
// Submit the form when the user confirms deletion
document.getElementById('remove-avatar-form').submit();
});
</script> </script>