New Twiddle

components.user-portrait.js

import Ember from 'ember';
import Component from '@ember/component';

export default Component.extend({
  numberOfSaves: 0,
  message: '',
  
  helloMessage: Ember.computed('username', function() {
  	return `Hello, ${this.get('username')}. Welcome!`;
  }),

	actions: {
    clear: function() {
      this.set('numberOfSaves', 0);
      this.set('message', '');
    },
    saveUser: function() {
      let self = this;
      
			this.incrementProperty('numberOfSaves');
      
      return this.get('save')()
        .then(function(result) {
          self.set('message', result);
        }, function(err) {
          self.set('message', 'Save Failed!');  
        });
    }
  }
});

controllers.application.js

import Controller from '@ember/controller';

export default Controller.extend({
  appName: 'Polarity',
  username: "admin",
  
  actions: {
    test: function() {
      console.info("You pressed 'test'");
    },
    save: function() {
    	console.info("You pressed 'Save User'"); 
			return new Promise(function(resolve, reject) {
        return resolve('Save Succeeded!');
      });
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.user-portrait-card {
  background-color: #ccc;
  padding: 20px;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

Username: <input type="text" value={{username}} oninput={{action (mut username) value="target.value"}}><br><br>

<button {{action "test"}}>Test</button><br><br>

{{user-portrait
  	username=username
  	save=(action "save")}}

templates.components.user-portrait.hbs

<div class="user-portrait-card">
  Username: {{username}}<br><br>
  
  {{helloMessage}}<br><br>

  (Number of Saves: {{numberOfSaves}})<br><br>
  
  <button {{action "saveUser"}}>Save User</button>
  <button {{action "clear"}}>Clear</button><br><br>
  
  Message: {{message}}
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
  }
}