How send error firebase message from service to controller? - angularjs

Question

I use Angular js and firebase.
For my login form and my register form, i have a controller "userController" who call function in userProvider, my service.
I want to show the firebase error message in my view. How my provider can send message to my controller ?
My code :
userController.js :
$scope.login = function(user){
userProvider.login(user);
}
userProvider.js :
this.login = function(user){
Auth.$authWithPassword({//on connecte l'utilisateur
email: user.email,
password: user.password
}).then(function(authData) {
console.log("Utilisateur connecté:", authData.uid);
$location.path('#/profil');
}).catch(function(error) {
console.error("Echec connexion:", error);
// I want return the error.code for use it in my controller
});
}
login.html :
<form ng-hide="authData" class="form-signin col-md-6" name="loginForm" novalidate >
<h2 class="form-signin-heading">Connexion</h2>
<p style="color:red;" ng-show="userDataError">{{userDataErrorMessage}}</p>
<div class="form-group" ng-class="{ 'has-error' : loginForm.email.$invalid }">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" placeholder="Email address" ng-model="user.email" name="email" ng-required autofocus>
<p class="help-block text-error" ng-show="loginForm.email.$invalid">Cet email n'est pas valide</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : loginForm.password.$invalid }">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" placeholder="Password" ng-model="user.password" ng-minlength="8" name="password" ng-required>
<p class="help-block text-warning" ng-show="loginForm.password.$error.minlength" >Minimum 8 caractères</p>
</div>
<button class="btn btn-lg btn-primary btn-block" ng-disabled="loginForm.$invalid" ng-click="login(user)">Connexion</button>

Answer 1

To chain from the function, return the derived promise.
this.login = function(user){
//return promise
return derivedPromise = (
Auth.$authWithPassword({//on connecte l'utilisateur
email: user.email,
password: user.password
}).then(function(authData) {
console.log("Utilisateur connecté:", authData.uid);
$location.path('#/profil');
}).catch(function(error) {
console.error("Echec connexion:", error);
//throw error to chain
throw error;
});
);
});
In the controller, use the promise to display the error.
$scope.login = function(user){
userProvider.login(user)
.catch( function onRejected(error) {
$scope.errorMessage = ("Echec connexion:" + error);
});
};
By returning the promise, results (either fulfilled or rejected) can be retrieved by using the .then or .catch methods of the promise.

Answer 2

First of all for these kinds of plans i would defintely not use a provider but a service... So what you can do to achieve your problem about showing the error to the controller is:
In loginService.js
app.service('loginService', ["$scope", "Auth", "$firebaseAuth", function($scope,Auth,$firebaseAuth){
var vm= this;
this.login = function(user){
Auth.$authWithPassword({//on connecte l'utilisateur
email: user.email,
password: user.password
})
}
}])
and in the Ctrl:
app.controller('MainCtrl', function($scope){
loginService.login().then(function(authData) {
console.log("Utilisateur connecté:", authData.uid);
$scope.userData = authData.uid;
$location.path('#/profil');
}).catch(function(error) {
console.error("Echec connexion:", error);
$scope.errorLogin = error;
// I want return the error.code for use it in my controller
$scope.loginError = error;
});;
})