From 09d5d1077da7e37b39433a7eafa1d57105ac2a09 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Thu, 24 Jun 2021 13:54:42 -0700
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20hidden=20secre?=
 =?UTF-8?q?t=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add hidden secret component adhoc to desktop client. This is the first
iteration of the component, expect changes in the near future.
---
 addons/core/translations/resources/en-us.yaml |  1 +
 .../app/components/hidden-secret/index.hbs    | 11 ++++++++++
 ui/desktop/app/styles/app.scss                | 12 +++++++++++
 .../components/hidden-secret-test.js          | 21 +++++++++++++++++++
 4 files changed, 45 insertions(+)
 create mode 100644 ui/desktop/app/components/hidden-secret/index.hbs
 create mode 100644 ui/desktop/tests/integration/components/hidden-secret-test.js

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 888cb980b..dc2560369 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -256,3 +256,4 @@ target:
       add:
         title: Add Host Sets
         description: Select host sets to assign to this target.
+    secret_label: ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
diff --git a/ui/desktop/app/components/hidden-secret/index.hbs b/ui/desktop/app/components/hidden-secret/index.hbs
new file mode 100644
index 000000000..29cf60afe
--- /dev/null
+++ b/ui/desktop/app/components/hidden-secret/index.hbs
@@ -0,0 +1,11 @@
+<div class='hidden-secret'>
+  {{! TODO: The span wrap within a div because later we will add the toggle secret icon/button}}
+  <div>
+    <span>{{t 'resources.target.host-set.secret_label'}}</span>
+  </div>
+  <Copyable
+    @text={{@secret}}
+    @buttonText={{t 'actions.copy-to-clipboard'}}
+    @acknowledgeText={{t 'states.copied'}}
+  />
+</div>
\ No newline at end of file
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 00313f9ea..3106e73f4 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -446,3 +446,15 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     padding: sizing.rems(s);
   }
 }
+
+// Hidden secret component (app/components/hidden-secret)
+.hidden-secret {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--ui-gray-subtler-2);
+
+  .rose-button-ghost {
+    color: var(--ui-gray-subtler-1);
+  }
+}
diff --git a/ui/desktop/tests/integration/components/hidden-secret-test.js b/ui/desktop/tests/integration/components/hidden-secret-test.js
new file mode 100644
index 000000000..87e33a329
--- /dev/null
+++ b/ui/desktop/tests/integration/components/hidden-secret-test.js
@@ -0,0 +1,21 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hidden-secret', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders with a secret', async function (assert) {
+    assert.expect(2);
+    await render(hbs`
+      <HiddenSecret @secret='AAaaBBccDDeeOTXzSMT1234BB_Z8JzG7JkSVxI' />
+    `);
+
+    assert.ok(find('.hidden-secret'));
+    assert.equal(
+      find('.hidden-secret > div > span').textContent.trim(),
+      '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■'
+    );
+  });
+});

From 9c642b5065195a4467392f609306062f311e7168 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Thu, 24 Jun 2021 14:54:26 -0700
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Suggested=20changes?=
 =?UTF-8?q?=20from=20previous=20commit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrapped the secret within Copyable component. Adapt styles and test for
it.
---
 addons/core/translations/form/en-us.yaml          | 2 ++
 addons/core/translations/resources/en-us.yaml     | 1 -
 ui/desktop/app/components/hidden-secret/index.hbs | 7 +++----
 ui/desktop/app/styles/app.scss                    | 7 ++++++-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/addons/core/translations/form/en-us.yaml b/addons/core/translations/form/en-us.yaml
index 5d2a58567..b69214b2a 100644
--- a/addons/core/translations/form/en-us.yaml
+++ b/addons/core/translations/form/en-us.yaml
@@ -108,3 +108,5 @@ email:
   label: Email
 full_name:
   label: Full Name
+secret:
+  label: ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index dc2560369..888cb980b 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -256,4 +256,3 @@ target:
       add:
         title: Add Host Sets
         description: Select host sets to assign to this target.
-    secret_label: ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
diff --git a/ui/desktop/app/components/hidden-secret/index.hbs b/ui/desktop/app/components/hidden-secret/index.hbs
index 29cf60afe..d1f77b2c2 100644
--- a/ui/desktop/app/components/hidden-secret/index.hbs
+++ b/ui/desktop/app/components/hidden-secret/index.hbs
@@ -1,11 +1,10 @@
 <div class='hidden-secret'>
   {{! TODO: The span wrap within a div because later we will add the toggle secret icon/button}}
-  <div>
-    <span>{{t 'resources.target.host-set.secret_label'}}</span>
-  </div>
   <Copyable
     @text={{@secret}}
     @buttonText={{t 'actions.copy-to-clipboard'}}
     @acknowledgeText={{t 'states.copied'}}
-  />
+  >
+    <span>{{t 'form.secret.label'}}</span>
+  </Copyable>
 </div>
\ No newline at end of file
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 3106e73f4..d46233c9f 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -451,9 +451,14 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
 .hidden-secret {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   color: var(--ui-gray-subtler-2);
 
+  .copyable {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+
   .rose-button-ghost {
     color: var(--ui-gray-subtler-1);
   }

From 04287e72c2a4f9aa2a2fb5764f891c534dc569e3 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Thu, 24 Jun 2021 15:19:26 -0700
Subject: [PATCH 3/4] Forgotten test

---
 ui/desktop/tests/integration/components/hidden-secret-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/desktop/tests/integration/components/hidden-secret-test.js b/ui/desktop/tests/integration/components/hidden-secret-test.js
index 87e33a329..dff98cf57 100644
--- a/ui/desktop/tests/integration/components/hidden-secret-test.js
+++ b/ui/desktop/tests/integration/components/hidden-secret-test.js
@@ -14,7 +14,7 @@ module('Integration | Component | hidden-secret', function (hooks) {
 
     assert.ok(find('.hidden-secret'));
     assert.equal(
-      find('.hidden-secret > div > span').textContent.trim(),
+      find('.hidden-secret > span > span').textContent.trim(),
       '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■'
     );
   });

From 7e2493dd82cc2a36dc900b839617bb539bb8736c Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 25 Jun 2021 11:15:04 -0400
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20move=20masked=20?=
 =?UTF-8?q?text=20string=20into=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/core/translations/form/en-us.yaml          | 2 --
 ui/desktop/app/components/hidden-secret/index.hbs | 2 +-
 ui/desktop/app/components/hidden-secret/index.js  | 5 +++++
 3 files changed, 6 insertions(+), 3 deletions(-)
 create mode 100644 ui/desktop/app/components/hidden-secret/index.js

diff --git a/addons/core/translations/form/en-us.yaml b/addons/core/translations/form/en-us.yaml
index b69214b2a..5d2a58567 100644
--- a/addons/core/translations/form/en-us.yaml
+++ b/addons/core/translations/form/en-us.yaml
@@ -108,5 +108,3 @@ email:
   label: Email
 full_name:
   label: Full Name
-secret:
-  label: ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
diff --git a/ui/desktop/app/components/hidden-secret/index.hbs b/ui/desktop/app/components/hidden-secret/index.hbs
index d1f77b2c2..4061f42e9 100644
--- a/ui/desktop/app/components/hidden-secret/index.hbs
+++ b/ui/desktop/app/components/hidden-secret/index.hbs
@@ -5,6 +5,6 @@
     @buttonText={{t 'actions.copy-to-clipboard'}}
     @acknowledgeText={{t 'states.copied'}}
   >
-    <span>{{t 'form.secret.label'}}</span>
+    <span>{{this.textMask}}</span>
   </Copyable>
 </div>
\ No newline at end of file
diff --git a/ui/desktop/app/components/hidden-secret/index.js b/ui/desktop/app/components/hidden-secret/index.js
new file mode 100644
index 000000000..f5b443ff2
--- /dev/null
+++ b/ui/desktop/app/components/hidden-secret/index.js
@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class HiddenSecretComponent extends Component {
+  textMask = '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
+}