New Twiddle

components.encrypted-input.js

import Ember from 'ember';


export default Ember.Component.extend({
  isPopulated: false,

  isNotPopulated: Ember.computed.not('isPopulated'),
  
  isEditing: Ember.computed.reads('isNotPopulated'),

  encryptedText: '************',

  valueDidChange: undefined,
	
  fieldName: undefined,
  
  underscoredFieldName: Ember.computed('fieldName', function() {
    return Ember.String.underscore(this.get('fieldName'));
  }),
  
  actions: {
  	editField() {
      console.log('hi')
      this.set('isEditing', true);
    },
		
    updateValue(value) {
      this.sendActions('valueDidChange', value);
    }
	}
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  populatedEncryptedFields: ['value']
});

helpers.contains.js

import Ember from 'ember';

export function contains([haystack, needle]/*, hash*/) {
  return Ember.makeArray(haystack).contains(needle);
}

export default Ember.Helper.helper(contains);

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{encrypted-input fieldName='value' isPopulated=(contains populatedEncryptedFields 'value')}}

templates.components.encrypted-input.hbs

{{#if isEditing}}
<label for={{underscoredFieldName}}>{{fieldName}}</label>:
	{{input change=(action 'updateValue')}}
{{else}}
	<label for={{underscoredFieldName}}>{{fieldName}}</label>: {{encryptedText}}
	<button {{action 'editField'}}>change</button>
{{/if}}

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}