Fixed login form, navigation

This commit is contained in:
danial23 2025-05-20 11:26:05 -04:00
parent 27aaee6293
commit 51766eca42
Signed by: danial23
SSH key fingerprint: SHA256:IJ8VP0j2WMUVweTYnzUUnEjNgPnGx+mAt+RhqWZ01bU
4 changed files with 175 additions and 182 deletions

View file

@ -4,16 +4,16 @@
ViewData["Title"] = "Authenticate";
}
<div class="row" style="display: flex; flex-direction: row;">
<div class="col-md-4">
<div class="row">
<div class="col-md-6 offset-md-3">
<form method="post">
<h4>Login</h4>
<h4>Login or Register</h4>
<hr />
@if (Model.LoginErrorMessages != null && Model.LoginErrorMessages.Any())
@if (Model.ErrorMessages != null && Model.ErrorMessages.Any())
{
<div asp-validation-summary="ModelOnly" class="text-danger" role="alert">
<div class="text-danger" role="alert">
<ul>
@foreach (var error in Model.LoginErrorMessages)
@foreach (var error in Model.ErrorMessages)
{
<li>@error</li>
}
@ -21,52 +21,23 @@
</div>
}
<div class="form-floating mb-3">
<input asp-for="LoginInput.Username" class="form-control" autocomplete="username" aria-required="true" placeholder="username" />
<label asp-for="LoginInput.Username">Username</label>
<span asp-validation-for="LoginInput.Username" class="text-danger"></span>
<input asp-for="Input.Username" class="form-control" autocomplete="username" aria-required="true" placeholder="username" />
<label asp-for="Input.Username">Username</label>
<span asp-validation-for="Input.Username" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="LoginInput.Password" class="form-control" type="password" autocomplete="current-password" aria-required="true" placeholder="password" />
<label asp-for="LoginInput.Password">Password</label>
<span asp-validation-for="LoginInput.Password" class="text-danger"></span>
</div>
<div>
<button type="submit" asp-page-handler="Login" class="w-100 btn btn-lg btn-secondary">Login</button>
</div>
</form>
</div>
<div class="col-md-4">
<form method="post">
<h4>Register</h4>
<hr />
@if (Model.RegisterErrorMessages != null && Model.RegisterErrorMessages.Any())
{
<div asp-validation-summary="ModelOnly" class="text-danger" role="alert">
<ul>
@foreach (var error in Model.RegisterErrorMessages)
{
<li>@error</li>
}
</ul>
</div>
}
<div class="form-floating mb-3">
<input asp-for="RegisterInput.Username" class="form-control" autocomplete="username" aria-required="true" placeholder="username" />
<label asp-for="RegisterInput.Username">Username</label>
<span asp-validation-for="RegisterInput.Username" class="text-danger"></span>
<input asp-for="Input.Password" class="form-control" type="password" autocomplete="current-password" aria-required="true" placeholder="password" />
<label asp-for="Input.Password">Password</label>
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="RegisterInput.Email" class="form-control" autocomplete="email" placeholder="name@example.com" />
<label asp-for="RegisterInput.Email">Email</label>
<span asp-validation-for="RegisterInput.Email" class="text-danger"></span>
<input asp-for="Input.Email" class="form-control" autocomplete="email" placeholder="name@example.com" id="Input_Email" />
<label asp-for="Input.Email">Email (Optional for Login)</label>
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="RegisterInput.Password" class="form-control" type="password" autocomplete="current-password" aria-required="true" placeholder="password" />
<label asp-for="RegisterInput.Password">Password</label>
<span asp-validation-for="RegisterInput.Password" class="text-danger"></span>
</div>
<div>
<button type="submit" asp-page-handler="Register" class="w-100 btn btn-lg btn-primary">Login</button>
<div class="d-grid gap-2 d-md-flex justify-content-md-between">
<button type="submit" asp-page-handler="Login" class="btn btn-lg btn-secondary flex-grow-1 me-2" id="loginButton">Login</button>
<button type="submit" asp-page-handler="Register" class="btn btn-lg btn-primary flex-grow-1 ms-2">Register</button>
</div>
</form>
</div>
@ -76,14 +47,20 @@
<partial name="_ValidationScriptsPartial" />
<script>
$(document).ready(function() {
// when login button is clicked, remove validation from email field
$("button[asp-page-handler='Login']").click(function() {
$("#Input_Email").removeAttr("data-val");
$("#Input_Email").removeAttr("data-val-required");
// revalidate the form to clear error
$("form").validate().element("#Input_Email");
return true;
// When the login button is clicked
$("#loginButton").click(function() {
var emailInput = $("#Input_Email");
var form = $("#authForm");
// Remove the data-val-required attribute for client-side validation
emailInput.removeAttr("data-val-required");
// If jQuery Validate has already initialized the form,
// re-parse the validation for the email field to reflect the change.
if (form.data('validator')) {
form.validate().element(emailInput);
}
});
});
</script>
}
}