Controller:
// Modal Controller
app.controller("ModalCtrl", ["$scope", "$filter", function($scope, $filter) {
var date = new Date();
var currentDate = $filter('date')(new Date(), 'MM/dd/yyyy');
// Form Submit Actions
$scope.submitFormCreateAccount = function() {
$('#form-create-account').form('submit');
};
$scope.submitFormSignIn = function() {
$('#form-sign-in').form('submit');
};
// Form Validation - Create Account
$('#form-create-account').form({
on: 'blur',
fields: {
email: {
identifier: 'email',
rules: [{
type: 'email',
prompt: 'Please enter a valid email address.'
}]
},
displayName: {
identifier: 'displayName',
rules: [{
type: 'empty',
prompt: 'Please enter a display name for yourself.'
}]
},
password: {
identifier: 'password',
rules: [{
type: 'empty',
prompt: 'Please enter a password'
},{
type: 'length[6]',
prompt: 'Password needs to be atleast 6 characters long'
}]
},
passwordConfirm: {
identifier: 'passwordConfirm',
rules: [{
type: 'match[password]',
prompt: 'Passwords don\'t match'
}]
}
},
onSuccess: function() {
createUser();
return false;
},
onFailure: function() {
return false;
}
});
// Form Validation - Sign In
$('#form-sign-in').form({
on: 'blur',
fields: {
email: {
identifier: 'emailSignIn',
rules: [{
type: 'email',
prompt: 'Please enter a valid email address.'
}]
},
password: {
identifier: 'passwordSignIn',
rules: [{
type : 'empty',
prompt : 'Please enter a password.'
}]
}
},
onSuccess: function() {
signInUser();
return false;
},
onFailure: function() {
// Fail Function
return false;
}
});
// Create User
function createUser() {
email = $scope.createUserEmail;
displayName = $scope.createUserDisplayName;
password = $scope.createUserPassword;
auth.createUserWithEmailAndPassword(email, password)
.then(function(firebaseUser) {
userId = firebaseUser.uid;
// Add user to RealtimeDB
database.ref('users/' + userId).set({
name: displayName,
email: email,
added: currentDate
});
$('.ui.modal').modal("hide");
}).catch(function(error) {
console.log(error);
$scope.modalErrorMessage = true;
$scope.errorMessage = error;
});
};
// Sign In User
function signInUser() {
email = $scope.signInUserEmail;
password = $scope.signInUserPassword;
auth.signInWithEmailAndPassword(email, password).then(function(value) {
$('.ui.modal').modal("hide");
})
.catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode == 'auth/invalid-email') {
console.log(errorMessage);
$scope.modalErrorMessage = true;
$scope.errorMessage = errorMessage;
} else {
console.log(errorMessage);
$scope.modalErrorMessage = true;
$scope.errorMessage = errorMessage;
}
});
}
// Sign Out User
$scope.signOutUser = function() {
auth.signOut().then(function() {
}, function(error) {
console.log(error);
});
}
}]);
View:
<div class="ui warning message modal-message"
ng-show="modalErrorMessage">
<div class="header">
Whoops!
</div>
<p>{{errorMessage}}</p>
</div>
Although all functions are working properly, there seems to be an issue where the error bits are not displayed until the createUser() or signInUser() functions are triggered twice. This occurs when these functions are invoked by a button click after validating the form. How can I ensure that the error messages are shown on the first click itself without having to run the mentioned functions twice?