From 3310a9ce74a4869046341ddb677d0b8a37e4f30a Mon Sep 17 00:00:00 2001
From: Pinga <121483313+getpinga@users.noreply.github.com>
Date: Mon, 25 Nov 2024 13:11:47 +0200
Subject: [PATCH] Improved interface of domain create/update

---
 .../admin/domains/createApplication.twig      | 137 +++++++++---
 .../views/admin/domains/createDomain.twig     | 209 +++++++++++++-----
 .../admin/domains/updateApplication.twig      |   3 +-
 .../views/admin/domains/updateDomain.twig     | 143 +++++++++---
 4 files changed, 368 insertions(+), 124 deletions(-)

diff --git a/cp/resources/views/admin/domains/createApplication.twig b/cp/resources/views/admin/domains/createApplication.twig
index 74f24b9..c3ef913 100644
--- a/cp/resources/views/admin/domains/createApplication.twig
+++ b/cp/resources/views/admin/domains/createApplication.twig
@@ -29,11 +29,111 @@
                     <div class="card-body">
                         <form id="domainCreateForm" action="/application/create" method="post">
                         {{ csrf.field | raw }}
+                        
+                        <div class="row mb-2">
+                          <div class="col-md-6">
                             <div class="mb-3">
                                 <label for="domainName" class="form-label required">{{ __('Your Domain Name') }}</label>
                                 <input type="text" class="form-control mb-2" placeholder="example.com" name="domainName" id="domainName" required="required" autocapitalize="none">
                             </div>
+ 
+                            {% if registrars and not registrar %}
+                                <div class="mb-3">
+                                    <label for="registrarDropdown" class="form-label required">{{ __('Select Registrar') }}</label>
+                                    <select id="registrarDropdown" name="registrar" class="form-control">
+                                        {% for registrar in registrars %}
+                                            <option value="{{ registrar.id }}">{{ registrar.name }}</option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                            {% endif %}
+
+                            {% if minimum_data == 'false' %}<!-- Fields for 4 contacts with roles -->
+                            <div class="mb-3">
+                                <label for="contactRegistrant" class="form-label required">{{ __('Contacts') }}</label>
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Registrant Contact') }}" name="contactRegistrant" id="contactRegistrant" required="required">
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a Contact ID if you know it. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                  </div>
+                                </div>
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Admin Contact') }}" name="contactAdmin">
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a Contact ID if you know it. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                  </div>
+                                </div>
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Tech Contact') }}" name="contactTech">
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a Contact ID if you know it. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                  </div>
+                                </div>
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Billing Contact') }}" name="contactBilling">
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a Contact ID if you know it. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                  </div>
+                                </div>
+                                
+                            </div>{% endif %}
                             
+                            <!-- AuthInfo -->
+                            <div class="mb-3">
+                                <label for="authInfo" class="form-label required">{{ __('Auth Info') }}</label>
+                                <input type="text" class="form-control" id="authInfo" name="authInfo" required>
+                            </div>
+                            
+                          </div>
+                          <div class="col-md-6">
                             <div class="mb-3">
                                 <label for="phaseType" class="form-label required">{{ __('Phase Type') }}</label>
                                 <select class="form-select" id="phaseType" name="phaseType" required>
@@ -50,26 +150,6 @@
                                 <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>
-                            
-                            {% if registrars and not registrar %}
-                                <div class="form-group mb-3">
-                                    <label for="registrarDropdown" class="form-label required">{{ __('Select Registrar') }}</label>
-                                    <select id="registrarDropdown" name="registrar" class="form-control">
-                                        {% for registrar in registrars %}
-                                            <option value="{{ registrar.id }}">{{ registrar.name }}</option>
-                                        {% endfor %}
-                                    </select>
-                                </div>
-                            {% endif %}
-                         
-                            {% if minimum_data == 'false' %}<!-- Fields for 4 contacts with roles -->
-                            <div class="mb-3">
-                                <label for="contactRegistrant" class="form-label required">{{ __('Contacts') }}</label>
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Registrant Contact') }}" name="contactRegistrant" id="contactRegistrant" required="required">
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Admin Contact') }}" name="contactAdmin">
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Tech Contact') }}" name="contactTech">
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Billing Contact') }}" name="contactBilling">
-                            </div>{% endif %}
 
                             <!-- Fields for nameservers -->
                             <div id="nameserverFields">
@@ -99,13 +179,11 @@
                                     </div>
                                 </div>
                             </div>
+                          </div>
+                        </div>
 
-                            <!-- AuthInfo -->
-                            <div class="mb-3">
-                                <label for="authInfo" class="form-label required">{{ __('Auth Info') }}</label>
-                                <input type="text" class="form-control" id="authInfo" name="authInfo" required>
-                            </div>
-                            
+                        <div class="row">
+                          <div class="col-md-6">
                             <div class="mb-3">
                               <label class="form-label">{{ __('Signed Mark Information') }}</label>
                               <textarea class="form-control" data-bs-toggle="autosize" name="smd" placeholder="{{ __('Paste SMD contents') }}…"></textarea>
@@ -115,7 +193,8 @@
                                 <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="mb-3">
                                 <label for="notafter" class="form-label">{{ __('Not After Date') }}</label>
                                 <input type="datetime-local" class="form-control" name="notafter">
@@ -125,7 +204,9 @@
                                 <label for="accepted" class="form-label">{{ __('Accepted Date') }}</label>
                                 <input type="datetime-local" class="form-control" name="accepted">
                             </div>
-                            
+                          </div>
+                        </div>
+    
                     </div>
                 <div class="card-footer">
                   <div class="row align-items-center">
diff --git a/cp/resources/views/admin/domains/createDomain.twig b/cp/resources/views/admin/domains/createDomain.twig
index d7c6b51..0d82282 100644
--- a/cp/resources/views/admin/domains/createDomain.twig
+++ b/cp/resources/views/admin/domains/createDomain.twig
@@ -29,13 +29,16 @@
                     <div class="card-body">
                         <form id="domainCreateForm" action="/domain/create" method="post">
                         {{ csrf.field | raw }}
+                        
+                        <div class="row">
+                          <div class="col-md-6">
                             <div class="mb-3">
                                 <label for="domainName" class="form-label required">{{ __('Your Domain Name') }}</label>
                                 <input type="text" class="form-control mb-2" placeholder="example.com" name="domainName" id="domainName" required="required" autocapitalize="none">
                             </div>
                             
                             {% if registrars and not registrar %}
-                                <div class="form-group mb-3">
+                                <div class="mb-3">
                                     <label for="registrarDropdown" class="form-label required">{{ __('Select Registrar') }}</label>
                                     <select id="registrarDropdown" name="registrar" class="form-control">
                                         {% for registrar in registrars %}
@@ -60,11 +63,89 @@
                             {% if minimum_data == 'false' %}<!-- Fields for 4 contacts with roles -->
                             <div class="mb-3">
                                 <label for="contactRegistrant" class="form-label required">{{ __('Contacts') }}</label>
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Registrant Contact') }}" name="contactRegistrant" id="contactRegistrant" required="required">
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Admin Contact') }}" name="contactAdmin">
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Tech Contact') }}" name="contactTech">
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Billing Contact') }}" name="contactBilling">
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Registrant Contact') }}" name="contactRegistrant" id="contactRegistrant" required="required">
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a Contact ID if you know it. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                    </div>
+                                </div>
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Admin Contact') }}" name="contactAdmin">
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a Contact ID if you know it. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                    </div>
+                                </div>
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Tech Contact') }}" name="contactTech">
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a Contact ID if you know it. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                    </div>
+                                </div>
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Billing Contact') }}" name="contactBilling">
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a Contact ID if you know it. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                    </div>
+                                </div>
+
                             </div>{% endif %}
+                            
+                            <!-- AuthInfo -->
+                            <div class="mb-3">
+                                <label for="authInfo" class="form-label required">{{ __('Auth Info') }}</label>
+                                <input type="text" class="form-control" id="authInfo" name="authInfo" required>
+                            </div>
+
+                          </div>
+                          <div class="col-md-6">
 
                             <!-- Fields for nameservers -->
                             <div id="nameserverFields">
@@ -94,53 +175,7 @@
                                     </div>
                                 </div>
                             </div>
-
-                            <!-- DNSSEC Data with checkbox -->
-                            <div class="mb-3 mt-2 form-check">
-                                <input type="checkbox" class="form-check-input" id="addDnssec" name="addDnssec">
-                                <label class="form-check-label" for="addDnssec">{{ __('Add DNSSEC Data') }}</label>
-                            </div>
-                            <div id="dnssecData" style="display: none;">
-                                <div class="mb-3">
-                                    <label for="dsKeyTag" class="form-label">{{ __('DS Record') }}</label>
-                                    <input type="text" class="form-control mb-2" placeholder="{{ __('Key Tag') }}" name="dsKeyTag" id="dsKeyTag">
-                                    <select class="form-control mb-2" name="dsAlg">
-                                        <option value="" disabled selected>{{ __('Select Algorithm') }}</option>
-                                        <option value="8">RSA/SHA-256</option>
-                                        <option value="13">ECDSA Curve P-256 with SHA-256</option>
-                                        <option value="14">ECDSA Curve P-384 with SHA-384</option>
-                                        <option value="15">Ed25519</option>
-                                        <option value="16">Ed448</option>
-                                    </select>
-                                    <select class="form-control mb-2" name="dsDigestType">
-                                        <option value="" disabled selected>{{ __('Select Digest Type') }}</option>
-                                        <option value="2">SHA-256</option>
-                                        <option value="4">SHA-384</option>
-                                    </select>
-                                    <input type="text" class="form-control mb-2" placeholder="{{ __('Digest') }}" name="dsDigest">
-                                </div>
-                                
-                                <div class="mb-3">
-                                    <label for="dnskeyFlags" class="form-label">{{ __('DNSKEY Record') }}</label>
-                                    <input type="number" class="form-control mb-2" placeholder="{{ __('Flags') }}" name="dnskeyFlags" id="dnskeyFlags">
-                                    <input type="number" class="form-control mb-2" placeholder="{{ __('Protocol') }}" name="dnskeyProtocol" value="3" readonly> <!-- Protocol is typically set to 3 -->
-                                    <select class="form-control mb-2" name="dnskeyAlg">
-                                        <option value="" disabled selected>{{ __('Select Algorithm') }}</option>
-                                        <option value="8">RSA/SHA-256</option>
-                                        <option value="13">ECDSA Curve P-256 with SHA-256</option>
-                                        <option value="14">ECDSA Curve P-384 with SHA-384</option>
-                                        <option value="15">Ed25519</option>
-                                        <option value="16">Ed448</option>
-                                    </select>
-                                    <input type="text" class="form-control mb-2" placeholder="{{ __('Public Key') }}" name="dnskeyPubKey">
-                                </div>
-                            </div>
-                            <!-- AuthInfo -->
-                            <div class="mb-3">
-                                <label for="authInfo" class="form-label required">{{ __('Auth Info') }}</label>
-                                <input type="text" class="form-control" id="authInfo" name="authInfo" required>
-                            </div>
-
+                            
                             <div class="mb-3 mt-3">
                               <div class="form-label">{{ __('Statuses') }}</div>
                               <div>
@@ -194,8 +229,65 @@
                               </div>
                             </div>
                             {% endif %}
+                            
+                            <div class="mb-3">
+                              <label for="token" class="form-label">{{ __('Allocation Token') }}</label>
+                              <input type="text" class="form-control" placeholder="{{ __('Allocation token') }}" name="token" autocapitalize="none">
+                            </div>
+                            
+                          </div>
+                        </div>
 
-                            {% if launch_phases == 'on' %}
+                            <!-- DNSSEC Data with checkbox -->
+                            <div class="mb-3 mt-2 form-check">
+                                <input type="checkbox" class="form-check-input" id="addDnssec" name="addDnssec">
+                                <label class="form-check-label" for="addDnssec">{{ __('Add DNSSEC Data') }}</label>
+                            </div>
+                            <div id="dnssecData" style="display: none;">
+								<div class="row">
+								  <div class="col-md-6">
+									<div class="mb-3">
+										<label for="dsKeyTag" class="form-label">{{ __('DS Record') }}</label>
+										<input type="text" class="form-control mb-2" placeholder="{{ __('Key Tag') }}" name="dsKeyTag" id="dsKeyTag">
+										<select class="form-control mb-2" name="dsAlg">
+											<option value="" disabled selected>{{ __('Select Algorithm') }}</option>
+											<option value="8">RSA/SHA-256</option>
+											<option value="13">ECDSA Curve P-256 with SHA-256</option>
+											<option value="14">ECDSA Curve P-384 with SHA-384</option>
+											<option value="15">Ed25519</option>
+											<option value="16">Ed448</option>
+										</select>
+										<select class="form-control mb-2" name="dsDigestType">
+											<option value="" disabled selected>{{ __('Select Digest Type') }}</option>
+											<option value="2">SHA-256</option>
+											<option value="4">SHA-384</option>
+										</select>
+										<input type="text" class="form-control mb-2" placeholder="{{ __('Digest') }}" name="dsDigest">
+									</div>
+								  </div>
+								  <div class="col-md-6">
+									<div class="mb-3">
+										<label for="dnskeyFlags" class="form-label">{{ __('DNSKEY Record') }}</label>
+										<input type="number" class="form-control mb-2" placeholder="{{ __('Flags') }}" name="dnskeyFlags" id="dnskeyFlags">
+										<input type="number" class="form-control mb-2" placeholder="{{ __('Protocol') }}" name="dnskeyProtocol" value="3" readonly> <!-- Protocol is typically set to 3 -->
+										<select class="form-control mb-2" name="dnskeyAlg">
+											<option value="" disabled selected>{{ __('Select Algorithm') }}</option>
+											<option value="8">RSA/SHA-256</option>
+											<option value="13">ECDSA Curve P-256 with SHA-256</option>
+											<option value="14">ECDSA Curve P-384 with SHA-384</option>
+											<option value="15">Ed25519</option>
+											<option value="16">Ed448</option>
+										</select>
+										<input type="text" class="form-control mb-2" placeholder="{{ __('Public Key') }}" name="dnskeyPubKey">
+									</div>
+								  </div>
+								</div>
+								{% if launch_phases == 'on' %}<hr />{% endif %}
+                            </div>
+
+                        {% if launch_phases == 'on' %}
+                        <div class="row">
+                          <div class="col-md-6">
                             <div class="mb-3">
                                 <label for="phaseType" class="form-label">{{ __('Phase Type') }}</label>
                                 <select class="form-select" id="phaseType" name="phaseType">
@@ -218,6 +310,8 @@
                               <label class="form-label">{{ __('Signed Mark Information') }}</label>
                               <textarea class="form-control" data-bs-toggle="autosize" name="smd" placeholder="{{ __('Paste SMD contents') }}…"></textarea>
                             </div>
+                          </div>
+                          <div class="col-md-6">
 
                             <div class="mb-3">
                                 <label for="noticeid" class="form-label">{{ __('Notice ID') }}</label>
@@ -233,12 +327,9 @@
                                 <label for="accepted" class="form-label">{{ __('Accepted Date') }}</label>
                                 <input type="datetime-local" class="form-control" name="accepted">
                             </div>
-                            {% endif %}
-
-                           <div class="mb-3">
-                             <label for="token" class="form-label">{{ __('Allocation Token') }}</label>
-                             <input type="text" class="form-control" placeholder="{{ __('Allocation token') }}" name="token" autocapitalize="none">
-                           </div>
+                          </div>
+                        </div>
+                        {% endif %}
 
                     </div>
                 <div class="card-footer">
diff --git a/cp/resources/views/admin/domains/updateApplication.twig b/cp/resources/views/admin/domains/updateApplication.twig
index f2224f1..57dd54c 100644
--- a/cp/resources/views/admin/domains/updateApplication.twig
+++ b/cp/resources/views/admin/domains/updateApplication.twig
@@ -80,8 +80,7 @@
                   </div>
                 </div>
               </div>
-              
-              
+
               <div class="col-md-6">
                 <div class="card">
                   <div class="card-body">                              
diff --git a/cp/resources/views/admin/domains/updateDomain.twig b/cp/resources/views/admin/domains/updateDomain.twig
index 9e27c6d..a0fb2db 100644
--- a/cp/resources/views/admin/domains/updateDomain.twig
+++ b/cp/resources/views/admin/domains/updateDomain.twig
@@ -79,7 +79,24 @@
                         <div class="col-md-6">
                             {% if minimum_data == 'false' %}<div class="mb-3">
                                 <label for="contactRegistrant" class="form-label required">{{ __('Registrant Contact') }}</label>
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Registrant Contact') }}" name="contactRegistrant" id="contactRegistrant" value="{{ domainRegistrant.identifier }}" required>
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Registrant Contact') }}" name="contactRegistrant" id="contactRegistrant" value="{{ domainRegistrant.identifier }}" required>
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a new Contact ID to replace the current one. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                    </div>
+                                </div>
                                         
                                 {% set contactAdmin = '' %}
                                 {% set contactTech = '' %}
@@ -96,11 +113,62 @@
                                 {% endfor %}
                                 
                                 <label for="contactAdmin" class="form-label required">{{ __('Admin Contact') }}</label>
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Admin Contact') }}" name="contactAdmin" id="contactAdmin" value="{{ contactAdmin }}" required>
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Admin Contact') }}" name="contactAdmin" id="contactAdmin" value="{{ contactAdmin }}" required>
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a new Contact ID to replace the current one. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                    </div>
+                                </div>
                                 <label for="contactTech" class="form-label required">{{ __('Tech Contact') }}</label>
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Tech Contact') }}" name="contactTech" id="contactTech" value="{{ contactTech }}" required>
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Tech Contact') }}" name="contactTech" id="contactTech" value="{{ contactTech }}" required>
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a new Contact ID to replace the current one. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                    </div>
+                                </div>
                                 <label for="contactBilling" class="form-label">{{ __('Billing Contact') }}</label>
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Billing Contact') }}" name="contactBilling" id="contactBilling" value="{{ contactBilling }}">
+                                <div class="row g-2">
+                                    <div class="col">
+                                        <div class="input-group input-group-flat mb-2">
+                                          <input type="text" class="form-control" placeholder="{{ __('Billing Contact') }}" name="contactBilling" id="contactBilling" value="{{ contactBilling }}">
+                                          <span class="input-group-text">
+                                            <a href="{{route('listContacts')}}" class="link-secondary ms-2" title="{{ __('Search Contacts') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+                                            </a>
+                                            <a href="{{route('createContact')}}" class="link-secondary ms-2" title="{{ __('Create Contact') }}" data-bs-toggle="tooltip" target="_blank">
+                                              <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 5l0 14" /><path d="M5 12l14 0" /></svg>
+                                            </a>
+                                          </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-auto align-self-center mb-2">
+                                      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p class='mb-0'>{{ __('Enter a new Contact ID to replace the current one. Use the magnifying glass to search or the plus icon to create a new contact (both open in new tabs). Then return and paste the Contact ID here.') }}</p>" data-bs-html="true">?</span>
+                                    </div>
+                                </div>
                             </div>{% endif %}
                             
                             <div class="hr-text">
@@ -251,39 +319,44 @@
                             <label class="form-check-label" for="addDnssec">{{ __('Add DNSSEC Data') }}</label>
                         </div>
                         <div id="dnssecData" style="display: none;">
-                            <div class="mb-3">
-                                <label for="dsKeyTag" class="form-label">{{ __('DS Record') }}</label>
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Key Tag') }}" name="dsKeyTag" id="dsKeyTag">
-                                <select class="form-control mb-2" name="dsAlg">
-                                    <option value="" disabled selected>{{ __('Select Algorithm') }}</option>
-                                    <option value="8">RSA/SHA-256</option>
-                                    <option value="13">ECDSA Curve P-256 with SHA-256</option>
-                                    <option value="14">ECDSA Curve P-384 with SHA-384</option>
-                                    <option value="15">Ed25519</option>
-                                    <option value="16">Ed448</option>
-                                </select>
-                                <select class="form-control mb-2" name="dsDigestType">
-                                    <option value="" disabled selected>{{ __('Select Digest Type') }}</option>
-                                    <option value="2">SHA-256</option>
-                                    <option value="4">SHA-384</option>
-                                </select>
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Digest') }}" name="dsDigest">
+                          <div class="row">
+                            <div class="col-md-6">
+                                <div class="mb-3">
+                                    <label for="dsKeyTag" class="form-label">{{ __('DS Record') }}</label>
+                                    <input type="text" class="form-control mb-2" placeholder="{{ __('Key Tag') }}" name="dsKeyTag" id="dsKeyTag">
+                                    <select class="form-control mb-2" name="dsAlg">
+                                        <option value="" disabled selected>{{ __('Select Algorithm') }}</option>
+                                        <option value="8">RSA/SHA-256</option>
+                                        <option value="13">ECDSA Curve P-256 with SHA-256</option>
+                                        <option value="14">ECDSA Curve P-384 with SHA-384</option>
+                                        <option value="15">Ed25519</option>
+                                        <option value="16">Ed448</option>
+                                    </select>
+                                    <select class="form-control mb-2" name="dsDigestType">
+                                        <option value="" disabled selected>{{ __('Select Digest Type') }}</option>
+                                        <option value="2">SHA-256</option>
+                                        <option value="4">SHA-384</option>
+                                    </select>
+                                    <input type="text" class="form-control mb-2" placeholder="{{ __('Digest') }}" name="dsDigest">
+                                </div>
                             </div>
-                                    
-                            <div class="mb-3">
-                                <label for="dnskeyFlags" class="form-label">{{ __('DNSKEY Record') }}</label>
-                                <input type="number" class="form-control mb-2" placeholder="{{ __('Flags') }}" name="dnskeyFlags" id="dnskeyFlags">
-                                <input type="number" class="form-control mb-2" placeholder="{{ __('Protocol') }}" name="dnskeyProtocol" value="3" readonly> <!-- Protocol is typically set to 3 -->
-                                <select class="form-control mb-2" name="dnskeyAlg">
-                                    <option value="" disabled selected>{{ __('Select Algorithm') }}</option>
-                                    <option value="8">RSA/SHA-256</option>
-                                    <option value="13">ECDSA Curve P-256 with SHA-256</option>
-                                    <option value="14">ECDSA Curve P-384 with SHA-384</option>
-                                    <option value="15">Ed25519</option>
-                                    <option value="16">Ed448</option>
-                                </select>
-                                <input type="text" class="form-control mb-2" placeholder="{{ __('Public Key') }}" name="dnskeyPubKey">
+                            <div class="col-md-6">
+                                <div class="mb-3">
+                                    <label for="dnskeyFlags" class="form-label">{{ __('DNSKEY Record') }}</label>
+                                    <input type="number" class="form-control mb-2" placeholder="{{ __('Flags') }}" name="dnskeyFlags" id="dnskeyFlags">
+                                    <input type="number" class="form-control mb-2" placeholder="{{ __('Protocol') }}" name="dnskeyProtocol" value="3" readonly> <!-- Protocol is typically set to 3 -->
+                                    <select class="form-control mb-2" name="dnskeyAlg">
+                                        <option value="" disabled selected>{{ __('Select Algorithm') }}</option>
+                                        <option value="8">RSA/SHA-256</option>
+                                        <option value="13">ECDSA Curve P-256 with SHA-256</option>
+                                        <option value="14">ECDSA Curve P-384 with SHA-384</option>
+                                        <option value="15">Ed25519</option>
+                                        <option value="16">Ed448</option>
+                                    </select>
+                                    <input type="text" class="form-control mb-2" placeholder="{{ __('Public Key') }}" name="dnskeyPubKey">
+                                </div>
                             </div>
+                          </div>
                         </div>
 
                   </div>