Use AJAX for login

2016-11-25 17:06:10 +01:00 · 2016-11-25 17:06:10 +01:00 · a122e5db0c
commit a122e5db0c
parent b2ed65788e
1 changed files with 27 additions and 3 deletions
--- a/templates/login.html
+++ b/templates/login.html
@ -1,14 +1,38 @@
 <html>
-	<head><title>Login</title>
+	<head>
+		<title>Login</title>
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
+		<script src="http://malsup.github.com/jquery.form.js"></script> 
+	
+		<script> 
+			// wait for the DOM to be loaded 
+			$(document).ready(function() { 
+				$('#invalidCredentials').hide();
+				// bind 'myForm' and provide a simple callback function 
+				$('#loginForm').ajaxForm({
+					success:    function() {
+						window.location.href = "/api/v1/restricted";
+					},
+					error: function() {
+						$('#invalidCredentials').show();
+					}
+				}); 
+			}); 
+		</script> 
+	</head>
 	<body>
-		<form action="/api/v1/login?target=/" method="POST">
+		<form id="loginForm" action="/api/v1/login?target=/" method="POST">
 			<label for="username">User</label>
 			<input type="text" name="username" /><br />

 			<label for="password">Password</label>
 			<input type="password" name="password" /><br />

-			<input type="submit">Login</form>
+			<div id="invalidCredentials">
+				The entered credentials are invalid
+			</div>
+
+			<input type="submit" value="Login"/>
 		</form>
 	</body>
 </html>