Add f:secretTextarea UI analogous to f:password

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

@@ -0,0 +1,109 @@
+<?jelly escape-by-default='true'?>
+<!--
+  ~ The MIT License
+  ~
+  ~ Copyright (c) 2019 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
+  ~ in the Software without restriction, including without limitation the rights
+  ~ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  ~ copies of the Software, and to permit persons to whom the Software is
+  ~ furnished to do so, subject to the following conditions:
+  ~
+  ~ The above copyright notice and this permission notice shall be included in
+  ~ all copies or substantial portions of the Software.
+  ~
+  ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  ~ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  ~ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  ~ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  ~ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  ~ THE SOFTWARE.
+  -->
+
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:f="/lib/form">
+    <st:documentation><![CDATA[
+Enhanced version of <f:textarea/> for editing multi-line secrets.
+
+Example usage:
+
+<j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form">
+    <f:entry title="Secret" field="secret">
+        <f:secretTextarea/>
+    </f:entry>
+    <f:entry title="Secret 2">
+        <f:secretTextarea field="secret2"/>
+    </f:entry>
+    <f:entry title="Another Secret">
+        <f:secretTextarea name="foo" value="${it.foo}"/>
+    </f:entry>
+</j:jelly>
+    ]]>
+        <st:attribute name="field">
+            Used for databinding. Must be compatible with hudson.util.Secret for round-trip ciphertext.
+        </st:attribute>
+        <st:attribute name="name">
+            Name to use for form input name. Calculated from @field by default.
+        </st:attribute>
+        <st:attribute name="value">
+            Value of the secret. Calculated from instance[@field] by default.
+            This value must be of type hudson.util.Secret.
+            The value will be encrypted when sent to the client if the client has Item.CONFIGURE permissions.
+        </st:attribute>
+        <st:attribute name="placeholder">
+            Placeholder text for input field when displayed.
+        </st:attribute>
+    </st:documentation>
+
+    <f:prepareDatabinding/>
+    <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-header">
+            <div class="secret-legend">
+                <j:choose>
+                    <j:when test="${value == null}">
+                        <span>${%NoStoredValue}</span>
+                    </j:when>
+                    <j:otherwise>
+                        <svg width="25px" height="32px" viewBox="0 0 25 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                            <!--
+                                Based on Material Design.
+
+                                Licensed under the Apache License, Version 2.0 (the "License");
+                                you may not use this file except in compliance with the License.
+                                You may obtain a copy of the License at
+
+                                    http://www.apache.org/licenses/LICENSE-2.0
+
+                                Unless required by applicable law or agreed to in writing, software
+                                distributed under the License is distributed on an "AS IS" BASIS,
+                                WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+                                See the License for the specific language governing permissions and
+                                limitations under the License.
+                            -->
+                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                <g transform="translate(-504.000000, -199.000000)" fill="#788594">
+                                    <path d="M520.914667,209.666667 L511.466667,209.666667 L511.466667,206.619333 C511.466667,204.014 513.584667,201.895333 516.190667,201.895333 C518.796667,201.895333 520.914667,204.014 520.914667,206.619333 L520.914667,209.666667 Z M516.190667,223.381333 C514.514,223.381333 513.143333,222.01 513.143333,220.333333 C513.143333,218.657333 514.514,217.286 516.190667,217.286 C517.867333,217.286 519.238,218.657333 519.238,220.333333 C519.238,222.01 517.867333,223.381333 516.190667,223.381333 Z M516.190667,199 C511.984667,199 508.571333,202.414 508.571333,206.619333 L508.571333,209.666667 L507.048,209.666667 C505.372,209.666667 504,211.038 504,212.714667 L504,227.952667 C504,229.628667 505.372,231 507.048,231 L525.334,231 C527.01,231 528.380667,229.628667 528.380667,227.952667 L528.380667,212.714667 C528.380667,211.038 527.01,209.666667 525.334,209.666667 L523.81,209.666667 L523.81,206.619333 C523.81,202.414 520.396667,199 516.190667,199 Z"/>
+                                </g>
+                            </g>
+                        </svg>
+                        <span>${%Concealed}</span>
+                        <input type="hidden" name="${name}" value="${value}"/>
+                    </j:otherwise>
+                </j:choose>
+            </div>
+            <div class="secret-update">
+                <input type="button" class="secret-update-btn" value="${buttonText}"/>
+            </div>
+        </div>
+    </div>
+
+</j:jelly>

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

@@ -0,0 +1,29 @@
+#
+# The MIT License
+#
+# Copyright (c) 2019 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
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+# THE SOFTWARE.
+#
+
+Add=Add
+Replace=Replace
+EnterSecret=Enter New Secret Below
+Concealed=Concealed for Confidentiality
+NoStoredValue=No Stored Value

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

@@ -0,0 +1,77 @@
+/*
+ * The MIT License
+ *
+ * Copyright (c) 2019 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
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+.secret-header {
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    background: #f9f9f9;
+    display: flex;
+    justify-content: space-around;
+}
+
+.secret-header:not(:only-child) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.secret-header > div {
+    flex-grow: 1;
+    display: inline-flex;
+    align-items: center;
+    padding: 1.5em 1.75em;
+}
+
+.secret-legend > svg {
+    margin-right: 1em;
+}
+
+.secret-update {
+    justify-content: flex-end;
+}
+
+.secret-input {
+    border: solid 1px #ccc;
+    border-top: none;
+    border-radius: 0 0 3px 3px;
+}
+
+.secret-input textarea {
+    width: 100%;
+    font-family: monospace;
+    border: none;
+    padding: 1em;
+}
+
+.secret input[type='button'] {
+    background: #4b99d0;
+    color: #fff;
+    border-radius: 4px;
+    border: none;
+    padding: 1em 2em;
+}
+
+.secret input[type='button']:hover {
+    background: #5092be;
+    cursor: pointer;
+}

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

@@ -0,0 +1,77 @@
+/*
+ * The MIT License
+ *
+ * Copyright (c) 2019 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
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+Behaviour.specify('.secret', 'secret-button', 0, function (e) {
+    var secretUpdateBtn = e.querySelector('.secret-update-btn');
+    if (secretUpdateBtn === null) 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 clearSecretValue = function () {
+        var secretValue = e.querySelector('input[type="hidden"]');
+        if (secretValue !== null) {
+            secretValue.parentNode.removeChild(secretValue);
+        }
+    }
+
+    var replaceUpdateButton = function () {
+        var secretLabel = document.createElement('label');
+        secretLabel.setAttribute('for', id);
+        secretLabel.appendChild(document.createTextNode(prompt));
+        secretUpdateBtn.parentNode.replaceChild(secretLabel, secretUpdateBtn);
+    }
+
+    var removeSecretLegendLabel = function () {
+        var secretLegend = e.querySelector('.secret-legend');
+        var secretLegendText = secretLegend.querySelector('span');
+        if (secretLegendText !== null) {
+            secretLegend.removeChild(secretLegendText);
+        }
+    }
+
+    secretUpdateBtn.onclick = function () {
+        appendSecretInput();
+        clearSecretValue();
+        replaceUpdateButton();
+        removeSecretLegendLabel();
+        // fix UI bug when DOM changes
+        Event.fire(window, 'jenkins:bottom-sticker-adjust');
+    };
+});