[PATCH gwspamd 0/3] Refactor Settings Page Layout, Profile Update, and Password Update

[PATCH gwspamd 0/3] Refactor Settings Page Layout, Profile Update, and Password Update

[Memet Zx]

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

[PATCH gwspamd 1/3] gwspamd: web: Refactor Settings Page Layout and UI

[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

[PATCH gwspamd 2/3] gwspamd: web: Refactor Profile Update Page

[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&amp;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&amp;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

[PATCH gwspamd 3/3] gwspamd: web: Refactor Password Update Page

[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&amp;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&amp;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

Re: [PATCH gwspamd 0/3] Refactor Settings Page Layout, Profile Update, and Password Update

[Ammar Faizi]

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