After spending countless hours scouring various websites, documentation, and numerous pages on Stack Overflow, I am still struggling to wrap my head around these issues. Despite my efforts over the past few days, I have made little progress.
My project involves a basic setup of Angular with Firebase, where users can create their own to-do lists on their dashboard.
I have encountered several challenges: * I have successfully implemented user registration, but the redirect from signup.html to login.html is not working.
- The login.html page does redirect me to dash.html, but I am unable to access database items from there. Instead, I receive an error message stating: "Permission denied: Client doesn't have permission to access the desired data."
<div id="user">Hello {{users.email}}</div>Furthermore, dash.html requires authentication to access, which adds another layer of complexity. Additionally, the logout button triggers an error message stating: $scope.auth.$unauth is not a function
- Moreover, the "Go back to Home" link on my login.html page no longer functions as expected, possibly due to recent changes I made related to the .run-model.
Below are snippets of code that illustrate my current setup. Any assistance in overcoming these obstacles would be greatly appreciated.
Routing:
todoTogo.run(['$rootScope', '$location', function($rootScope, $location){
$rootScope.$on('$routeChangeStart', function(event, next, current){
if($rootScope.auth === true){
$location.path('/dash');
} else {
$location.path('/login');
}
});
}]);
// Config for routing
todoTogo.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
// Route for landing page
.when('/home', {
templateUrl: '/home.html',
controller: 'homeController'
})
// Route for sign up page
.when('/signup', {
templateUrl: '/signup.html',
controller: 'signupController'
})
// Route for login page
.when('/login', {
templateUrl: '/login.html',
controller: 'loginController'
})
// Route for user dashboard
.when('/dash', {
templateUrl: '/dash.html',
controller: 'dashController'
})
// Route for create list
.when('/create', {
templateUrl: '/create.html',
controller: 'appController'
})
.otherwise({ redirectTo: '/home' });
}])Controllers:
'use strict';
var todoTogo = angular.module('todoTogo', ['firebase', 'ngRoute']);
todoTogo.controller('appController', ['$scope', '$firebaseArray',
function($scope, $firebaseArray) {
var itemsRef = new Firebase('http://URL.firebaseio.com');
// Start with empty array
$scope.items = $firebaseArray(itemsRef);
// Adds item to $scope
var timestamp = new Date().valueOf();
$scope.addItem = function() {
$scope.items.$add({
id: timestamp,
name: $scope.itemInput,
done: false
});
$scope.itemInput = '';
},
// Check if todoInput-field is empty, if not, run addItem function
$scope.addPost = function() {
if (event.keyCode == 13 && $scope.itemInput != "") {
$scope.addItem();
}
},
// Remove item from scope
$scope.removeItem = function(index, item) {
if (item.id === undefined)
return;
$scope.items.$remove(item);
},
// Edit item in scope and save to Firebase
$scope.editMode = function() {
$(event.target).closest('li').toggleClass('editing');
},
$scope.editOnEnter = function(item) {
if (event.keyCode == 13 && item.name) {
$scope.editMode();
$scope.items.$save(item);
}
}
}
]);
todoTogo.controller('signupController', ['$scope', '$firebaseArray',
function($scope, $firebaseArray) {
var userRef = new Firebase('http://URL.firebaseio.com/');
// Register function
document.querySelector('#signup').addEventListener('click', function() {
var name = document.querySelector('#name').value;
var email = document.querySelector('#email').value;
var password = document.querySelector('#password').value;
userRegister(email, password);
}),
userRegister = function(email, password) {
userRef.createUser({
name: name,
email: email,
password: password
}, function(error, userData) {
if (error) {
$('#signBlock').text(error);
} else {
$('#signBlock').text('Yay, account created! Move on to login!');
userRef.child('users').child(userData.uid).set({
'email': email,
'password': password
});
}
})
}
}
]);
todoTogo.controller('homeController', ['$scope', '$firebaseArray',
function($scope, $firebaseArray) {
$scope.signupComplete = function(input) {
return input == 1 ? 'Foo' : 'Bar';
}
}
]);
todoTogo.controller('dashController', ['$scope', '$firebaseArray', '$firebaseAuth', '$rootScope', 'Auth', '$location',
function($scope, $firebaseArray, $firebaseAuth, $rootScope, Auth, $location) {
$rootScope.logoutUser = function() {
$scope.auth.$unauth();
$location.path('/home');
console.log('Logged out user.');
},
$scope.createList = function() {
}
}
]);Login controller:
todoTogo.factory('Auth', ['$firebaseAuth',
function($firebaseAuth) {
var ref = new Firebase('https://URL.firebaseio.com');
return $firebaseAuth(ref);
}
]);
todoTogo.controller('loginController', ['$scope', '$firebaseAuth', 'Auth', '$location', '$rootScope',
function($scope, $firebaseAuth, Auth, $location, $rootScope) {
var ref = new Firebase('https://URL.firebaseio.com');
$scope.auth = $firebaseAuth(ref);
// Login user, if true redirect to dash.html, if false, don't redirect, show error message
$scope.loginUser = function() {
$scope.auth = Auth;
$scope.auth.$authWithPassword({
email: $scope.email,
password: $scope.password
}, {
remember: 'sessionOnly'
}).then(function(authData) {
console.log('Logged in as: ', authData.uid);
$scope.auth.$onAuth(function(authData) {
$rootScope.auth = true;
$location.path('/dash.html');
})
// If error with login, catch it and prompt it
}).catch(function(error) {
console.log('There was an error: ', error);
});
};
}
]);