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

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: masked values no longer give away length or location of special characters
+```

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"

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(),

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;