Ionic - Email/Password required - angularjs

Question

I have authentication for my login when wrong email format, email or password, it will show a pop up error. However if nothing is type in both email and password, it will stuck at loading page. Anybody has a solution?
login.html
<ion-view title="Login" hide-nav-bar="true" hide-back-button="true" id="page6">
<ion-content padding="true" style="background: url(img/fOM24l77SrSIyzBwqvMz_login.jpg) no-repeat center;background-size:cover;" class="manual-ios-statusbar-padding">
<div class="spacer" style="width: 300px; height: 82px;"></div>
<h4 style="color: #FFFFFF;" align="center">Login with your NYP SIT account</h4>
<form name="loginForm" class="list " id="login-form1">
<ion-list class=" " id="login-list2">
<div class="app-icon"></div>
<label class="item item-input item-floating-label">
<span class="input-label" style="color: #9F9F9F;">Email</span>
<input ng-model="user.email" style="color: white;" type="email" placeholder="Email">
</label>
<label class="item item-input item-floating-label">
<span class="input-label" style="color: #9F9F9F;" >Password</span>
<input ng-model="user.password" style="color: white;" type="password" placeholder="Password">
</label>
</ion-list>
<div style="height: 40px;" class="spacer"></div>
<button ng-click="loginEmail(loginForm,user)" class=" button button-assertive button-block icon-left ion-ios-email-outline " id="signup-button3">LOGIN WITH EMAIL</button>
</form>
</ion-content>
</ion-view>
controller.js
.controller('loginCtrl', function($scope, $rootScope, $ionicHistory, sharedUtils, $state, $ionicSideMenuDelegate) {
$rootScope.extras = false; // For hiding the side bar and nav icon
// When the user logs out and reaches login page,
// we clear all the history and cache to prevent back link
$scope.$on('$ionicView.enter', function(ev) {
if(ev.targetScope !== $scope){
$ionicHistory.clearHistory();
$ionicHistory.clearCache();
}
});
//Check if user already logged in
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
//Removes back link to login page
$ionicHistory.nextViewOptions({
historyRoot: true
});
$ionicSideMenuDelegate.canDragContent(true); // Sets up the sideMenu dragable
$rootScope.extras = true;
sharedUtils.hideLoading();
$state.go('tabs.home', {}, {location: "replace"});
}
});
$scope.loginEmail = function(formName,cred) {
if(formName.$valid) { // Check if the form data is valid or not
sharedUtils.showLoading(); //starts the loading popup
//Email Login via Firebase
firebase.auth().signInWithEmailAndPassword(cred.email,cred.password).then(function(result) {
// You dont need to save the users session in your local session or cookies. Firebase handles it.
// You only need to :
// 1. clear the login page history from the history stack so that you cant come back
// 2. Set rootScope.extra;
// 3. Turn off the loading
// 4. Got to menu page
$ionicHistory.nextViewOptions({
historyRoot: true //1
});
$rootScope.extras = true; //2
sharedUtils.hideLoading(); //3
$state.go('tabs.home', {}, {location: "replace"}); //4
},
function(error) {
sharedUtils.hideLoading();
sharedUtils.showAlert("ERROR!","Authentication Error");
}
);
}else{
sharedUtils.showAlert("ERROR!","Enter in email format");
}
};
})

Answer 1

i think its better to check if the field is empty or not if fields are empty then you can show an error message
$scope.loginEmail = function(formName, cred) {
if (formName && cred) { //checking for null
if (formName.$valid) { // Check if the form data is valid or not
sharedUtils.showLoading(); //starts the loading popup
//Email Login via Firebase
firebase.auth().signInWithEmailAndPassword(cred.email, cred.password).then(function(result) {
$ionicHistory.nextViewOptions({
historyRoot: true //1
});
$rootScope.extras = true; //2
sharedUtils.hideLoading(); //3
$state.go('tabs.home', {}, {
location: "replace"
}); //4
},
function(error) {
sharedUtils.hideLoading();
sharedUtils.showAlert("ERROR!", "Authentication Error");
}
);
} else {
sharedUtils.showAlert("ERROR!", "Enter in email format");
}
} else {
sharedUtils.showAlert("ERROR!", "Fields cannot be empty");
}
};