From 4db213971e0d81c98def860e40f07c680a936073 Mon Sep 17 00:00:00 2001 From: James Talmage Date: Wed, 19 Nov 2014 22:26:31 -0500 Subject: [PATCH 1/7] Auth.$bindTo implementation. --- src/FirebaseAuth.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/FirebaseAuth.js b/src/FirebaseAuth.js index f8d1f896..3f354319 100644 --- a/src/FirebaseAuth.js +++ b/src/FirebaseAuth.js @@ -46,6 +46,7 @@ $getAuth: this.getAuth.bind(this), $requireAuth: this.requireAuth.bind(this), $waitForAuth: this.waitForAuth.bind(this), + $bindTo:this.bindTo.bind(this), // User management methods $createUser: this.createUser.bind(this), @@ -188,6 +189,28 @@ return deferred.promise; }, + // Bind the authentication state to a property on scope. + // Returns a deregistration function, which is called automatically when scope is destroyed. + bindTo:function(scope,propertyName){ + var ref = this._ref; + + function callback(authData){ + scope.$evalAsync(function(){ + scope[propertyName] = authData; + }); + } + + function deregister(){ + ref.offAuth(callback); + } + + scope.$on('$destroy',deregister); + + ref.onAuth(callback); + + return deregister; + }, + /*********************/ /* User Management */ From f9be279811d888b61ce75ef486930b740c06cadb Mon Sep 17 00:00:00 2001 From: James Talmage Date: Thu, 20 Nov 2014 02:43:53 -0500 Subject: [PATCH 2/7] Add TODO to $firebaseAuth.bindTo() Users should be allowed to bind to a deep property (i.e. 'obj.authData' instead of just 'authData'). Should be easily accomplished with $parse service --- src/FirebaseAuth.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/FirebaseAuth.js b/src/FirebaseAuth.js index 3f354319..512d1ba0 100644 --- a/src/FirebaseAuth.js +++ b/src/FirebaseAuth.js @@ -191,6 +191,7 @@ // Bind the authentication state to a property on scope. // Returns a deregistration function, which is called automatically when scope is destroyed. + // TODO: use $parse to allow deep property names bindTo:function(scope,propertyName){ var ref = this._ref; From ef23918ab229deb7cf3a3c1f93d724bd2ee3e576 Mon Sep 17 00:00:00 2001 From: James Talmage Date: Thu, 20 Nov 2014 02:47:01 -0500 Subject: [PATCH 3/7] Examples for using $firebaseAuth service. (specifically $bindTo). --- tests/auth-example/auth.css | 74 ++++++++++++++++++++++++++++++++++++ tests/auth-example/auth.html | 42 ++++++++++++++++++++ tests/auth-example/auth.js | 31 +++++++++++++++ 3 files changed, 147 insertions(+) create mode 100644 tests/auth-example/auth.css create mode 100644 tests/auth-example/auth.html create mode 100644 tests/auth-example/auth.js diff --git a/tests/auth-example/auth.css b/tests/auth-example/auth.css new file mode 100644 index 00000000..16747e58 --- /dev/null +++ b/tests/auth-example/auth.css @@ -0,0 +1,74 @@ +pre { + overflow-y:scroll; + overflow-x: auto; + height: 100%; + background-color: #f0f6fa; + border: 1px solid #CCCCCC; + border-width: 1px 0; + padding: 10px; + margin: 10px 40px; + clear: both; +} + +html,body { + height: 95%; +} + +.method-container { + float: right; + margin-right: 40px; + margin-bottom: 20px; +} + +.button-container { + float: left; + margin-left: 40px; + margin-bottom: 20px; +} + +button{ + display: inline-block; + text-decoration: none; + font: bold 12px/12px HelveticaNeue, Arial; + padding: 8px 11px; + color: #555; + border: 1px solid #dedede; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + background: #bdbdbd; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#aeaeae'); /* IE */ + background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#aeaeae)); /* WebKit */ + background: -moz-linear-gradient(top, #cacaca, #aeaeae); + border-color: #b5b5b5 #a1a1a1 #8f8f8f; + color: #555; + text-shadow: 0 1px 0 #d4d4d4; + -webkit-box-shadow: 0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7; + -moz-box-shadow: 0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7; + box-shadow: 0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7; +} + +button:hover{ + background: #c2c2c2; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bcbcbc', endColorstr='#c2c2c2'); /* IE */ + background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbc), to(#c2c2c2)); /* WebKit */ + background: -moz-linear-gradient(top, #bcbcbc, #c2c2c2); + border-color: #989898 #8e8e8e #878787; + text-shadow: 0 1px 0 #dadada; + -webkit-box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc; + -moz-box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc; + box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc; +} + +button:disabled{ + color: #888; + background: #f4f4f4; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8'); /* IE */ + background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#f8f8f8)); /* WebKit */ + background: -moz-linear-gradient(top, #efefef, #f8f8f8); + border-color: #c7c7c7 #c3c3c3 #bebebe; + text-shadow: 0 1px 0 #fdfdfd; + -webkit-box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3; + -moz-box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3; + box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3; +} \ No newline at end of file diff --git a/tests/auth-example/auth.html b/tests/auth-example/auth.html new file mode 100644 index 00000000..3e4b0e59 --- /dev/null +++ b/tests/auth-example/auth.html @@ -0,0 +1,42 @@ + + + + AngularFire Auth Manual Tests + + + + + + + + + + + + + + + + + + + + +
+ Popup + Redirect +
+ + +
+ + + + + + +
+ +
{{prettyData()}}
+ + \ No newline at end of file diff --git a/tests/auth-example/auth.js b/tests/auth-example/auth.js new file mode 100644 index 00000000..7ddfb7a2 --- /dev/null +++ b/tests/auth-example/auth.js @@ -0,0 +1,31 @@ +var app = angular.module('auth',['firebase']); + +app.controller('MainCtrl',function($scope,$firebaseAuth){ + + var ref = new Firebase('https://jrtechnical-testing.firebaseio.com/authtesting'); + + var auth = $firebaseAuth(ref); + + auth.$bindTo($scope,'authData'); + + $scope.prettyData = function(){ + return angular.toJson($scope.authData,true); + }; + + $scope.authMode='popup'; + + $scope.login = function (provider){ + switch ($scope.authMode) { + case 'popup' : + return auth.$authWithOAuthPopup(provider); + case 'redirect' : + return auth.$authWithOAuthRedirect(provider); + default : + throw new Error('authMode not set correctly'); + } + }; + + $scope.anonymous = auth.$authAnonymously; + $scope.logout = auth.$unauth; + +}); \ No newline at end of file From 092da0136ae93a65b42644e62d2012f6648c0d3e Mon Sep 17 00:00:00 2001 From: James Talmage Date: Thu, 20 Nov 2014 03:02:52 -0500 Subject: [PATCH 4/7] Add example:auth as build target. --- Gruntfile.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/Gruntfile.js b/Gruntfile.js index 5c9c771d..ffbd29dd 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -53,6 +53,17 @@ module.exports = function(grunt) { hostname: 'localhost', port: 3030 } + }, + auth_example:{ + options: { + hostname: 'localhost', + port: 3030, + keepalive:true, + open:{ + target:'http://localhost:3030/tests/auth-example/auth.html' + } + + } } }, @@ -162,6 +173,9 @@ module.exports = function(grunt) { // Build tasks grunt.registerTask('build', ['concat', 'jshint', 'uglify']); + // Examples + grunt.registerTask('example:auth',['concat','connect:auth_example']); + // Default task grunt.registerTask('default', ['build', 'test']); }; From d3a6bf5df89768ef59e5becd9cc1cadd72e5e284 Mon Sep 17 00:00:00 2001 From: James Talmage Date: Thu, 20 Nov 2014 11:46:46 -0500 Subject: [PATCH 5/7] Use $parse to allow setting authData on deep properties. --- src/FirebaseAuth.js | 11 ++++++----- tests/auth-example/auth.html | 12 ++++++------ tests/auth-example/auth.js | 6 ++++-- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/FirebaseAuth.js b/src/FirebaseAuth.js index 512d1ba0..e503d7ed 100644 --- a/src/FirebaseAuth.js +++ b/src/FirebaseAuth.js @@ -5,7 +5,7 @@ // Define a service which provides user authentication and management. angular.module('firebase').factory('$firebaseAuth', [ - '$q', function($q) { + '$q', '$parse', function($q, $parse) { // This factory returns an object containing the current authentication state of the client. // This service takes one argument: // @@ -14,14 +14,15 @@ // The returned object contains methods for authenticating clients, retrieving authentication // state, and managing users. return function(ref) { - var auth = new FirebaseAuth($q, ref); + var auth = new FirebaseAuth($q, $parse, ref); return auth.construct(); }; } ]); - FirebaseAuth = function($q, ref) { + FirebaseAuth = function($q, $parse, ref) { this._q = $q; + this._parse = $parse; if (typeof ref === 'string') { throw new Error('Please provide a Firebase reference instead of a URL when creating a `$firebaseAuth` object.'); @@ -191,13 +192,13 @@ // Bind the authentication state to a property on scope. // Returns a deregistration function, which is called automatically when scope is destroyed. - // TODO: use $parse to allow deep property names bindTo:function(scope,propertyName){ var ref = this._ref; + var parsed = this._parse(propertyName); function callback(authData){ scope.$evalAsync(function(){ - scope[propertyName] = authData; + parsed.assign(scope,authData); }); } diff --git a/tests/auth-example/auth.html b/tests/auth-example/auth.html index 3e4b0e59..3682d9a4 100644 --- a/tests/auth-example/auth.html +++ b/tests/auth-example/auth.html @@ -29,12 +29,12 @@
- - - - - - + + + + + + 
{{prettyData()}}
diff --git a/tests/auth-example/auth.js b/tests/auth-example/auth.js index 7ddfb7a2..783d3e0f 100644 --- a/tests/auth-example/auth.js +++ b/tests/auth-example/auth.js @@ -6,10 +6,12 @@ app.controller('MainCtrl',function($scope,$firebaseAuth){ var auth = $firebaseAuth(ref); - auth.$bindTo($scope,'authData'); + $scope.data = {}; + + auth.$bindTo($scope,'data.authData'); $scope.prettyData = function(){ - return angular.toJson($scope.authData,true); + return angular.toJson($scope.data.authData,true); }; $scope.authMode='popup'; From 9b3eb19bc4f60e8d49a3440f4745d4d081bf3d14 Mon Sep 17 00:00:00 2001 From: James Talmage Date: Thu, 20 Nov 2014 11:54:29 -0500 Subject: [PATCH 6/7] Added attribution for auth example css. --- tests/auth-example/auth.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/tests/auth-example/auth.css b/tests/auth-example/auth.css index 16747e58..b88f1977 100644 --- a/tests/auth-example/auth.css +++ b/tests/auth-example/auth.css @@ -26,6 +26,11 @@ html,body { margin-bottom: 20px; } +/* + Button styling is a modified copy of Tom Raspo's Simple Web Buttons. + Check it out at: http://www.lab.tommasoraspo.com/simple-web-buttoms/ +*/ + button{ display: inline-block; text-decoration: none; From 04032607cdd536ad5cc0be08af00c79d03c51e94 Mon Sep 17 00:00:00 2001 From: James Talmage Date: Thu, 20 Nov 2014 12:24:04 -0500 Subject: [PATCH 7/7] auth example: Make authMode setting (popup / redirect) sticky. Previously redirects were causing the reloaded page to default back to popup mode. This solves that by saving the current choice in the url. --- tests/auth-example/auth.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/tests/auth-example/auth.js b/tests/auth-example/auth.js index 783d3e0f..03e78384 100644 --- a/tests/auth-example/auth.js +++ b/tests/auth-example/auth.js @@ -1,6 +1,6 @@ var app = angular.module('auth',['firebase']); -app.controller('MainCtrl',function($scope,$firebaseAuth){ +app.controller('MainCtrl',function($scope,$firebaseAuth,$location){ var ref = new Firebase('https://jrtechnical-testing.firebaseio.com/authtesting'); @@ -14,7 +14,13 @@ app.controller('MainCtrl',function($scope,$firebaseAuth){ return angular.toJson($scope.data.authData,true); }; - $scope.authMode='popup'; + $scope.authMode=$location.search().authMode || 'popup'; + + $scope.$watch('authMode',function(newValue, oldValue){ + if(newValue !== oldValue){ + $location.search('authMode',newValue); + } + }); $scope.login = function (provider){ switch ($scope.authMode) {