Cleaned up flow

app/components/client/devprogram-scripts.js

@@ -1,11 +1,37 @@
-"use strict"; /* global document, send */
+"use strict"; /* global document, history, send, window */
 
 
 
-document.getElementById("get-started").addEventListener("click", event => {
+document.getElementById("get-started").onclick = event => {
   event.preventDefault();
 
   send({
     message: "auth me with github"
   });
-});
+};
+
+if (window.location.search.includes("?code=")) {
+  document.querySelector("developer-program").innerHTML = `
+    <form>
+      <input-submit>
+        <input id="walletAddress" placeholder="Your LBRY wallet address" type="text"/>
+        <input id="oauthCode" type="hidden" value="${window.location.search.split("?code=").pop()}"/>
+        <button id="creditsAcquire" title="Get LBRY credits" type="button">Get credits</button>
+      </input-submit>
+    </form>
+  `;
+
+  history.replaceState({}, "", window.location.pathname); // clean up URL bar
+}
+
+if (document.getElementById("creditsAcquire")) {
+  document.getElementById("creditsAcquire").onclick = () => {
+    send({
+      address: document.getElementById("walletAddress").value,
+      code: document.getElementById("oauthCode").value,
+      message: "verify github auth"
+    });
+
+    document.querySelector("developer-program").innerHTML = "<p><em>Awaiting response from internal LBRY API</em></p>";
+  };
+}

app/components/developer-program.js

@@ -0,0 +1,17 @@
+"use strict";
+
+
+
+//  I M P O R T
+
+import html from "choo/html";
+
+
+
+//  E X P O R T
+
+export default () => html`
+  <developer-program>
+    <p>If this sounds like you, <a href="#" class="no-smooth" id="get-started">get started here</a>!</p>
+  </developer-program>
+`;

app/dist/scripts/app.js

@@ -90,6 +90,5 @@ function scrollToElementOnLoad() {
 
 function validateEmail(email) {
   const emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i;
-
-  return emailRegex.test(String(email));
+  return emailRegex.test(String(email)); // eslint-disable-line padding-line-between-statements
 }

app/dist/scripts/sockets.js

@@ -1,4 +1,4 @@
-"use strict"; /* global document, location, WebSocket */
+"use strict"; /* global document, location, WebSocket, window */
 
 
 
@@ -25,6 +25,20 @@ function initializeWebSocketConnection() {
     const data = JSON.parse(socket.data);
 
     switch(true) {
+      case data.message === "notification": // TODO: Make work with appending so multiple notifications can be sent
+        document.getElementById("flash-container").innerHTML =
+          `<div class="flash active${data.type ? " " + data.type : ""}">${data.details}</div>`;
+
+        setTimeout(() => {
+          document.getElementById("flash-container").innerHTML = "";
+        }, 2100);
+
+        break;
+
+      case data.message === "redirect":
+        window.location.href = data.url;
+        break;
+
       case data.message === "show result":
         if (!data.example)
           return;
@@ -83,16 +97,6 @@ function initializeWebSocketConnection() {
 
         break;
 
-      case data.message === "notification": // TODO: Make work with appending so multiple notifications can be sent
-        document.getElementById("flash-container").innerHTML =
-          `<div class="flash active${data.type ? " " + data.type : ""}">${data.details}</div>`;
-
-        setTimeout(() => {
-          document.getElementById("flash-container").innerHTML = "";
-        }, 2100);
-
-        break;
-
       default:
         console.log(data); // eslint-disable-line no-console
         break;

app/helpers/github.js

@@ -336,24 +336,6 @@ function generateUrl(type, event) {
   }
 }
 
-async function getGitHubUserToken() {
-  // const clientWithAuth = new Octokit({
-  //   auth: `token ${process.env.GITHUB_APP_TOKEN}`
-  // });
-
-  const result = await octokit.oauthAuthorizations.createAuthorization({ // eslint-disable-line no-unused-vars
-    client_id: process.env.GITHUB_APP_ID,
-    client_secret: process.env.GITHUB_APP_TOKEN,
-    note: "LBRY Developer Auth",
-    scopes: [
-      "public_repo"
-    ]
-  });
-
-  // console.log(result);
-  // console.log("—————");
-}
-
 function updateGithubFeed() {
   octokit.activity.listPublicEventsForOrg({
     org: "lbryio",
@@ -397,6 +379,5 @@ export {
   generateEvent,
   generateGitHubFeed,
   generateUrl,
-  getGitHubUserToken,
   updateGithubFeed
 };

app/sass/bundle.scss

@@ -22,6 +22,7 @@
 
 @import "pages/api";
 @import "pages/contributing";
+@import "pages/developer";
 @import "pages/documentation";
 @import "pages/home";
 @import "pages/page";

app/sass/pages/_developer.scss

@@ -0,0 +1,3 @@
+developer-program {
+  @extend %markdown;
+}

app/sockets.js

@@ -10,7 +10,7 @@ import html from "choo/html";
 //  U T I L S
 
 import fetchMetadata from "@helper/fetch-metadata";
-import { generateGitHubFeed, getGitHubUserToken } from "@helper/github";
+import { generateGitHubFeed } from "@helper/github";
 import messageSlack from "@helper/slack";
 
 
@@ -23,7 +23,7 @@ export default (socket, action) => {
 
   switch(true) {
     case action.message === "auth me with github":
-      getGitHubUserToken();
+      getGitHubUserToken(socket);
       break;
 
     case action.message === "fetch metadata":
@@ -332,6 +332,13 @@ function generateMemeCreator(socket) {
   });
 }
 
+function getGitHubUserToken(socket) {
+  send(socket, {
+    message: "redirect",
+    url: `https://github.com/login/oauth/authorize?client_id=${process.env.GITHUB_APP_ID}`
+  });
+}
+
 async function getTrendingContent() {
   try {
     const response = await got("https://api.lbry.io/file/list_trending");

documents/developer-program.md

@@ -9,6 +9,6 @@ To qualify for free LBC you must:
 - have a GitHub account, and
 - have a public PR (pull request) in the past year
 
-If this sounds like you, <a href="#" class="no-smooth" id="get-started">get started here</a>!
+<DeveloperProgram/>
 
 If you have not downloaded our SDK yet, [you should]() and generate a wallet address so we know where to send your LBC!