#8771 fixed form reset issue on create user form (#8805)

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

@@ -22,12 +22,20 @@ exports.bodyFormat = "www-form-urlencoded";
 
 exports.csrfDisable = true;
 
+function deleteQueryParams() {
+  setTimeout(() => {
+    $tw.mws.store.adminWiki.deleteTiddler("$:/temp/mws/queryParams");
+  }, 1000);
+}
+
 exports.handler = function(request, response, state) {
+  var current_user_id = state.authenticatedUser.user_id;
   var sqlTiddlerDatabase = state.server.sqlTiddlerDatabase;
   var username = state.data.username;
   var email = state.data.email;
   var password = state.data.password;
   var confirmPassword = state.data.confirmPassword;
+  var queryParamsTiddlerTitle = "$:/temp/mws/"+state.authenticatedUser.user_id+"/queryParams";
 
   if(!state.authenticatedUser && !state.firstGuestUser) {
     $tw.mws.store.adminWiki.addTiddler(new $tw.Tiddler({
@@ -44,6 +52,11 @@ exports.handler = function(request, response, state) {
       title: "$:/temp/mws/post-user/error",
       text: "All fields are required"
     }));
+    $tw.mws.store.adminWiki.addTiddler(new $tw.Tiddler({
+      title: queryParamsTiddlerTitle,
+      username: username,
+      email: email,
+    }));
     response.writeHead(302, { "Location": "/admin/users" });
     response.end();
     return;
@@ -54,8 +67,14 @@ exports.handler = function(request, response, state) {
       title: "$:/temp/mws/post-user/error",
       text: "Passwords do not match"
     }));
+    $tw.mws.store.adminWiki.addTiddler(new $tw.Tiddler({
+      title: "$:/temp/mws/queryParams",
+      username: username,
+      email: email,
+    }));
     response.writeHead(302, { "Location": "/admin/users" });
     response.end();
+    deleteQueryParams();
     return;
   }
 
@@ -67,8 +86,14 @@ exports.handler = function(request, response, state) {
         title: "$:/temp/mws/post-user/error",
         text: "Username already exists"
       }));
+      $tw.mws.store.adminWiki.addTiddler(new $tw.Tiddler({
+        title: queryParamsTiddlerTitle,
+        username: username,
+        email: email,
+      }));
       response.writeHead(302, { "Location": "/admin/users" });
       response.end();
+      deleteQueryParams();
       return;
     }
 
@@ -101,8 +126,14 @@ exports.handler = function(request, response, state) {
           title: "$:/temp/mws/post-user/error",
           text: "Error creating admin user"
         }));
+        $tw.mws.store.adminWiki.addTiddler(new $tw.Tiddler({
+          title: queryParamsTiddlerTitle,
+          username: username,
+          email: email,
+        }));
         response.writeHead(302, { "Location": "/admin/users" });
         response.end();
+        deleteQueryParams();
         return;
       }
     } else {
@@ -110,6 +141,11 @@ exports.handler = function(request, response, state) {
         title: "$:/temp/mws/post-user/success",
         text: "User created successfully"
       }));
+      $tw.mws.store.adminWiki.addTiddler(new $tw.Tiddler({
+        title: queryParamsTiddlerTitle,
+        username: username,
+        email: email,
+      }));
       // assign role to user
       const roles = sqlTiddlerDatabase.listRoles();
       const roleId = roles.find(role => role.role_name.toUpperCase() !== "ADMIN")?.role_id;
@@ -118,14 +154,21 @@ exports.handler = function(request, response, state) {
       }
       response.writeHead(302, {"Location": "/admin/users/"+userId});
       response.end();
+      deleteQueryParams();
     }
   } catch (error) {
     $tw.mws.store.adminWiki.addTiddler(new $tw.Tiddler({
       title: "$:/temp/mws/post-user/error",
       text: "Error creating user: " + error.message
     }));
+    $tw.mws.store.adminWiki.addTiddler(new $tw.Tiddler({
+      title: queryParamsTiddlerTitle,
+      username: username,
+      email: email,
+    }));
     response.writeHead(302, { "Location": "/admin/users" });
     response.end();
+    deleteQueryParams();
     return;
   }
 };

plugins/tiddlywiki/multiwikiserver/templates/add-user-form.tid

@@ -1,22 +1,24 @@
 title: $:/plugins/tiddlywiki/multiwikiserver/templates/add-user-form
 
 <h1>Add New User</h1>
-<form method="POST" action="/admin/post-user">
+<form id="addUserForm" method="POST" action="/admin/post-user">
-	<div class="form-group">
+	<$vars username={{{ [[$:/temp/mws/queryParams]get[username]] }}} email={{{ [[$:/temp/mws/queryParams]get[email]] }}}>
-		<label for="username">Username:</label>
+		<div class="form-group">
-		<input type="text" id="username" name="username" class="form-input" required>
+			<label for="username">Username:</label>
-	</div>
+			<input type="text" id="username" name="username" class="form-input" required value=<<username>> autocomplete="new-password" readonly>
-	<div class="form-group">
+		</div>
-		<label for="email">Email:</label>
+		<div class="form-group">
-		<input type="email" id="email" name="email" class="form-input" required>
+			<label for="email">Email:</label>
-	</div>
+			<input type="email" id="email" name="email" class="form-input" required value=<<email>> autocomplete="new-password" readonly>
+		</div>
+	</$vars>
 	<div class="form-group">
 		<label for="password">Password:</label>
-		<input type="password" id="password" name="password" class="form-input" required>
+		<input type="password" id="password" name="password" class="form-input" required autocomplete="new-password" readonly>
 	</div>
 	<div class="form-group">
 		<label for="confirmPassword">Confirm Password:</label>
-		<input type="password" id="confirmPassword" name="confirmPassword" class="form-input" required>
+		<input type="password" id="confirmPassword" name="confirmPassword" class="form-input" required autocomplete="new-password" readonly>
 	</div>
 
 	<$list filter="[[$:/temp/mws/post-user/error]!is[missing]]" variable="errorTiddler">

plugins/tiddlywiki/multiwikiserver/templates/page.tid

@@ -10,6 +10,17 @@ page-content: title of tiddler containing the main page content
 <head>
 	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 	<link rel="stylesheet" href="/.system/styles.css">
+	<script>
+		document.addEventListener('DOMContentLoaded', () => {
+			const inputs = document.querySelectorAll('#addUserForm input[readonly]');
+			console.log("INPS =>", inputs)
+			inputs.forEach(input => {
+				input.addEventListener('focus', function() {
+					this.removeAttribute('readonly');
+				});
+			});
+		});
+	</script>
 </head>
 <body class="tc-body">
 `