From f6e4a874574baadd43e9bf8341167e2d81c2b35b Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
Date: Wed, 13 Apr 2022 16:56:39 -0500
Subject: [PATCH] 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
---
 changelog/15025.txt                                    |  3 +++
 .../core/addon/templates/components/masked-input.hbs   | 10 +++++-----
 ui/tests/acceptance/secrets/backend/kv/secret-test.js  |  2 +-
 ui/tests/integration/components/masked-input-test.js   |  4 ++--
 4 files changed, 11 insertions(+), 8 deletions(-)
 create mode 100644 changelog/15025.txt

diff --git a/changelog/15025.txt b/changelog/15025.txt
new file mode 100644
index 000000000..fd6973386
--- /dev/null
+++ 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
index 70aba28a8..eb21d6ad5 100644
--- a/ui/lib/core/addon/templates/components/masked-input.hbs
+++ b/ui/lib/core/addon/templates/components/masked-input.hbs
@@ -4,11 +4,11 @@
   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"
diff --git a/ui/tests/acceptance/secrets/backend/kv/secret-test.js b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
index 4f94094c5..8f80b7526 100644
--- a/ui/tests/acceptance/secrets/backend/kv/secret-test.js
+++ b/ui/tests/acceptance/secrets/backend/kv/secret-test.js
@@ -251,7 +251,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
index b76d26627..311caed39 100644
--- 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;