Fixed login form, navigation
This commit is contained in:
parent
27aaee6293
commit
51766eca42
4 changed files with 175 additions and 182 deletions
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue