From 74bd170e6aa2d90b7286d29288124d4d005d896a Mon Sep 17 00:00:00 2001
From: Matthew Irish <matthew@hashicorp.com>
Date: Fri, 12 Apr 2019 13:54:44 -0500
Subject: [PATCH 1/3] update masked-input to work with form-field component

---
 ui/app/components/masked-input.js          | 8 ++++++--
 ui/app/templates/components/form-field.hbs | 1 +
 ui/stories/masked-input.md                 | 6 +-----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/ui/app/components/masked-input.js b/ui/app/components/masked-input.js
index 35dac11f9755..77904fc67976 100644
--- a/ui/app/components/masked-input.js
+++ b/ui/app/components/masked-input.js
@@ -12,6 +12,7 @@ import autosize from 'autosize';
  *  @value={{attr.options.defaultValue}}
  *  @placeholder="secret"
  *  @allowCopy={{true}}
+ *  @onChange={{action "someAction"}}
  * />
  * ```
  *
@@ -19,6 +20,8 @@ import autosize from 'autosize';
  * @param [placeholder=value] {String} - The placeholder to display before the user has entered any input.
  * @param [allowCopy=null] {bool} - Whether or not the input should render with a copy button.
  * @param [displayOnly=false] {bool} - Whether or not to display the value as a display only `pre` element or as an input.
+ * @param [onChange=false] {Function|action} - A function to call when the value of the input changes.
+ *
  *
  */
 
@@ -63,8 +66,9 @@ export default Component.extend({
       this.toggleProperty('isMasked');
     },
     updateValue(e) {
-      this.set('value', e.target.value);
-      this.onChange();
+      let value = e.target.value;
+      this.set('value', value);
+      this.onChange(value);
     },
   },
 });
diff --git a/ui/app/templates/components/form-field.hbs b/ui/app/templates/components/form-field.hbs
index f2d363158fa7..934fc182cfd8 100644
--- a/ui/app/templates/components/form-field.hbs
+++ b/ui/app/templates/components/form-field.hbs
@@ -138,6 +138,7 @@
     @value={{or (get model valuePath) attr.options.defaultValue}}
     @placeholder=""
     @allowCopy="true"
+    @onChange={{action (action "setAndBroadcast" valuePath)}}
    />
 
 {{else if (or (eq attr.type "number") (eq attr.type "string"))}}
diff --git a/ui/stories/masked-input.md b/ui/stories/masked-input.md
index 5608b4036ac0..efca751acab7 100644
--- a/ui/stories/masked-input.md
+++ b/ui/stories/masked-input.md
@@ -10,16 +10,12 @@
 | [placeholder] | <code>String</code> | <code>value</code> | The placeholder to display before the user has entered any input. |
 | [allowCopy] | <code>bool</code> | <code></code> | Whether or not the input should render with a copy button. |
 | [displayOnly] | <code>bool</code> | <code>false</code> | Whether or not to display the value as a display only `pre` element or as an input. |
+| [onChange] | <code>function</code> \| <code>action</code> | <code>false</code> | A function to call when the value of the input changes. |
 
 **Example**
   
 ```js
 <MaskedInput
- @value={{attr.options.defaultValue}}
- @placeholder="secret"
- @allowCopy={{true}}
-/>
-```
  
 
 **See**

From f4643a9012a1ba694069623fce473ba966c6453c Mon Sep 17 00:00:00 2001
From: Matthew Irish <matthew@hashicorp.com>
Date: Mon, 15 Apr 2019 10:50:08 -0500
Subject: [PATCH 2/3] add test for masked input onChange functionality

---
 ui/app/templates/components/masked-input.hbs       | 2 +-
 ui/tests/integration/components/form-field-test.js | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/app/templates/components/masked-input.hbs b/ui/app/templates/components/masked-input.hbs
index ab09a23913c4..df44d0887cd7 100644
--- a/ui/app/templates/components/masked-input.hbs
+++ b/ui/app/templates/components/masked-input.hbs
@@ -1,4 +1,4 @@
-<div class="masked-input {{if shouldObscure "masked"}} {{if displayOnly "display-only"}} {{if allowCopy "allow-copy"}}" data-test-masked-input>
+<div class="masked-input {{if shouldObscure "masked"}} {{if displayOnly "display-only"}} {{if allowCopy "allow-copy"}}" data-test-masked-input data-test-field>
 	{{#if displayOnly}}
 		<pre class="masked-value display-only is-word-break">{{displayValue}}</pre>
   {{else}}
diff --git a/ui/tests/integration/components/form-field-test.js b/ui/tests/integration/components/form-field-test.js
index 795e42aac7b4..00c514474c62 100644
--- a/ui/tests/integration/components/form-field-test.js
+++ b/ui/tests/integration/components/form-field-test.js
@@ -118,8 +118,11 @@ module('Integration | Component | form field', function(hooks) {
   });
 
   test('it renders: sensitive', async function(assert) {
-    await setup.call(this, createAttr('password', 'string', { sensitive: true }));
+    let [model, spy] = await setup.call(this, createAttr('password', 'string', { sensitive: true }));
     assert.ok(component.hasMaskedInput, 'renders the masked-input component');
+    await component.fields[0].textarea('secret');
+    assert.equal(model.get('password'), 'secret');
+    assert.ok(spy.calledWith('password', 'secret'), 'onChange called with correct args');
   });
 
   test('it uses a passed label', async function(assert) {

From 4f1bdc37b1876b53f4cf725d4fc0e71541f416a6 Mon Sep 17 00:00:00 2001
From: Matthew Irish <matthew@hashicorp.com>
Date: Mon, 15 Apr 2019 17:11:40 -0500
Subject: [PATCH 3/3] fix doc changes

---
 ui/app/components/masked-input.js |  4 +---
 ui/stories/masked-input.md        | 11 ++++++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/app/components/masked-input.js b/ui/app/components/masked-input.js
index 77904fc67976..584d7afb0b3e 100644
--- a/ui/app/components/masked-input.js
+++ b/ui/app/components/masked-input.js
@@ -7,20 +7,18 @@ import autosize from 'autosize';
  * `MaskedInput` components are textarea inputs where the input is hidden. They are used to enter sensitive information like passwords.
  *
  * @example
- * ```js
  * <MaskedInput
  *  @value={{attr.options.defaultValue}}
  *  @placeholder="secret"
  *  @allowCopy={{true}}
  *  @onChange={{action "someAction"}}
  * />
- * ```
  *
  * @param [value] {String} - The value to display in the input.
  * @param [placeholder=value] {String} - The placeholder to display before the user has entered any input.
  * @param [allowCopy=null] {bool} - Whether or not the input should render with a copy button.
  * @param [displayOnly=false] {bool} - Whether or not to display the value as a display only `pre` element or as an input.
- * @param [onChange=false] {Function|action} - A function to call when the value of the input changes.
+ * @param [onChange=Function.prototype] {Function|action} - A function to call when the value of the input changes.
  *
  *
  */
diff --git a/ui/stories/masked-input.md b/ui/stories/masked-input.md
index efca751acab7..041ad0aee1a0 100644
--- a/ui/stories/masked-input.md
+++ b/ui/stories/masked-input.md
@@ -10,13 +10,18 @@
 | [placeholder] | <code>String</code> | <code>value</code> | The placeholder to display before the user has entered any input. |
 | [allowCopy] | <code>bool</code> | <code></code> | Whether or not the input should render with a copy button. |
 | [displayOnly] | <code>bool</code> | <code>false</code> | Whether or not to display the value as a display only `pre` element or as an input. |
-| [onChange] | <code>function</code> \| <code>action</code> | <code>false</code> | A function to call when the value of the input changes. |
+| [onChange] | <code>function</code> \| <code>action</code> | <code>Function.prototype</code> | A function to call when the value of the input changes. |
 
 **Example**
   
 ```js
-<MaskedInput
- 
+ <MaskedInput
+  @value={{attr.options.defaultValue}}
+  @placeholder="secret"
+  @allowCopy={{true}}
+  @onChange={{action "someAction"}}
+ />
+```
 
 **See**