I am utilizing Firebase's Simple Login as an administrator login for a blog-style website. The correct combination of email and password grants write access to the database on Firebase. Following the provided documentation, I have created distinct sections.
The authentication variable:
var chatRef = new Firebase('https://fiery-fire-291.firebaseio.com/');
var auth = new FirebaseSimpleLogin(chatRef, function(error, user) {
if (error) {
// an error occurred while attempting login
console.log(error);
} else if (user) {
// user authenticated with Firebase
console.log('User ID: ' + user.id + ', Provider: ' + user.provider);
} else {
// user is logged out
}
});
The authentication login, encapsulated in a login controller:
app.controller('LoginCtrl', function ($scope) {
$scope.login = function() {
auth.login('password', {
email: $scope.loginEmail,
password: $scope.loginPassword,
debug: true
});
};
});
This captures the data from the login form:
<div ng-controller="LoginCtrl">
<form ng-submit="login()">
<fieldset ng-class="">
<input type="email" ng-model="loginEmail">
<input type="password" ng-model="loginPassword">
</fieldset>
<button type="submit" href="#">Login</button>
</form>
</div>
What would be the most appropriate way to set the ng-class to "error" for the login form when there is an error during the Firebase login process?
I am hesitant to modify the CSS directly in Angular (even though it could be done easily in the error callback). I have attempted setting a global variable in the callbacks that would be recognized by
ng-class="{error: !userAuthenticated}"
However, besides not functioning properly, I also sense that this approach may not be ideal.