Use font-awesome icons

Resseguie · May 6, 2014 · cc9d49b · cc9d49b
1 parent 759892a
commit cc9d49b
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,24 @@
 Version numbers correspond to `bower.json` version
 
+# 0.0.3
+
+## Features
+Switched to Font Awesome icons to support more providers with consistent look and feel
+
+## Bug Fixes
+
+## Breaking Changes
+
+# 0.0.2
+
+## Features
+Support generic providers by returning just the endpoint
+
+## Bug Fixes
+
+## Breaking Changes
+Format of returned oauthUser changed
+
 # 0.0.1
 
 ## Features

diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ If you use Twitter, Facebook, or GitHub, the API call to populate the user objec
 3. include the module in angular (i.e. in `app.js`) - `resseguie.angular-oauthio-login`
 
 ## Dependencies
-At a minimum, this module just depends on AngularJS, but the directive adds classes that support Bootstrap buttons.
+At a minimum, this module just depends on AngularJS, but the directive adds classes that support Bootstrap buttons with Font Awesome icons for each OAuth provider. If the provider name (in lowercase) matches the Font Awesome class name, the icon is added automatically.
 
 ## Documentation
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
 	"name": "angular-oauthio-login",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"authors": [
 		"David Resseguie <david@resseguie.com>"
 	],
@@ -20,7 +20,9 @@
 	],
 	"dependencies": {
 		"angular":"~1.2.11",
-		"oauth-js": "~0.1.7"
+		"oauth-js": "~0.1.7",
+		"bootstrap": "3.1.x",
+		"font-awesome": "latest"
 	},
 	"repository": {
 		"type": "git",

diff --git a/oauthio-login.js b/oauthio-login.js
@@ -22,6 +22,8 @@ angular.module('resseguie.angular-oauthio-login', [])
 			OAuth.initialize(key);
 		},
 		login : function(provider){
+			provider = provider.toLowerCase();
+
 			var deferred = $q.defer();
 
 			OAuth.popup(provider, function(err, res){
@@ -47,7 +49,7 @@ angular.module('resseguie.angular-oauthio-login', [])
 			return deferred.promise;
 		},
 		knownProvider: function(provider){
-			var valid = providerAPI.hasOwnProperty(provider);
+			var valid = providerAPI.hasOwnProperty(provider.toLowerCase());
 			return valid;
 		}
 	};
@@ -63,17 +65,14 @@ angular.module('resseguie.angular-oauthio-login', [])
 		return {
 			restrict : "EA",
 			template : '<div class="oauthio-login">'+
-							'<button class="btn btn-xs" ng-click="login()">'+
-								'<div  ng-show="oauthProvider==\'twitter\'"><img src="https://oauth.io/api/providers/twitter/logo" /> Connect with Twitter</div>'+
-								'<div  ng-show="oauthProvider==\'facebook\'"><img src="https://oauth.io/api/providers/facebook/logo" /> Connect with Facebook</div>'+
-								'<div  ng-show="oauthProvider==\'github\'"><img src="https://oauth.io/api/providers/github/logo" /> Connect with GitHub</div>'+
-								'<div  ng-show="!knownProvider(oauthProvider)">Connect with {{oauthProvider}}</div>'+
+							'<button class="btn btn-s btn-primary" ng-click="login()">'+
+								'<i class="fa fa-{{oauthProvider | lowercase}}" style="margin-right: 5px;"></i> Connect with {{oauthProvider}}'+
 							'</button>'+
 						'</div>',
 			scope : {
 				oauthUser     : "=", // model to store the results
 				oauthioKey    : "@", // OAuthi.io public key
-				oauthProvider : "@"  // currently only supports 'twitter'
+				oauthProvider : "@"
 			},
 			link: function(scope,element,attrs){
 				scope.knownProvider = function(provider){