I have changed the official AngularJS documentation to use Firebase (the phone tutorial).
This is the router of my app:
angular.module('phonecat', ['firebase']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl,
authRequired: false,
pathTo: '/phones'
}).
when('/phones/:age', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl,
authRequired: true,
pathTo: '/phones/:phoneId'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: LoginCtrl,
authRequired: false,
pathTo: '/login'
}).
otherwise({
redirectTo: '/phones'
}); }]);
This is how the controller looks like - but it is probably incorrect. The login function gets called, however I'm not sure what to do next. How should I redirect the user from the login page to the phone-detail.html page?
'use strict';
function PhoneListCtrl($scope, angularFire, angularFireAuth) {
var url = 'https://<link>.firebaseio.com/';
var promise = angularFire(url, $scope, 'phones', []);
angularFireAuth.initialize(url, {scope: $scope, name: "user"});
}
function PhoneDetailCtrl($scope, $routeParams, angularFire, angularFireAuth) {
var url = 'https://<link>.firebaseio.com/' + $routeParams.age;
angularFireAuth.initialize(url, {scope: $scope, path: "/login"});
$scope.$on("angularFireAuth:login", function(evt, user) {
var promise = angularFire(url, $scope, 'phone', {});
});
$scope.$on("angularFireAuth:logout", function(evt) {
console.log("you are logged out.");
});
$scope.$on("angularFireAuth:error", function(evt, err) {
console.log(err);
});
}
function LoginCtrl($scope, angularFire, angularFireAuth) {
var url = 'https://<link>.firebaseio.com';
$scope.form = {};
$scope.login = function() {
console.log("called");
var username = $scope.form.username;
var password = $scope.form.password;
angularFireAuth.login('password', {
email: username,
password: password,
rememberMe: false
});
};
}
The login.html looks like this:
<input type="text" name="username" ng-model="form.username"><br>
<input type="text" name="password" ng-model="form.password"><br>
<button name="login" id="login" ng-click="login()">login</button>
What I'd like to achieve is this:
- List all the phones
- If the user clicks to get the details of one of them, check if they are authenticated
- if yes, show the phone details -- if not, redirect them to the login page.
- After logging in, redirect them to the phone detail view.
I'm struggling with points 3 and 4.
Update
After the comments from Anant -- I found something very interesting. I added a few debug msgs to angularFire.js and for the time being I changed the authRequired from true to false in my controller above.
If navigate to /phones - I get a list returned back from firebase as expected. Inside _loggedIn() I added console.log(user) which returns a user object (also, inside initialise I added a debug statement: https://github.com/firebase/angularFire/blob/master/angularFire.js#L437 -- both confirm that I have a valid user, already logged in.
If I then click on an item, I get what I expect - the username and the actual page loads (see the html below). If I refresh that page (http:///phones/#/0) I get the right page again and in the console, I still see a valid user object, indicating that the user is still logged in
Here's the HTML for both phone-list.html and phone-details.html:
phone-list.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones">
<a href="#/phones/{{phone.age}}">{{phone.id}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
phone-detail.html
<span ng-show="user">
{{user.email}} | <a ng-click="logout()">Logout</a>
you are look looking at {{ phone.name }}
</span>
<span ng-hide="user">
login pls!
</span>
And a snippet from the JSON (that is now part of Firebase):
[
{
"age": 0,
"id": "motorola-xoom-with-wi-fi",
"imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
"name": "Motorola XOOM\u2122 with Wi-Fi",
"snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
},
{
"age": 1,
"id": "motorola-xoom",
"imageUrl": "img/phones/motorola-xoom.0.jpg",
"name": "MOTOROLA XOOM\u2122",
"snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
}...etc
If I then change the authRequired back to true - and if the user object is available, then I get an endless loop of page loads - first it's /login then it gets automatically redirected /phone/0 and immediately back to /login again, and this happens until the browser crashes.
Update 2
After adding some further debug lines and poking around with the code I've come up with this solution:
add the initialisation to the LoginCtrl:
var url = 'https://<link>.firebaseio.com/';
angularFireAuth.initialize(url, {scope: $scope});
In angularFire.js, I commented out lines 406 and 407:
//this._redirectTo = null;
//this._authenticated = false;
Appended the code around line 438, essentially I added this._authenticated = trueand this._redirectTo = $route.current.pathTo - as well as this._authenticated = false to the else statement.
var client = new FirebaseSimpleLogin(this._ref, function(err, user) {
self._cb(err, user);
if (err) {
$rootScope.$broadcast("angularFireAuth:error", err);
} else if (user) {
this._authenticated = true;
this._redirectTo = $route.current.pathTo;
self._loggedIn(user)
} else {
this._authenticated = false;
self._loggedOut();
}
});
this._authClient = client;
},
The only scenario where this does not work is when a user is logged in and I navigate to http://<host>/#/login - the $route.current.pathTo will be equal to /login and at the moment I'm not 100% sure how to overcome this. Any thoughts on this Anant?