I have refactored the settings page layout, profile update, and password update on the gwspamd web interface. This patch series includes the necessary changes for these pages to function properly and provides a better user experience. Please review the changes and let me know if there are any issues. Thank you. Memet Zx (3): gwspamd: web: Refactor Settings Page Layout and UI gwspamd: web: Refactor Profile Update Page gwspamd: web: Refactor Password Update Page web/views/pages/settings.php | 42 ++++++------- web/views/pages/settings/password.php | 52 +++++++--------- web/views/pages/settings/profile.php | 90 +++++++++++++-------------- 3 files changed, 86 insertions(+), 98 deletions(-) base-commit: 8395b486a20c150f0349807b316d2b990d02a5cb -- Memet Zx
The previous layout consisted of a table with a list of settings options, while the new layout includes a sidebar with a list of settings options and a larger content area to display the selected option. The code also includes new CSS classes to style the UI, and the JavaScript functions were updated to handle the new layout. Additionally, the default selected option was changed to "profile" if no section is specified in the URL. Link: https://t.me/GNUWeeb/742183 Link: https://t.me/GNUWeeb/742193 Signed-off-by: Memet Zx <zxce3@gnuweeb.org> --- web/views/pages/settings.php | 42 +++++++++++++++++------------------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/web/views/pages/settings.php b/web/views/pages/settings.php index e37ebfc..dd52d7a 100644 --- a/web/views/pages/settings.php +++ b/web/views/pages/settings.php @@ -26,50 +26,48 @@ if (isset(SECTIONS[$section])) { } } </script> - -<div id="main-box" class="content"> - <h1 class="content-title">Settings</h1> - <div id="back-to-menu-box" style="display:none;"> - <a class="btn btn-action" onclick="load_section_url('default', event);" href="?">Back to settings</a> - </div> - <table style="display:none;" id="set-default"> +<div class="row"> +<div class="col-lg-3"> + <div class="content"> + <h2 class="content-title">Settings</h2> <?php foreach (SECTIONS as $sec => $title) : ?> - <tr> - <td> - <a class="btn btn-action mt-5" onclick="load_section_url('<?= $sec; ?>', event);" href="?section=<?= e($sec); ?>"><?= e($title); ?></a> - </td> - </tr> + <a class="btn sidebar-link mt-5 setting-btn" id="btn-<?= e($sec); ?>" onclick="load_section_url('<?= $sec; ?>', event);" href="?section=<?= e($sec); ?>"><?= e($title); ?></a> <?php endforeach; ?> - </table> + </div> +</div> +<div class="col-lg-9"> <?php foreach (SECTIONS as $key => $title) : ?> - <div class="setting-box" style="display:none;" id="set-<?= e($key); ?>"> + <div class="content" style="display:none;" id="set-<?= e($key); ?>"> <?php require __DIR__ . "/settings/{$key}.php"; ?> </div> <?php endforeach; ?> </div> - +</div> <script> - const sections = <?= json_encode(array_merge(array_keys(SECTIONS), ["default"])); ?>; - const back = gid("back-to-menu-box"); + const sections = <?= json_encode(array_keys(SECTIONS)); ?>; function hide_all_sections() { - back.style.display = "none"; for (let i = 0; i < sections.length; i++) gid("set-" + sections[i]).style.display = "none"; + let settings_btn = document.getElementsByClassName("setting-btn"); + for (let i = 0; i < sections.length; i++) + settings_btn[i].classList.remove("btn-primary"); } function load_section(section) { hide_all_sections(); gid("set-" + section).style.display = ""; - back.style.display = (section === "default") ? "none" : ""; + gid("btn-" + section).classList.add("btn-primary"); } function load_section_url(section, e = null) { - if (e !== null) - e.preventDefault(); load_section(section); + if (e !== null) { + e.preventDefault(); + e.target.classList.add("btn-primary"); + } history.pushState(null, null, "?section=" + section); } - load_section("<?= isset(SECTIONS[$section]) ? $section : "default" ?>"); + load_section("<?= isset(SECTIONS[$section]) ? $section : "profile" ?>"); </script> -- Memet Zx
The previous code had a table layout for the form, which has been replaced with a better-structured HTML form layout. The form now includes separate input fields for first name, last name, username, email, and password, and it has a new title and styling. The image upload button and modal have also been updated to match the new design. Signed-off-by: Memet Zx <zxce3@gnuweeb.org> --- web/views/pages/settings/profile.php | 90 +++++++++++++--------------- 1 file changed, 42 insertions(+), 48 deletions(-) diff --git a/web/views/pages/settings/profile.php b/web/views/pages/settings/profile.php index ea08893..4d973a3 100644 --- a/web/views/pages/settings/profile.php +++ b/web/views/pages/settings/profile.php @@ -1,53 +1,47 @@ -<div class="mw-full text-center"> - <button id="photo-btn" type="button" data-toggle="modal" data-target="modal-profile"> - <img id="user-photo" class="img-fluid rounded-circle" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?>" /> - </button> - <div> - <a style="cursor: pointer;" id="photo-btn" type="button" data-toggle="modal" data-target="modal-profile"> - Edit Photo - </a> +<h2 class="content-title">Update Profile</h2> +<hr /> +<div class="row"> + <div class="col-lg-4 order-lg-12"> + <div class="mw-full text-center"> + <button id="photo-btn" type="button" data-toggle="modal" data-target="modal-profile"> + <img id="user-photo" class="img-fluid h-auto rounded-circle" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?>" /> + </button> + <div> + <a style="cursor: pointer;" id="photo-btn" type="button" data-toggle="modal" data-target="modal-profile"> + Edit Photo + </a> + </div> + </div> + </div> + <div class="col-lg-8 order-lg-1"> + <form class="mw-full" action="api.php?action=settings&section=profile" enctype="multipart/form-data" method="POST" id="edit-profile-form"> + <div class="form-group"> + <label for="first_name">First name</label> + <input type="text" class="form-control" name="first_name" placeholder="<?= e($u["first_name"]); ?>" value="<?= e($u["first_name"]); ?>" required="required"> + </div> + <div class="form-group"> + <label for="last_name">Last name</label> + <input type="text" class="form-control" name="last_name" placeholder="<?= e($u["last_name"]); ?>" value="<?= e($u["last_name"]); ?>" required="required"> + </div> + <div class="form-group"> + <label for="username">Username</label> + <input type="text" class="form-control" name="username" placeholder="<?= e($u["username"]); ?>" value="<?= e($u["username"]); ?>" required="required"> + </div> + <div class="form-group"> + <label for="email">Email</label> + <input type="email" class="form-control" name="email" placeholder="<?= e($u["email"]); ?>" value="<?= e($u["email"]); ?>" required="required"> + </div> + <div class="form-group"> + <label for="password" class="required">Current password</label> + <input type="password" class="form-control" name="password" placeholder="Current password" required="required"> + <div class="form-text"> + Enter your current password to edit your profile + </div> + </div> + <input class="btn btn-primary" type="submit" value="Save"> + </form> </div> -</div> -<div class="mw-full d-flex justify-content-center"> - <form class="w-400 mw-full" action="api.php?action=settings&section=profile" enctype="multipart/form-data" method="POST" id="edit-profile-form"> - <table class="table " id="user-info"> - <tr> - <th align="center" colspan="3"> - <div>Profile Info</div> - </th> - </tr> - <tr> - <td>User ID</td> - <td><?= e($u["id"]); ?></td> - </tr> - <tr> - <td>First Name</td> - <td><input class="form-control" type="text" name="first_name" value="<?= e($u["first_name"]); ?>" required /></td> - </tr> - <tr> - <td>Last Name</td> - <td><input class="form-control" type="text" name="last_name" value="<?= e($u["last_name"]); ?>" /></td> - </tr> - <tr> - <td>Username</td> - <td><input class="form-control" type="text" name="username" value="<?= e($u["username"]); ?>" required /></td> - </tr> - <tr> - <td>Email</td> - <td><input class="form-control" type="email" name="email" value="<?= e($u["email"]); ?>" required /></td> - </tr> - <tr> - <td align="center" colspan="3"> - <div style="margin-top: 30px;">Enter your current password to edit your profile</div> - </td> - </tr> - <tr> - <td align="center" colspan="3"><input class="form-control" type="password" name="password" placeholder="Password" required /></td> - </tr> - </table> - <input class="btn btn-primary btn-block" type="submit" value="Save" /> - </form> </div> <script> var apply_photo, form_error; -- Memet Zx
This commit refactors the UI of the password change form to improve readability and adds a success modal instead of an alert when the password is successfully updated. It also replaces the error alert with a toast message to provide a better user experience. Signed-off-by: Memet Zx <zxce3@gnuweeb.org> --- web/views/pages/settings/password.php | 52 +++++++++++++-------------- 1 file changed, 24 insertions(+), 28 deletions(-) diff --git a/web/views/pages/settings/password.php b/web/views/pages/settings/password.php index 95dda10..ebe9f6e 100644 --- a/web/views/pages/settings/password.php +++ b/web/views/pages/settings/password.php @@ -1,28 +1,21 @@ -<div class="content"> - <div class="mw-full d-flex justify-content-center"> - <form action="api.php?action=settings&section=password" method="POST" id="change-pass-form" class="w-400 mw-full form-inline"> - <table id="user-info" class="table"> - <tr> - <th> - <div>Change Password</div> - </th> - </tr> - <tr> - <td>Current Password</td> - <td><input type="password" class="form-control" name="current_password" placeholder="Current Password" required /></td> - </tr> - <tr> - <td>New Password</td> - <td><input type="password" class="form-control" name="new_password" placeholder="New Password" required /></td> - </tr> - <tr> - <td>Confirm New Password</td> - <td><input type="password" class="form-control" name="confirm_new_password" placeholder="Confirm New Password" required /></td> - </tr> - </table> - <input class="btn btn-primary btn-block" type="submit" value="Save" /> - </form> - </div> +<h2 class="content-title">Update Password</h2> +<hr /> +<div class="mw-full w-400"> + <form action="api.php?action=settings&section=password" method="POST" id="change-pass-form"> + <div class="form-group"> + <label for="current_password" class="required">Current Password</label> + <input type="password" class="form-control" id="password" name="current_password" placeholder="Current Password" required="required"/> + </div> + <div class="form-group"> + <label for="new_password" class="required">New Password</label> + <input type="password" class="form-control" name="new_password" id="new_password" placeholder="New Password" required="required"/> + </div> + <div class="form-group"> + <label for="confirm_new_password" class="required">Confirm New Password</label> + <input type="password" class="form-control" id="confirm_new_password" name="confirm_new_password" placeholder="Confirm New Password" required="required"/> + </div> + <input class="btn btn-primary" type="submit" value="Save" /> + </form> </div> <script> let form_password = gid("change-pass-form"); @@ -42,10 +35,13 @@ } if (this.status == 200) { - alert("Password updated!"); - window.location = "?ref=settings"; + halfmoon.toggleModal('modal-success') } else { - alert(res.error || "Unknown error"); + if (res.error) { + toastErorrAlert(res.error); + } else { + toastErorrAlert("Unknown error"); + } toggle_all_inputs(true); } }; -- Memet Zx
On Sat, 29 Apr 2023 02:34:55 +0700, Memet Zx wrote:
> I have refactored the settings page layout, profile update, and password update on the gwspamd web interface. This patch series includes the necessary changes for these pages to function properly and provides a better user experience.
>
> Please review the changes and let me know if there are any issues.
>
> Thank you.
>
> Memet Zx (3):
> gwspamd: web: Refactor Settings Page Layout and UI
> gwspamd: web: Refactor Profile Update Page
> gwspamd: web: Refactor Password Update Page
>
> [...]
Applied, thanks!
[1/3] gwspamd: web: Refactor Settings Page Layout and UI
commit: dc5c8ff5d0acb1b558766adb1b0640f20f12b021
[2/3] gwspamd: web: Refactor Profile Update Page
commit: 25fe5e6e71873bd5c8c0e6b2b95c9ffc90c8bfd2
[3/3] gwspamd: web: Refactor Password Update Page
commit: b0fc3b8160116328a8b0bc757601d438c13ff572
Best regards,
--
Ammar Faizi