# HG changeset patch
# User RhodeCode Admin <admin@rhodecode.com>
# Date 2024-04-16 11:14:47
# Node ID 965120af7cf72f74c8f6ebd03b76ed729443e502
# Parent  4cbf1ad2c2dbe89819ca4cb931dfbe66cab6a360

2fa: recovery codes copy

diff --git a/rhodecode/templates/admin/my_account/my_account_2fa.mako b/rhodecode/templates/admin/my_account/my_account_2fa.mako
--- a/rhodecode/templates/admin/my_account/my_account_2fa.mako
+++ b/rhodecode/templates/admin/my_account/my_account_2fa.mako
@@ -31,14 +31,9 @@
             </div>
             <button id="saveBtn" class="btn btn-primary" ${'disabled' if c.locked_2fa else ''}>${_('Save')}</button>
         </div>
-        <div id="codesPopup" class="modal">
-            <div class="modal-content">
-                <ul id="recoveryCodesList"></ul>
-                <button id="copyAllBtn" class="btn btn-primary">Copy All</button>
-            </div>
-        </div>
     </div>
 </div>
+
 % if c.state_of_2fa:
 <div class="panel panel-default">
     <div class="panel-heading">
@@ -54,22 +49,19 @@
     </div>
 
 </div>
+
 % endif
+
 <script>
     function submitForm() {
         let formData = new FormData(document.getElementById("2faForm"));
         let xhr = new XMLHttpRequest();
+
         let success = function (response) {
             let recovery_codes = response.recovery_codes;
-            const codesList = document.getElementById("recoveryCodesList");
+            showRecoveryCodesPopup(recovery_codes);
+        }
 
-            codesList.innerHTML = "";
-            recovery_codes.forEach(code => {
-                const listItem = document.createElement("li");
-                listItem.textContent = code;
-                codesList.appendChild(listItem);
-            });
-        }
         xhr.onreadystatechange = function () {
             if (xhr.readyState == 4 && xhr.status == 200) {
                 let responseDoc = new DOMParser().parseFromString(xhr.responseText, "text/html");
@@ -79,7 +71,6 @@
                 } else {
                     let regenerate_url = pyroutes.url('my_account_regenerate_2fa_recovery_codes');
                     ajaxPOST(regenerate_url, {'csrf_token': CSRF_TOKEN}, success);
-                    showRecoveryCodesPopup();
                 }
             }
         };
@@ -87,8 +78,7 @@
         xhr.open("POST", url, true);
         xhr.send(formData);
     }
-</script>
-<script>
+
     document.getElementById('2faEnabled').addEventListener('click', function () {
         document.getElementById('2faDisabled').checked = false;
     });
@@ -109,32 +99,25 @@
         let post_data = {'state': state, 'csrf_token': CSRF_TOKEN};
         let url = pyroutes.url('my_account_configure_2fa');
 
-        ajaxPOST(url, post_data, null)
-    };
+        ajaxPOST(url, post_data, function(){}, function(){})
+    }
+
     document.getElementById('saveBtn').addEventListener('click', function () {
         var state = getStateValue();
         saveChanges(state);
     });
-</script>
-<script>
-    function showRecoveryCodesPopup() {
-        const popup = document.getElementById("codesPopup");
-        popup.style.display = "block";
+
+    function showRecoveryCodesPopup(recoveryCodes) {
+        let funcData = {'recoveryCodes': recoveryCodes}
+        let recoveryCodesHtml = renderTemplate('recoveryCodes', funcData)
+
+        SwalNoAnimation.fire({
+            allowOutsideClick: false,
+            confirmButtonText: _gettext('I Copied the codes'),
+            title: _gettext('2FA Recovery Codes'),
+            html: recoveryCodesHtml
+        })
+
     }
 
-    document.getElementById("copyAllBtn").addEventListener("click", function () {
-        const codesListItems = document.querySelectorAll("#recoveryCodesList li");
-        const allCodes = Array.from(codesListItems).map(item => item.textContent).join(", ");
-
-        const textarea = document.createElement('textarea');
-        textarea.value = allCodes;
-        document.body.appendChild(textarea);
-
-        textarea.select();
-        document.execCommand('copy');
-
-        document.body.removeChild(textarea);
-        const popup = document.getElementById("codesPopup");
-        popup.style.display = ""
-    });
 </script>