Console: Handle authentication and authenticated requests

.gitignore

@@ -13,3 +13,6 @@ build
 .DS_Store
 .env
 npm-debug.log
+
+#config
+src/config.json

package.json

@@ -9,6 +9,7 @@
     "babel-runtime": "^6.11.6",
     "classnames": "^2.2.5",
     "lodash": "^4.16.4",
+    "querystring": "^0.2.0",
     "react": "^15.3.2",
     "react-click-outside": "github:tj/react-click-outside",
     "react-dom": "^15.3.2",

src/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Automattic, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+

src/api/core.js

@@ -11,8 +11,8 @@ const parseEndpoints = data => {
       rawEndpoint.methods.forEach(method => {
         // Parsing Query
         const query = {};
-        Object.keys(rawEndpoint.methods).forEach(key => {
-          const arg = rawEndpoint.methods[key];
+        Object.keys(rawEndpoint.args).forEach(key => {
+          const arg = rawEndpoint.args[key];
           query[key] = {
             description: {
               view: arg.description

src/components/header/index.js

@@ -3,13 +3,15 @@ import React from 'react';
 import './style.css';
 
 import ApiSelector from '../api-selector';
+import UserMenu from '../user-menu';
 import VersionSelector from '../version-selector';
 import LookupContainer from '../lookup-container';
 import Submit from '../submit';
 
 const Header = () => {
   return (
     <div id="header">
+      <UserMenu />
       <ApiSelector />
       <VersionSelector />
       <LookupContainer />

src/components/user-menu/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import './style.css';
+
+import { isReady, isLoggedin, getUser } from '../../state/security/selectors';
+import { login, logout } from '../../state/security/actions';
+
+const UserMenu = ({ isReady, isLoggedin, login, logout, user }) => {
+  if (! isReady) {
+    return (
+      <div className="user-menu loading">
+        <div className="throbber"></div>
+      </div>
+    );
+  }
+
+  if (!isLoggedin) {
+
+    return (
+      <div className="user-menu" onClick={ login }>
+        <span className="label"></span>
+        <span className="extra">Sign In</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="user-menu authorized" onClick={ logout }>
+      <span className="label"></span>
+      <span className="extra">Sign Out</span>
+      <span className="img">
+        <img alt="Avatar" src={ user.avatar_URL } />
+      </span>
+    </div>
+  );
+}
+
+export default connect(
+  state => {
+    return {
+      isReady: isReady(state),
+      isLoggedin: isLoggedin(state),
+      user: getUser(state)
+    };
+  },
+  { login, logout }
+)(UserMenu);

src/components/user-menu/style.css

@@ -0,0 +1,112 @@
+.user-menu {
+  position: relative;
+  padding: 10px 0;
+  font-size: 14px;
+  color: hsl(201,60%,100%);
+  background-color: hsl(202,68%,44%);
+  cursor: pointer;
+  flex-shrink: 0;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.user-menu .label, .user-menu .extra {
+  vertical-align: middle;
+  line-height: 24px;
+  color: #FFF;
+}
+
+
+.user-menu:active, .user-menu.active {
+  color: hsl(201,60%,70%);
+  background-color: hsl(201,60%,100%);
+}
+
+.user-menu:hover, .user-menu:focus {
+  outline: none;
+  background-color: hsl(201,60%,70%);
+  color: #FFF;
+}
+
+.user-menu .label::before {
+  font-family: Genericons, Noticons;
+  display: inline-block;
+  position: relative;
+  content: '\f427';
+  font-size: 24px;
+  vertical-align: -6px;
+  text-align: center;
+  left: 0px;
+  padding: 0;
+  width: 44px;
+}
+
+.user-menu .img {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: transparent;
+}
+
+.user-menu .img img {
+  display: block;
+  width: 44px;
+  height: 44px;
+  opacity: 0;
+  transition: opacity 200ms 200ms;
+  -webkit-transition: opacity 200ms 200ms;
+  -moz-transition: opacity 200ms 200ms;
+}
+
+.user-menu.authorized .label::before {
+  content: '\f470';
+  left: 0;
+  width: 44px;
+}
+
+.user-menu.authorized .extra {
+  position: relative;
+  left: -3px;
+}
+
+.user-menu.loading {
+  min-width: 88px;
+  justify-content: center;
+  cursor: default;
+}
+
+.user-menu.loading:hover, .user-menu.loading:focus {
+  outline: none;
+  background-color: hsl(201,60%,60%);
+}
+
+.user-menu .extra {
+  display: inline-block;
+  width: 0;
+  overflow: hidden;
+  transition: 200ms 100ms;
+  opacity: 0;
+  white-space: nowrap;
+}
+
+.user-menu:hover .extra, .user-menu:focus .extra {
+  opacity: 1;
+  width: 64px;
+}
+
+.user-menu.authorized:hover .extra, .user-menu.authorized:focus .extra {
+  opacity: 1;
+  width: 110px;
+}
+
+.user-menu:hover img, .user-menu:focus img {
+  opacity: 0.9;
+}
+
+.throbber {
+  padding: 0 18px;
+  display: inline-block;
+}

src/config.sample.json

@@ -0,0 +1,4 @@
+{
+    "client_id": "12345",
+    "redirect_uri": "http://example.com/path/to/app"
+}