I am new to AngularJS and JavaScript. I am struggling to understand how to handle the process of $cookiStore isUndefined. Here is the code snippet from my app.js file:
angular.module('postLogin', ['ngCookies'])
.config(function($routeProvider, $locationProvider){
$routeProvider.when('/', {templateUrl: "index.html"});
$routeProvider.when('/success', {templateUrl: "success.html"});
})
.controller('PostController', ['$scope', '$cookieStore', '$http', '$location', function($scope, $cookieStore, $http, $location) {
this.postForm = function() {
var encodedString = 'username=' +
encodeURIComponent(this.inputData.username) +
'&password=' +
encodeURIComponent(this.inputData.password);
$http({
method: 'POST',
url: 'userauth.php',
data: encodedString,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
//console.log(data);
if ( data.trim() === 'one') {
$cookieStore.put('username', 'admin');
window.location.href = 'success.html';
} else if ( data.trim() === 'two') {
$cookieStore.put('username', 'dika');
window.location.href = 'success.html';
} else {
$scope.errorMsg = "Username and password do not match.";
}
})
}
$scope.last = $cookieStore.get('username');
//below is logout function in success.html
$scope.go = function(){
$cookieStore.remove('username');
window.location.href = 'index.html';
}
if ($location.url() !== '/' && angular.isUndefined($scope.last)) {
window.location.href = 'index.html';
}
}]);
Here is the content of my success.html file:
<html>
<h1> Success: Welcome to our website. </h1>
<head>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
</head>
<body ng-app="postLogin" ng-controller="PostController">
{{last}}
<div class="buttons">
<input type="submit" class="button" ng-click="go()" value="click me">
</div>
<script src="app.js"></script>
</body>
</html>
Lastly, here is the content of my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="robots" content="noindex"/>
<title>angulrjs login page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="css/style.css" rel="stylesheet" id="main-css"/>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
</head>
<body ng-app="postLogin" ng-controller="PostController as postCtrl">
<div class="container">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
<div class="panel panel-default" >
<div class="panel-heading">
<div class="panel-title text-center">Login using username & password</div>
</div>
<div class="panel-body" >
<form name="login" ng-submit="postCtrl.postForm()" class="form-horizontal" method="POST">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" id="inputUsername" class="form-control" required autofocus ng-model="postCtrl.inputData.username"/>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" id="inputPassword" class="form-control" required ng-model="postCtrl.inputData.password"/>
</div>
<div class="alert alert-danger" ng-show="errorMsg">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×</button>
<span class="glyphicon glyphicon-hand-right"></span> {{errorMsg}}
</div>
<div class="form-group">
<div class="col-sm-12 controls">
<button type="submit" class="btn btn-primary pull-right" ng-disabled="login.$invalid">
<i class="glyphicon glyphicon-log-in"></i> Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I am encountering an issue with the loop in my index.html file due to $scope.last being undefined or null. How can I fix this problem and make it act like an !isset in PHP which I am more familiar with?