[JENKINS-73404] add validation for SecretTextArea

reworked the jelly and simplified the javascript.

the textarea is now always present in the DOM, so no need to remove
inputs to add a textarea.  Rather we just remove /hide the "hidden" attribute
from the elements we want to show/hide and give the textArea the
expected class and attributes for validation to occur

core/src/main/resources/lib/form/secretTextarea.jelly

@@ -2,7 +2,7 @@
 <!--
   ~ The MIT License
   ~
-  ~ Copyright (c) 2019 CloudBees, Inc.
+  ~ Copyright (c) 2019-2024 CloudBees, Inc.
   ~
   ~ Permission is hereby granted, free of charge, to any person obtaining a copy
   ~ of this software and associated documentation files (the "Software"), to deal
@@ -56,17 +56,32 @@ Example usage:
         <st:attribute name="placeholder">
             Placeholder text for input field when displayed.
         </st:attribute>
+        <st:attribute name="checkUrl">
+            If specified, the value entered in this input field will be checked (via AJAX)
+            against this URL, and errors will be rendered under the text field.
+
+            If @field is specified, this will be inferred automatically,
+            which is the recommended approach.
+        </st:attribute>
+        <st:attribute name="checkMethod" use="optional" type="String">
+            Specify 'get' (must be lowercase) to change the HTTP method used for the AJAX requests to @checkUrl from a POST to a GET.
+            If any other value is specified then requests will use POST.
+            The historical default was GET and 'post' had to be specified to change that, but this was changed in Jenkins 2.285.
+        </st:attribute>
+
     </st:documentation>
 
     <f:prepareDatabinding/>
+    <j:set var="id" value="secretTextAreadId-${h.generateId()}" />
+
     <j:set var="name" value="${attrs.name ?: '_.'+attrs.field}"/>
     <j:set var="value" value="${h.getPasswordValue(attrs.value ?: instance[attrs.field])}"/>
     <j:set var="addText" value="${%Add}"/>
     <j:set var="replaceText" value="${%Replace}"/>
     <j:set var="buttonText" value="${value == null ? addText : replaceText}"/>
 
     <st:adjunct includes="lib.form.secretTextarea.secret"/>
-    <div class="secret" data-name="${name}" data-placeholder="${attrs.placeholder ?: ''}" data-prompt="${%EnterSecret}">
+    <div class="secret" data-prompt="${%EnterSecret}">
         <div class="secret-header">
             <div class="secret-legend">
                 <j:choose>
@@ -76,14 +91,21 @@ Example usage:
                     <j:otherwise>
                         <l:icon src="symbol-lock-closed" class="icon-md"/>
                         <span>${%Concealed}</span>
-                        <input type="hidden" name="${name}" value="${value}"/>
                     </j:otherwise>
                 </j:choose>
             </div>
             <div class="secret-update">
                 <button type="button" class="secret-update-btn jenkins-button jenkins-button--primary">${buttonText}</button>
+                <label hidden="hidden" for="${id}">${%EnterSecret}</label>
             </div>
         </div>
+        <div class="secret-input">
+            <textarea id="${id}" hidden="hidden" name="${name}" placeholder="${placeholder}"
+                      class="${attrs.checkUrl!=null?' jenkins-input validated':''}"
+                      checkUrl="${attrs.checkUrl}" checkDependsOn="${attrs.checkDependsOn}" checkMethod="${attrs.checkMethod}">
+                <st:out value="${value}" />
+            </textarea>
+        </div>
     </div>
 
 </j:jelly>

core/src/main/resources/lib/form/secretTextarea/secret.css

@@ -1,7 +1,7 @@
 /*
  * The MIT License
  *
- * Copyright (c) 2019 CloudBees, Inc.
+ * Copyright (c) 2019-2024 CloudBees, Inc.
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -65,3 +65,7 @@
   border: none;
   padding: 1em;
 }
+
+.secret * [hidden] {
+  display: none !important;
+}

core/src/main/resources/lib/form/secretTextarea/secret.js

@@ -28,36 +28,21 @@ Behaviour.specify(".secret", "secret-button", 0, function (e) {
     return;
   }
 
-  var id = "secret-" + iota++;
-  var name = e.getAttribute("data-name");
-  var placeholder = e.getAttribute("data-placeholder");
-  var prompt = e.getAttribute("data-prompt");
-
-  var appendSecretInput = function () {
-    var textarea = document.createElement("textarea");
-    textarea.setAttribute("id", id);
-    textarea.setAttribute("name", name);
-    if (placeholder !== null && placeholder !== "") {
-      textarea.setAttribute("placeholder", placeholder);
-    }
-    var secretInput = document.createElement("div");
-    secretInput.setAttribute("class", "secret-input");
-    secretInput.appendChild(textarea);
-    e.appendChild(secretInput);
+  var unhideSecretInput = function () {
+    var textArea = e.querySelector('textarea[hidden="hidden"]');
+    textArea.removeAttribute("hidden");
   };
 
   var clearSecretValue = function () {
-    var secretValue = e.querySelector('input[type="hidden"]');
-    if (secretValue !== null) {
-      secretValue.parentNode.removeChild(secretValue);
-    }
+    var secretValue = e.querySelector("textarea");
+    secretValue.value = "";
   };
 
   var replaceUpdateButton = function () {
-    var secretLabel = document.createElement("label");
-    secretLabel.setAttribute("for", id);
-    secretLabel.appendChild(document.createTextNode(prompt));
-    secretUpdateBtn.parentNode.replaceChild(secretLabel, secretUpdateBtn);
+    secretUpdateBtn.setAttribute("hidden", "hidden");
+    // unhide the span text
+    var prompt = e.querySelector('label[hidden="hidden"]');
+    prompt.removeAttribute("hidden");
   };
 
   var removeSecretLegendLabel = function () {
@@ -69,7 +54,7 @@ Behaviour.specify(".secret", "secret-button", 0, function (e) {
   };
 
   secretUpdateBtn.onclick = function () {
-    appendSecretInput();
+    unhideSecretInput();
     clearSecretValue();
     replaceUpdateButton();
     removeSecretLegendLabel();