UI/obscure secret on input (#11284)

* new font and add as font-family to be used in masked-input

* clean up logic

* refactor for displayOnly

* start cert masking

* work on certificates

* upload cert work

* fix global styling

* fix styling for class no longer used

* make mask by default and remove option

* glimmerize start and certificate on LDAP a file field

* glimmerize actions

* first part of glimmerizing text-file still need to do some clean up

* not doing awesome over here

* getting ready to un-glimmer

* unglimmerize

* remove placeholder based on conversations with design

* clean up text-file

* cleanup

* fix class bindings

* handle class binding

* set up for test

* fix elementId

* track down index

* update masked-input test

* add more to the masked-input test

* test-file test

* fix broken test

* clear old style

* clean up

* remove pgp key masked font, this really needs to be refactored to text-file component

* changelog

* cover other certificate view

* add allowCopy

* address some pr styling comments

* improve test coverage

* fix some issues

* add attr.options.masked

ui/lib/core/addon/components/masked-input.js

@@ -1,5 +1,4 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
 import autosize from 'autosize';
 import layout from '../templates/components/masked-input';
 
@@ -10,24 +9,21 @@ import layout from '../templates/components/masked-input';
  * @example
  * <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=Function.prototype] {Function|action} - A function to call when the value of the input changes.
- *
+ * @param [isCertificate=false] {bool} - If certificate display the label and icons differently.
  *
  */
-
 export default Component.extend({
   layout,
   value: null,
-  placeholder: 'value',
+  showValue: false,
   didInsertElement() {
     this._super(...arguments);
     autosize(this.element.querySelector('textarea'));
@@ -40,30 +36,12 @@ export default Component.extend({
     this._super(...arguments);
     autosize.destroy(this.element.querySelector('textarea'));
   },
-  shouldObscure: computed('isMasked', 'isFocused', 'value', function() {
-    if (this.value === '') {
-      return false;
-    }
-    if (this.isFocused === true) {
-      return false;
-    }
-    return this.isMasked;
-  }),
-  displayValue: computed('shouldObscure', 'value', function() {
-    if (this.shouldObscure) {
-      return '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
-    } else {
-      return this.value;
-    }
-  }),
-  isMasked: true,
-  isFocused: false,
   displayOnly: false,
   onKeyDown() {},
   onChange() {},
   actions: {
     toggleMask() {
-      this.toggleProperty('isMasked');
+      this.toggleProperty('showValue');
     },
     updateValue(e) {
       let value = e.target.value;