GitHub User-Profile page

README.md

@@ -44,4 +44,4 @@ Now, issuing a `git remove -v` you should see:
 
 ## Voilà!
 
-You should now be able to run `grunt server`
+You should now be able to run `grunt server` or `node --debug server.js` if you want node.js with express.

app/index.html

@@ -32,6 +32,22 @@
 <script src="bower_components/json3/lib/json3.min.js"></script>
 <![endif]-->
 
+<!-- Top Navigation -->
+<div class="navbar" xbs-navbar>
+  <div class="navbar-inner">
+    <a class="brand" href="#/">SBJS.org</a>
+    <ul class="nav">
+      <!-- You can use regular expressions. -->
+      <!-- don't panic if this looks sorta broken -->
+      <!-- Issue filed on GH @ https://github.com/mgcrea/angular-strap/issues/208 -->
+      <li data-match-route="/profile"><a href="#/profile">Profile</a></li>
+      <li data-match-route="/members"><a href="#/members">Members</a></li>
+      <li data-match-route="/fire"><a href="#/fire">Fire</a></li>
+      <li data-match-route="/registration"><a href="#/registration">Become a Member</a></li>
+    </ul>
+  </div>
+</div>
+
 <!-- Add your site or application content here -->
 <div class="container" ng-view=""></div>
 
@@ -57,14 +73,25 @@
 <script src="bower_components/angular-resource/angular-resource.js"></script>
 <script src="bower_components/angular-cookies/angular-cookies.js"></script>
 <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
-<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+<!-- <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> -->
+<script src="bower_components/angular-strap/dist/angular-strap.js"></script>
+<script src="bower_components/jquery/jquery.js"></script>
+<script src="bower_components/underscore/underscore.js"></script>
+<script src="https://cdn.firebase.com/v0/firebase.js"></script>
+<script src="bower_components/angular-fire/angularFire.js"></script>
+
 <!-- endbuild -->
 
 <!-- build:js({.tmp,app}) scripts/scripts.js -->
 <script src="scripts/app.js"></script>
 <script src="scripts/lib/utils.js"></script>
 <script src="scripts/controllers/main.js"></script>
+<script src="scripts/controllers/profile.js"></script>
+<script src="scripts/controllers/members.js"></script>
+<script src="scripts/services/auth.js"></script>
 
+<script src="scripts/controllers/registration.js"></script>
+<script src="scripts/controllers/fire.js"></script>
 <!-- endbuild -->
 </body>
 </html>

app/scripts/app.js

@@ -1,11 +1,45 @@
 'use strict';
 
-angular.module('sbjsApp', [])
-  .config(function ($routeProvider) {
+angular.module('sbjsApp', ['ngCookies','$strap.directives','firebase'])
+  .config(function ($routeProvider, $httpProvider) {
     $routeProvider
-      .when('/', {templateUrl: 'views/main.html',controller: 'MainCtrl'})
-      .when('/auth', {templateUrl: 'views/auth.html',controller: 'AuthCtrl'})
-      .otherwise({
-        redirectTo: '/'
-      });
-  });
+      .when('/', {templateUrl: 'views/main.html', controller: 'MainCtrl' })
+      .when('/auth', {templateUrl: 'views/auth.html', controller: 'AuthCtrl' })
+      .when('/profile', {templateUrl: 'views/profile.html', controller: 'ProfileCtrl' })
+      .when('/members', {templateUrl: 'views/members.html', controller: 'MembersCtrl' })
+      .when('/registration', {templateUrl: 'views/registration.html', controller: 'RegistrationCtrl' })
+      .when('/fire', { templateUrl: 'views/fire.html', controller: 'FireCtrl' })
+      .otherwise({redirectTo: '/'});
+
+    //Interceptor is used in case the token becomes invalid while the session is active.
+    var interceptor = ['$location', '$q', function($location, $q) {
+      function success(response) {
+        return response;
+      }
+
+      function error(response) {
+        if(response.status === 401) {
+          $location.path('/');
+          return $q.reject(response);
+        }
+        else {
+          return $q.reject(response);
+        }
+      }
+
+      return function(promise) {
+        return promise.then(success, error);
+      };
+    }];
+
+    $httpProvider.responseInterceptors.push(interceptor);
+  })
+  .run(['$rootScope', '$location', 'auth', function ($rootScope, $location, auth) {
+    $rootScope.$on('$routeChangeStart', function (event, next, current) {
+      //this is called every time a route changed
+      if (!auth.getToken()) {
+        //redirect to login if we can't get a valid token
+        $location.path('/');
+      }
+    });
+  }]);

app/scripts/controllers/fire.js

@@ -0,0 +1,25 @@
+'use strict';
+
+angular.module('sbjsApp')
+  .controller('FireCtrl', function ($scope, angularFire) {
+
+    $scope.notes = [];
+    var url = 'https://sbjs.firebaseio.com/notes';
+    var promise = angularFire(url, $scope, 'notes', [])
+    .then( function(todos){
+      startWatch($scope);
+    });
+  }
+);
+
+
+function startWatch($scope) {
+  $scope.addNote = function(){
+    var note = {
+      'githubUserId': 'HardCoded',
+      'message': $scope.newMessage
+    };
+    $scope.notes.push(note);
+    $scope.newMessage = '';
+  };
+}

app/scripts/controllers/main.js

@@ -1,32 +1,15 @@
 'use strict';
 
 angular.module('sbjsApp')
-    .controller('MainCtrl', function ($scope, utils) {
-        console.log("MainCtrl.location: ", location);
-        console.log("MainCtrl.location.search: ", location.search);
-        var queryParams = location.search
-        var params = utils.getParamsFromString(location.search);
-        console.log("MainCtrl.params.code: ", params);
-        console.log("MainCtrl.params.code: ", params.code);
-
-        if(params.code){
-
-        }
-        // http://localhost/?code=537fb3f6697752be4951
-        $scope.awesomeThings = [
-            'HTML5 Boilerplate',
-            'AngularJS',
-            'Karma'
-        ];
-    })
-    .controller('AuthCtrl', function ($scope) {
-        console.log("AuthCtrl.location: ", location);
-        console.log("AuthCtrl.location.search: ", location.search);
-
-        // http://localhost/?code=537fb3f6697752be4951
-        $scope.awesomeThings = [
-            'HTML5 Boilerplate',
-            'AngularJS',
-            'Karma'
-        ];
-    });
+.controller('MainCtrl', function ($scope, utils) {
+  var options = ['client_id=f9aa961f63df8c7b766a','scope=user,user:email,public_repo'];
+  $scope.githubLoginUrl = 'https://github.com/login/oauth/authorize?'+options.join('&');
+
+  //debug
+  console.log('MainCtrl.location: ', location);
+  console.log('MainCtrl.location.search: ', location.search);
+  // var queryParams = location.search;
+  var params = utils.getParamsFromString(location.search);
+  console.log('MainCtrl.params.code: ', params);
+  console.log('MainCtrl.params.code: ', params.code);
+});

app/scripts/controllers/members.js

@@ -0,0 +1,7 @@
+'use strict';
+
+angular.module('sbjsApp')
+	.controller('MembersCtrl', function($scope, auth){
+		$scope.members = auth.fetchMembers();
+	}
+);

app/scripts/controllers/profile.js

@@ -0,0 +1,7 @@
+'use strict';
+
+angular.module('sbjsApp')
+	.controller('ProfileCtrl', function($scope, auth){
+		$scope.profile = auth.fetchUserProfile();
+	}
+);

app/scripts/controllers/registration.js

@@ -0,0 +1,12 @@
+'use strict';
+
+angular.module('sbjsApp')
+.controller('RegistrationCtrl', function ($scope, $http, $cookies) {
+  $scope.forkMembersRepo = function(){
+    // code to POST fork sbjs members repo
+    var url = 'https://api.github.com/repos/sbjs/sbjs.profiles/forks?access_token='+$cookies.token;
+    $http.post(url, {}).then(function(res){
+      console.log('success!');
+    });
+  };
+});

app/scripts/lib/utils.js

@@ -1,23 +1,25 @@
 'use strict';
 
 angular.module('sbjsApp')
-    .service('utils', function(){
-        this.getParamsFromString = function (paramString) {
-            // From: http://stackoverflow.com/a/2880929/39758
-            if(paramString.charAt(0) == '?'){
-                paramString = paramString.substring(1);
-            }
-            var match,
-                pl     = /\+/g,  // Regex for replacing addition symbol with a space
-                search = /([^&=]+)=?([^&]*)/g,
-                decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
-                query  = paramString,//.substring(1),
-                urlParams = {};
+.service('utils', function($cookies, $location){
 
-            while (match = search.exec(query))
-                urlParams[decode(match[1])] = decode(match[2]);
-            return urlParams;
-        };
-    });
+  this.getParamsFromString = function (paramString) {
+  // From: http://stackoverflow.com/a/2880929/39758
+    if(paramString.charAt(0) === '?'){
+      paramString = paramString.substring(1);
+    }
+    var match,
+    pl     = /\+/g,  // Regex for replacing addition symbol with a space
+    search = /([^&=]+)=?([^&]*)/g,
+    decode = function (s) { return decodeURIComponent(s.replace(pl, ' ')); },
+    query  = paramString,//.substring(1),
+    urlParams = {};
+
+    while ((match = search.exec(query))){
+      urlParams[decode(match[1])] = decode(match[2]);
+    }
+    return urlParams;
+  };
+});
 
 

app/scripts/services/auth.js

@@ -0,0 +1,40 @@
+'use strict';
+
+angular.module('sbjsApp')
+.service('auth', function auth($cookies, $http, $location) {
+  this.GITHUB_BASE_URL = "https://api.github.com";
+
+  this.getToken = function(){
+    var access_token = $location.search().access_token;
+    if (access_token && access_token !== "undefined"){
+      $cookies.token = $location.search().access_token;
+      $location.search('access_token', null);
+    }
+    // if we dont have a token, redirect to home to authenticate
+    if(!$cookies.token) {
+      $location.path( '/' );
+    }
+    return $cookies.token;
+  };
+
+  this.parseUser = function(result){
+    var user = result.data;
+    user.avatar_url += "&s=420";
+    return user;
+  };
+
+  this.fetchUserProfile = function(){
+    var url = this.GITHUB_BASE_URL + '/user?access_token=' + this.getToken();
+    return $http.get(url).then(this.parseUser);
+  };  
+
+  this.parseMembers = function(result){
+    return _.pluck(result.data, 'owner');
+  };
+
+  this.fetchMembers = function(){
+    var url = this.GITHUB_BASE_URL + '/repos/sbjs/sbjs.profiles/forks?access_token=' + this.getToken();
+    return $http.get(url).then(this.parseMembers);
+  }
+
+});

app/styles/main.css

@@ -19,4 +19,27 @@ body {
     font-size: 60px;
     line-height: 1;
     letter-spacing: -1px;
+    margin: 10px auto;
+}
+
+.profile { width: 430px; }
+
+.profile table tr th{
+    text-align: left;
+    width:  150px;
+}
+
+.members { width: 400px; }
+
+.members ul { margin: 0; }
+.members li { list-style: none; }
+.members a { text-decoration: none; }
+.members li .thumbnail {
+    width: 80px;
+    display: inline-block;
+}
+
+.members h2 {
+    display: inline-block;
+    margin: 10px 0 10px 10px;
 }

app/views/fire.html

@@ -0,0 +1,8 @@
+<div class="notes">
+  <div class="note well" ng-repeat="note in notes">
+    <h2>{{note.githubUserId}}</h2>
+    <div>{{note.message}}</div>
+  </div>
+  <textarea ng-model="newMessage"></textarea>
+  <button ng-click="addNote()">Add Note</button>
+</div>

app/views/main.html

@@ -1,5 +1,4 @@
 <div class="hero-unit">
-    <h1>Welcome to SBJS</h1>
-    <h2><a href="https://github.com/login/oauth/authorize?client_id=f9aa961f63df8c7b766a&scope=user,user:email,public_repo&redirect_uri=http://localhost:9000">Login to Github </a></h2>
-    <h2><a href="/?code=537fb3f6697752be4951">Pretend Token</a></h2>
+  <h1>Welcome to SBJS</h1>
+  <a href="{{githubLoginUrl}}" class="btn btn-primary btn-large btn-block">Login to Github</a>
 </div>

app/views/members.html

@@ -0,0 +1,11 @@
+<div class="hero-unit members">
+  <h1>Members</h1>
+  <ul class="well">
+    <li ng-repeat="member in members">
+      <a href="{{ member.html_url }}" target="_blank">
+      	<img class="thumbnail" src="{{ member.avatar_url }}">
+  	    <h2>{{ member.login }}</h2>
+      </a>
+    </li>
+  </ul>
+</div>

app/views/profile.html

@@ -0,0 +1,20 @@
+<div class="hero-unit profile">
+  <img class="thumbnail" src="{{profile.avatar_url}}">
+  <h1>{{profile.login}}</h1>
+  <div class="well">
+    <table>
+      <tr>
+        <th>Name:</th>
+        <td>{{profile.name}}</td>
+      </tr>
+      <tr>
+        <th>Location:</th>
+        <td>{{profile.location}}</td>
+      </tr>
+      <tr>
+        <th>Public Repos:</th>
+        <td>{{profile.public_repos}}</td>
+      </tr>
+    </table>
+  </div>
+</div>

app/views/registration.html

@@ -0,0 +1,7 @@
+<h1>Become a Member</h1>
+
+<p>It's simple. Fork the sbjs.profiles repo. This will add you to our <a href="#/members">Members</a> page.</p>
+
+<div ng-controller="RegistrationCtrl">
+  <button class="btn btn-medium btn-primary" ng-click="forkMembersRepo()">Fork SBJS.profiles</button>
+</div>

bower.json

@@ -9,7 +9,11 @@
     "es5-shim": "~2.0.8",
     "angular-resource": "~1.0.7",
     "angular-cookies": "~1.0.7",
-    "angular-sanitize": "~1.0.7"
+    "angular-sanitize": "~1.0.7",
+    "angular-bootstrap": "*",
+    "angular-strap": "*",
+    "underscore": "*",
+    "angular-fire":"*"
   },
   "devDependencies": {
     "angular-mocks": "~1.0.7",

github.conf.json

@@ -0,0 +1,5 @@
+{
+  "client_id": "f9aa961f63df8c7b766a",
+  "redirect_uri":"",
+  "client_secret": "CUT_AND_PASTE YOUR CLIENT SECRET HERE. ACTUALLY USE THE BUILD SCRIPTS DONT CHECK THIS IN!"
+}