From 4f4ca5cec4fb250b1cdd1bf14988b3b8b96248fa Mon Sep 17 00:00:00 2001
From: ivanszabo <ivan.szabo.sis@gmail.com>
Date: Tue, 20 Jan 2026 10:10:52 +0100
Subject: [PATCH] =?UTF-8?q?Login=20=C3=A9s=20ChangePassword=20formok=20v?=
 =?UTF-8?q?=C3=A1ltoztat=C3=A1sa=20spinner=20kieg=C3=A9sz=C3=ADt=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/Account/ChangePassword.cshtml       |  52 ++++++++-
 .../Pages/Account/Login.cshtml                | 108 ++++++++++++------
 2 files changed, 123 insertions(+), 37 deletions(-)

diff --git a/src/WorkFlowCheck.Web/Pages/Account/ChangePassword.cshtml b/src/WorkFlowCheck.Web/Pages/Account/ChangePassword.cshtml
index 038420b..9bed548 100644
--- a/src/WorkFlowCheck.Web/Pages/Account/ChangePassword.cshtml
+++ b/src/WorkFlowCheck.Web/Pages/Account/ChangePassword.cshtml
@@ -21,6 +21,15 @@
     <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>
 
+        <!-- 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>
 
         <form method="post">
@@ -55,14 +64,14 @@
             </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>
+                <button id="Login2F1Btn" type="button" class="btn btn-primary">Ellenőrzé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>
-    
+
     <!-- Message Modal -->
     <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
@@ -80,7 +89,7 @@
             </div>
         </div>
     </div>
-    
+
     <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://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>
+        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 () {
             $('#VerificationCode').hide();
             $('#login2F2').hide();
             $('#Login2F2Btn').hide();
-            
+
             $('#UserChangePassword2FADTO_UserName').attr('readonly', true);
 
             $('#Login2F1Btn').on('click', function () {
                 // $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
+                if (!beginRequest()) return;
+
                 $('#errorMessageContainer').hide().text('');
                 const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                 const userName = $('#UserChangePassword2FADTO_UserName').val();
                 const password = $('#UserChangePassword2FADTO_OldPassword').val();
-               
+
                 $.ajax({
                    url: '/Account/ChangePassword?handler=Login2F1',
                    type: 'POST',
@@ -136,6 +171,9 @@
                            //  .prop('disabled', false)
                            //  .removeAttr('disabled')
                            //  .removeClass('disabled');
+                   },
+                   complete: function () {
+                       endRequest();
                    }
                });
 
@@ -143,6 +181,7 @@
 
             $('#Login2F2Btn').on('click', function () {
                 // $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
+                if (!beginRequest()) return;
                 $('#errorMessageContainer').hide().text('');
                 const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
 
@@ -194,6 +233,9 @@
                             // .prop('disabled', false)
                             // .removeAttr('disabled')
                             // .removeClass('disabled');
+                   },
+                   complete: function () {
+                       endRequest();
                    }
                });
             });
diff --git a/src/WorkFlowCheck.Web/Pages/Account/Login.cshtml b/src/WorkFlowCheck.Web/Pages/Account/Login.cshtml
index 548e73b..82a33bb 100644
--- a/src/WorkFlowCheck.Web/Pages/Account/Login.cshtml
+++ b/src/WorkFlowCheck.Web/Pages/Account/Login.cshtml
@@ -22,39 +22,48 @@
 @* <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">
     <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%;">
-        <h2 class="mb-4 text-center">Bejelentkezés</h2>
+        <div class="card shadow p-4" style="min-width: 350px; max-width: 400px; width: 100%;">
+            <h2 class="mb-4 text-center">Bejelentkezés</h2>
 
-        <div id="errorMessageContainer" class="alert alert-danger" style="display:none;"></div>
-
-        <form method="post">
-            <meta name="csrf-token" content="@Antiforgery.GetAndStoreTokens(HttpContext).RequestToken" />
-            <input type="hidden" asp-for="User2FADTO.Token2FA" />
-            <div class="mb-3">
-                <label asp-for="User2FADTO.UserName" class="form-label">Felhasználónév</label>
-                <input asp-for="User2FADTO.UserName" class="form-control" />
-                <span asp-validation-for="User2FADTO.UserName" class="text-danger small"></span>
+            <!-- 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 class="mb-3">
-                <label asp-for="User2FADTO.Password" class="form-label">Jelszó</label>
-                <input asp-for="User2FADTO.Password" type="password" class="form-control" />
-                <span asp-validation-for="User2FADTO.Password" class="text-danger small"></span>
-            </div>
-            <div id="VerificationCode" class="mb-3">
-                <label asp-for="User2FADTO.Code" class="form-label">Megerősítő kód</label>
-                <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>
+            <div id="errorMessageContainer" class="alert alert-danger" style="display:none;"></div>
+
+            <form method="post">
+                <meta name="csrf-token" content="@Antiforgery.GetAndStoreTokens(HttpContext).RequestToken" />
+                <input type="hidden" asp-for="User2FADTO.Token2FA" />
+                <div class="mb-3">
+                    <label asp-for="User2FADTO.UserName" class="form-label">Felhasználónév</label>
+                    <input asp-for="User2FADTO.UserName" class="form-control" />
+                    <span asp-validation-for="User2FADTO.UserName" class="text-danger small"></span>
+                </div>
+
+                <div class="mb-3">
+                    <label asp-for="User2FADTO.Password" class="form-label">Jelszó</label>
+                    <input asp-for="User2FADTO.Password" type="password" class="form-control" />
+                    <span asp-validation-for="User2FADTO.Password" class="text-danger small"></span>
+                </div>
+                <div id="VerificationCode" class="mb-3">
+                    <label asp-for="User2FADTO.Code" class="form-label">Megerősítő kód</label>
+                    <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>
     <footer class="border-top footer text-muted">
         <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>
+         
+        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 () {
             $('#VerificationCode').hide();
             $('#login2F2').hide();
             $('#Login2F2Btn').hide();
 
+
+
             $('#Login2F1Btn').on('click', function () {
                 // $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
+                if (!beginRequest()) return;
                 $('#errorMessageContainer').hide().text('');
                 const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                 const userName = $('#User2FADTO_UserName').val();
@@ -114,16 +151,20 @@
                            //  .prop('disabled', false)
                            //  .removeAttr('disabled')
                            //  .removeClass('disabled');
+                   },
+                   complete: function () {
+                       endRequest();
                    }
                });
-               
+
             });
 
             $('#Login2F2Btn').on('click', function () {
                 // $('#Login2F1Btn, #Login2F2Btn').prop('disabled', true);
+                if (!beginRequest()) return;
                 $('#errorMessageContainer').hide().text('');
                 const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
-                
+
                 const userName = $('#User2FADTO_UserName').val();
                 const password = $('#User2FADTO_Password').val();
                 const code = $('#User2FADTO_Code').val();
@@ -162,6 +203,9 @@
                             // .prop('disabled', false)
                             // .removeAttr('disabled')
                             // .removeClass('disabled');
+                   },
+                   complete: function () {
+                       endRequest();
                    }
                });
             });