From f37089a989e3245c8c02fd30c11c26d090e92cbb Mon Sep 17 00:00:00 2001
From: kingcody <me@codymize.com>
Date: Mon, 10 Aug 2015 00:27:34 -0400
Subject: [PATCH 1/2] feat(app): implement oauth-buttons directive

---
 app/templates/Gruntfile.js                    |  3 +-
 app/templates/_bower.json                     |  3 +-
 .../app/account(auth)/login/login(html).html  | 18 +++----
 .../app/account(auth)/login/login(jade).jade  | 16 ++----
 .../app/account(auth)/login/login(less).less  | 30 -----------
 .../app/account(auth)/login/login(sass).scss  | 30 -----------
 .../account(auth)/login/login(stylus).styl    | 22 --------
 .../login/login.controller(coffee).coffee     |  5 +-
 .../login/login.controller(js).js             |  7 +--
 .../account(auth)/signup/signup(html).html    | 18 +++----
 .../account(auth)/signup/signup(jade).jade    | 17 ++-----
 .../signup/signup.controller(coffee).coffee   |  5 +-
 .../signup/signup.controller(js).js           |  7 +--
 app/templates/client/app/app(less).less       |  5 +-
 app/templates/client/app/app(sass).scss       |  8 +--
 app/templates/client/app/app(stylus).styl     |  3 +-
 .../oath-buttons(html).html                   | 12 +++++
 .../oauth-buttons(css).css}                   | 19 +++----
 .../oauth-buttons(jade).jade                  | 14 +++++
 .../oauth-buttons(less).less                  | 20 ++++++++
 .../oauth-buttons(sass).scss                  | 20 ++++++++
 .../oauth-buttons(stylus).styl                | 16 ++++++
 .../oauth-buttons.controller(coffee).coffee   |  7 +++
 .../oauth-buttons.controller(js).js           |  8 +++
 ...uth-buttons.controller.spec(coffee).coffee | 20 ++++++++
 .../oauth-buttons.controller.spec(js).js      | 25 +++++++++
 .../oauth-buttons.directive(coffee).coffee    |  9 ++++
 .../oauth-buttons.directive(js).js            | 14 +++++
 ...auth-buttons.directive.spec(coffee).coffee | 51 +++++++++++++++++++
 .../oauth-buttons.directive.spec(js).js       | 51 +++++++++++++++++++
 .../e2e/account(auth)/login/login.po.js       | 13 ++---
 .../login/login.spec(jasmine).js              | 11 +++-
 .../account(auth)/login/login.spec(mocha).js  | 11 +++-
 .../e2e/account(auth)/signup/signup.po.js     | 17 ++++---
 .../signup/signup.spec(jasmine).js            | 11 +++-
 .../signup/signup.spec(mocha).js              | 11 +++-
 .../oauth-buttons(oauth)/oauth-buttons.po.js  | 15 ++++++
 test/test-file-creation.js                    | 16 ++++--
 38 files changed, 398 insertions(+), 190 deletions(-)
 delete mode 100644 app/templates/client/app/account(auth)/login/login(less).less
 delete mode 100644 app/templates/client/app/account(auth)/login/login(sass).scss
 delete mode 100644 app/templates/client/app/account(auth)/login/login(stylus).styl
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oath-buttons(html).html
 rename app/templates/client/{app/account(auth)/login/login(css).css => components/oauth-buttons(oauth)/oauth-buttons(css).css} (61%)
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(jade).jade
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(less).less
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(sass).scss
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(stylus).styl
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller(coffee).coffee
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller(js).js
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller.spec(coffee).coffee
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller.spec(js).js
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive(coffee).coffee
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive(js).js
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive.spec(coffee).coffee
 create mode 100644 app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive.spec(js).js
 create mode 100644 app/templates/e2e/components/oauth-buttons(oauth)/oauth-buttons.po.js

diff --git a/app/templates/Gruntfile.js b/app/templates/Gruntfile.js
index 15e544a5a..483be9b3e 100644
--- a/app/templates/Gruntfile.js
+++ b/app/templates/Gruntfile.js
@@ -255,7 +255,8 @@ module.exports = function (grunt) {
           '/es5-shim/'<% if(!filters.css) { %>,
           /font-awesome\.css/<% if(filters.bootstrap) { %>,
           /bootstrap\.css/<% if(filters.sass) { %>,
-          /bootstrap-sass-official/<% }}} %>
+          /bootstrap-sass-official/<% } if(filters.oauth) { %>,
+          /bootstrap-social\.css/<% }}} %>
         ]
       },
       client: {
diff --git a/app/templates/_bower.json b/app/templates/_bower.json
index 71d2f97a3..b0de0c559 100644
--- a/app/templates/_bower.json
+++ b/app/templates/_bower.json
@@ -6,7 +6,8 @@
     "json3": "~3.3.1",
     "es5-shim": "~3.0.1",<% if(filters.bootstrap) { if (filters.sass) { %>
     "bootstrap-sass-official": "~3.1.1",<% } %>
-    "bootstrap": "~3.1.1",<% } %>
+    "bootstrap": "~3.1.1",<% if(filters.oauth) { %>
+    "bootstrap-social": "~4.9.1",<% }} %>
     "angular-resource": "~1.4.0",
     "angular-cookies": "~1.4.0",
     "angular-sanitize": "~1.4.0",<% if (filters.ngroute) { %>
diff --git a/app/templates/client/app/account(auth)/login/login(html).html b/app/templates/client/app/account(auth)/login/login(html).html
index df13e5ef2..ab1346ba6 100644
--- a/app/templates/client/app/account(auth)/login/login(html).html
+++ b/app/templates/client/app/account(auth)/login/login(html).html
@@ -41,18 +41,12 @@ <h1>Login</h1>
             Register
           </a>
         </div>
-<% if (filters.oauth) {%>
-        <hr>
-        <div><% if (filters.facebookAuth) {%>
-          <a class="btn btn-facebook" href="" ng-click="loginOauth('facebook')">
-            <i class="fa fa-facebook"></i> Connect with Facebook
-          </a><% } %><% if (filters.googleAuth) {%>
-          <a class="btn btn-google-plus" href="" ng-click="loginOauth('google')">
-            <i class="fa fa-google-plus"></i> Connect with Google+
-          </a><% } %><% if (filters.twitterAuth) {%>
-          <a class="btn btn-twitter" href="" ng-click="loginOauth('twitter')">
-            <i class="fa fa-twitter"></i> Connect with Twitter
-          </a><% } %>
+<% if (filters.oauth) { %>
+        <hr/>
+        <div class="row">
+          <div class="col-sm-4 col-md-3">
+            <oauth-buttons classes="btn-block"></oauth-buttons>
+          </div>
         </div><% } %>
       </form>
     </div>
diff --git a/app/templates/client/app/account(auth)/login/login(jade).jade b/app/templates/client/app/account(auth)/login/login(jade).jade
index 7ef7c0134..2352e8fad 100644
--- a/app/templates/client/app/account(auth)/login/login(jade).jade
+++ b/app/templates/client/app/account(auth)/login/login(jade).jade
@@ -39,16 +39,8 @@ navbar
 <% if (filters.oauth) {%>
         hr
 
-        div<% if (filters.facebookAuth) {%>
-          a.btn.btn-facebook(href='', ng-click='loginOauth("facebook")')
-            i.fa.fa-facebook
-            |  Connect with Facebook
-          = ' '<% } %><% if (filters.googleAuth) {%>
-          a.btn.btn-google-plus(href='', ng-click='loginOauth("google")')
-            i.fa.fa-google-plus
-            |  Connect with Google+
-          = ' '<% } %><% if (filters.twitterAuth) {%>
-          a.btn.btn-twitter(href='', ng-click='loginOauth("twitter")')
-            i.fa.fa-twitter
-            |  Connect with Twitter<% } %><% } %>
+        .row
+          .col-sm-4.col-md-3
+            oauth-buttons(classes='btn-block')
+<% } %>
   hr
diff --git a/app/templates/client/app/account(auth)/login/login(less).less b/app/templates/client/app/account(auth)/login/login(less).less
deleted file mode 100644
index 6eaecd90c..000000000
--- a/app/templates/client/app/account(auth)/login/login(less).less
+++ /dev/null
@@ -1,30 +0,0 @@
-<% if (filters.bootstrap) { %>// Colors
-// --------------------------------------------------
-
-@btnText:                           #fff;
-@btnTextAlt:                        #000;<% if (filters.oauth) { %>
-<% if (filters.facebookAuth) { %>
-@btnFacebookBackground:             #3B5998;
-@btnFacebookBackgroundHighlight:    #133783;<% } if (filters.twitterAuth) { %>
-@btnTwitterBackground:              #2daddc;
-@btnTwitterBackgroundHighlight:     #0271bf;<% } if (filters.googleAuth) { %>
-@btnGooglePlusBackground:           #dd4b39;
-@btnGooglePlusBackgroundHighlight:  #c53727;<% } %>
-@btnGithubBackground:               #fafafa;
-@btnGithubBackgroundHighlight:      #ccc;
-
-// Social buttons
-// --------------------------------------------------
-<% if (filters.facebookAuth) { %>
-.btn-facebook {
-  .button-variant(@btnText; @btnFacebookBackgroundHighlight; @btnFacebookBackgroundHighlight);
-}<% } if (filters.twitterAuth) { %>
-.btn-twitter {
-  .button-variant(@btnText; @btnTwitterBackground; @btnTwitterBackgroundHighlight);
-}<% } if (filters.googleAuth) { %>
-.btn-google-plus {
-  .button-variant(@btnText; @btnGooglePlusBackground; @btnGooglePlusBackgroundHighlight);
-}<% } %>
-.btn-github {
-  .button-variant(@btnTextAlt; @btnGithubBackground; @btnGithubBackgroundHighlight);
-}<% } %><% } %>
diff --git a/app/templates/client/app/account(auth)/login/login(sass).scss b/app/templates/client/app/account(auth)/login/login(sass).scss
deleted file mode 100644
index 5b6956124..000000000
--- a/app/templates/client/app/account(auth)/login/login(sass).scss
+++ /dev/null
@@ -1,30 +0,0 @@
-<% if (filters.bootstrap) { %>// Colors
-// --------------------------------------------------
-
-$btnText:                           #fff;
-$btnTextAlt:                        #000;<% if (filters.oauth) { %>
-<% if (filters.facebookAuth) { %>
-$btnFacebookBackground:             #3B5998;
-$btnFacebookBackgroundHighlight:    #133783;<% } if (filters.twitterAuth) { %>
-$btnTwitterBackground:              #2daddc;
-$btnTwitterBackgroundHighlight:     #0271bf;<% } if (filters.googleAuth) { %>
-$btnGooglePlusBackground:           #dd4b39;
-$btnGooglePlusBackgroundHighlight:  #c53727;<% } %>
-$btnGithubBackground:               #fafafa;
-$btnGithubBackgroundHighlight:      #ccc;
-
-// Social buttons
-// --------------------------------------------------
-<% if (filters.facebookAuth) { %>
-.btn-facebook {
-  @include button-variant($btnText, $btnFacebookBackgroundHighlight, $btnFacebookBackgroundHighlight);
-}<% } if (filters.twitterAuth) { %>
-.btn-twitter {
-  @include button-variant($btnText, $btnTwitterBackground, $btnTwitterBackgroundHighlight);
-}<% } if (filters.googleAuth) { %>
-.btn-google-plus {
-  @include button-variant($btnText, $btnGooglePlusBackground, $btnGooglePlusBackgroundHighlight);
-}<% } %>
-.btn-github {
-  @include button-variant($btnTextAlt, $btnGithubBackground, $btnGithubBackgroundHighlight);
-}<% } %><% } %>
diff --git a/app/templates/client/app/account(auth)/login/login(stylus).styl b/app/templates/client/app/account(auth)/login/login(stylus).styl
deleted file mode 100644
index 3dc78ee9d..000000000
--- a/app/templates/client/app/account(auth)/login/login(stylus).styl
+++ /dev/null
@@ -1,22 +0,0 @@
-<% if (filters.oauth) { %>// Social buttons
-// --------------------------------------------------
-<% if (filters.facebookAuth) { %>
-.btn-facebook
-    color: #fff;
-    background-color: #3B5998;
-    border-color: #133783;
-<% } if (filters.twitterAuth) { %>
-.btn-twitter
-    color: #fff;
-    background-color: #2daddc;
-    border-color: #0271bf;
-<% } if (filters.googleAuth) { %>
-.btn-google-plus
-    color: #fff;
-    background-color: #dd4b39;
-    border-color: #c53727;
-<% } %>
-.btn-github
-    color: #fff;
-    background-color: #fafafa;
-    border-color: #ccc;<% } %>
diff --git a/app/templates/client/app/account(auth)/login/login.controller(coffee).coffee b/app/templates/client/app/account(auth)/login/login.controller(coffee).coffee
index 7bcb69969..2ba501a42 100644
--- a/app/templates/client/app/account(auth)/login/login.controller(coffee).coffee
+++ b/app/templates/client/app/account(auth)/login/login.controller(coffee).coffee
@@ -1,7 +1,7 @@
 'use strict'
 
 angular.module '<%= scriptAppName %>'
-.controller 'LoginCtrl', ($scope, Auth<% if (filters.ngroute) { %>, $location<% } %><% if (filters.uirouter) { %>, $state<% } %><% if (filters.oauth) {%>, $window<% } %>) ->
+.controller 'LoginCtrl', ($scope, Auth<% if (filters.ngroute) { %>, $location<% } %><% if (filters.uirouter) { %>, $state<% } %>) ->
   $scope.user = {}
   $scope.errors = {}
   $scope.login = (form) ->
@@ -18,6 +18,3 @@ angular.module '<%= scriptAppName %>'
 
       .catch (err) ->
         $scope.errors.other = err.message
-<% if (filters.oauth) {%>
-  $scope.loginOauth = (provider) ->
-    $window.location.href = '/auth/' + provider<% } %>
diff --git a/app/templates/client/app/account(auth)/login/login.controller(js).js b/app/templates/client/app/account(auth)/login/login.controller(js).js
index 2417e62f4..6e9d5fd7b 100644
--- a/app/templates/client/app/account(auth)/login/login.controller(js).js
+++ b/app/templates/client/app/account(auth)/login/login.controller(js).js
@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('<%= scriptAppName %>')
-  .controller('LoginCtrl', function($scope, Auth<% if (filters.ngroute) { %>, $location<% } %><% if (filters.uirouter) { %>, $state<% } %><% if (filters.oauth) { %>, $window<% } %>) {
+  .controller('LoginCtrl', function($scope, Auth<% if (filters.ngroute) { %>, $location<% } %><% if (filters.uirouter) { %>, $state<% } %>) {
     $scope.user = {};
     $scope.errors = {};
 
@@ -22,8 +22,5 @@ angular.module('<%= scriptAppName %>')
         });
       }
     };
-<% if (filters.oauth) {%>
-    $scope.loginOauth = function(provider) {
-      $window.location.href = '/auth/' + provider;
-    };<% } %>
+
   });
diff --git a/app/templates/client/app/account(auth)/signup/signup(html).html b/app/templates/client/app/account(auth)/signup/signup(html).html
index 0a95a7546..84f4451e0 100644
--- a/app/templates/client/app/account(auth)/signup/signup(html).html
+++ b/app/templates/client/app/account(auth)/signup/signup(html).html
@@ -74,18 +74,12 @@ <h1>Sign up</h1>
             Login
           </a>
         </div>
-<% if (filters.oauth) {%>
-        <hr>
-        <div><% if (filters.facebookAuth) {%>
-          <a class="btn btn-facebook" href="" ng-click="loginOauth('facebook')">
-            <i class="fa fa-facebook"></i> Connect with Facebook
-          </a><% } %><% if (filters.googleAuth) {%>
-          <a class="btn btn-google-plus" href="" ng-click="loginOauth('google')">
-            <i class="fa fa-google-plus"></i> Connect with Google+
-          </a><% } %><% if (filters.twitterAuth) {%>
-          <a class="btn btn-twitter" href="" ng-click="loginOauth('twitter')">
-            <i class="fa fa-twitter"></i> Connect with Twitter
-          </a><% } %>
+<% if (filters.oauth) { %>
+        <hr/>
+        <div class="row">
+          <div class="col-sm-4 col-md-3">
+            <oauth-buttons classes="btn-block"></oauth-buttons>
+          </div>
         </div><% } %>
       </form>
     </div>
diff --git a/app/templates/client/app/account(auth)/signup/signup(jade).jade b/app/templates/client/app/account(auth)/signup/signup(jade).jade
index 2b9fda0c5..139dd2941 100644
--- a/app/templates/client/app/account(auth)/signup/signup(jade).jade
+++ b/app/templates/client/app/account(auth)/signup/signup(jade).jade
@@ -53,20 +53,11 @@ navbar
           = ' '
           a.btn.btn-default.btn-lg.btn-login(<% if (filters.uirouter) { %>ui-sref='login'<% } else { %>href='/login'<% } %>)
             | Login
-
 <% if (filters.oauth) {%>
         hr
 
-        div<% if (filters.facebookAuth) {%>
-          a.btn.btn-facebook(href='', ng-click='loginOauth("facebook")')
-            i.fa.fa-facebook
-            |  Connect with Facebook
-          = ' '<% } %><% if (filters.googleAuth) {%>
-          a.btn.btn-google-plus(href='', ng-click='loginOauth("google")')
-            i.fa.fa-google-plus
-            |  Connect with Google+
-          = ' '<% } %><% if (filters.twitterAuth) {%>
-          a.btn.btn-twitter(href='', ng-click='loginOauth("twitter")')
-            i.fa.fa-twitter
-            |  Connect with Twitter<% } %><% } %>
+        .row
+          .col-sm-4.col-md-3
+            oauth-buttons(classes='btn-block')
+<% } %>
   hr
diff --git a/app/templates/client/app/account(auth)/signup/signup.controller(coffee).coffee b/app/templates/client/app/account(auth)/signup/signup.controller(coffee).coffee
index d167b7e30..68952a74d 100644
--- a/app/templates/client/app/account(auth)/signup/signup.controller(coffee).coffee
+++ b/app/templates/client/app/account(auth)/signup/signup.controller(coffee).coffee
@@ -1,7 +1,7 @@
 'use strict'
 
 angular.module '<%= scriptAppName %>'
-.controller 'SignupCtrl', ($scope, Auth<% if (filters.ngroute) { %>, $location<% } %><% if (filters.uirouter) { %>, $state<% } %><% if (filters.oauth) {%>, $window<% } %>) ->
+.controller 'SignupCtrl', ($scope, Auth<% if (filters.ngroute) { %>, $location<% } %><% if (filters.uirouter) { %>, $state<% } %>) ->
   $scope.user = {}
   $scope.errors = {}
   $scope.register = (form) ->
@@ -31,6 +31,3 @@ angular.module '<%= scriptAppName %>'
           angular.forEach err.fields, (field) ->
             form[field].$setValidity 'mongoose', false
             $scope.errors[field] = err.message<% } %>
-<% if (filters.oauth) {%>
-  $scope.loginOauth = (provider) ->
-    $window.location.href = '/auth/' + provider<% } %>
diff --git a/app/templates/client/app/account(auth)/signup/signup.controller(js).js b/app/templates/client/app/account(auth)/signup/signup.controller(js).js
index 346eb7ea7..405461a1f 100644
--- a/app/templates/client/app/account(auth)/signup/signup.controller(js).js
+++ b/app/templates/client/app/account(auth)/signup/signup.controller(js).js
@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('<%= scriptAppName %>')
-  .controller('SignupCtrl', function($scope, Auth<% if (filters.ngroute) { %>, $location<% } %><% if (filters.uirouter) { %>, $state<% } %><% if (filters.oauth) { %>, $window<% } %>) {
+  .controller('SignupCtrl', function($scope, Auth<% if (filters.ngroute) { %>, $location<% } %><% if (filters.uirouter) { %>, $state<% } %>) {
     $scope.user = {};
     $scope.errors = {};
 
@@ -38,8 +38,5 @@ angular.module('<%= scriptAppName %>')
         });
       }
     };
-<% if (filters.oauth) {%>
-    $scope.loginOauth = function(provider) {
-      $window.location.href = '/auth/' + provider;
-    };<% } %>
+
   });
diff --git a/app/templates/client/app/app(less).less b/app/templates/client/app/app(less).less
index cbfffbe88..9cfcfdb16 100644
--- a/app/templates/client/app/app(less).less
+++ b/app/templates/client/app/app(less).less
@@ -1,5 +1,6 @@
-<% if (filters.bootstrap) { %>@import '../bower_components/bootstrap/less/bootstrap.less';<% } %>
-@import '../bower_components/font-awesome/less/font-awesome.less';
+<% if (filters.bootstrap) { %>@import '../bower_components/bootstrap/less/bootstrap.less';
+<% if(filters.oauth) { %>@import '../bower_components/bootstrap-social/bootstrap-social.less';
+<% }} %>@import '../bower_components/font-awesome/less/font-awesome.less';
 
 <% if (filters.bootstrap) { %>@icon-font-path: '../bower_components/bootstrap/fonts/';<% } %>
 @fa-font-path: '../bower_components/font-awesome/fonts';
diff --git a/app/templates/client/app/app(sass).scss b/app/templates/client/app/app(sass).scss
index 889878aee..e20f3f0ad 100644
--- a/app/templates/client/app/app(sass).scss
+++ b/app/templates/client/app/app(sass).scss
@@ -1,7 +1,7 @@
-<% if (filters.bootstrap) { %>$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";<% } %>
-$fa-font-path: "../bower_components/font-awesome/fonts";
-<% if (filters.bootstrap) { %>
-@import '../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';<% } %>
+<% if (filters.bootstrap) { %>$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";
+@import '../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
+<% if(filters.oauth) { %>@import '../bower_components/bootstrap-social/bootstrap-social.scss';
+<% }} %>$fa-font-path: "../bower_components/font-awesome/fonts";
 @import '../bower_components/font-awesome/scss/font-awesome';
 
 /**
diff --git a/app/templates/client/app/app(stylus).styl b/app/templates/client/app/app(stylus).styl
index d25cdfc59..de156ca97 100644
--- a/app/templates/client/app/app(stylus).styl
+++ b/app/templates/client/app/app(stylus).styl
@@ -1,6 +1,7 @@
 @import "../bower_components/font-awesome/css/font-awesome.css"
 <% if (filters.bootstrap) { %>@import "../bower_components/bootstrap/dist/css/bootstrap.css"
-
+<% if (filters.oauth) { %>@import "../bower_components/bootstrap-social/bootstrap-social.css"
+<% } %>
 //
 // Bootstrap Fonts
 //
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oath-buttons(html).html b/app/templates/client/components/oauth-buttons(oauth)/oath-buttons(html).html
new file mode 100644
index 000000000..5ea19425f
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oath-buttons(html).html
@@ -0,0 +1,12 @@
+<% if(filters.facebookAuth) { %><a ng-class="classes" ng-click="OauthButtons.loginOauth('facebook')" class="btn<% if (filters.bootstrap) { %> btn-social<% } %> btn-facebook">
+  <i class="fa fa-facebook"></i>
+  Connect with Facebook
+</a>
+<% } if (filters.googleAuth) { %><a ng-class="classes" ng-click="OauthButtons.loginOauth('google')" class="btn<% if (filters.bootstrap) { %> btn-social<% } %> btn-google">
+  <i class="fa fa-google-plus"></i>
+  Connect with Google+
+</a>
+<% } if (filters.twitterAuth) { %><a ng-class="classes" ng-click="OauthButtons.loginOauth('twitter')" class="btn<% if (filters.bootstrap) { %> btn-social<% } %> btn-twitter">
+  <i class="fa fa-twitter"></i>
+  Connect with Twitter
+</a><% } %>
diff --git a/app/templates/client/app/account(auth)/login/login(css).css b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(css).css
similarity index 61%
rename from app/templates/client/app/account(auth)/login/login(css).css
rename to app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(css).css
index 7c865ffc6..be33316e0 100644
--- a/app/templates/client/app/account(auth)/login/login(css).css
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(css).css
@@ -1,22 +1,19 @@
-<% if (filters.oauth) { %><% if (filters.facebookAuth) { %>.btn-facebook {
+<% if (!filters.bootstrap) { if (filters.facebookAuth) { %>.btn-facebook {
   color: #fff;
   background-color: #3B5998;
   border-color: #133783;
 }
-<% } if (filters.twitterAuth) { %>
-.btn-twitter {
-  color: #fff;
-  background-color: #2daddc;
-  border-color: #0271bf;
-}
-<% } if (filters.googleAuth) { %>
-.btn-google-plus {
+<% } if (filters.googleAuth) { %>.btn-google {
   color: #fff;
   background-color: #dd4b39;
   border-color: #c53727;
 }
-<% } %>
-.btn-github {
+<% } if (filters.twitterAuth) { %>.btn-twitter {
+  color: #fff;
+  background-color: #2daddc;
+  border-color: #0271bf;
+}
+<% } %>.btn-github {
   color: #fff;
   background-color: #fafafa;
   border-color: #ccc;
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(jade).jade b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(jade).jade
new file mode 100644
index 000000000..fd5030bd7
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(jade).jade
@@ -0,0 +1,14 @@
+<% if(filters.facebookAuth) { %>a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.btn-facebook(ng-class='classes'
+  ng-click='OauthButtons.loginOauth("facebook")')
+  i.fa.fa-facebook
+  |  Connect with Facebook
+
+<% } if(filters.googleAuth) { %>a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.btn-google(ng-class='classes'
+  ng-click='OauthButtons.loginOauth("google")')
+  i.fa.fa-google-plus
+  |  Connect with Google+
+
+<% } if(filters.twitterAuth) { %>a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.btn-twitter(ng-class='classes'
+  ng-click='OauthButtons.loginOauth("twitter")')
+  i.fa.fa-twitter
+  |  Connect with Twitter<% } %>
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(less).less b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(less).less
new file mode 100644
index 000000000..be33316e0
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(less).less
@@ -0,0 +1,20 @@
+<% if (!filters.bootstrap) { if (filters.facebookAuth) { %>.btn-facebook {
+  color: #fff;
+  background-color: #3B5998;
+  border-color: #133783;
+}
+<% } if (filters.googleAuth) { %>.btn-google {
+  color: #fff;
+  background-color: #dd4b39;
+  border-color: #c53727;
+}
+<% } if (filters.twitterAuth) { %>.btn-twitter {
+  color: #fff;
+  background-color: #2daddc;
+  border-color: #0271bf;
+}
+<% } %>.btn-github {
+  color: #fff;
+  background-color: #fafafa;
+  border-color: #ccc;
+}<% } %>
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(sass).scss b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(sass).scss
new file mode 100644
index 000000000..be33316e0
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(sass).scss
@@ -0,0 +1,20 @@
+<% if (!filters.bootstrap) { if (filters.facebookAuth) { %>.btn-facebook {
+  color: #fff;
+  background-color: #3B5998;
+  border-color: #133783;
+}
+<% } if (filters.googleAuth) { %>.btn-google {
+  color: #fff;
+  background-color: #dd4b39;
+  border-color: #c53727;
+}
+<% } if (filters.twitterAuth) { %>.btn-twitter {
+  color: #fff;
+  background-color: #2daddc;
+  border-color: #0271bf;
+}
+<% } %>.btn-github {
+  color: #fff;
+  background-color: #fafafa;
+  border-color: #ccc;
+}<% } %>
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(stylus).styl b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(stylus).styl
new file mode 100644
index 000000000..995d4c766
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons(stylus).styl
@@ -0,0 +1,16 @@
+<% if (!filters.bootstrap) { if (filters.facebookAuth) { %>.btn-facebook
+  color #fff
+  background-color #3B5998
+  border-color #133783
+<% } if (filters.googleAuth) { %>.btn-google
+  color #fff
+  background-color #dd4b39
+  border-color #c53727
+<% } if (filters.twitterAuth) { %>.btn-twitter
+  color #fff
+  background-color #2daddc
+  border-color #0271bf
+<% } %>.btn-github
+  color #fff
+  background-color #fafafa
+  border-color #ccc<% } %>
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller(coffee).coffee b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller(coffee).coffee
new file mode 100644
index 000000000..4dca2832f
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller(coffee).coffee
@@ -0,0 +1,7 @@
+'use strict'
+
+angular.module('<%= scriptAppName %>')
+.controller 'OauthButtonsCtrl', ($window) ->
+  @loginOauth = (provider) ->
+    $window.location.href = '/auth/' + provider
+  return;
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller(js).js b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller(js).js
new file mode 100644
index 000000000..36d5d6467
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller(js).js
@@ -0,0 +1,8 @@
+'use strict';
+
+angular.module('<%= scriptAppName %>')
+  .controller('OauthButtonsCtrl', function($window) {
+    this.loginOauth = function(provider) {
+      $window.location.href = '/auth/' + provider;
+    };
+  });
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller.spec(coffee).coffee b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller.spec(coffee).coffee
new file mode 100644
index 000000000..59b4dd9e4
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller.spec(coffee).coffee
@@ -0,0 +1,20 @@
+'use strict'
+
+describe 'Controller: OauthButtonsCtrl', ->
+  # load the controller's module
+  beforeEach module('<%= scriptAppName %>')
+
+  OauthButtonsCtrl = null
+  $window = null
+
+  # Initialize the controller and a mock $window
+  beforeEach inject ($controller) ->
+    $window = location: {}
+    OauthButtonsCtrl = $controller 'OauthButtonsCtrl', $window: $window
+    return
+
+  it 'should attach loginOauth', -><% if (filters.jasmine) { %>
+    expect(OauthButtonsCtrl.loginOauth).toEqual jasmine.any Function<% } if (filters.mocha) { %>
+    <%= expect() %>OauthButtonsCtrl.loginOauth<%= to() %>.be.a 'function' <% } %>
+    return
+  return
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller.spec(js).js b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller.spec(js).js
new file mode 100644
index 000000000..144745e5e
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.controller.spec(js).js
@@ -0,0 +1,25 @@
+'use strict';
+
+describe('Controller: OauthButtonsCtrl', function() {
+
+  // load the controller's module
+  beforeEach(module('<%= scriptAppName %>'));
+
+  var OauthButtonsCtrl, $window;
+
+  // Initialize the controller and a mock $window
+  beforeEach(inject(function($controller) {
+    $window = {
+      location: {}
+    };
+
+    OauthButtonsCtrl = $controller('OauthButtonsCtrl', {
+      $window: $window
+    });
+  }));
+
+  it('should attach loginOauth', function() {<% if (filters.jasmine) { %>
+    expect(OauthButtonsCtrl.loginOauth).toEqual(jasmine.any(Function));<% } if (filters.mocha) { %>
+    <%= expect() %>OauthButtonsCtrl.loginOauth<%= to() %>.be.a('function');<% } %>
+  });
+});
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive(coffee).coffee b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive(coffee).coffee
new file mode 100644
index 000000000..f009e5b1d
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive(coffee).coffee
@@ -0,0 +1,9 @@
+'use strict'
+
+angular.module('<%= scriptAppName %>')
+.directive 'oauthButtons', ->
+  templateUrl: 'components/oauth-buttons/oauth-buttons.html'
+  restrict: 'EA'
+  controller: 'OauthButtonsCtrl'
+  controllerAs: 'OauthButtons'
+  scope: classes: '@'
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive(js).js b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive(js).js
new file mode 100644
index 000000000..401f669e3
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive(js).js
@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('<%= scriptAppName %>')
+  .directive('oauthButtons', function() {
+    return {
+      templateUrl: 'components/oauth-buttons/oauth-buttons.html',
+      restrict: 'EA',
+      controller: 'OauthButtonsCtrl',
+      controllerAs: 'OauthButtons',
+      scope: {
+        classes: '@'
+      }
+    };
+  });
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive.spec(coffee).coffee b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive.spec(coffee).coffee
new file mode 100644
index 000000000..903d05476
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive.spec(coffee).coffee
@@ -0,0 +1,51 @@
+'use strict'
+
+describe 'Directive: oauthButtons', ->
+  # load the directive's module and view
+  beforeEach module('<%= scriptAppName %>')
+  beforeEach module('components/oauth-buttons/oauth-buttons.html')
+
+  element = null
+  parentScope = null
+  elementScope = null
+
+  compileDirective = (template) ->
+    inject ($compile) ->
+      element = angular.element template
+      element = $compile(element) parentScope
+      parentScope.$digest()
+      elementScope = element.isolateScope()
+
+  beforeEach inject ($rootScope) ->
+    parentScope = $rootScope.$new()
+
+  it 'should contain anchor buttons', ->
+    compileDirective '<oauth-buttons></oauth-buttons>'<% if (filters.jasmine) { %>
+    expect(element.find('a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>').length).toBeGreaterThan 0<% } if (filters.mocha) { %>
+    <%= expect() %>element.find('a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>').length<%= to() %>.be.at.least 1<% } %>
+    return
+
+  it 'should evaluate and bind the classes attribute to scope.classes', ->
+    parentScope.scopedClass = 'scopedClass1'
+    compileDirective '<oauth-buttons classes="testClass1 {{scopedClass}}"></oauth-buttons>'<% if (filters.jasmine) { %>
+    expect(elementScope.classes).toEqual 'testClass1 scopedClass1'<% } if (filters.mocha) { %>
+    <%= expect() %>elementScope.classes<%= to() %>.equal 'testClass1 scopedClass1'<% } %>
+    return
+
+  it 'should bind scope.classes to class names on the anchor buttons', ->
+    compileDirective '<oauth-buttons></oauth-buttons>'
+
+    # Add classes
+    elementScope.classes = 'testClass1 testClass2'
+    elementScope.$digest()<% if (filters.jasmine) { %>
+    expect(element.find('a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.testClass1.testClass2').length).toBeGreaterThan 0<% } if (filters.mocha) { %>
+    <%= expect() %>element.find('a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.testClass1.testClass2').length<%= to() %>.be.at.least 1<% } %>
+
+    # Remove classes
+    elementScope.classes = ''
+    elementScope.$digest()<% if (filters.jasmine) { %>
+    expect(element.find('a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.testClass1.testClass2').length).toEqual 0<% } if (filters.mocha) { %>
+    <%= expect() %>element.find('a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.testClass1.testClass2').length<%= to() %>.equal 0<% } %>
+
+    return
+  return
diff --git a/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive.spec(js).js b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive.spec(js).js
new file mode 100644
index 000000000..14682cc6e
--- /dev/null
+++ b/app/templates/client/components/oauth-buttons(oauth)/oauth-buttons.directive.spec(js).js
@@ -0,0 +1,51 @@
+'use strict';
+
+describe('Directive: oauthButtons', function() {
+
+  // load the directive's module and view
+  beforeEach(module('<%= scriptAppName %>'));
+  beforeEach(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>');<% if (filters.jasmine) { %>
+    expect(element.find('a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>').length).toBeGreaterThan(0);<% } if (filters.mocha) { %>
+    <%= expect() %>element.find('a.btn<% if (filters.bootstrap) { %>.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>');<% if (filters.jasmine) { %>
+    expect(elementScope.classes).toEqual('testClass1 scopedClass1');<% } if (filters.mocha) { %>
+    <%= 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();<% if (filters.jasmine) { %>
+    expect(element.find('a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.testClass1.testClass2').length).toBeGreaterThan(0);<% } if (filters.mocha) { %>
+    <%= expect() %>element.find('a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.testClass1.testClass2').length<%= to() %>.be.at.least(1);<% } %>
+
+    // Remove classes
+    elementScope.classes = '';
+    elementScope.$digest();<% if (filters.jasmine) { %>
+    expect(element.find('a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.testClass1.testClass2').length).toEqual(0);<% } if (filters.mocha) { %>
+    <%= expect() %>element.find('a.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.testClass1.testClass2').length<%= to() %>.equal(0);<% } %>
+  });
+});
diff --git a/app/templates/e2e/account(auth)/login/login.po.js b/app/templates/e2e/account(auth)/login/login.po.js
index 1186cdb6b..045204754 100644
--- a/app/templates/e2e/account(auth)/login/login.po.js
+++ b/app/templates/e2e/account(auth)/login/login.po.js
@@ -6,20 +6,21 @@
 'use strict';
 
 var LoginPage = function() {
-  this.form = element(by.css('.form'));
-  this.form.email = this.form.element(by.model('user.email'));
-  this.form.password = this.form.element(by.model('user.password'));
-  this.form.submit = this.form.element(by.css('.btn-login'));
+  var form = this.form = element(by.css('.form'));
+  form.email = form.element(by.model('user.email'));
+  form.password = form.element(by.model('user.password'));
+  form.submit = form.element(by.css('.btn-login'));<% if (filters.oauth) { %>
+  form.oauthButtons = require('../../components/oauth-buttons/oauth-buttons.po').oauthButtons;<% } %>
 
   this.login = function(data) {
     for (var prop in data) {
-      var formElem = this.form[prop];
+      var formElem = form[prop];
       if (data.hasOwnProperty(prop) && formElem && typeof formElem.sendKeys === 'function') {
         formElem.sendKeys(data[prop]);
       }
     }
 
-    this.form.submit.click();
+    form.submit.click();
   };
 };
 
diff --git a/app/templates/e2e/account(auth)/login/login.spec(jasmine).js b/app/templates/e2e/account(auth)/login/login.spec(jasmine).js
index 568074ccc..6a65fc7cb 100644
--- a/app/templates/e2e/account(auth)/login/login.spec(jasmine).js
+++ b/app/templates/e2e/account(auth)/login/login.spec(jasmine).js
@@ -36,7 +36,16 @@ describe('Login View', function() {
     expect(page.form.password.getAttribute('name')).toBe('password');
     expect(page.form.submit.getAttribute('type')).toBe('submit');
     expect(page.form.submit.getText()).toBe('Login');
-  });
+  });<% if (filters.oauth) { %>
+
+  it('should include oauth buttons with correct classes applied', function() {<% if (filters.facebookAuth) { %>
+    expect(page.form.oauthButtons.facebook.getText()).toBe('Connect with Facebook');
+    expect(page.form.oauthButtons.facebook.getAttribute('class')).toMatch('btn-block');<% } if (filters.googleAuth) { %>
+    expect(page.form.oauthButtons.google.getText()).toBe('Connect with Google+');
+    expect(page.form.oauthButtons.google.getAttribute('class')).toMatch('btn-block');<% } if (filters.twitterAuth) { %>
+    expect(page.form.oauthButtons.twitter.getText()).toBe('Connect with Twitter');
+    expect(page.form.oauthButtons.twitter.getAttribute('class')).toMatch('btn-block');<% } %>
+  });<% } %>
 
   describe('with local auth', function() {
 
diff --git a/app/templates/e2e/account(auth)/login/login.spec(mocha).js b/app/templates/e2e/account(auth)/login/login.spec(mocha).js
index 94268a12e..1fefea5d0 100644
--- a/app/templates/e2e/account(auth)/login/login.spec(mocha).js
+++ b/app/templates/e2e/account(auth)/login/login.spec(mocha).js
@@ -41,7 +41,16 @@ describe('Login View', function() {
     <%= expect() %>page.form.password.getAttribute('name')<%= to() %>.eventually.equal('password');
     <%= expect() %>page.form.submit.getAttribute('type')<%= to() %>.eventually.equal('submit');
     <%= expect() %>page.form.submit.getText()<%= to() %>.eventually.equal('Login');
-  });
+  });<% if (filters.oauth) { %>
+
+  it('should include oauth buttons with correct classes applied', function() {<% if (filters.facebookAuth) { %>
+    <%= expect() %>page.form.oauthButtons.facebook.getText()<%= to() %>.eventually.equal('Connect with Facebook');
+    <%= expect() %>page.form.oauthButtons.facebook.getAttribute('class')<%= to() %>.eventually.contain('btn-block');<% } if (filters.googleAuth) { %>
+    <%= expect() %>page.form.oauthButtons.google.getText()<%= to() %>.eventually.equal('Connect with Google+');
+    <%= expect() %>page.form.oauthButtons.google.getAttribute('class')<%= to() %>.eventually.contain('btn-block');<% } if (filters.twitterAuth) { %>
+    <%= expect() %>page.form.oauthButtons.twitter.getText()<%= to() %>.eventually.equal('Connect with Twitter');
+    <%= expect() %>page.form.oauthButtons.twitter.getAttribute('class')<%= to() %>.eventually.contain('btn-block');<% } %>
+  });<% } %>
 
   describe('with local auth', function() {
 
diff --git a/app/templates/e2e/account(auth)/signup/signup.po.js b/app/templates/e2e/account(auth)/signup/signup.po.js
index e57536915..3a812266c 100644
--- a/app/templates/e2e/account(auth)/signup/signup.po.js
+++ b/app/templates/e2e/account(auth)/signup/signup.po.js
@@ -6,22 +6,23 @@
 'use strict';
 
 var SignupPage = function() {
-  this.form = element(by.css('.form'));
-  this.form.name = this.form.element(by.model('user.name'));
-  this.form.email = this.form.element(by.model('user.email'));
-  this.form.password = this.form.element(by.model('user.password'));
-  this.form.confirmPassword = this.form.element(by.model('user.confirmPassword'))
-  this.form.submit = this.form.element(by.css('.btn-register'));
+  var form = this.form = element(by.css('.form'));
+  form.name = form.element(by.model('user.name'));
+  form.email = form.element(by.model('user.email'));
+  form.password = form.element(by.model('user.password'));
+  form.confirmPassword = form.element(by.model('user.confirmPassword'));
+  form.submit = form.element(by.css('.btn-register'));<% if (filters.oauth) { %>
+  form.oauthButtons = require('../../components/oauth-buttons/oauth-buttons.po').oauthButtons;<% } %>
 
   this.signup = function(data) {
     for (var prop in data) {
-      var formElem = this.form[prop];
+      var formElem = form[prop];
       if (data.hasOwnProperty(prop) && formElem && typeof formElem.sendKeys === 'function') {
         formElem.sendKeys(data[prop]);
       }
     }
 
-    this.form.submit.click();
+    form.submit.click();
   };
 };
 
diff --git a/app/templates/e2e/account(auth)/signup/signup.spec(jasmine).js b/app/templates/e2e/account(auth)/signup/signup.spec(jasmine).js
index b86749330..903c89817 100644
--- a/app/templates/e2e/account(auth)/signup/signup.spec(jasmine).js
+++ b/app/templates/e2e/account(auth)/signup/signup.spec(jasmine).js
@@ -35,7 +35,16 @@ describe('Signup View', function() {
     expect(page.form.confirmPassword.getAttribute('name')).toBe('confirmPassword');
     expect(page.form.submit.getAttribute('type')).toBe('submit');
     expect(page.form.submit.getText()).toBe('Sign up');
-  });
+  });<% if (filters.oauth) { %>
+
+  it('should include oauth buttons with correct classes applied', function() {<% if (filters.facebookAuth) { %>
+    expect(page.form.oauthButtons.facebook.getText()).toBe('Connect with Facebook');
+    expect(page.form.oauthButtons.facebook.getAttribute('class')).toMatch('btn-block');<% } if (filters.googleAuth) { %>
+    expect(page.form.oauthButtons.google.getText()).toBe('Connect with Google+');
+    expect(page.form.oauthButtons.google.getAttribute('class')).toMatch('btn-block');<% } if (filters.twitterAuth) { %>
+    expect(page.form.oauthButtons.twitter.getText()).toBe('Connect with Twitter');
+    expect(page.form.oauthButtons.twitter.getAttribute('class')).toMatch('btn-block');<% } %>
+  });<% } %>
 
   describe('with local auth', function() {
 
diff --git a/app/templates/e2e/account(auth)/signup/signup.spec(mocha).js b/app/templates/e2e/account(auth)/signup/signup.spec(mocha).js
index e15385192..7578d2796 100644
--- a/app/templates/e2e/account(auth)/signup/signup.spec(mocha).js
+++ b/app/templates/e2e/account(auth)/signup/signup.spec(mocha).js
@@ -40,7 +40,16 @@ describe('Signup View', function() {
     <%= expect() %>page.form.confirmPassword.getAttribute('name')<%= to() %>.eventually.equal('confirmPassword');
     <%= expect() %>page.form.submit.getAttribute('type')<%= to() %>.eventually.equal('submit');
     <%= expect() %>page.form.submit.getText()<%= to() %>.eventually.equal('Sign up');
-  });
+  });<% if (filters.oauth) { %>
+
+  it('should include oauth buttons with correct classes applied', function() {<% if (filters.facebookAuth) { %>
+    <%= expect() %>page.form.oauthButtons.facebook.getText()<%= to() %>.eventually.equal('Connect with Facebook');
+    <%= expect() %>page.form.oauthButtons.facebook.getAttribute('class')<%= to() %>.eventually.contain('btn-block');<% } if (filters.googleAuth) { %>
+    <%= expect() %>page.form.oauthButtons.google.getText()<%= to() %>.eventually.equal('Connect with Google+');
+    <%= expect() %>page.form.oauthButtons.google.getAttribute('class')<%= to() %>.eventually.contain('btn-block');<% } if (filters.twitterAuth) { %>
+    <%= expect() %>page.form.oauthButtons.twitter.getText()<%= to() %>.eventually.equal('Connect with Twitter');
+    <%= expect() %>page.form.oauthButtons.twitter.getAttribute('class')<%= to() %>.eventually.contain('btn-block');<% } %>
+  });<% } %>
 
   describe('with local auth', function() {
 
diff --git a/app/templates/e2e/components/oauth-buttons(oauth)/oauth-buttons.po.js b/app/templates/e2e/components/oauth-buttons(oauth)/oauth-buttons.po.js
new file mode 100644
index 000000000..c25d2b994
--- /dev/null
+++ b/app/templates/e2e/components/oauth-buttons(oauth)/oauth-buttons.po.js
@@ -0,0 +1,15 @@
+/**
+ * This file uses the Page Object pattern to define the main page for tests
+ * https://docs.google.com/presentation/d/1B6manhG0zEXkC-H-tPo2vwU06JhL8w9-XCF9oehXzAQ
+ */
+
+'use strict';
+
+var OauthButtons = function() {
+  var oauthButtons = this.oauthButtons = element(by.css('oauth-buttons'));<% if (filters.facebookAuth) { %>
+  oauthButtons.facebook = oauthButtons.element(by.css('.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.btn-facebook'));<% } if (filters.googleAuth) { %>
+  oauthButtons.google = oauthButtons.element(by.css('.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.btn-google'));<% } if (filters.twitterAuth) { %>
+  oauthButtons.twitter = oauthButtons.element(by.css('.btn<% if (filters.bootstrap) { %>.btn-social<% } %>.btn-twitter'));<% } %>
+};
+
+module.exports = new OauthButtons();
diff --git a/test/test-file-creation.js b/test/test-file-creation.js
index 1f2162142..cca66a78f 100644
--- a/test/test-file-creation.js
+++ b/test/test-file-creation.js
@@ -258,7 +258,6 @@ describe('angular-fullstack generator', function () {
       files = files.concat([
         'client/app/account/account.' + script,
         'client/app/account/login/login.' + markup,
-        'client/app/account/login/login.' + stylesheet,
         'client/app/account/login/login.controller.' + script,
         'client/app/account/settings/settings.' + markup,
         'client/app/account/settings/settings.controller.' + script,
@@ -290,11 +289,22 @@ describe('angular-fullstack generator', function () {
       ]);
     }
 
-    /* OAuth (see oauthFiles function above) */
-    if (ops.oauth) {
+    if (ops.oauth && ops.oauth.length) {
+      /* OAuth (see oauthFiles function above) */
       ops.oauth.forEach(function(type, i) {
         files = files.concat(oauthFiles(type.replace('Auth', '')));
       });
+
+
+      files = files.concat([
+        'client/components/oauth-buttons/oauth-buttons.' + stylesheet,
+        'client/components/oauth-buttons/oauth-buttons.' + markup,
+        'client/components/oauth-buttons/oauth-buttons.controller.' + script,
+        'client/components/oauth-buttons/oauth-buttons.controller.spec.' + script,
+        'client/components/oauth-buttons/oauth-buttons.directive.' + script,
+        'client/components/oauth-buttons/oauth-buttons.directive.spec.' + script,
+        'e2e/components/oauth-buttons/oauth-buttons.po.js'
+      ]);
     }
 
     /* Socket.IO */

From 8e21ce983daa839bbeb6429957a16006fbf07a45 Mon Sep 17 00:00:00 2001
From: kingcody <me@codymize.com>
Date: Tue, 8 Sep 2015 17:14:27 -0400
Subject: [PATCH 2/2] fix(app): add `jasmine` to `.jshintrc` globals

---
 app/templates/client/.jshintrc      | 3 ++-
 app/templates/server/.jshintrc-spec | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/templates/client/.jshintrc b/app/templates/client/.jshintrc
index 8c5c42c0a..07b9d3793 100644
--- a/app/templates/client/.jshintrc
+++ b/app/templates/client/.jshintrc
@@ -22,7 +22,8 @@
     "console": true,
     "$": true,
     "_": true,
-    "moment": true,
+    "moment": true,<% if (filters.jasmine) { %>
+    "jasmine": true,<% } %>
     "describe": true,
     "beforeEach": true,
     "module": true,
diff --git a/app/templates/server/.jshintrc-spec b/app/templates/server/.jshintrc-spec
index b9390c374..8c9871ce0 100644
--- a/app/templates/server/.jshintrc-spec
+++ b/app/templates/server/.jshintrc-spec
@@ -1,6 +1,7 @@
 {
   "extends": ".jshintrc",
-  "globals": {
+  "globals": {<% if (filters.jasmine) { %>
+    "jasmine": true,<% } %>
     "describe": true,
     "it": true,
     "before": true,