mask password on ldap auth form (#5898)

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'));

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', {

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 {

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')}}

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
     >

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');

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]'),