I'm trying to accomplish login functionality using UserName instead of Email to Login.
I'm using Bootstrap Modal dialog for loging in users with jquery and ajax for error handling.
The UserName is not an email address so ModelState IsValid always returns false. If I hard code an email address in the javascrip file then all works.
Is there anyway around this issue. Any help would be much appreciated.
<div role="document">
<div >
<div >
<h5 id="exampleModalLabel">Login</h5>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div >
<form id="UserLoginForm" asp-controller="UserAuth" asp-action="login">
<div asp-validation-summary="ModelOnly" ></div>
<input type="hidden" asp-for="LoginInValid" />
<div >
<label asp-for="UserName" ></label>
<div >
<input asp-for="UserName" placeholder="User Name" />
<span asp-validation-for="UserName" ></span>
</div>
</div>
<div >
<label asp-for="Password" ></label>
<div >
<input asp-for="Password" placeholder="Password" />
<span asp-validation-for="Password" ></span>
</div>
</div>
<div >
<div >
<div >
<input asp-for="RememberMe" />
<label asp-for="RememberMe" col-form-label"></label>
</div>
</div>
</div>
</form>
</div>
<div >
<button type="button" data-bs-dismiss="modal">Close</button>
<button type="button" id="login" name="login" >Login</button>
</div>
</div>
[AllowAnonymous]
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Login(LoginModel loginModel)
{
loginModel.LoginInValid = "true";
if (ModelState.IsValid)
{
var result = await _signInManager.PasswordSignInAsync(loginModel.UserName, loginModel.Password, loginModel.RememberMe, lockoutOnFailure: false);
if (result.Succeeded)
{
loginModel.LoginInValid = "";
}
else
{
ModelState.AddModelError(string.Empty, "Invalid login attempt");
}
}
return PartialView("_UserLoginPartial", loginModel);
}
Error handling is not displayed
(function () {
var userloginButton = $("#UserLoginModal button[name='login']").click(onUserLoginClick);
function onUserLoginClick() {
var url = "UserAuth/Login";
var antiForgeryToken = $("#UserLoginModal input[name='__RequestVerificationToken']").val();
var username = $("#UserLoginModal input[name = 'UserName']").val();
var email = "mydomain.com"
/*var email = $("#UserLoginModal input[name = 'Email']").val();*/
var password = $("#UserLoginModal input[name = 'Password']").val();
var rememberMe = $("#UserLoginModal input[name = 'RememberMe']").prop('checked');
var userInput = {
__RequestVerificationToken: antiForgeryToken,
UserName: username,
Email: email,
Password: password,
RememeberMe: rememberMe
};
}
});
LoginModel
public class LoginModel
{
[Required]
[Display(Name = "User Name")]
[StringLength(25, MinimumLength = 2)]
public string UserName { get; set; }
[Required]
[StringLength(100, MinimumLength = 2)]
[EmailAddress]
public string Email { get; set; }
[Required]
[StringLength (100, MinimumLength = 2)]
[DataType(DataType.Password)]
public string Password { get; set; }
public bool RememberMe { get; set; }
public string LoginInValid { get; set; }
}
CodePudding user response:
LoginModel has UserName, Email, and Password all marked as "Required", so ModelState will not be valid unless all are provided.
You'll need to either provide values for each of these (I don't see any Email input in your HTML markup) or remove the [Required] annotation from the LoginModel properties you don't want to provide.