UI: Masked inputs always look the same when value is hidden (#15025)

* Masked inputs always look the same when value is hidden * Add changelog * Fix failing test
hashicorp · Apr 13, 2022 · 474adb3 · 474adb3
1 parent cce3d59
commit 474adb3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git a/changelog/15025.txt b/changelog/15025.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: masked values no longer give away length or location of special characters
+```
diff --git a/ui/lib/core/addon/templates/components/masked-input.hbs b/ui/lib/core/addon/templates/components/masked-input.hbs
@@ -1,26 +1,26 @@
 <div
-  class="masked-input {{if this.displayOnly "display-only"}} {{if this.allowCopy "allow-copy"}}"
+  class="masked-input {{if this.displayOnly 'display-only'}} {{if this.allowCopy 'allow-copy'}}"
   data-test-masked-input
   data-test-field
 >
   {{#if this.displayOnly}}
-    <pre class="masked-value display-only is-word-break {{unless this.showValue "masked-font"}}">{{unless
-        this.showValue
-        (truncate this.value 20)
-        this.value
-      }}</pre>
+    {{#if this.showValue}}
+      <pre class="masked-value display-only is-word-break">{{this.value}}</pre>
+    {{else}}
+      <pre class="masked-value display-only masked-font">***********</pre>
+    {{/if}}
   {{else if this.inputField}}
     <input
       autocomplete="off"
       spellcheck="false"
       value={{this.value}}
-      class="input {{unless this.showValue "masked-font"}}"
+      class="input {{unless this.showValue 'masked-font'}}"
       onchange={{action "updateValue"}}
       data-test-input
     />
   {{else}}
     <textarea
-      class="input masked-value {{unless this.showValue "masked-font"}}"
+      class="input masked-value {{unless this.showValue 'masked-font'}}"
       rows={{1}}
       wrap="off"
       onkeydown={{action this.onKeyDown}}
@@ -34,7 +34,7 @@
     <CopyButton
       @clipboardText={{this.value}}
       @success={{action (set-flash-message "Data copied!")}}
-      class="copy-button button {{if this.displayOnly "is-compact"}}"
+      class="copy-button button {{if this.displayOnly 'is-compact'}}"
       data-test-copy-button
     >
       <Icon @name="clipboard-copy" aria-hidden="Copy value" />
@@ -43,7 +43,7 @@
   <button
     onclick={{action "toggleMask"}}
     type="button"
-    class="{{if (eq this.value "") "has-text-grey"}} masked-input-toggle button"
+    class="{{if (eq this.value '') 'has-text-grey'}} masked-input-toggle button"
     data-test-button
   >
     <Icon @name={{if this.showValue "eye" "eye-off"}} />

diff --git a/ui/tests/acceptance/secrets/backend/kv/secret-test.js b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
@@ -252,7 +252,7 @@ module('Acceptance | secrets/secret/create', function (hooks) {
     assert.dom('[data-test-list-item-content]').exists({ count: 1 }, 'renders a single version');
 
     await click('.linked-block');
-
+    await click('button.button.masked-input-toggle');
     assert.dom('[data-test-masked-input]').hasText('bar', 'renders secret on the secret version show page');
     assert.equal(
       currentURL(),

diff --git a/ui/tests/integration/components/masked-input-test.js b/ui/tests/integration/components/masked-input-test.js
@@ -70,11 +70,11 @@ module('Integration | Component | masked input', function (hooks) {
     assert.dom('.masked-value').hasClass('masked-font');
   });
 
-  test('it shortens long outputs when displayOnly and masked', async function (assert) {
+  test('it shortens all outputs when displayOnly and masked', async function (assert) {
     this.set('value', '123456789-123456789-123456789');
     await render(hbs`{{masked-input value=value displayOnly=true}}`);
     let maskedValue = document.querySelector('.masked-value').innerText;
-    assert.equal(maskedValue.length, 20);
+    assert.equal(maskedValue.length, 11);
 
     await component.toggleMasked();
     let unMaskedValue = document.querySelector('.masked-value').innerText;