Merge pull request #142 from 67P/feature/signup

Sign up via GitHub

app/components/add-contributor/component.js

@@ -1,22 +1,27 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 import { and, notEmpty } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import { isPresent } from '@ember/utils';
+import { isAddress } from 'web3-utils';
 
 export default Component.extend({
 
   kredits: service(),
 
   attributes: null,
 
-  // TODO: add proper address validation
-  isValidAccount: notEmpty('account'),
+  isValidAccount: computed('account', function() {
+    return isAddress(this.account);
+  }),
+
   isValidName: notEmpty('name'),
   isValidURL: notEmpty('url'),
   isValidGithubUID: notEmpty('github_uid'),
   isValidGithubUsername: notEmpty('github_username'),
   isValidGiteaUsername: notEmpty('gitea_username'),
   isValidWikiUsername: notEmpty('wiki_username'),
+
   isValid: and(
     'isValidAccount',
     'isValidName',

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

@@ -0,0 +1,19 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+
+export default Component.extend({
+
+  tagName: '',
+
+  kredits: service(),
+  router: service(),
+
+  actions: {
+
+    signup() {
+      this.router.transitionTo('signup');
+    }
+
+  }
+
+});

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

@@ -0,0 +1,11 @@
+<section id="user-account">
+  {{#if (and kredits.hasAccounts kredits.currentUser)}}
+    {{kredits.currentUser.name}}
+    {{#if kredits.currentUserIsCore}}
+      <span class="core-flag">(core)</span>
+    {{/if}}
+  {{else}}
+    Anonymous
+    <button {{action "signup"}} class="small green">Sign up</button>
+  {{/if}}
+</section>

app/controllers/signup/eth-account.js

@@ -0,0 +1,49 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import { alias, not } from '@ember/object/computed';
+import { isAddress } from 'web3-utils';
+import { inject as service } from '@ember/service';
+import config from 'kredits-web/config/environment';
+
+export default Controller.extend({
+
+  kredits: service(),
+
+  ethAddress: null,
+  githubAccessToken: alias('kredits.githubAccessToken'),
+
+  isValidEthAccount: computed('ethAddress', function() {
+    return isAddress(this.ethAddress);
+  }),
+
+  signupButtonDisabled: not('isValidEthAccount'),
+
+  actions: {
+
+    completeSignup () {
+      const payload = {
+        accessToken: this.githubAccessToken,
+        account: this.ethAddress
+      }
+
+      fetch(config.githubSignupUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      })
+      .then(res => res.json())
+      .then(data => {
+        console.log('Created contributor:', data);
+
+        this.setProperties({
+          githubAccessToken: null,
+          ethAddress: null
+        });
+
+        this.transitionToRoute('signup.complete');
+      });
+    }
+
+  }
+
+});

app/controllers/signup/index.js

@@ -0,0 +1,14 @@
+import Controller from '@ember/controller';
+import config from 'kredits-web/config/environment';
+
+export default Controller.extend({
+
+  actions: {
+
+    connectGithub () {
+      window.location = config.githubConnectUrl;
+    }
+
+  }
+
+});

app/router.js

@@ -26,6 +26,11 @@ Router.map(function() {
     this.route('new');
     this.route('edit', { path: ':id/edit' });
   });
+  this.route('signup', function() {
+    this.route('github');
+    this.route('eth-account');
+    this.route('complete');
+  });
 });
 
 export default Router;

app/routes/signup.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

app/routes/signup/complete.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

app/routes/signup/eth-account.js

@@ -0,0 +1,17 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { isEmpty } from '@ember/utils';
+
+export default Route.extend({
+
+  kredits: service(),
+
+  redirect () {
+    this._super(...arguments);
+
+    if (isEmpty(this.kredits.githubAccessToken)) {
+      this.transitionTo('signup.index');
+    }
+  }
+
+});

app/routes/signup/github.js

@@ -0,0 +1,29 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { isEmpty } from '@ember/utils';
+
+export default Route.extend({
+
+  kredits: service(),
+
+  redirect () {
+    this._super(...arguments);
+
+    let accessToken;
+    try {
+      accessToken = window.location.hash.match(/access_token=(.+)/)[1];
+    } catch (error) { /* ignore */ }
+
+    if (isEmpty(accessToken) || accessToken === 'undefined') {
+      console.error('No GitHub access token found.');
+      this.transitionTo('signup');
+      return;
+    }
+
+    this.kredits.set('githubAccessToken', accessToken);
+
+    this.transitionTo('signup.eth-account');
+  }
+
+});
+

app/services/kredits.js

@@ -24,6 +24,7 @@ export default Service.extend({
   contributors: null,
   contributions: null,
   proposals: null,
+  githubAccessToken: null,
 
   currentUserIsContributor: notEmpty('currentUser'),
   currentUserIsCore: alias('currentUser.isCore'),

app/styles/_buttons.scss

@@ -23,6 +23,10 @@ button, input[type=submit], .button {
     border-color: $primary-color;
   }
 
+  &[disabled] {
+    color: rgba(255,255,255,0.5);
+  }
+
   &.small {
     font-size: 0.8rem;
     padding: 0.2rem 0.8rem;
@@ -53,4 +57,17 @@ button, input[type=submit], .button {
       border-color: $green;
     }
   }
+
+  &.icon {
+    svg {
+      width: 2rem;
+      height: 2rem;
+      vertical-align: middle;
+      margin-right: 1rem;
+
+      .fg {
+        fill: $primary-color;
+      }
+    }
+  }
 }

app/styles/_forms.scss

@@ -1,12 +1,17 @@
 section#add-contributor,
 section#add-contribution,
-section#add-proposal {
+section#add-proposal,
+section#signup {
 
   form {
 
     p {
       margin-bottom: 1.5rem;
 
+      &.mg-bottom-md {
+        margin-bottom: 2rem;
+      }
+
       &.label {
         margin-bottom: .5rem;
       }

app/styles/_layout.scss

@@ -28,6 +28,37 @@ main {
       }
     }
   }
+
+  section {
+    .content {
+      a {
+        font-size: inherit;
+      }
+
+      &.text-lg {
+        p {
+          font-size: 1.2rem;
+          margin-bottom: 1em;
+          line-height: 1.5em;
+        }
+      }
+
+      &.text-center {
+        text-align: center;
+      }
+
+      p {
+        &.mg-bottom-md {
+          margin-bottom: 2rem;
+        }
+
+        &.actions {
+          text-align: center;
+          padding-top: 2rem;
+        }
+      }
+    }
+  }
 }
 
 @media (min-width: 550px) {

app/styles/app.scss

@@ -38,6 +38,10 @@ h1, h2, h3, h4, h5, input, button {
   font-weight: 300;
 }
 
+a {
+  color: $primary-color;
+}
+
 section {
   h2 {
     font-size: 1.4rem;
@@ -106,4 +110,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;
+  }
+
+}

app/templates/application.hbs

@@ -1,16 +1,6 @@
 <header id="topbar">
   <h1>{{link-to "Kosmos Kredits" "dashboard"}}</h1>
-
-  <section id="user-account">
-    {{#if kredits.hasAccounts }}
-      {{#if kredits.currentUser}}
-        {{kredits.currentUser.name}}
-        {{#if kredits.currentUserIsCore}}(core){{/if}}
-      {{/if}}
-    {{else}}
-      Anonymous
-    {{/if}}
-  </section>
+  {{topbar-account-panel}}
 </header>
 
 {{outlet}}

app/templates/signup.hbs

@@ -0,0 +1,5 @@
+<main class="center-column">
+  <section id="signup">
+    {{outlet}}
+  </section>
+</main>

app/templates/signup/complete.hbs

@@ -0,0 +1,15 @@
+<header>
+  <h2>Welcome aboard!</h2>
+</header>
+<div class="content text-lg text-center">
+  <p>
+    Congratulations. Your initial profile is now complete.
+  </p>
+  <p>
+    Why not say hi to your fellow contributors
+    <a href="https://wiki.kosmos.org/Main_Page#Community_.2F_Getting_in_touch_.2F_Getting_involved">in one of our chat rooms</a>?.
+  </p>
+  <p class="actions">
+    {{#link-to "dashboard" class="button small"}}Return to dashboard{{/link-to}}
+  </p>
+</div>

app/templates/signup/eth-account.hbs

@@ -0,0 +1,25 @@
+<header>
+  <h2>Complete your contributor profile</h2>
+</header>
+<div class="content text-lg">
+  <p class="mg-bottom-md">
+    Kredits allow you to take part in project governance, and to earn rewards for
+    your contributions. For both, you will need an Ethereum wallet/account.
+  </p>
+  <form {{action "submit" on="submit"}}>
+    <p>
+      <label>
+        Ethereum account:<br>
+        {{input type="text" value=ethAddress
+                placeholder="0xF18E631Ea191aE4ebE70046Fcb01a436554421BA4"
+                class=(if isValidEthAccount "valid" "")}}
+      </label>
+    </p>
+  </form>
+  <p class="actions">
+    <button disabled={{signupButtonDisabled}}
+            {{action "completeSignup"}}>
+      Complete my profile
+    </button>
+  </p>
+</div>