Auth now works. Added user profile panel with gravatar.

assets/js/components/MainList.react.js

@@ -1,5 +1,7 @@
 var React = require('react');
 
+var md5 = require('blueimp-md5').md5;
+
 class MainList extends React.Component
 {
     componentDidMount()
@@ -20,24 +22,68 @@ class MainList extends React.Component
 
     render()
     {
+        var loginLogoutButton = () => {
+            if(this.props.loggedIn === true)
+            {
+                return (
+                    <div>
+                    <a target="_blank" href="https://wakatime.com/settings/rules" className="list-group-item">
+                        <i className="fa fa-fw fa-filter"></i> Custom Rules
+                    </a>
+                    <a target="_blank" href="https://wakatime.com/dashboard" className="list-group-item">
+                        <i className="fa fa-fw fa-tachometer"></i> Dashboard
+                    </a>
+                    <a href="#" className="list-group-item" onClick={this.props.logoutUser}>
+                        <i className="fa fa-fw fa-sign-out"></i> Logout
+                    </a>
+                    </div>
+                );
+            }
+
+            return (
+                <a target="_blank" href="https://wakatime.com/login" className="list-group-item">
+                    <i className="fa fa-fw fa-sign-in"></i> Login
+                </a>
+            );
+        };
+
+        var signedInAs = () => {
+            if(this.props.loggedIn === true)
+            {
+                var src = "https://secure.gravatar.com/avatar/" + md5(this.props.user.email) + "/?s=48";
+
+                return (
+                    <div className="panel panel-default">
+                        <div className="panel-body">
+                            <div className="row">
+                                <div className="col-xs-2">
+                                    <img className="img-circle" src={src} />
+                                </div>
+                                <div className="col-xs-10">
+                                    Signed in as <b>{this.props.user.full_name}</b><br />
+                                    {this.props.user.email}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                );
+            }
+        };
+
         return(
-            <div className="list-group">
+            <div>
-                <a href="#" className="list-group-item" onClick={this._openOptionsPage}>
+
-                    Options
+                {signedInAs()}
-                </a>
+
-                <a href="#" className="list-group-item">
+                <div className="list-group">
-                    Custom Rules
+                    <a href="#" className="list-group-item" onClick={this._openOptionsPage}>
-                </a>
+                        <i className="fa fa-fw fa-cogs"></i> Options
-                <a href="#" className="list-group-item">
+                    </a>
-                    Dashboard
+
-                </a>
+                    {loginLogoutButton()}
-                <a href="#" className="list-group-item">
+
-                    Login
+                </div>
-                </a>
+            </div>
-                <a href="#" className="list-group-item">
-                    Logout
-                </a>
-          </div>
         );
     }
 }

assets/js/components/Navbar.react.js

@@ -3,7 +3,6 @@ var React = require('react');
 class Navbar extends React.Component{
 
     render() {
-
         return (
             <nav className="navbar navbar-default" role="navigation">
                 <div className="container-fluid">
@@ -19,10 +18,6 @@ class Navbar extends React.Component{
                     </div>
                     <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                         <ul className="nav navbar-nav">
-                            <li>
-                                <a href="#">Singed in as Mark Otto</a>
-                            </li>
-
                             <li className="dropdown">
                                 <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                     <i className="fa fa-fw fa-info"></i>

assets/js/components/WakaTime.react.js

@@ -1,4 +1,5 @@
 var React = require("react");
+var $ = require('jquery');
 
 var NavBar = require('./NavBar.react');
 var MainList = require('./MainList.react');
@@ -7,6 +8,19 @@ var changeExtensionIcon = require('../helpers/changeExtensionIcon');
 
 class WakaTime extends React.Component
 {
+    currentUserApiUrl = 'https://wakatime.com/api/v1/users/current';
+
+    logoutUserUrl = 'https://wakatime.com/logout';
+
+    state = {
+        user: {
+            full_name: null,
+            email: null,
+            photo: null
+        },
+        loggedIn: false
+    };
+
     componentDidMount()
     {
       chrome.storage.sync.get({
@@ -19,6 +33,96 @@ class WakaTime extends React.Component
           changeExtensionIcon('white');
         }
       });
+
+      this.checkAuth().done(data => {
+
+          if(data !== false){
+
+              this.setState({
+                  user: {
+                      full_name: data.full_name,
+                      email: data.email,
+                      photo: data.photo
+                  },
+                  loggedIn: true
+              });
+
+              changeExtensionIcon();
+
+          }
+          else {
+
+              changeExtensionIcon('red');
+
+              //TODO: Redirect user to wakatime login page.
+              //
+          }
+      });
+
+    }
+
+    checkAuth()
+    {
+        var deferredObject = $.Deferred();
+
+        $.ajax({
+            url: this.currentUserApiUrl,
+            dataType: 'json',
+            success: (data) =>  {
+
+                deferredObject.resolve(data.data);
+
+            },
+            error: (xhr, status, err) => {
+
+                console.error(this.currentUserApiUrl, status, err.toString());
+
+                deferredObject.resolve(false);
+            }
+        });
+
+        return deferredObject.promise();
+    }
+
+    logoutUser()
+    {
+        var deferredObject = $.Deferred();
+
+        $.ajax({
+            url: this.logoutUserUrl,
+            method: 'GET',
+            success: () =>  {
+
+                deferredObject.resolve(this);
+
+            },
+            error: (xhr, status, err) => {
+
+                console.error(this.logoutUserUrl, status, err.toString());
+
+                deferredObject.resolve(this);
+            }
+        });
+
+        return deferredObject.promise();
+    }
+
+    _logoutUser()
+    {
+        this.logoutUser().done(() => {
+
+            this.setState({
+                user: {
+                    full_name: null,
+                    email: null,
+                    photo: null
+                },
+                loggedIn: false
+            });
+
+            changeExtensionIcon('red');
+
+        });
     }
 
     render()
@@ -29,7 +133,7 @@ class WakaTime extends React.Component
                 <div className="container">
                     <div className="row">
                         <div className="col-md-12">
-                            <MainList />
+                            <MainList user={this.state.user} logoutUser={this._logoutUser.bind(this)} loggedIn={this.state.loggedIn} />
                         </div>
                     </div>
                 </div>

gulpfile.js

@@ -19,7 +19,7 @@ elixir(function (mix) {
     mix.copy('vendor/bower_components/font-awesome/less', 'assets/less/font-awesome');
     mix.copy('vendor/bower_components/font-awesome/fonts', 'public/fonts');
     mix.less('app.less');
-    //mix.browserify('app.js', null, 'assets/js');
+    mix.browserify('app.js', null, 'assets/js');
     //mix.browserify('events.js', 'public/js/events.js', 'assets/js');
-    mix.browserify('options.js', 'public/js/options.js', 'assets/js');
+    //mix.browserify('options.js', 'public/js/options.js', 'assets/js');
 });

manifest.json

@@ -9,6 +9,8 @@
     "128": "graphics/wakatime-logo-128.png"
   },
   "permissions": [
+    "https://wakatime.com/api/v1/users/current",
+    "https://wakatime.com/logout",
     "alarms",
     "tabs",
     "storage"

package.json

@@ -5,6 +5,7 @@
     "laravel-elixir": "*"
   },
   "dependencies": {
+    "blueimp-md5": "^1.1.0",
     "bootstrap": "^3.3.4",
     "jquery": "^2.1.3",
     "react": "^0.13.1"