Initial Commit

client/components/oauth-buttons/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+import angular from 'angular';
+
+export function OauthButtonsController($window) {
+  'ngInject';
+
+  this.loginOauth = function(provider) {
+    $window.location.href = `/auth/${provider}`;
+  };
+}
+
+export default angular.module('app2App.oauthButtons', [])
+  .directive('oauthButtons', function() {
+    return {
+      template: require('./oauth-buttons.html'),
+      restrict: 'EA',
+      controller: OauthButtonsController,
+      controllerAs: 'OauthButtons',
+      scope: {
+        classes: '@'
+      }
+    };
+  })
+  .name;

client/components/oauth-buttons/oauth-buttons.controller.spec.js

@@ -0,0 +1,32 @@
+'use strict';
+
+import {
+  OauthButtonsController
+} from './index';
+
+describe('Controller: OauthButtonsController', function() {
+  var controller, $window;
+
+  beforeEach(() => {
+    angular.module('test', [])
+      .controller('OauthButtonsController', OauthButtonsController);
+  });
+  // load the controller's module
+  beforeEach(angular.mock.module('test'));
+
+  // Initialize the controller and a mock $window
+  beforeEach(inject(function($controller) {
+    $window = {
+      location: {}
+    };
+
+    controller = $controller('OauthButtonsController', {
+      $window
+    });
+  }));
+
+  it('should attach loginOauth', function() {
+    expect(controller.loginOauth)
+      .to.be.a('function');
+  });
+});

client/components/oauth-buttons/oauth-buttons.css

@@ -0,0 +1 @@
+

client/components/oauth-buttons/oauth-buttons.directive.spec.js

@@ -0,0 +1,59 @@
+'use strict';
+
+const $ = require('sprint-js');
+import OauthButtons from './index';
+
+describe('Directive: oauthButtons', function() {
+  // load the directive's module and view
+  beforeEach(angular.mock.module(OauthButtons));
+  // beforeEach(angular.mock.module('components/oauth-buttons/oauth-buttons.html'));
+
+  var element, parentScope, elementScope;
+
+  var compileDirective = function(template) {
+    inject(function($compile) {
+      element = angular.element(template);
+      element = $compile(element)(parentScope);
+      parentScope.$digest();
+      elementScope = element.isolateScope();
+    });
+  };
+
+  beforeEach(inject(function($rootScope) {
+    parentScope = $rootScope.$new();
+  }));
+
+  it('should contain anchor buttons', function() {
+    compileDirective('<oauth-buttons></oauth-buttons>');
+    expect($(element[0])
+        .find('a.btn.btn-social')
+        .length)
+      .to.be.at.least(1);
+  });
+
+  it('should evaluate and bind the classes attribute to scope.classes', function() {
+    parentScope.scopedClass = 'scopedClass1';
+    compileDirective('<oauth-buttons classes="testClass1 {{scopedClass}}"></oauth-buttons>');
+    expect(elementScope.classes)
+      .to.equal('testClass1 scopedClass1');
+  });
+
+  it('should bind scope.classes to class names on the anchor buttons', function() {
+    compileDirective('<oauth-buttons></oauth-buttons>');
+    // Add classes
+    elementScope.classes = 'testClass1 testClass2';
+    elementScope.$digest();
+    expect($(element[0])
+        .find('a.btn.btn-social.testClass1.testClass2')
+        .length)
+      .to.be.at.least(1);
+
+    // Remove classes
+    elementScope.classes = '';
+    elementScope.$digest();
+    expect($(element[0])
+        .find('a.btn.btn-social.testClass1.testClass2')
+        .length)
+      .to.equal(0);
+  });
+});

client/components/oauth-buttons/oauth-buttons.html

@@ -0,0 +1,9 @@
+<a ng-class="classes" ng-click="OauthButtons.loginOauth('facebook')" class="btn btn-social btn-facebook">
+  <i class="fa fa-facebook"></i>
+  Connect with Facebook
+</a>
+<a ng-class="classes" ng-click="OauthButtons.loginOauth('google')" class="btn btn-social btn-google">
+  <i class="fa fa-google-plus"></i>
+  Connect with Google+
+</a>
+