From 4d04f04e204c3ba9dcdeb1dba1700798398077b9 Mon Sep 17 00:00:00 2001
From: Pinga <121483313+getpinga@users.noreply.github.com>
Date: Fri, 4 Apr 2025 23:09:00 +0300
Subject: [PATCH] More UI improvements

---
 cp/app/Controllers/SystemController.php       |   2 +
 .../views/admin/system/createTld.twig         |  12 +-
 .../views/admin/system/manageTld.twig         | 105 ++++++++----------
 3 files changed, 56 insertions(+), 63 deletions(-)

diff --git a/cp/app/Controllers/SystemController.php b/cp/app/Controllers/SystemController.php
index a49c233..71e7ce1 100644
--- a/cp/app/Controllers/SystemController.php
+++ b/cp/app/Controllers/SystemController.php
@@ -1117,6 +1117,8 @@ class SystemController extends Controller
                                 $dnssecData = ['error' => "No DNSSEC keys found for $zone using Knot DNS."];
                             }
                         }
+                    } else {
+                        $dnssecData = ['error' => "Setup incomplete. Refer to manual."];
                     }
                 } else {
                     $dnssecData = ['error' => "DNSSEC is not enabled for this TLD."];
diff --git a/cp/resources/views/admin/system/createTld.twig b/cp/resources/views/admin/system/createTld.twig
index f5dd258..83eae4b 100644
--- a/cp/resources/views/admin/system/createTld.twig
+++ b/cp/resources/views/admin/system/createTld.twig
@@ -46,13 +46,6 @@
                         <input type="text" class="form-control" id="tldExtension" name="extension" placeholder="Enter TLD" required>
                         <small class="form-text text-muted">{{ __('Enter the desired top-level domain (TLD) name, like') }} '.test' {{ __('or') }} '.example'.</small>
                     </div>
-                    <div class="mb-3">
-                        <label class="form-check form-switch">
-                          <input class="form-check-input" type="checkbox" id="dnssecToggle" disabled>
-                          <span class="form-check-label">DNSSEC</span>
-                        </label>
-                        <small class="form-text text-muted">{{ __('DNSSEC is currently activated manually. This option is for display purposes only.') }}</small>
-                    </div>
                     <div class="mb-3">
                         <label for="scriptDropdown" class="form-label required">{{ __('Supported Script') }}</label>
                         <select class="form-select" id="scriptDropdown" name="script" required>
@@ -65,6 +58,11 @@
                         <small class="form-text text-muted">{{ __('Choose the script type that the TLD will support. Options include ASCII, Cyrillic, Japanese, and Korean.') }}</small>
                     </div>
                   </div>
+                  <div class="card-footer">
+                    <div class="row align-items-center">
+                      <div class="col">{{ __('DNSSEC requires hidden DNS master configuration. Follow the manual to set it up, then enable DNSSEC from the Manage TLD page.') }}</div>
+                    </div>
+                  </div>
                 </div>
 
                 <div class="card mb-3">
diff --git a/cp/resources/views/admin/system/manageTld.twig b/cp/resources/views/admin/system/manageTld.twig
index f8a9c29..311ad3c 100644
--- a/cp/resources/views/admin/system/manageTld.twig
+++ b/cp/resources/views/admin/system/manageTld.twig
@@ -27,6 +27,26 @@
                   {{ __('Manage TLD') }} {{ tld_u }}
                 </h2>
               </div>
+              <div class="col-auto ms-auto">
+                <div class="btn-list">
+                  <a href="/registry/idnexport/{{ tld.tld }}" target="_blank" class="btn btn-outline-orange d-none d-sm-inline-block">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3" /></svg>
+                    {{ __('Export IDN Table') }}
+                  </a>
+                  <a href="/registry/idnexport/{{ tld.tld }}" target="_blank" class="btn btn-outline-orange d-sm-none btn-icon" aria-label="{{ __('Export IDN Table') }}" title="{{ __('Export IDN Table') }}">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3" /></svg>
+                  </a>
+                  {% if secureTld != 1 %}
+                  <a href="/registry/dnssec" class="btn btn-outline-indigo enable-dnssec-link desktop-only d-none d-sm-inline-block">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.462 20.87c-.153 .047 -.307 .09 -.462 .13a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 .11 6.37" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
+                    {{ __('Enable DNSSEC') }}
+                  </a>
+                  <a href="/registry/dnssec" class="btn btn-outline-indigo enable-dnssec-link mobile-only d-sm-none btn-icon" aria-label="{{ __('Enable DNSSEC') }}" title="{{ __('Enable DNSSEC') }}">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.462 20.87c-.153 .047 -.307 .09 -.462 .13a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 .11 6.37" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>      
+                  </a>
+                  {% endif %}
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -40,11 +60,6 @@
                 <div class="card mb-3">
                   <div class="card-header">
                     <h3 class="card-title">{{ __('General Details') }}</h3>
-                    <div class="card-actions">
-                      <a href="/registry/idnexport/{{ tld.tld }}" target="_blank" class="btn btn-outline-orange"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3" /></svg>
-                        {{ __('Export IDN Table') }}
-                      </a>
-                    </div>
                   </div>
                   <div class="card-body">
                     <div class="datagrid">
@@ -64,11 +79,17 @@
                         <div class="datagrid-title">DNSSEC</div>
                         <div class="datagrid-content">
                           {% if secureTld == 1 %}
-                            <span class="status status-blue">
-                              {{ __('Signed') }}
-                            </span>
+                            {% if dnssecData.error is defined %}
+                              <span class="status status-red" title="{{ dnssecData.error }}">
+                                {{ __('Issue') }}
+                              </span>
+                            {% else %}
+                              <span class="status status-blue">
+                                {{ __('Signed') }}
+                              </span>
+                            {% endif %}
                           {% else %}
-                            <span class="status status-yellow">
+                            <span class="status status-secondary">
                               {{ __('Not signed') }}
                             </span>
                           {% endif %}
@@ -142,38 +163,6 @@
                             </div>
                         </div>
                     </div>
-                {% elseif dnssecData.error is defined %}
-                    <div class="card mb-3">
-                        <div class="card-header">
-                            <h3 class="card-title">{{ __('DNSSEC Details') }}</h3>
-                            {% if secureTld != 1 %}
-                            <div class="card-actions">
-                              <a href="/registry/dnssec" class="btn btn-outline-indigo btn-3" id="enableDnssecLink">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.462 20.87c-.153 .047 -.307 .09 -.462 .13a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 .11 6.37" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
-                                {{ __('Enable DNSSEC') }}
-                              </a>
-                            </div>
-                            {% endif %}
-                        </div>
-                        <div class="card-body">
-                            <div class="alert alert-warning" role="alert">
-                                <h4 class="alert-title">{{ dnssecData.error }}</h4>
-                            </div>
-                        </div>
-                    </div>
-                {% else %}
-                    <div class="card mb-3">
-                        <div class="card-header">
-                            <h3 class="card-title">{{ __('DNSSEC Details') }}</h3>
-                        </div>
-                        <div class="card-body">
-                            <div class="alert alert-info" role="alert">
-                                <div>
-                                    <h4 class="alert-heading">{{ __('No DNSSEC data available.') }}</h4>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
                 {% endif %}
 
                 <div class="card mb-3">
@@ -319,22 +308,26 @@
       </div>
 <script src="/assets/js/sweetalert2.min.js" defer></script>
 <script>
-document.getElementById('enableDnssecLink').addEventListener('click', function (e) {
-  e.preventDefault(); // Prevent default link behavior
+document.querySelectorAll('.enable-dnssec-link').forEach(function (el) {
+  el.addEventListener('click', function (e) {
+    e.preventDefault();
 
-  Swal.fire({
-    title: 'Are you sure?',
-    text: 'Please ensure DNSSEC has been properly configured for this TLD prior to proceeding, as outlined in section 2.1.3b. of the manual.',
-    icon: 'warning',
-    showCancelButton: true,
-    confirmButtonText: 'Yes, continue',
-    cancelButtonText: 'Cancel',
-    confirmButtonColor: '#4263eb',
-    cancelButtonColor: '#9ba9be'
-  }).then((result) => {
-    if (result.isConfirmed) {
-      window.location.href = e.target.closest('a').href;
-    }
+    const link = e.currentTarget.getAttribute('href');
+
+    Swal.fire({
+      title: 'Are you sure?',
+      text: 'Please ensure DNSSEC has been properly configured for this TLD prior to proceeding, as outlined in section 2.1.3b. of the manual.',
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonText: 'Yes, continue',
+      cancelButtonText: 'Cancel',
+      confirmButtonColor: '#4263eb',
+      cancelButtonColor: '#9ba9be'
+    }).then((result) => {
+      if (result.isConfirmed) {
+        window.location.href = link;
+      }
+    });
   });
 });
 </script>