diff --git a/front/assets/js/manage_secret.js b/front/assets/js/manage_secret.js index 446a94e19..a8d94aaa0 100644 --- a/front/assets/js/manage_secret.js +++ b/front/assets/js/manage_secret.js @@ -111,7 +111,7 @@ export var ManageSecret = { ` - 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,24 +175,41 @@ 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 } @@ -194,6 +217,11 @@ export var ManageSecret = { $(this).next(".error-message").remove(); // removes existing error message $(this).after('
'); } + + // If the visible value differs from trimmed, update it on blur/change + if (raw !== name) { + $(this).val(name); + } }); },