wrong credential alert

angular_app/login.html

@@ -4,6 +4,8 @@
         <title>EventMan{ager} - Login</title>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <script src="/static/js/jquery-2.1.3.min.js"></script>
+        <script src="/static/js/bootstrap.min.js"></script>
         <link href="/static/css/normalize.css" rel="stylesheet">
         <link href="/static/css/bootstrap.css" rel="stylesheet">
         <link href="/static/css/bootstrap-theme.css" rel="stylesheet">
@@ -31,6 +33,10 @@
             <div class="panel panel-primary table-striped top5">
                 <div class="panel-heading">Login</div>
                 <div class="panel-body">
+                    <div id="wronglogin" class="alert alert-danger alert-dismissible hidden" role="alert">
+                         <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                         <strong>Error!</strong> Wrong username and password.
+                    </div>
                     <form method="POST">
                         <div class="input-group input-group-lg">
                             <span class="input-group-addon" style="min-width:150px;">Username</span>
@@ -46,4 +52,24 @@
             </div>
         </div>
     </body>
+    <script>
+
+function getUrlParameter(sParam) {
+    var sPageURL = window.location.search.substring(1);
+    var sURLVariables = sPageURL.split('&');
+    for (var i = 0; i < sURLVariables.length; i++) {
+        var sParameterName = sURLVariables[i].split('=');
+        if (sParameterName[0] == sParam) {
+            return sParameterName[1];
+        }
+    }
+}
+
+$(document).ready(function() {
+    if (getUrlParameter('failed')) {
+        $('wronglogin').removeClass('hidden');
+    }
+});
+
+    </script>
 </html>