Basic add-contrib form

app/components/add-contributor/component.js

@@ -0,0 +1,35 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+  id: null,
+  realName: null,
+  address: null,
+
+  classId: function() {
+    let value = this.get('id');
+    return (Ember.isEmpty(value)) ? null : 'valid';
+  }.property('id'),
+
+  classRealName: function() {
+    let value = this.get('realName');
+    return (Ember.isEmpty(value)) ? null : 'valid';
+  }.property('realName'),
+
+  classAddress: function() {
+    let value = this.get('address');
+    return (Ember.isEmpty(value)) ? null : 'valid';
+  }.property('address'),
+
+
+  actions: {
+
+    save() {
+      console.log('id', this.get('id'));
+      console.log('realName', this.get('realName'));
+      console.log('address', this.get('address'));
+    }
+
+  }
+
+});

app/components/add-contributor/template.hbs

@@ -0,0 +1,26 @@
+<form {{action "save" on="submit"}}>
+  <p>
+    {{input name="id"
+            type="text"
+            placeholder="GitHub UID (123)"
+            value=id
+            class=classId}}
+  </p>
+  <p>
+    {{input name="realname"
+            type="text"
+            placeholder="Carl Sagan"
+            value=realName
+            class=classRealName}}
+  </p>
+  <p>
+    {{input name="address"
+            type="text"
+            placeholder="0xF18E631Ea191aE4ebE70046Fcb01a436554421BA4"
+            value=address
+            class=classAddress}}
+  </p>
+  <p>
+    <input type="submit" value="Save">
+  </p>
+</form>

app/controllers/application.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+});

app/controllers/index.js

@@ -11,4 +11,6 @@ export default Ember.Controller.extend({
 
   kredits: service(),
 
+  contractInteractionEnabled: computed.alias('kredits.web3Provided'),
+
 });

app/services/kredits.js

@@ -5,6 +5,7 @@ import config from 'kredits-web/config/environment';
 export default Ember.Service.extend({
 
   web3Instance: null,
+  web3Provided: false, // Web3 provided (using Mist Browser, Metamask et al.)
 
   web3: function() {
     if (Ember.isPresent(this.get('web3Instance'))) {
@@ -16,6 +17,7 @@ export default Ember.Service.extend({
     if (typeof window.web3 !== 'undefined') {
       Ember.Logger.debug('[web3] Using user-provided instance, e.g. from Mist browser or Metamask');
       web3Instance = window.web3;
+      this.set('web3Provided', true);
     } else {
       Ember.Logger.debug('[web3] Creating new instance from npm module class');
       let provider = new Web3.providers.HttpProvider("http://139.59.248.169:8545");
@@ -38,7 +40,8 @@ export default Ember.Service.extend({
   }.property('web3'),
 
   totalSupply: function() {
-    return this.get('kreditsContract').totalSupply();
+    return 23000;
+    // return this.get('kreditsContract').totalSupply();
   }.property('kreditsContract'),
 
   contributorsCount: function() {

app/styles/_layout.scss

@@ -1,11 +1,15 @@
 section {
   @include outer-container;
-  margin-top: 6rem;
   margin-bottom: 8rem;
+  &:first-of-type {
+    margin-top: 6rem;
+  }
 
   @include media($mobile) {
-    margin-top: 2rem;
     margin-bottom: 5rem;
+    &:first-of-type {
+      margin-top: 2rem;
+    }
   }
 
   header {

app/styles/app.scss

@@ -68,3 +68,4 @@ section {
 }
 
 @import "components/contributor-list";
+@import "components/add-contributor";

app/styles/components/_add-contributor.scss

@@ -0,0 +1,25 @@
+section#add-contributor {
+
+  form {
+
+    p {
+      margin-bottom: 1.2rem;
+    }
+
+    input[type=text] {
+      width: 100%;
+      padding: 1.2rem;
+      line-height: 2rem;
+      border: none;
+      border-bottom: 1px solid rgba(255,255,255,0.2);
+      background-color: rgba(22, 21, 40, 0.3);
+      color: #fff;
+      font-size: 1.4rem;
+      &:focus, &.valid {
+        background-color: rgba(22, 21, 40, 0.6);
+      }
+    }
+
+  }
+
+}

app/templates/index.hbs

@@ -1,5 +1,4 @@
 <section id="contributors">
-
   <header>
     <h2>Kosmos Contributors</h2>
   </header>
@@ -12,5 +11,16 @@
       <span class="number">{{kredits.contributorsCount}}</span> contributors.
     </p>
   </div>
-
 </section>
+
+{{#if contractInteractionEnabled}}
+  <section id="add-contributor">
+    <header>
+      <h2>Add Contributor</h2>
+    </header>
+
+    <div class="content">
+      {{add-contributor kredits=kredits}}
+    </div>
+  </section>
+{{/if}}

tests/integration/components/add-contributor/component-test.js

@@ -0,0 +1,16 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('add-contributor', 'Integration | Component | add contributor', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{add-contributor}}`);
+
+  assert.equal(this.$().text().trim(), '');
+});

tests/unit/controllers/application-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:application', 'Unit | Controller | application', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});