authenticate using netlify

Author: lucassabreu

package.json

@@ -27,6 +27,7 @@
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
+    "netlify-auth-providers": "^1.0.0-alpha5",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.8",

src/GitHub/GitHub.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import Loading from '../Components/Loading';
-import { githubAccessTokenUrl } from './constants'
 
 class GitHub extends React.Component {
   constructor(props) {
@@ -14,33 +13,6 @@ class GitHub extends React.Component {
     };
   }
 
-  async componentDidMount() {
-    fetch(new Request(
-      'https://api.github.com/users/lucassabreu',
-      {
-        method: "GET",
-        headers: new Headers({ accept: 'application/json' })
-      })
-    )
-      .then(r => r.json())
-      .then(console.log)
-
-    fetch(new Request(
-      githubAccessTokenUrl(this.state.code),
-      {
-        method: 'POST',
-        headers: new Headers({ Accept: 'application/json' })
-      }
-    ))
-      .then(r => {
-        if (r.ok === false) {
-          throw new Error(`${r.status} - ${r.statusText}`)
-        }
-        return r.json()
-      })
-      .then(console.log())
-  }
-
   render() {
     const { loading } = this.state;
     return (

src/GitHub/constants.js

@@ -4,60 +4,80 @@ import { withRouter } from 'react-router-dom';
 import githubLogo from './assets/images/github.svg'
 import gitlabLogo from './assets/images/gitlab.svg'
 import trelloLogo from './assets/images/trello.svg'
+import Authenticator from 'netlify-auth-providers';
+import { UncontrolledTooltip } from 'reactstrap';
 import './Home.css'
-import { githubAuthorizeUrl } from './GitHub/constants';
 
-const callbackUrl = (setupable) => `${window.location.href}${setupable}/callback`
-const SETUPABLE = [
-  {
-    name: "GitHub",
-    logo: githubLogo,
-    enabled: true,
-    url: githubAuthorizeUrl(callbackUrl('github')),
-  },
-  {
-    name: "GitLab",
-    logo: gitlabLogo,
-    enabled: false,
-    url: null,
-  },
-  {
-    name: "Trello",
-    logo: trelloLogo,
-    enabled: false,
-    url: null,
-  },
-];
+const nullCallback = (event) => event.preventDefault();
+const auth = new Authenticator({ site_id: "cwps.lucassabreu.net.br" });
 
-const Home = () => (
-  <div className="Home">
-    <section className="description">
-      <p>
-        This web client helps to setup a project at GitHub, GitLab or Trello to use the
-        Coderockr Way's labels, making easier to bootstrap the basic configuration at
-        your project.
-      </p>
-    </section>
-    <section className="project-handlers">
-      <h2>Where is your project?</h2>
-      <ul className="row project-handlers-buttons justify-content-md-center">
-        {SETUPABLE.map(({ name, logo: Logo, url, enabled }) => (
-          <li key={name} className="col-md-4">
-            <a className={`btn btn-primary ${enabled ? null : 'disabled'}`} href={url}
-              alt={enabled ? '' : `${name} will be supported soon`}>
-              <Logo className="icon" />
-              {name}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </section>
-    <section className="more-about">
-      <h4>Wanna know more about?</h4>
-      <p>Look this link: <a href="https://blog.coderockr.com/simplificando-o-setup-de-projetos-no-github-f29b76c83194">Simplificando o Setup de Projetos no GitHub</a>
+const Home = ({ history }) => {
+  const origins = [
+    {
+      name: "GitHub",
+      logo: githubLogo,
+      enabled: true,
+      callback: (event) => {
+        auth.authenticate({ provider: "github", scope: "user" }, (err, data) => {
+          if (err) {
+            console.error(err);
+            return
+          }
+          sessionStorage.setItem('github-token', data.token);
+          history.push('/github');
+        })
+      }
+    },
+    {
+      name: "GitLab",
+      logo: gitlabLogo,
+      enabled: false,
+      callback: nullCallback,
+    },
+    {
+      name: "Trello",
+      logo: trelloLogo,
+      enabled: false,
+      callback: nullCallback,
+    },
+  ];
+
+  return (
+    <div className="Home">
+      <section className="description">
+        <p>
+          This web client helps to setup a project at GitHub, GitLab or Trello to use the
+          Coderockr Way's labels, making easier to bootstrap the basic configuration at
+          your project.
       </p>
-    </section>
-  </div>
-)
+      </section>
+      <section className="project-handlers">
+        <h2>Where is your project?</h2>
+        <ul className="row project-handlers-buttons justify-content-md-center">
+          {origins.map(({ name, logo: Logo, callback, enabled }) => (
+            <li key={name} className="col-md-4">
+              <button id={`btn_origin_${name}`} className={`btn btn-primary ${enabled ? null : 'disabled'}`}
+                onClick={(event) => callback(event)}
+              >
+                <Logo className="icon" />
+                {name}
+              </button>
+              {enabled ? null :
+                <UncontrolledTooltip placement="bottom" target={`btn_origin_${name}`} >
+                  {name} will be supported soon
+                </UncontrolledTooltip>
+              }
+            </li>
+          ))}
+        </ul>
+      </section>
+      <section className="more-about">
+        <h4>Wanna know more about?</h4>
+        <p>Look this link: <a href="https://blog.coderockr.com/simplificando-o-setup-de-projetos-no-github-f29b76c83194">Simplificando o Setup de Projetos no GitHub</a>
+        </p>
+      </section>
+    </div>
+  )
+}
 
 export default withRouter(Home);

src/Home.js

@@ -71,6 +71,10 @@ a:hover {
     color: var(--primary);
 }
 
+.btn.btn-primary.disabled:hover {
+    color: white;
+}
+
 .btn-primary:hover {
     background-color: var(--primary);
 }

src/index.css

@@ -4248,6 +4248,10 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+netlify-auth-providers@^1.0.0-alpha5:
+  version "1.0.0-alpha5"
+  resolved "https://registry.yarnpkg.com/netlify-auth-providers/-/netlify-auth-providers-1.0.0-alpha5.tgz#f0ce642fe5534f04a1d539ca847c907dd20819c8"
+
 no-case@^2.2.0:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"