Style user address (with username seperate from host)

app/components/account-info/component.js

@@ -0,0 +1,18 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+
+  classNames: ['account-info'],
+
+  userAddress: null,
+
+  username: computed('userAddress', function() {
+    return this.get('userAddress').split('@')[0];
+  }),
+
+  host: computed('userAddress', function() {
+    return '@' + this.get('userAddress').split('@')[1];
+  })
+
+});

app/components/account-info/template.hbs

@@ -0,0 +1,2 @@
+<span class="username">{{username}}</span>
+<br><span class="host">{{host}}</span>