Merge pull request angular-fullstack#1156 from kingcody/feature/oauth…

…-buttons feat(app): implement oauth-buttons directive
wayne-lewis · Sep 8, 2015 · 044cbd6 · 044cbd6
2 parents f16cb71 + 8e21ce9
commit 044cbd6
Show file tree

Hide file tree

Showing 40 changed files with 402 additions and 192 deletions.
diff --git 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
@@ -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/.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/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
@@ -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
diff --git a/app/templates/client/app/account(auth)/login/login(sass).scss b/app/templates/client/app/account(auth)/login/login(sass).scss
diff --git a/app/templates/client/app/account(auth)/login/login(stylus).styl b/app/templates/client/app/account(auth)/login/login(stylus).styl
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...nt/app/account(auth)/login/login(css).css → ...uth-buttons(oauth)/oauth-buttons(css).css b/...nt/app/account(auth)/login/login(css).css → ...uth-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
@@ -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
@@ -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;
+}<% } %>