Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Login</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
    <!-- Angular -->
    <script src="js/angular.min.js"></script>
</head>

<body ng-app="myApp">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <!-- Code start here -->
                <h1 class="page-header">Login</h1>
                <div ng-controller="myController">
                    <!-- Form-->
                    <!-- novalidate is to prevent modern browser to validate so our awesome angular code will validate the form-->
                    <form name="loginForm" ng-submit="submitForm(loginForm.$valid)" novalidate>
                        <div class="col-md-6 col-md-offset-3 well">
                            <div class="form-group">
                                <label>Username</label>
                                <input type="text" name="username" class="form-control" ng-model="username" required>
                                <p ng-show="loginForm.username.$invalid && !loginForm.username.$pristine" class="help-block">Username is required.</p>
                            </div>

                            <div class="form-group">
                                <label>Password</label>
                                <input type="password" name="password" class="form-control" ng-model="password" ng-minlength="5" ng-maxlength="14">
                                <p ng-show="loginForm.password.$error.minlength" class="help-block">Password is too short.</p>
                                <p ng-show="loginForm.password.$error.maxlength" class="help-block">Password is too long.</p>
                            </div>

                            <button type="submit" class="btn btn-primary btn-block">Login</button>
                            <br>

                            <!-- Notification -->
                            <div ng-show="notificationDisplayed">
                                <div class="alert alert-{{ notificationColor }} alert-dismissible" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <strong>{{ notificationTitle }}!</strong> {{ message }}
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                {{ test }}
                <!-- Code end here -->
            </div>
        </div>
    </div>

    <!-- Angular JS Code Start Here -->
    <script>
        var app = angular.module('myApp', []);

        app.controller('myController', function($scope, $http, $timeout) {
            $scope.notificationDisplayed = false;

            $scope.submitForm = function(isValid) {
                if (isValid) {
                    $scope.check_credentials();
                    //                alert('yay');
                }
            }

            $scope.check_credentials = function() {
                var request = $http({
                    method: "post",
                    url: "auth.php",
                    data: {
                        username: $scope.username,
                        password: $scope.password,
                    },
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                });

                /* Check whether the HTTP Request is successful or not. */
                request.success(function(data) {
                    $scope.notificationDisplayed = true;

                    if (data == 'success') {
                        $scope.message = "Login successful. You will be redirected in 3 seconds.";
                        $scope.notificationColor = "success";
                        $scope.notificationTitle = "Success";

                        // redirect after 3 seconds
                        $timeout(function() {
                            window.location.href = 'datatable.html';
                        }, 3000)
                    } else {
                        $scope.message = "Invalid username and password combination";
                        $scope.notificationColor = "danger";
                        $scope.notificationTitle = "Fail";
                    }
                });
            }
        });
    </script>
    <!-- Angular JS Code End Here-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>

</html>