More work on contact create windows

cp/app/Controllers/ContactsController.php

@@ -239,7 +239,7 @@ class ContactsController extends Controller
             }
             
             if (!$authInfo_pw) {
-                $this->container->get('flash')->addMessage('error', 'Unable to create contact: Email contact authinfo missing');
+                $this->container->get('flash')->addMessage('error', 'Unable to create contact: Contact authinfo missing');
                 return $response->withHeader('Location', '/contact/create')->withStatus(302);
             }
 
@@ -446,21 +446,24 @@ class ContactsController extends Controller
             $authInfo_pw = $data['authInfoc'] ?? null;
 
             if (!$contactID) {
-                $this->container->get('flash')->addMessage('error', 'Unable to create contact: Please provide a contact ID');
+                $error = ["error" => "Unable to create contact: Please provide a contact ID"];
-                return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                $response->getBody()->write(json_encode($error));
+                return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
             }
 
             // Validation for contact ID
             $invalid_identifier = validate_identifier($contactID);
             if ($invalid_identifier) {
-                $this->container->get('flash')->addMessage('error', 'Unable to create contact: ' . $invalid_identifier);
+                $error = ["error" => "Unable to create contact: " . $invalid_identifier];
-                return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                $response->getBody()->write(json_encode($error));
+                return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
             }
             
             $contact = $db->select('SELECT * FROM contact WHERE identifier = ?', [$contactID]);
             if ($contact) {
-                $this->container->get('flash')->addMessage('error', 'Unable to create contact: Contact ID already exists');
+                $error = ["error" => "Unable to create contact: Contact ID already exists"];
-                return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                $response->getBody()->write(json_encode($error));
+                return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
             }
 
             $result = $db->selectRow('SELECT registrar_id FROM registrar_users WHERE user_id = ?', [$_SESSION['auth_user_id']]);
@@ -473,59 +476,68 @@ class ContactsController extends Controller
 
             if ($postalInfoIntName) {
                 if (!$postalInfoIntName) {
-                    $this->container->get('flash')->addMessage('error', 'Unable to create contact: Missing contact name');
+                    $error = ["error" => "Unable to create contact: Missing contact name"];
-                    return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                    $response->getBody()->write(json_encode($error));
+                    return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                 }
 
                 if (preg_match('/(^\-)|(^\,)|(^\.)|(\-\-)|(\,\,)|(\.\.)|(\-$)/', $postalInfoIntName) || !preg_match('/^[a-zA-Z0-9\-\&\,\.\/\s]{5,}$/', $postalInfoIntName)) {
-                    $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid contact name');
+                    $error = ["error" => "Unable to create contact: Invalid contact name"];
-                    return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                    $response->getBody()->write(json_encode($error));
+                    return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                 }
 
                 if ($postalInfoIntOrg) {
                     if (preg_match('/(^\-)|(^\,)|(^\.)|(\-\-)|(\,\,)|(\.\.)|(\-$)/', $postalInfoIntOrg) || !preg_match('/^[a-zA-Z0-9\-\&\,\.\/\s]{5,}$/', $postalInfoIntOrg)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid contact org');
+                        $error = ["error" => "Unable to create contact: Invalid contact org"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
 
                 if ($postalInfoIntStreet1) {
                     if (preg_match('/(^\-)|(^\,)|(^\.)|(\-\-)|(\,\,)|(\.\.)|(\-$)/', $postalInfoIntStreet1) || !preg_match('/^[a-zA-Z0-9\-\&\,\.\/\s]{5,}$/', $postalInfoIntStreet1)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid contact street');
+                        $error = ["error" => "Unable to create contact: Invalid contact street"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
 
                 if ($postalInfoIntStreet2) {
                     if (preg_match('/(^\-)|(^\,)|(^\.)|(\-\-)|(\,\,)|(\.\.)|(\-$)/', $postalInfoIntStreet2) || !preg_match('/^[a-zA-Z0-9\-\&\,\.\/\s]{5,}$/', $postalInfoIntStreet2)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid contact street 2');
+                        $error = ["error" => "Unable to create contact: Invalid contact street 2"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
 
                 if ($postalInfoIntStreet3) {
                     if (preg_match('/(^\-)|(^\,)|(^\.)|(\-\-)|(\,\,)|(\.\.)|(\-$)/', $postalInfoIntStreet3) || !preg_match('/^[a-zA-Z0-9\-\&\,\.\/\s]{5,}$/', $postalInfoIntStreet3)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid contact street 3');
+                        $error = ["error" => "Unable to create contact: Invalid contact street 3"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
 
                 if (preg_match('/(^\-)|(^\.)|(\-\-)|(\.\.)|(\.\-)|(\-\.)|(\-$)|(\.$)/', $postalInfoIntCity) || !preg_match('/^[a-z][a-z\-\.\'\s]{2,}$/i', $postalInfoIntCity)) {
-                    $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid contact city');
+                    $error = ["error" => "Unable to create contact: Invalid contact city"];
-                    return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                    $response->getBody()->write(json_encode($error));
+                    return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                 }
 
                 if ($postalInfoIntSp) {
                     if (preg_match('/(^\-)|(^\.)|(\-\-)|(\.\.)|(\.\-)|(\-\.)|(\-$)|(\.$)/', $postalInfoIntSp) || !preg_match('/^[A-Z][a-zA-Z\-\.\s]{1,}$/', $postalInfoIntSp)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid contact state/province');
+                        $error = ["error" => "Unable to create contact: Invalid contact state/province"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
 
                 if ($postalInfoIntPc) {
                     if (preg_match('/(^\-)|(\-\-)|(\-$)/', $postalInfoIntPc) || !preg_match('/^[A-Z0-9\-\s]{3,}$/', $postalInfoIntPc)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid contact postal code');
+                        $error = ["error" => "Unable to create contact: Invalid contact postal code"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
 
@@ -533,99 +545,114 @@ class ContactsController extends Controller
 
             if ($postalInfoLocName) {
                 if (!validateLocField($postalInfoLocName, 3)) {
-                    $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid loc contact name');
+                    $error = ["error" => "Unable to create contact: Invalid loc contact name"];
-                    return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                    $response->getBody()->write(json_encode($error));
+                    return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                 }
 
                 if ($postalInfoLocOrg) {
                     if (!validateLocField($postalInfoLocOrg, 3)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid loc contact org');
+                        $error = ["error" => "Unable to create contact: Invalid loc contact org"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
 
                 if ($postalInfoLocStreet1) {
                     if (!validateLocField($postalInfoLocStreet1, 3)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid loc contact street');
+                        $error = ["error" => "Unable to create contact: Invalid loc contact street"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
 
                 if ($postalInfoLocStreet2) {
                     if (!validateLocField($postalInfoLocStreet2, 3)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid loc contact street 2');
+                        $error = ["error" => "Unable to create contact: Invalid loc contact street 2"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
 
                 if ($postalInfoLocStreet3) {
                     if (!validateLocField($postalInfoLocStreet3, 3)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid loc contact street 3');
+                        $error = ["error" => "Unable to create contact: Invalid loc contact street 3"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
 
                 if (!validateLocField($postalInfoLocCity, 3)) {
-                    $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid loc contact city');
+                    $error = ["error" => "Unable to create contact: Invalid loc contact city"];
-                    return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                    $response->getBody()->write(json_encode($error));
+                    return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                 }
 
                 if ($postalInfoLocSp) {
                     if (!validateLocField($postalInfoLocSp, 2)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid loc contact state/province');
+                        $error = ["error" => "Unable to create contact: Invalid loc contact state/province"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
 
                 if ($postalInfoLocPc) {
                     if (!validateLocField($postalInfoLocPc, 3)) {
-                        $this->container->get('flash')->addMessage('error', 'Unable to create contact: Invalid loc contact postal code');
+                        $error = ["error" => "Unable to create contact: Invalid loc contact postal code"];
-                        return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                        $response->getBody()->write(json_encode($error));
+                        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                     }
                 }
             }
 
             $normalizedVoice = normalizePhoneNumber($voice, strtoupper($postalInfoIntCc));
             if (isset($normalizedVoice['error'])) {
-                $this->container->get('flash')->addMessage('error', 'Unable to create contact: ' . $normalizedVoice['error']);
+                $error = ["error" => "Unable to create contact: " . $normalizedVoice['error']];
-                return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                $response->getBody()->write(json_encode($error));
+                return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
             }
             $voice = $normalizedVoice['success'];
 
             // Validate length of $voice
             if (strlen($voice) > 17) {
-                $this->container->get('flash')->addMessage('error', 'Unable to create contact: Phone number exceeds 17 characters');
+                $error = ["error" => "Unable to create contact: Phone number exceeds 17 characters"];
-                return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                $response->getBody()->write(json_encode($error));
+                return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
             }
 
             if (!empty($fax)) {
                 $normalizedFax = normalizePhoneNumber($fax, strtoupper($postalInfoIntCc));
                 if (isset($normalizedFax['error'])) {
-                    $this->container->get('flash')->addMessage('error', 'Unable to create contact: ' . $normalizedFax['error']);
+                    $error = ["error" => "Unable to create contact: " . $normalizedFax['error']];
-                    return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                    $response->getBody()->write(json_encode($error));
+                    return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                 }
                 // Update the fax number only if normalization was successful.
                 $fax = $normalizedFax['success'];
             }
 
             if (!validateUniversalEmail($email)) {
-                $this->container->get('flash')->addMessage('error', 'Unable to create contact: Email address failed check');
+                $error = ["error" => "Unable to create contact: Email address failed check"];
-                return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                $response->getBody()->write(json_encode($error));
+                return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
             }
             
             if (!$authInfo_pw) {
-                $this->container->get('flash')->addMessage('error', 'Unable to create contact: Email contact authinfo missing');
+                $error = ["error" => "Unable to create contact: Contact authinfo missing"];
-                return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                $response->getBody()->write(json_encode($error));
+                return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
             }
 
             if ((strlen($authInfo_pw) < 6) || (strlen($authInfo_pw) > 16)) {
-                $this->container->get('flash')->addMessage('error', 'Unable to create contact: Password needs to be at least 6 and up to 16 characters long');
+                $error = ["error" => "Unable to create contact: Password needs to be at least 6 and up to 16 characters long"];
-                return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                $response->getBody()->write(json_encode($error));
+                return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
             }
 
             if (!preg_match('/[A-Z]/', $authInfo_pw)) {
-                $this->container->get('flash')->addMessage('error', 'Unable to create contact: Password should have both upper and lower case characters');
+                $error = ["error" => "Unable to create contact: Password should have both upper and lower case characters"];
-                return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                $response->getBody()->write(json_encode($error));
+                return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
             }
 
             $disclose_voice = isset($data['disclose_voice']) ? 1 : 0;
@@ -643,15 +670,17 @@ class ContactsController extends Controller
                 $nin_type = (isset($data['isBusiness']) && $data['isBusiness'] === 'on') ? 'business' : 'personal';
 
                 if (!preg_match('/\d/', $nin)) {
-                    $this->container->get('flash')->addMessage('error', 'Unable to create contact: NIN should contain one or more numbers');
+                    $error = ["error" => "Unable to create contact: NIN should contain one or more numbers"];
-                    return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                    $response->getBody()->write(json_encode($error));
+                    return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
                 }
             }
             
             // Check if either postalInfoIntName or postalInfoLocName exists
             if (!$postalInfoIntName && !$postalInfoLocName) {
-                $this->container->get('flash')->addMessage('error', 'Unable to create contact: At least one of the postal info types (INT or LOC) is required.');
+                $error = ["error" => "Unable to create contact: At least one of the postal info types (INT or LOC) is required"];
-                return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                $response->getBody()->write(json_encode($error));
+                return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
             }
             
             try {
@@ -743,8 +772,9 @@ class ContactsController extends Controller
                 $db->commit();
             } catch (Exception $e) {
                 $db->rollBack();
-                $this->container->get('flash')->addMessage('error', 'Database failure: ' . $e->getMessage());
+                $error = ["error" => 'Database failure: ' . $e->getMessage()];
-                return $response->withHeader('Location', '/contact/create')->withStatus(302);
+                $response->getBody()->write(json_encode($error));
+                return $response->withHeader('Content-Type', 'application/json')->withStatus(500);
             }
             
             $crdate = $db->selectValue(
@@ -1339,7 +1369,7 @@ class ContactsController extends Controller
             }
 
             if (!$authInfo_pw) {
-                $this->container->get('flash')->addMessage('error', 'Unable to update contact: Email contact authinfo');
+                $this->container->get('flash')->addMessage('error', 'Unable to update contact: Contact authinfo');
                 return $response->withHeader('Location', '/contact/update/'.$identifier)->withStatus(302);
             }
 

cp/resources/views/admin/domains/createApplication.twig

@@ -252,6 +252,10 @@
                         <form id="addContactForm">
                         {{ csrf.field | raw }}
                             <div class="row">
+                                <div id="addContactError" class="alert alert-important alert-danger alert-dismissible d-none" role="alert">
+                                    <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                                </div>
+
                                 <!-- First Column: General & Internationalized Info -->
                                 <div class="col-md-6">
                                     <h5 class="card-title mb-3">{{ __('General & Internationalized Info') }}</h5>
@@ -478,8 +482,8 @@
                             </div>
             </div>
             <div class="modal-footer">
-                <a href="#" class="btn btn-link link-secondary btn-3" data-bs-dismiss="modal">{{ __('Cancel') }}</a>
+                <a href="#" class="btn btn-link link-secondary btn-3" data-bs-dismiss="modal" id="cancelButton">{{ __('Cancel') }}</a>
-                <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">{{ __('Create Contact') }}</button></form>
+                <button type="submit" class="btn btn-primary">{{ __('Create Contact') }}</button></form>
             </div>
         </div>
     </div>
@@ -487,6 +491,10 @@
 <link href="/assets/css/tabulator.min.css" rel="stylesheet">
 <script src="/assets/js/tabulator.min.js" defer></script>
 <script>
+document.getElementById("cancelButton").addEventListener("click", function () {
+    location.reload();
+});
+
 let addContactTargetInputId = null;
 
 // Capture the target input when opening "Add Contact" modal
@@ -498,7 +506,7 @@ document.addEventListener("click", function (e) {
 });
 
 document.getElementById("addContactForm").addEventListener("submit", function (e) {
-    e.preventDefault(); // Prevent default form submission
+    e.preventDefault(); // Prevent full-page reload
 
     let form = this;
     let formData = new FormData(form);
@@ -507,12 +515,28 @@ document.getElementById("addContactForm").addEventListener("submit", function (e
         method: "POST",
         body: formData,
         headers: {
-            "Accept": "application/json" // Ensure JSON response is expected
+            "Accept": "application/json"
         }
     })
-    .then(response => response.json()) // Convert response to JSON
+    .then(response => {
+        return response.json().then(data => {
+            if (!response.ok) {
+                showErrorMessage(data.error || `Server Error (${response.status})`);
+
+                // Keep the modal open when there's an error
+                let modalElement = document.getElementById("addContactModal");
+                let modalInstance = bootstrap.Modal.getInstance(modalElement);
+                if (modalInstance) {
+                    modalInstance._isShown = true;
+                }
+                throw new Error(data.error || `Server Error (${response.status})`);
+            }
+            return data;
+        });
+    })
     .then(data => {
-        // Ensure the response contains an identifier
+        console.log("✅ Contact Added:", data);
+
         if (data.identifier && addContactTargetInputId) {
             let targetInput = document.getElementById(addContactTargetInputId);
             if (targetInput) {
@@ -520,20 +544,61 @@ document.getElementById("addContactForm").addEventListener("submit", function (e
             }
         }
 
-        // Close the modal
+        // ✅ Only close modal if form submission is successful
+        if (data.identifier) {
             let modalElement = document.getElementById("addContactModal");
             let modalInstance = bootstrap.Modal.getInstance(modalElement);
             if (modalInstance) {
                 modalInstance.hide();
             }
 
-        // Reset the form
+            // Reset the form and clear errors after success
             form.reset();
             addContactTargetInputId = null;
+            document.getElementById("addContactError").classList.add("d-none");
+        }
     })
-    .catch(error => console.error("❌ Error adding contact:", error));
+    .catch(error => {
+        console.error("❌ Error adding contact:", error.message);
+        showErrorMessage(error.message);
+
+        // ❌ Prevent modal from closing on error
+        let modalElement = document.getElementById("addContactModal");
+        let modalInstance = bootstrap.Modal.getInstance(modalElement);
+        if (modalInstance) {
+            modalInstance._isShown = true; // Keep modal open
+        }
+    });
 });
 
+// Function to show error messages inside the modal
+function showErrorMessage(message) {
+    let errorContainer = document.getElementById("addContactError");
+    let submitButton = document.querySelector("#addContactModal button[type='submit']");
+
+    if (!errorContainer) {
+        let form = document.getElementById("addContactForm");
+        errorContainer = document.createElement("div");
+        errorContainer.id = "addContactError";
+        errorContainer.className = "alert alert-danger mt-2";
+        form.prepend(errorContainer);
+    }
+
+    errorContainer.innerText = message;
+    errorContainer.classList.remove("d-none"); // Ensure it's visible
+
+    // 🔹 Scroll to top of modal when error occurs
+    let modalBody = document.querySelector("#addContactModal .modal-body");
+    if (modalBody) {
+        modalBody.scrollTop = 0;
+    }
+
+    // 🔹 Disable submit button on error
+    if (submitButton) {
+        submitButton.disabled = true;
+    }
+}
+
     let targetInputId = null;
 
     // Ensure target input is set correctly before the modal opens

cp/resources/views/admin/domains/createDomain.twig

@@ -376,6 +376,10 @@
                         <form id="addContactForm">
                         {{ csrf.field | raw }}
                             <div class="row">
+                                <div id="addContactError" class="alert alert-important alert-danger alert-dismissible d-none" role="alert">
+                                    <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                                </div>
+
                                 <!-- First Column: General & Internationalized Info -->
                                 <div class="col-md-6">
                                     <h5 class="card-title mb-3">{{ __('General & Internationalized Info') }}</h5>
@@ -602,8 +606,8 @@
                             </div>
             </div>
             <div class="modal-footer">
-                <a href="#" class="btn btn-link link-secondary btn-3" data-bs-dismiss="modal">{{ __('Cancel') }}</a>
+                <a href="#" class="btn btn-link link-secondary btn-3" data-bs-dismiss="modal" id="cancelButton">{{ __('Cancel') }}</a>
-                <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">{{ __('Create Contact') }}</button></form>
+                <button type="submit" class="btn btn-primary">{{ __('Create Contact') }}</button></form>
             </div>
         </div>
     </div>
@@ -611,6 +615,10 @@
 <link href="/assets/css/tabulator.min.css" rel="stylesheet">
 <script src="/assets/js/tabulator.min.js" defer></script>
 <script>
+document.getElementById("cancelButton").addEventListener("click", function () {
+    location.reload();
+});
+
 let addContactTargetInputId = null;
 
 // Capture the target input when opening "Add Contact" modal
@@ -622,7 +630,7 @@ document.addEventListener("click", function (e) {
 });
 
 document.getElementById("addContactForm").addEventListener("submit", function (e) {
-    e.preventDefault(); // Prevent default form submission
+    e.preventDefault(); // Prevent full-page reload
 
     let form = this;
     let formData = new FormData(form);
@@ -631,12 +639,28 @@ document.getElementById("addContactForm").addEventListener("submit", function (e
         method: "POST",
         body: formData,
         headers: {
-            "Accept": "application/json" // Ensure JSON response is expected
+            "Accept": "application/json"
         }
     })
-    .then(response => response.json()) // Convert response to JSON
+    .then(response => {
+        return response.json().then(data => {
+            if (!response.ok) {
+                showErrorMessage(data.error || `Server Error (${response.status})`);
+
+                // Keep the modal open when there's an error
+                let modalElement = document.getElementById("addContactModal");
+                let modalInstance = bootstrap.Modal.getInstance(modalElement);
+                if (modalInstance) {
+                    modalInstance._isShown = true;
+                }
+                throw new Error(data.error || `Server Error (${response.status})`);
+            }
+            return data;
+        });
+    })
     .then(data => {
-        // Ensure the response contains an identifier
+        console.log("✅ Contact Added:", data);
+
         if (data.identifier && addContactTargetInputId) {
             let targetInput = document.getElementById(addContactTargetInputId);
             if (targetInput) {
@@ -644,20 +668,61 @@ document.getElementById("addContactForm").addEventListener("submit", function (e
             }
         }
 
-        // Close the modal
+        // ✅ Only close modal if form submission is successful
+        if (data.identifier) {
             let modalElement = document.getElementById("addContactModal");
             let modalInstance = bootstrap.Modal.getInstance(modalElement);
             if (modalInstance) {
                 modalInstance.hide();
             }
 
-        // Reset the form
+            // Reset the form and clear errors after success
             form.reset();
             addContactTargetInputId = null;
+            document.getElementById("addContactError").classList.add("d-none");
+        }
     })
-    .catch(error => console.error("❌ Error adding contact:", error));
+    .catch(error => {
+        console.error("❌ Error adding contact:", error.message);
+        showErrorMessage(error.message);
+
+        // ❌ Prevent modal from closing on error
+        let modalElement = document.getElementById("addContactModal");
+        let modalInstance = bootstrap.Modal.getInstance(modalElement);
+        if (modalInstance) {
+            modalInstance._isShown = true; // Keep modal open
+        }
+    });
 });
 
+// Function to show error messages inside the modal
+function showErrorMessage(message) {
+    let errorContainer = document.getElementById("addContactError");
+    let submitButton = document.querySelector("#addContactModal button[type='submit']");
+
+    if (!errorContainer) {
+        let form = document.getElementById("addContactForm");
+        errorContainer = document.createElement("div");
+        errorContainer.id = "addContactError";
+        errorContainer.className = "alert alert-danger mt-2";
+        form.prepend(errorContainer);
+    }
+
+    errorContainer.innerText = message;
+    errorContainer.classList.remove("d-none"); // Ensure it's visible
+
+    // 🔹 Scroll to top of modal when error occurs
+    let modalBody = document.querySelector("#addContactModal .modal-body");
+    if (modalBody) {
+        modalBody.scrollTop = 0;
+    }
+
+    // 🔹 Disable submit button on error
+    if (submitButton) {
+        submitButton.disabled = true;
+    }
+}
+
     let targetInputId = null;
 
     // Ensure target input is set correctly before the modal opens

cp/resources/views/admin/domains/updateDomain.twig

@@ -404,6 +404,10 @@
                         <form id="addContactForm">
                         {{ csrf.field | raw }}
                             <div class="row">
+                                <div id="addContactError" class="alert alert-important alert-danger alert-dismissible d-none" role="alert">
+                                    <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                                </div>
+
                                 <!-- First Column: General & Internationalized Info -->
                                 <div class="col-md-6">
                                     <h5 class="card-title mb-3">{{ __('General & Internationalized Info') }}</h5>
@@ -630,8 +634,8 @@
                             </div>
             </div>
             <div class="modal-footer">
-                <a href="#" class="btn btn-link link-secondary btn-3" data-bs-dismiss="modal">{{ __('Cancel') }}</a>
+                <a href="#" class="btn btn-link link-secondary btn-3" data-bs-dismiss="modal" id="cancelButton">{{ __('Cancel') }}</a>
-                <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">{{ __('Create Contact') }}</button></form>
+                <button type="submit" class="btn btn-primary">{{ __('Create Contact') }}</button></form>
             </div>
         </div>
     </div>
@@ -639,6 +643,10 @@
 <link href="/assets/css/tabulator.min.css" rel="stylesheet">
 <script src="/assets/js/tabulator.min.js" defer></script>
 <script>
+document.getElementById("cancelButton").addEventListener("click", function () {
+    location.reload();
+});
+
 let addContactTargetInputId = null;
 
 // Capture the target input when opening "Add Contact" modal
@@ -650,7 +658,7 @@ document.addEventListener("click", function (e) {
 });
 
 document.getElementById("addContactForm").addEventListener("submit", function (e) {
-    e.preventDefault(); // Prevent default form submission
+    e.preventDefault(); // Prevent full-page reload
 
     let form = this;
     let formData = new FormData(form);
@@ -659,12 +667,28 @@ document.getElementById("addContactForm").addEventListener("submit", function (e
         method: "POST",
         body: formData,
         headers: {
-            "Accept": "application/json" // Ensure JSON response is expected
+            "Accept": "application/json"
         }
     })
-    .then(response => response.json()) // Convert response to JSON
+    .then(response => {
+        return response.json().then(data => {
+            if (!response.ok) {
+                showErrorMessage(data.error || `Server Error (${response.status})`);
+
+                // Keep the modal open when there's an error
+                let modalElement = document.getElementById("addContactModal");
+                let modalInstance = bootstrap.Modal.getInstance(modalElement);
+                if (modalInstance) {
+                    modalInstance._isShown = true;
+                }
+                throw new Error(data.error || `Server Error (${response.status})`);
+            }
+            return data;
+        });
+    })
     .then(data => {
-        // Ensure the response contains an identifier
+        console.log("✅ Contact Added:", data);
+
         if (data.identifier && addContactTargetInputId) {
             let targetInput = document.getElementById(addContactTargetInputId);
             if (targetInput) {
@@ -672,20 +696,61 @@ document.getElementById("addContactForm").addEventListener("submit", function (e
             }
         }
 
-        // Close the modal
+        // ✅ Only close modal if form submission is successful
+        if (data.identifier) {
             let modalElement = document.getElementById("addContactModal");
             let modalInstance = bootstrap.Modal.getInstance(modalElement);
             if (modalInstance) {
                 modalInstance.hide();
             }
 
-        // Reset the form
+            // Reset the form and clear errors after success
             form.reset();
             addContactTargetInputId = null;
+            document.getElementById("addContactError").classList.add("d-none");
+        }
     })
-    .catch(error => console.error("❌ Error adding contact:", error));
+    .catch(error => {
+        console.error("❌ Error adding contact:", error.message);
+        showErrorMessage(error.message);
+
+        // ❌ Prevent modal from closing on error
+        let modalElement = document.getElementById("addContactModal");
+        let modalInstance = bootstrap.Modal.getInstance(modalElement);
+        if (modalInstance) {
+            modalInstance._isShown = true; // Keep modal open
+        }
+    });
 });
 
+// Function to show error messages inside the modal
+function showErrorMessage(message) {
+    let errorContainer = document.getElementById("addContactError");
+    let submitButton = document.querySelector("#addContactModal button[type='submit']");
+
+    if (!errorContainer) {
+        let form = document.getElementById("addContactForm");
+        errorContainer = document.createElement("div");
+        errorContainer.id = "addContactError";
+        errorContainer.className = "alert alert-danger mt-2";
+        form.prepend(errorContainer);
+    }
+
+    errorContainer.innerText = message;
+    errorContainer.classList.remove("d-none"); // Ensure it's visible
+
+    // 🔹 Scroll to top of modal when error occurs
+    let modalBody = document.querySelector("#addContactModal .modal-body");
+    if (modalBody) {
+        modalBody.scrollTop = 0;
+    }
+
+    // 🔹 Disable submit button on error
+    if (submitButton) {
+        submitButton.disabled = true;
+    }
+}
+
     let targetInputId = null;
 
     // Ensure target input is set correctly before the modal opens