From eef531445b88abde57758f2600dd5750da19afda Mon Sep 17 00:00:00 2001
From: Noelle Daley <noelledaley@users.noreply.github.com>
Date: Fri, 7 Dec 2018 13:23:42 -0800
Subject: [PATCH] mask password on ldap auth form (#5898)

---
 ui/app/components/masked-input.js                  |  1 +
 ui/app/models/auth-config/ldap.js                  |  1 +
 ui/app/styles/components/masked-input.scss         | 10 +++++++++-
 ui/app/templates/components/form-field.hbs         |  6 ++++++
 ui/app/templates/components/masked-input.hbs       |  6 +++---
 ui/tests/integration/components/form-field-test.js |  5 +++++
 ui/tests/pages/components/form-field.js            |  1 +
 7 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/ui/app/components/masked-input.js b/ui/app/components/masked-input.js
index 6e47fc8c04..317edeb661 100644
--- a/ui/app/components/masked-input.js
+++ b/ui/app/components/masked-input.js
@@ -4,6 +4,7 @@ import autosize from 'autosize';
 
 export default Component.extend({
   value: null,
+  placeholder: 'value',
   didInsertElement() {
     this._super(...arguments);
     autosize(this.element.querySelector('textarea'));
diff --git a/ui/app/models/auth-config/ldap.js b/ui/app/models/auth-config/ldap.js
index 5266e4d830..9bb4a14491 100644
--- a/ui/app/models/auth-config/ldap.js
+++ b/ui/app/models/auth-config/ldap.js
@@ -41,6 +41,7 @@ export default AuthConfig.extend({
   bindpass: attr('string', {
     label: 'Password',
     helpText: 'Used along with binddn when performing user search',
+    sensitive: true,
   }),
 
   userdn: attr('string', {
diff --git a/ui/app/styles/components/masked-input.scss b/ui/app/styles/components/masked-input.scss
index 6018d0e324..124f2a1640 100644
--- a/ui/app/styles/components/masked-input.scss
+++ b/ui/app/styles/components/masked-input.scss
@@ -48,8 +48,16 @@
 .button.copy-button {
   min-width: $spacing-xl;
   border-left: 0;
-  border-radius: 0 $radius $radius 0;
   color: $grey;
+  box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
+}
+
+.button.copy-button {
+  border-radius: 0;
+}
+
+.button.masked-input-toggle {
+  border-radius: 0 $radius $radius 0;
 }
 
 .display-only {
diff --git a/ui/app/templates/components/form-field.hbs b/ui/app/templates/components/form-field.hbs
index 147a3c10a1..4dbe7c003b 100644
--- a/ui/app/templates/components/form-field.hbs
+++ b/ui/app/templates/components/form-field.hbs
@@ -88,6 +88,12 @@
     inputValue=(get model valuePath)
     onChange=(action (action "setAndBroadcast" valuePath))
   }}
+{{else if (eq attr.options.sensitive true)}}
+  <MaskedInput
+    @value={{or (get model valuePath) attr.options.defaultValue}}
+    @placeholder=""
+    @allowCopy=true
+  />
 {{else if (or (eq attr.type 'number') (eq attr.type 'string'))}}
   <div class="control">
     {{#if (eq attr.options.editType 'textarea')}}
diff --git a/ui/app/templates/components/masked-input.hbs b/ui/app/templates/components/masked-input.hbs
index c60a3432d0..ab09a23913 100644
--- a/ui/app/templates/components/masked-input.hbs
+++ b/ui/app/templates/components/masked-input.hbs
@@ -1,12 +1,12 @@
 <div class="masked-input {{if shouldObscure "masked"}} {{if displayOnly "display-only"}} {{if allowCopy "allow-copy"}}" data-test-masked-input>
 	{{#if displayOnly}}
 		<pre class="masked-value display-only is-word-break">{{displayValue}}</pre>
-	{{else}}
+  {{else}}
   <textarea
     class="input masked-value"
     rows=1
     wrap="off"
-    placeholder="value"
+    placeholder={{placeholder}}
     onfocus={{action (mut isFocused) true}}
     onblur={{action (mut isFocused) false}}
     onkeydown={{action onKeyDown}}
@@ -18,7 +18,7 @@
   {{#if allowCopy}}
     <CopyButton
       @clipboardText={{value}}
-      @class="copy-button button is-compact"
+      @class="copy-button button {{if displayOnly "is-compact"}}"
       @success={{success}}
       data-test-copy-button
     >
diff --git a/ui/tests/integration/components/form-field-test.js b/ui/tests/integration/components/form-field-test.js
index 4600696657..611ff0c554 100644
--- a/ui/tests/integration/components/form-field-test.js
+++ b/ui/tests/integration/components/form-field-test.js
@@ -125,6 +125,11 @@ module('Integration | Component | form field', function(hooks) {
     assert.deepEqual(spy.args[0], ['foo', ['array']], 'onChange called with correct args');
   });
 
+  test('it renders: sensitive', async function(assert) {
+    await setup.call(this, createAttr('password', 'string', { sensitive: true }));
+    assert.ok(component.hasMaskedInput, 'renders the masked-input component');
+  });
+
   test('it uses a passed label', async function(assert) {
     await setup.call(this, createAttr('foo', 'string', { label: 'Not Foo' }));
     assert.equal(component.fields[0].labelText, 'Not Foo', 'renders the label from options');
diff --git a/ui/tests/pages/components/form-field.js b/ui/tests/pages/components/form-field.js
index 094838d834..ac47f8a2af 100644
--- a/ui/tests/pages/components/form-field.js
+++ b/ui/tests/pages/components/form-field.js
@@ -19,6 +19,7 @@ export default {
   hasInput: isPresent('input'),
   hasCheckbox: isPresent('input[type=checkbox]'),
   hasTextarea: isPresent('textarea'),
+  hasMaskedInput: isPresent('[data-test-masked-input]'),
   hasTooltip: isPresent('[data-test-component=info-tooltip]'),
   tooltipTrigger: focusable('[data-test-tool-tip-trigger]'),
   tooltipContent: text('[data-test-help-text]'),