ivanszabo/WorkFlowCheck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Login és ChangePassword formok változtatása spinner kiegészítés

Browse Source
This commit is contained in:
ivanszabo
2026-01-20 10:10:52 +01:00
parent f480269bc5
commit 4f4ca5cec4
2 changed files with 123 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/WorkFlowCheck.Web/Pages/Account/ChangePassword.cshtml
+47 -5
View File
@@ -21,6 +21,15 @@
<div class="card shadow p-4" style="min-width: 350px; max-width: 400px; width: 100%;"> <div class="card shadow p-4" style="min-width: 350px; max-width: 400px; width: 100%;">
<h2 class="mb-4 text-center">Jelszó módosítása</h2> <h2 class="mb-4 text-center">Jelszó módosítása</h2>
<!-- Loading overlay -->
<div id="formLoading" class="position-absolute top-0 start-0 w-100 h-100 d-none align-items-center justify-content-center"
style="background: rgba(255,255,255,.75); z-index: 10; border-radius: .375rem;">
<div class="text-center">
<div class="spinner-border" role="status" aria-hidden="true"></div>
<div class="mt-2 small text-muted">Kérlek várj…</div>
</div>
</div>
<div id="errorMessageContainer" class="alert alert-danger" style="display:none;"></div> <div id="errorMessageContainer" class="alert alert-danger" style="display:none;"></div>
<form method="post"> <form method="post">
@@ -55,14 +64,14 @@
</div> </div>
<hr class="mt-4 mb-3 border-secondary"> <hr class="mt-4 mb-3 border-secondary">
<div id="login2F1" class="d-grid"> <div id="login2F1" class="d-grid">
<button id="Login2F1Btn" type="button" class="btn btn-primary">Bejelentkezés</button> <button id="Login2F1Btn" type="button" class="btn btn-primary">Ellenőrzés</button>
</div> </div>
<div id="login2F2" class="d-grid"> <div id="login2F2" class="d-grid">
<button id="Login2F2Btn" type="button" class="btn btn-primary">Megerősítés</button> <button id="Login2F2Btn" type="button" class="btn btn-primary">Megerősítés</button>
</div> </div>
</form> </form>
</div> </div>
<!-- Message Modal --> <!-- Message Modal -->
<div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true"> <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
@@ -80,7 +89,7 @@
</div> </div>
</div> </div>
</div> </div>
<script src="~/js/site.js" asp-append-version="true"></script> <script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
@@ -88,20 +97,46 @@
<script src="https://cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@4.0.0/dist/jquery.validate.unobtrusive.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@4.0.0/dist/jquery.validate.unobtrusive.min.js"></script>
<script> <script>
function setLoading(isLoading) {
if (isLoading) {
$('#formLoading').removeClass('d-none').addClass('d-flex');
$('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
// opcionális: inputok tiltása is
// $('#User2FADTO_UserName, #User2FADTO_Password, #User2FADTO_Code').prop('disabled', true);
} else {
$('#formLoading').addClass('d-none').removeClass('d-flex');
$('#Login2F1Btn, #Login2F2Btn').prop('disabled', false);
// $('#User2FADTO_UserName, #User2FADTO_Password, #User2FADTO_Code').prop('disabled', false);
}
}
let requestInFlight = false;
function beginRequest() {
if (requestInFlight) return false;
requestInFlight = true;
setLoading(true);
return true;
}
function endRequest() {
requestInFlight = false;
setLoading(false);
}
$(document).ready(function () { $(document).ready(function () {
$('#VerificationCode').hide(); $('#VerificationCode').hide();
$('#login2F2').hide(); $('#login2F2').hide();
$('#Login2F2Btn').hide(); $('#Login2F2Btn').hide();
$('#UserChangePassword2FADTO_UserName').attr('readonly', true); $('#UserChangePassword2FADTO_UserName').attr('readonly', true);
$('#Login2F1Btn').on('click', function () { $('#Login2F1Btn').on('click', function () {
// $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true); // $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
if (!beginRequest()) return;
$('#errorMessageContainer').hide().text(''); $('#errorMessageContainer').hide().text('');
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const userName = $('#UserChangePassword2FADTO_UserName').val(); const userName = $('#UserChangePassword2FADTO_UserName').val();
const password = $('#UserChangePassword2FADTO_OldPassword').val(); const password = $('#UserChangePassword2FADTO_OldPassword').val();
$.ajax({ $.ajax({
url: '/Account/ChangePassword?handler=Login2F1', url: '/Account/ChangePassword?handler=Login2F1',
type: 'POST', type: 'POST',
@@ -136,6 +171,9 @@
// .prop('disabled', false) // .prop('disabled', false)
// .removeAttr('disabled') // .removeAttr('disabled')
// .removeClass('disabled'); // .removeClass('disabled');
},
complete: function () {
endRequest();
} }
}); });
@@ -143,6 +181,7 @@
$('#Login2F2Btn').on('click', function () { $('#Login2F2Btn').on('click', function () {
// $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true); // $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
if (!beginRequest()) return;
$('#errorMessageContainer').hide().text(''); $('#errorMessageContainer').hide().text('');
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
@@ -194,6 +233,9 @@
// .prop('disabled', false) // .prop('disabled', false)
// .removeAttr('disabled') // .removeAttr('disabled')
// .removeClass('disabled'); // .removeClass('disabled');
},
complete: function () {
endRequest();
} }
}); });
}); });
src/WorkFlowCheck.Web/Pages/Account/Login.cshtml
+76 -32
View File
@@ -22,39 +22,48 @@
@* <body class="bg-light d-flex justify-content-center align-items-center vh-100"> *@ @* <body class="bg-light d-flex justify-content-center align-items-center vh-100"> *@
<body class="bg-light d-flex flex-column min-vh-100"> <body class="bg-light d-flex flex-column min-vh-100">
<main class="flex-grow-1 d-flex justify-content-center align-items-center"> <main class="flex-grow-1 d-flex justify-content-center align-items-center">
<div class="card shadow p-4" style="min-width: 350px; max-width: 400px; width: 100%;"> <div class="card shadow p-4" style="min-width: 350px; max-width: 400px; width: 100%;">
<h2 class="mb-4 text-center">Bejelentkezés</h2> <h2 class="mb-4 text-center">Bejelentkezés</h2>
<div id="errorMessageContainer" class="alert alert-danger" style="display:none;"></div> <!-- Loading overlay -->
<div id="formLoading" class="position-absolute top-0 start-0 w-100 h-100 d-none align-items-center justify-content-center"
<form method="post"> style="background: rgba(255,255,255,.75); z-index: 10; border-radius: .375rem;">
<meta name="csrf-token" content="@Antiforgery.GetAndStoreTokens(HttpContext).RequestToken" /> <div class="text-center">
<input type="hidden" asp-for="User2FADTO.Token2FA" /> <div class="spinner-border" role="status" aria-hidden="true"></div>
<div class="mb-3"> <div class="mt-2 small text-muted">Kérlek várj…</div>
<label asp-for="User2FADTO.UserName" class="form-label">Felhasználónév</label> </div>
<input asp-for="User2FADTO.UserName" class="form-control" />
<span asp-validation-for="User2FADTO.UserName" class="text-danger small"></span>
</div> </div>
<div class="mb-3"> <div id="errorMessageContainer" class="alert alert-danger" style="display:none;"></div>
<label asp-for="User2FADTO.Password" class="form-label">Jelszó</label>
<input asp-for="User2FADTO.Password" type="password" class="form-control" /> <form method="post">
<span asp-validation-for="User2FADTO.Password" class="text-danger small"></span> <meta name="csrf-token" content="@Antiforgery.GetAndStoreTokens(HttpContext).RequestToken" />
</div> <input type="hidden" asp-for="User2FADTO.Token2FA" />
<div id="VerificationCode" class="mb-3"> <div class="mb-3">
<label asp-for="User2FADTO.Code" class="form-label">Megerősítő kód</label> <label asp-for="User2FADTO.UserName" class="form-label">Felhasználónév</label>
<input asp-for="User2FADTO.Code" class="form-control" /> <input asp-for="User2FADTO.UserName" class="form-control" />
<span asp-validation-for="User2FADTO.Code" class="text-danger small"></span> <span asp-validation-for="User2FADTO.UserName" class="text-danger small"></span>
</div> </div>
<hr class="mt-4 mb-3 border-secondary">
<div id="login2F1" class="d-grid"> <div class="mb-3">
<button id="Login2F1Btn" type="button" class="btn btn-primary">Bejelentkezés</button> <label asp-for="User2FADTO.Password" class="form-label">Jelszó</label>
</div> <input asp-for="User2FADTO.Password" type="password" class="form-control" />
<div id="login2F2" class="d-grid"> <span asp-validation-for="User2FADTO.Password" class="text-danger small"></span>
<button id="Login2F2Btn" type="button" class="btn btn-primary">Megerősítés</button> </div>
</div> <div id="VerificationCode" class="mb-3">
</form> <label asp-for="User2FADTO.Code" class="form-label">Megerősítő kód</label>
</div> <input asp-for="User2FADTO.Code" class="form-control" />
<span asp-validation-for="User2FADTO.Code" class="text-danger small"></span>
</div>
<hr class="mt-4 mb-3 border-secondary">
<div id="login2F1" class="d-grid">
<button id="Login2F1Btn" type="button" class="btn btn-primary">Bejelentkezés</button>
</div>
<div id="login2F2" class="d-grid">
<button id="Login2F2Btn" type="button" class="btn btn-primary">Megerősítés</button>
</div>
</form>
</div>
</main> </main>
<footer class="border-top footer text-muted"> <footer class="border-top footer text-muted">
<div class="container"> <div class="container">
@@ -68,13 +77,41 @@
<script src="https://cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@4.0.0/dist/jquery.validate.unobtrusive.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@4.0.0/dist/jquery.validate.unobtrusive.min.js"></script>
<script> <script>
function setLoading(isLoading) {
if (isLoading) {
$('#formLoading').removeClass('d-none').addClass('d-flex');
$('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
// opcionális: inputok tiltása is
// $('#User2FADTO_UserName, #User2FADTO_Password, #User2FADTO_Code').prop('disabled', true);
} else {
$('#formLoading').addClass('d-none').removeClass('d-flex');
$('#Login2F1Btn, #Login2F2Btn').prop('disabled', false);
// $('#User2FADTO_UserName, #User2FADTO_Password, #User2FADTO_Code').prop('disabled', false);
}
}
let requestInFlight = false;
function beginRequest() {
if (requestInFlight) return false;
requestInFlight = true;
setLoading(true);
return true;
}
function endRequest() {
requestInFlight = false;
setLoading(false);
}
$(document).ready(function () { $(document).ready(function () {
$('#VerificationCode').hide(); $('#VerificationCode').hide();
$('#login2F2').hide(); $('#login2F2').hide();
$('#Login2F2Btn').hide(); $('#Login2F2Btn').hide();
$('#Login2F1Btn').on('click', function () { $('#Login2F1Btn').on('click', function () {
// $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true); // $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
if (!beginRequest()) return;
$('#errorMessageContainer').hide().text(''); $('#errorMessageContainer').hide().text('');
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const userName = $('#User2FADTO_UserName').val(); const userName = $('#User2FADTO_UserName').val();
@@ -114,16 +151,20 @@
// .prop('disabled', false) // .prop('disabled', false)
// .removeAttr('disabled') // .removeAttr('disabled')
// .removeClass('disabled'); // .removeClass('disabled');
},
complete: function () {
endRequest();
} }
}); });
}); });
$('#Login2F2Btn').on('click', function () { $('#Login2F2Btn').on('click', function () {
// $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true); // $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
if (!beginRequest()) return;
$('#errorMessageContainer').hide().text(''); $('#errorMessageContainer').hide().text('');
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const userName = $('#User2FADTO_UserName').val(); const userName = $('#User2FADTO_UserName').val();
const password = $('#User2FADTO_Password').val(); const password = $('#User2FADTO_Password').val();
const code = $('#User2FADTO_Code').val(); const code = $('#User2FADTO_Code').val();
@@ -162,6 +203,9 @@
// .prop('disabled', false) // .prop('disabled', false)
// .removeAttr('disabled') // .removeAttr('disabled')
// .removeClass('disabled'); // .removeClass('disabled');
},
complete: function () {
endRequest();
} }
}); });
}); });