My ASP.NET web application features a straightforward login page with input fields for email address and password. Upon clicking the 'Login' button, the 'login_user()' function in the 'app.js' file is triggered.
@section Scripts {
@Scripts.Render("~/bundles/app")
}
<div class="row">
<h3>Log In</h3>
<label>User Name</label>
<input class="form-control" type="text" autocomplete="on" id="loginEmail" />
<label>Password</label>
<input class="form-control" type="password" id="loginPassword" />
<button onclick="login_user()" class="btn btn-default">Log In</button>
</div>
The login_user() function :
function login_user() {
var UserName = $('#loginEmail').val();
var PassWord= $('#loginPassword').val();
var loginData = {
grant_type: 'password',
username: UserName,
password: PassWord
};
var TokenEndPoint = baseUrl.concat('Token');
$.post(TokenEndPoint , loginData,
function (data) {
// Cache the access token in session storage.
sessionStorage.setItem(tokenKey, data.access_token);
localStorage.setItem(userKey, data.userName);
// Now we have the token we can setup the header for each subsequent call
$.ajaxSetup({
headers: {
'Authorization': 'Bearer ' + data.access_token
}
});
}).fail(showFailToLogin);
}
Although functional, the browser does not remember usernames and passwords, even with 'autocomplete="on"'. Research reveals that this feature only works when input fields are enclosed within a form.
However, wrapping the inputs with <form>..</form> tags causes malfunctions in my app. Clicking the 'Login' button no longer triggers the login_user() function, but submits form data to the ASP.NET server instead. This results in an endless loop of returning to the empty login page. It seems to be related to the default 'submit' action of form controls, but I'm struggling to disable it.