From fdfa78f50805bf6d3a7469b6f832ffe8f21298bb Mon Sep 17 00:00:00 2001
From: Pinga <help@namingo.org>
Date: Wed, 21 May 2025 12:43:29 +0300
Subject: [PATCH] Improved domain/application create phases interface

---
 .../admin/domains/createApplication.twig      | 39 ++++++++++++----
 .../views/admin/domains/createDomain.twig     | 44 ++++++++++++++++---
 2 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/cp/resources/views/admin/domains/createApplication.twig b/cp/resources/views/admin/domains/createApplication.twig
index 48e962c..f43ad83 100644
--- a/cp/resources/views/admin/domains/createApplication.twig
+++ b/cp/resources/views/admin/domains/createApplication.twig
@@ -157,11 +157,10 @@
                             <div class="mb-3">
                                 <label for="phaseName" class="form-label">{{ __('Phase Name') }}</label>
                                 <input type="text" class="form-control" id="phaseName" name="phaseName" placeholder="Enter phase name">
-                                <small class="form-hint">The "Phase name" field is required only if the "Type" is set to "Custom".</small>
                             </div>
 
                             <!-- Fields for nameservers -->
-                            <div id="nameserverFields">
+                            <div id="nameserverFields" class="mb-3">
                                 <div class="form-label">{{ __('Nameservers') }}&nbsp;<button type="button" id="addNameserver" class="btn btn-success btn-sm mb-2">+</button> <button type="button" id="removeNameserver" class="btn btn-danger btn-sm mb-2">-</button></div>
 
                                 <div class="nameserver-group mb-1 row">
@@ -188,27 +187,28 @@
                                     </div>
                                 </div>
                             </div>
-                          </div>
-                        </div>
 
-                        <div class="row">
-                          <div class="col-md-6">
                             <div class="mb-3">
                               <label class="form-label">{{ __('Signed Mark Information') }}</label>
                               <input type="file" class="form-control" name="smd" accept=".smd" />
                             </div>
-                            
+                          </div>
+                        </div>
+
+                        <div class="row">
+                          <div class="col-md-4">
                             <div class="mb-3">
                                 <label for="noticeid" class="form-label">{{ __('Notice ID') }}</label>
                                 <input type="text" class="form-control" name="noticeid">
                             </div>
                           </div>
-                          <div class="col-md-6">
+                          <div class="col-md-4">
                             <div class="mb-3">
                                 <label for="notafter" class="form-label">{{ __('Not After Date') }}</label>
                                 <input type="datetime-local" class="form-control" name="notafter">
                             </div>
-                            
+                          </div>
+                          <div class="col-md-4">
                             <div class="mb-3">
                                 <label for="accepted" class="form-label">{{ __('Accepted Date') }}</label>
                                 <input type="datetime-local" class="form-control" name="accepted">
@@ -848,6 +848,27 @@
 <script>
 document.addEventListener("DOMContentLoaded", function() {
 
+    const phaseType = document.getElementById('phaseType');
+    const phaseName = document.getElementById('phaseName');
+    const phaseNameLabel = document.querySelector('label[for="phaseName"]');
+
+    function togglePhaseNameRequired() {
+        const isCustom = phaseType.value === 'custom';
+
+        // Toggle 'required' attribute
+        phaseName.required = isCustom;
+
+        // Add or remove "required" class from the label
+        if (isCustom) {
+            phaseNameLabel.classList.add('required');
+        } else {
+            phaseNameLabel.classList.remove('required');
+        }
+    }
+
+    phaseType.addEventListener('change', togglePhaseNameRequired);
+    togglePhaseNameRequired();
+
     const addNameserverBtn = document.getElementById('addNameserver');
     const removeNameserverBtn = document.getElementById('removeNameserver');
     const nameserverFields = document.getElementById('nameserverFields');
diff --git a/cp/resources/views/admin/domains/createDomain.twig b/cp/resources/views/admin/domains/createDomain.twig
index 5064b39..d266316 100644
--- a/cp/resources/views/admin/domains/createDomain.twig
+++ b/cp/resources/views/admin/domains/createDomain.twig
@@ -318,30 +318,40 @@
                                     <option value="custom">Custom</option>
                                 </select>
                             </div>
-                            
+                          </div>
+                          <div class="col-md-6">
                             <div class="mb-3">
                                 <label for="phaseName" class="form-label">{{ __('Phase Name') }}</label>
                                 <input type="text" class="form-control" id="phaseName" name="phaseName" placeholder="Enter phase name">
-                                <small class="form-hint">The "Phase name" field is required only if the "Type" is set to "Custom".</small>
                             </div>
+                          </div>
+                        </div>
 
+                        <div class="row">
+                          <div class="col-md-12">
                             <div class="mb-3">
                               <label class="form-label">{{ __('Signed Mark Information') }}</label>
                               <input type="file" class="form-control" name="smd" accept=".smd" />
                             </div>
                           </div>
-                          <div class="col-md-6">
-
+                        </div>
+                        
+                        <div class="row">
+                          <div class="col-md-4">
                             <div class="mb-3">
                                 <label for="noticeid" class="form-label">{{ __('Notice ID') }}</label>
                                 <input type="text" class="form-control" name="noticeid">
                             </div>
-                            
+                          </div>
+                          
+                          <div class="col-md-4">
                             <div class="mb-3">
                                 <label for="notafter" class="form-label">{{ __('Not After Date') }}</label>
                                 <input type="datetime-local" class="form-control" name="notafter">
                             </div>
-                            
+                          </div>
+                          
+                          <div class="col-md-4">
                             <div class="mb-3">
                                 <label for="accepted" class="form-label">{{ __('Accepted Date') }}</label>
                                 <input type="datetime-local" class="form-control" name="accepted">
@@ -981,6 +991,28 @@
 </script>
 <script>
 document.addEventListener("DOMContentLoaded", function() {
+    {% if launch_phases == 'on' %}
+    const phaseType = document.getElementById('phaseType');
+    const phaseName = document.getElementById('phaseName');
+    const phaseNameLabel = document.querySelector('label[for="phaseName"]');
+
+    function togglePhaseNameRequired() {
+        const isCustom = phaseType.value === 'custom';
+
+        // Toggle 'required' attribute
+        phaseName.required = isCustom;
+
+        // Add or remove "required" class from the label
+        if (isCustom) {
+            phaseNameLabel.classList.add('required');
+        } else {
+            phaseNameLabel.classList.remove('required');
+        }
+    }
+
+    phaseType.addEventListener('change', togglePhaseNameRequired);
+    togglePhaseNameRequired();
+    {% endif %}
 
     window.currencySymbol = "{{ currencySymbol }}";
     window.currencyPosition = "{{ currencyPosition }}";