Parse.com + Angular.js + Login (+ OAuth.js)

account-controller.js

'use strict';

/**
 * AccountController allows the User to change settings, link with their GitHub accounts, etc
 */

skeletonApp.controller('AccountController', [
  '$scope', '$location', '$rootScope', 'OAuthService', 'ParseService', function($scope, $location, $rootScope, OAuthService, ParseService) {

  // redirect to "/login" if user is not logged in
  if ($rootScope.loggedIn() !== true) {
    $location.path("/login");
  }

  $scope.alreadyLinkedWithGithub = function() {
    // if user is not logged in, just return false
    if ($rootScope.loggedIn() !== true) {
      return false;
    }

    if ($rootScope.currentUser.get("githubAccessToken") === null) {
      return false;
    } else {
      return true;
    }
  }

  $scope.loginWithGithub = function() {

    OAuth.popup('github', function(error, result) {
      $rootScope.$apply(function() {
        if (error === null) {
          // success

          $rootScope.currentUser.save({
            githubAccessToken: result.access_token
          },{
            success: function(userAgain) {
              $rootScope.currentUser = userAgain;
            },
            error: function(userAgain, error) {
              alert("Error: " + error.message);
            }
          });

        } else {
          // error
          alert("Error logging into GitHub");
        }
      });
    });
  };

}]);

account.html

<!-- 
Should linked to LoginController using $routeProvider. Something like this:

  $routeProvider.when("/account", {
    controller: 'AccountController',
    templateUrl: 'views/account.html'
  });

-->

<button ng-hide="alreadyLinkedWithGithub()" ng-click="loginWithGithub()">Log In with GitHub</button>

<div ng-show="alreadyLinkedWithGithub()">
  Already logged in with GitHub
</div>

index.html

<!-- snip -->
<ul class="nav navbar-nav">
  <li ng-cloak ng-show="loggedIn()"><a href="#account">{{ currentUser.get("username") }}</a></li>
  <li ng-cloak ng-show="loggedIn()"><a href="#" ng-click="logout()">Log out</a></li>
  <li ng-cloak ng-hide="loggedIn()"><a href="#login">Log in</a></li>
</ul>
<!-- snip -->

login-controller.js

'use strict';

/**
 * LoginController
 */
skeletonApp.controller('LoginController', 
  ['$scope', 'ParseService', '$location', '$rootScope', function($scope, ParseService, $location, $rootScope) {

  // redirect to "/" if user is already logged in
  if ($rootScope.loggedIn() === true) {
    $location.path("/");
  }

  function loginSuccessful(user) {
    $rootScope.$apply(function() {
      $rootScope.currentUser = Parse.User.current();
      $location.path("/");
    });
  }

  function loginUnsuccessful(user, error) {
    alert("Error: " + error.message + " (" + error.code + ")");
  }

  $scope.login = function() {    
    var username = $scope.login.username;
    var password = $scope.login.password;

    Parse.User.logIn(username, password, {
      success: loginSuccessful,
      error: loginUnsuccessful
    });
  };

}]);

login.html

<!-- 
Should linked to LoginController using $routeProvider. Something like this:

  $routeProvider.when("/login", {
    controller: 'LoginController',
    templateUrl: 'views/login.html'
  });

-->
<form ng-submit="login()">
  <fieldset>
    <label>Username:</label>
    <input type="text" class="span3" ng-model="login.username" required />
    <label>Password:</label>
    <input type="password" ng-model="login.password" required />
    <input type="submit" value="Log in" class="btn btn-orange" />
   </fieldset>
 </form>

parse-service.js

'use strict';

skeletonApp.service('ParseService', [function() {
  var app_id = "1234";
  var js_key = "5678";
  Parse.initialize(app_id, js_key);
}]);

root-controller.js

'use strict';

/**
 * Base controller at the root of the inheritance tree.
 */
skeletonApp.controller('RootController', [
  '$scope', '$location', '$rootScope', 'ParseService', function($scope, $location, $rootScope, ParseService) {

  $rootScope.currentUser = Parse.User.current();

  $rootScope.loggedIn = function() {
    if ($rootScope.currentUser === null) {
      return false;
    } else {
      return true;
    }
  };

  $scope.logout = function() {
    $rootScope.currentUser = null;
    Parse.User.logOut();
  };

}]);