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

Switches profile edit to action-card design

main
Yasen Pramatarov 2025-12-14 16:43:51 +02:00
parent 817782a766
commit 31bc4d60e4
1 changed files with 132 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,12 @@
<!-- user profile -->
<!-- user profile --> <div class="action-card">
<div class="tm-profile-card mx-auto"> <div class="action-card-header">
<div class="tm-profile-header"> <p class="action-eyebrow">Account</p>
<div> <h2 class="action-title">Profile of <?= htmlspecialchars($userDetails[0]['username']) ?></h2>
<p class="tm-profile-eyebrow">Account</p> <p class="action-subtitle">Update your personal details, avatar, and access rights in one streamlined view.</p>
<h2 class="tm-profile-title">Profile of <?= htmlspecialchars($userDetails[0]['username']) ?></h2>
<p class="tm-profile-subtitle">Update your personal details, avatar, and access rights in one streamlined view.</p>
</div> </div>
</div> <div class="action-card-body">
<form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=profile" enctype="multipart/form-data" class="action-form" novalidate>
<form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=profile" enctype="multipart/form-data" class="tm-profile-form" novalidate>
<?php include CSRF_TOKEN_INCLUDE; ?> <?php include CSRF_TOKEN_INCLUDE; ?>
<div class="row g-4 align-items-start"> <div class="row g-4 align-items-start">
<div class="col-lg-4"> <div class="col-lg-4">
@ -39,20 +36,25 @@
<h3 class="tm-profile-section-title">Personal info</h3> <h3 class="tm-profile-section-title">Personal info</h3>
<div class="row g-3"> <div class="row g-3">
<div class="col-md-6"> <div class="col-md-6">
<label for="name" class="form-label">Full name</label> <div class="action-form-group">
<input class="form-control" type="text" name="name" id="name" value="<?= htmlspecialchars($userDetails[0]['name'] ?? '') ?>" autofocus /> <label for="name" class="action-form-label">Full name</label>
<input class="form-control action-form-control" type="text" name="name" id="name" value="<?= htmlspecialchars($userDetails[0]['name'] ?? '') ?>" autofocus />
</div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="email" class="form-label">Email address</label> <div class="action-form-group">
<input class="form-control" type="text" name="email" id="email" value="<?= htmlspecialchars($userDetails[0]['email'] ?? '') ?>" /> <label for="email" class="action-form-label">Email address</label>
<input class="form-control action-form-control" type="text" name="email" id="email" value="<?= htmlspecialchars($userDetails[0]['email'] ?? '') ?>" />
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="tm-profile-section"> <div class="tm-profile-section">
<h3 class="tm-profile-section-title">Timezone</h3> <h3 class="tm-profile-section-title">Timezone</h3>
<label for="timezone" class="form-label">Preferred timezone</label> <div class="action-form-group">
<select class="form-control" name="timezone" id="timezone"> <label for="timezone" class="action-form-label">Preferred timezone</label>
<select class="form-control action-form-control" name="timezone" id="timezone">
<?php foreach ($allTimezones as $timezone) { ?> <?php foreach ($allTimezones as $timezone) { ?>
<option value="<?= htmlspecialchars($timezone) ?>" <?= $timezone === $userTimezone ? 'selected' : '' ?>> <option value="<?= htmlspecialchars($timezone) ?>" <?= $timezone === $userTimezone ? 'selected' : '' ?>>
<?= htmlspecialchars($timezone) ?>&nbsp;&nbsp;(<?= htmlspecialchars(getUTCOffset($timezone)) ?>) <?= htmlspecialchars($timezone) ?>&nbsp;&nbsp;(<?= htmlspecialchars(getUTCOffset($timezone)) ?>)
@ -60,10 +62,13 @@
<?php } ?> <?php } ?>
</select> </select>
</div> </div>
</div>
<div class="tm-profile-section"> <div class="tm-profile-section">
<h3 class="tm-profile-section-title">Bio</h3> <h3 class="tm-profile-section-title">Bio</h3>
<textarea class="form-control" name="bio" rows="6" placeholder="Share something about yourself, your role, or preferences."><?= htmlspecialchars($userDetails[0]['bio'] ?? '') ?></textarea> <div class="action-form-group">
<textarea class="form-control action-form-control" name="bio" rows="6" placeholder="Share something about yourself, your role, or preferences."><?= htmlspecialchars($userDetails[0]['bio'] ?? '') ?></textarea>
</div>
</div> </div>
<div class="tm-profile-section"> <div class="tm-profile-section">
@ -86,9 +91,9 @@
</div> </div>
</div> </div>
<div class="tm-profile-actions"> <div class="action-actions">
<a href="<?= htmlspecialchars($app_root) ?>?page=profile" class="btn btn-light tm-contact-back">Cancel</a> <a href="<?= htmlspecialchars($app_root) ?>?page=profile" class="btn btn-light">Cancel</a>
<button type="submit" class="btn btn-primary tm-contact-submit">Save changes</button> <button type="submit" class="btn btn-primary">Save changes</button>
</div> </div>
</div> </div>
</div> </div>
@ -116,22 +121,23 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- /user profile --> </div>
<!-- /user profile -->
<script> <script>
// Preview the uploaded avatar document.addEventListener('DOMContentLoaded', function() {
document.getElementById('avatar-upload').addEventListener('change', function(event) { // Preview the uploaded avatar
document.getElementById('avatar-upload').addEventListener('change', function(event) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function() { reader.onload = function() {
document.querySelector('.avatar-img').src = reader.result; document.querySelector('.avatar-img').src = reader.result;
}; };
reader.readAsDataURL(event.target.files[0]); reader.readAsDataURL(event.target.files[0]);
}); });
// Avatar file size and type control // Avatar file size and type control
document.getElementById('avatar-upload').addEventListener('change', function() { document.getElementById('avatar-upload').addEventListener('change', function() {
const maxFileSize = 500 * 1024; // 500 KB in bytes const maxFileSize = 500 * 1024; // 500 KB in bytes
const currentAvatar = '<?= htmlspecialchars($app_root) . htmlspecialchars($avatar) ?>'; // current avatar const currentAvatar = '<?= htmlspecialchars($app_root) . htmlspecialchars($avatar) ?>'; // current avatar
const file = this.files[0]; const file = this.files[0];
@ -144,12 +150,13 @@ document.getElementById('avatar-upload').addEventListener('change', function() {
document.querySelector('.avatar-img').src = currentAvatar; document.querySelector('.avatar-img').src = currentAvatar;
} }
} }
}); });
// Submitting the avatar deletion confirmation modal form // Submitting the avatar deletion confirmation modal form
document.getElementById('confirm-delete').addEventListener('click', function(event) { document.getElementById('confirm-delete').addEventListener('click', function(event) {
event.preventDefault(); // Prevent the outer form from submitting event.preventDefault(); // Prevent the outer form from submitting
document.getElementById('remove-avatar-form').submit(); document.getElementById('remove-avatar-form').submit();
});
}); });
// Function to detect user's timezone and select it in the dropdown // Function to detect user's timezone and select it in the dropdown