app/components/topbar-account-panel/component.js

@@ -6,5 +6,14 @@ export default Component.extend({
   tagName: '',
 
   kredits: service(),
+  router: service(),
+
+  actions: {
+
+    signup() {
+      this.router.transitionTo('signup');
+    }
+
+  }
 
 });

app/components/topbar-account-panel/template.hbs

@@ -6,5 +6,6 @@
     {{/if}}
   {{else}}
     Anonymous
+    <button {{action "signup"}} class="small green">Sign up</button>
   {{/if}}
 </section>

app/styles/app.scss

@@ -106,4 +106,5 @@ section {
 @import "components/loading-spinner";
 @import "components/proposal-list";
 @import "components/topbar";
+@import "components/topbar-account-panel";
 @import "components/user-avatar";

app/styles/components/_topbar-account-panel.scss

@@ -0,0 +1,7 @@
+header#topbar section#user-account {
+
+  button {
+    margin-left: 1.2rem;
+  }
+
+}

tests/integration/components/topbar-account-panel/component-test.js

@@ -9,7 +9,7 @@ module('Integration | Component | topbar-account-panel', function(hooks) {
   test('unknown user without wallet (or no permission to get wallet/account info)', async function(assert) {
     await render(hbs`<TopbarAccountPanel />`);
 
-    assert.equal(this.element.textContent.trim(), 'Anonymous');
+    assert.ok(this.element.textContent.trim().match(/^Anonymous/));
   });
 
   test('unknown user with Ethereum wallet', async function(assert) {
@@ -17,7 +17,7 @@ module('Integration | Component | topbar-account-panel', function(hooks) {
     service.set('currentUserAccounts', [{ foo: 'bar' }]);
     await render(hbs`<TopbarAccountPanel />`);
 
-    assert.equal(this.element.textContent.trim(), 'Anonymous');
+    assert.ok(this.element.textContent.trim().match(/^Anonymous/));
   });
 
   test('known contributor', async function(assert) {