working on user profile edit

plugins/tiddlywiki/multiwikiserver/modules/routes/handlers/manage-user.js

@@ -8,61 +8,61 @@ GET /admin/users/:user_id
 \*/
 (function() {
 
-/*jslint node: true, browser: true */
+	/*jslint node: true, browser: true */
-/*global $tw: false */
+	/*global $tw: false */
-"use strict";
+	"use strict";
-
-exports.method = "GET";
-
-exports.path = /^\/admin\/users\/([^\/]+)\/?$/;
-
-
-exports.handler = function(request,response,state) {
-	var user_id = $tw.utils.decodeURIComponentSafe(state.params[0]);
-	var userData = state.server.sqlTiddlerDatabase.getUser(user_id);
 	
-	if(!userData) {
+	exports.method = "GET";
-		response.writeHead(404, "Not Found", {"Content-Type": "text/html"});
+	
-		var errorHtml = $tw.mws.store.adminWiki.renderTiddler("text/plain", "$:/plugins/tiddlywiki/multiwikiserver/templates/error", {
+	exports.path = /^\/admin\/users\/([^\/]+)\/?$/;
+	
+	exports.handler = function(request,response,state) {
+		var user_id = $tw.utils.decodeURIComponentSafe(state.params[0]);
+		var userData = state.server.sqlTiddlerDatabase.getUser(user_id);
+		
+		if(!userData) {
+			response.writeHead(404, "Not Found", {"Content-Type": "text/html"});
+			var errorHtml = $tw.mws.store.adminWiki.renderTiddler("text/plain", "$:/plugins/tiddlywiki/multiwikiserver/templates/error", {
+				variables: {
+					"error-message": "User not found"
+				}
+			});
+			response.write(errorHtml);
+			response.end();
+			return;
+		}
+		
+		// Convert dates to strings and ensure all necessary fields are present
+		const user = {
+			user_id: userData.user_id || '',
+			username: userData.username || '',
+			email: userData.email || '',
+			created_at: userData.created_at ? new Date(userData.created_at).toISOString() : '',
+			last_login: userData.last_login ? new Date(userData.last_login).toISOString() : ''
+		};
+	
+		// Get all roles which the user has been assigned
+		var userRoles = state.server.sqlTiddlerDatabase.getUserRoles(user_id);
+		var allRoles = state.server.sqlTiddlerDatabase.listRoles();
+		
+		response.writeHead(200, "OK", {
+			"Content-Type": "text/html"
+		});
+	
+		// Render the html
+		var html = $tw.mws.store.adminWiki.renderTiddler("text/plain", "$:/plugins/tiddlywiki/multiwikiserver/templates/page", {
 			variables: {
-				"error-message": "User not found"
+				"page-content": "$:/plugins/tiddlywiki/multiwikiserver/templates/manage-user",
+				"user": JSON.stringify(user),
+				"user-roles": JSON.stringify(userRoles),
+				"all-roles": JSON.stringify(allRoles),
+				"is-current-user-profile": state.authenticatedUser && state.authenticatedUser.user_id === user_id ? "yes" : "no",
+				"username": state.authenticatedUser ? state.authenticatedUser.username : "Guest",
+				"user-is-admin": state.authenticatedUser && state.authenticatedUser.isAdmin ? "yes" : "no"		
 			}
 		});
-		response.write(errorHtml);
+		response.write(html);
 		response.end();
-		return;
-	}
-	
-	// Convert dates to strings and ensure all necessary fields are present
-	const user = {
-		user_id: userData.user_id || '',
-		username: userData.username || '',
-		email: userData.email || '',
-		created_at: userData.created_at ? new Date(userData.created_at).toISOString() : '',
-		last_login: userData.last_login ? new Date(userData.last_login).toISOString() : ''
 	};
-
-	// Get all roles which the user has been assigned
-	var userRoles = state.server.sqlTiddlerDatabase.getUserRoles(user_id);
-	var allRoles = state.server.sqlTiddlerDatabase.listRoles();
 	
-	response.writeHead(200, "OK", {
+	}());
-		"Content-Type": "text/html"
-	});
-
-	// Render the html
-	var html = $tw.mws.store.adminWiki.renderTiddler("text/plain", "$:/plugins/tiddlywiki/multiwikiserver/templates/page", {
-		variables: {
-			"page-content": "$:/plugins/tiddlywiki/multiwikiserver/templates/manage-user",
-			"user": JSON.stringify(user),
-			"user-roles": JSON.stringify(userRoles),
-			"all-roles": JSON.stringify(allRoles),
-			"username": state.authenticatedUser ? state.authenticatedUser.username : "Guest",
-			"user-is-admin": state.authenticatedUser && state.authenticatedUser.isAdmin ? "yes" : "no"		
-		}
-	});
-	response.write(html);
-	response.end();
-};
-
-}());

plugins/tiddlywiki/multiwikiserver/templates/manage-user.tid

@@ -39,6 +39,32 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user
 				</$list>
 			</ul>
 		</div>
+	</div>
+
+	<$reveal type="match" state="is-current-user-profile" text="yes">
+		<div class="user-profile-management">
+			<h2>Manage Your Account</h2>
+			<form class="user-profile-form">
+				<div class="form-group">
+					<label for="username">Username:</label>
+					<input type="text" id="username" name="username" value={{{ [<user>jsonget[username]] }}} />
+				</div>
+				<div class="form-group">
+					<label for="email">Email:</label>
+					<input type="email" id="email" name="email" value={{{ [<user>jsonget[email]] }}} />
+				</div>
+				<div class="form-group">
+					<label for="new-password">New Password:</label>
+					<input type="password" id="new-password" name="new-password" />
+				</div>
+				<div class="form-group">
+					<label for="confirm-password">Confirm New Password:</label>
+					<input type="password" id="confirm-password" name="confirm-password" />
+				</div>
+				<button type="submit" class="update-profile-btn">Update Profile</button>
+			</form>
+		</div>
+	</$reveal>
 </div>
 
 <style>
@@ -68,9 +94,10 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user
 	align-items: center;
 	justify-content: center;
 	font-size: 3rem;
-	* {
+}
-		color: #3498db;
+
-	}
+.user-profile-avatar * {
+	color: #3498db;
 }
 
 .user-profile-name {
@@ -127,22 +154,47 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user
 	font-size: 0.9rem;
 }
 
-.user-profile-roles-management {
+.user-profile-management {
-		margin-top: 2rem;
+	margin-top: 2rem;
+	padding: 2rem;
+	border-top: 1px solid #e0e0e0;
 }
 
-.user-profile-roles-management select {
+.user-profile-management h2 {
-		margin-right: 1rem;
+	font-size: 1.2rem;
+	color: #3498db;
+	margin-bottom: 1rem;
 }
 
-.user-actions {
+.user-profile-form .form-group {
-		margin-top: 0.5rem;
+	margin-bottom: 1rem;
 }
-.user-actions button {
+
-		background: none;
+.user-profile-form label {
-		border: none;
+	display: block;
-		cursor: pointer;
+	margin-bottom: 0.5rem;
-		padding: 0.25rem 0.5rem;
+	font-weight: bold;
-		margin-right: 0.5rem;
+	color: #555;
+}
+
+.user-profile-form input {
+	width: 100%;
+	padding: 0.5rem;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+}
+
+.update-profile-btn {
+	background: #3498db;
+	color: #fff;
+	border: none;
+	padding: 0.5rem 1rem;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 1rem;
+}
+
+.update-profile-btn:hover {
+	background: #2980b9;
 }
 </style>