fix: trim whitespace for secrete name and file paths in UI

front/assets/js/manage_secret.js

@@ -111,7 +111,7 @@ export var ManageSecret = {
         </div>
       </div>`
 
-    return [element, secretUploadLinkId, secretUploadId, fileContentId, fileDivId, secretInputId, fileDeleteLink, fileMd5Id, fileMd5PresentId, fileImageId];
+    return [element, secretUploadLinkId, secretUploadId, fileContentId, fileDivId, secretInputId, fileDeleteLink, fileMd5Id, fileMd5PresentId, fileImageId, filePathId];
   },
 
   showEnvVars: function() {
@@ -134,14 +134,16 @@ export var ManageSecret = {
     document.getElementById("files-input").innerHTML = "";
 
     this.files.forEach(function(file, index) {
-      let [element, fileUploadLink, fileUpload, fileContent, fileDiv, fileInput, fileDeleteLink, md5Id, fileMd5PresentId, fileImageId] =
+      let [element, fileUploadLink, fileUpload, fileContent, fileDiv, fileInputContainer, fileDeleteLink, md5Id, fileMd5PresentId, fileImageId, filePathInput] =
         secretEditor.fileElement(file, index);
 
       document.getElementById("files-input").insertAdjacentHTML("beforeend", element);
 
       secretEditor.browseFilesOnClick(fileUploadLink, fileUpload);
-      secretEditor.formatUploadedFile(fileUpload, fileContent, fileDiv, fileInput, fileDeleteLink, fileMd5PresentId, fileImageId);
-      secretEditor.activateFilesDeleteLink(fileDeleteLink, fileDiv, fileInput, fileContent, md5Id);
+      secretEditor.formatUploadedFile(fileUpload, fileContent, fileDiv, fileInputContainer, fileDeleteLink, fileMd5PresentId, fileImageId);
+      secretEditor.activateFilesDeleteLink(fileDeleteLink, fileDiv, fileInputContainer, fileContent, md5Id);
+      // Attach trimming handler for the file path input
+      secretEditor.attachFilePathTrimmer(filePathInput);
     });
   },
 
@@ -152,12 +154,16 @@ export var ManageSecret = {
 
       let envVarIndex = secretEditor.envVars.length - 1;
       let envVar = secretEditor.envVars[envVarIndex];
-      let [element, envVarDiv, envVarDeleteLink, envVarInput, md5Id] =
+      // envVarElement returns [element, envVarNameId, envVarDivId, envVarDeleteLink, envVarValueId, envVarMd5Id]
+      let [element, envVarNameId, envVarDiv, envVarDeleteLink, envVarInput, md5Id] =
         secretEditor.envVarElement(envVar, envVarIndex);
 
       document.getElementById("env-vars-input").insertAdjacentHTML("beforeend", element);
       secretEditor.activateEnvVarDeleteLink(envVarDeleteLink, envVarDiv, envVarInput, md5Id);
 
+      // ensure validation/trim is attached for the newly created input
+      secretEditor.activateEnvVarValidation(envVarNameId);
+
       return false;
     });
   },
@@ -169,31 +175,53 @@ export var ManageSecret = {
 
       let fileIndex = secretEditor.files.length - 1;
       let file = secretEditor.files[fileIndex];
-      let [element, fileUploadLink, fileUpload, fileContent, fileDiv, fileInput, fileDeleteLink, md5Id, fileMd5PresentId, fileImageId] =
+      let [element, fileUploadLink, fileUpload, fileContent, fileDiv, fileInputContainer, fileDeleteLink, md5Id, fileMd5PresentId, fileImageId, filePathInput] =
         secretEditor.fileElement(file, fileIndex);
 
       document.getElementById("files-input").insertAdjacentHTML("beforeend", element);
 
       secretEditor.browseFilesOnClick(fileUploadLink, fileUpload);
-      secretEditor.formatUploadedFile(fileUpload, fileContent, fileDiv, fileInput, fileDeleteLink, fileMd5PresentId, fileImageId);
-      secretEditor.activateFilesDeleteLink(fileDeleteLink, fileDiv, fileInput, fileContent, md5Id);
+      secretEditor.formatUploadedFile(fileUpload, fileContent, fileDiv, fileInputContainer, fileDeleteLink, fileMd5PresentId, fileImageId);
+      secretEditor.activateFilesDeleteLink(fileDeleteLink, fileDiv, fileInputContainer, fileContent, md5Id);
+      // Attach trimming handler for newly cloned file path input
+      secretEditor.attachFilePathTrimmer(filePathInput);
 
       return false;
     });
   },
 
+  attachFilePathTrimmer: function(fileInputId) {
+    // fileInputId is the id of the visible text input for the file path (e.g. files_0_path)
+    $("body").on("change input", "#" + fileInputId, function() {
+      let raw = $(this).val();
+      let trimmed = raw !== undefined && raw !== null ? raw.trim() : raw;
+      if (raw !== trimmed) {
+        $(this).val(trimmed);
+      }
+    });
+  },
+
   activateEnvVarValidation: function (selector) {
     let secretEditor = this;
+    // Validate on input and change, but always validate the trimmed value.
     $("body").on("change textInput input", "#" + selector, function () {
-      valid_name_regex = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
-      let name = $(this).val();
+      const valid_name_regex = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+      // Trim whitespace from the input value (leading/trailing) and update the field on blur/change
+      let raw = $(this).val();
+      let name = raw !== undefined && raw !== null ? raw.trim() : raw;
+
       if (name.match(valid_name_regex)) {
         $(this).next(".error-message").remove(); // removes existing error message
       }
       else {
         $(this).next(".error-message").remove(); // removes existing error message
         $(this).after('<p class="f6 fw5 mt1 mb0 red error-message">Invalid variable name!</p>');
       }
+
+      // If the visible value differs from trimmed, update it on blur/change
+      if (raw !== name) {
+        $(this).val(name);
+      }
     });
   },