getnamingo-registry/cp/resources/views/admin/domains/updateDomain.twig
2025-02-18 17:41:14 +02:00

1099 lines
No EOL
65 KiB
Twig

{% extends "layouts/app.twig" %}
{% block title %}{{ __('Updating Domain') }} {{ domain.name }}{% endblock %}
{% block content %}
<div class="page-wrapper">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
{{ __('Overview') }}
</div>
<h2 class="page-title">
{{ __('Updating Domain') }} {{ domain.name }}
</h2>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
<form id="domainUpdateForm" action="/domain/update" method="post">
{{ csrf.field | raw }}
<div class="col-12">
{% include 'partials/flash.twig' %}
<div class="card mb-3">
<div class="card-header">
<h3 class="card-title">
{{ __('Domain') }} {{ domain.name }}&nbsp;
{% if domainStatus.status or domain.rgpstatus %}
{% if domainStatus is iterable %}
{% for status in domainStatus %}
<span class="status status-green" title="Status">{{ status.status }}</span>&nbsp;
{% endfor %}
{% else %}
{% if domainStatus.status %}
<span class="status status-green" title="Status">{{ domainStatus.status }}</span>&nbsp;
{% endif %}
{% endif %}
{% if domain.rgpstatus %}
<span class="status status-info" title="Status">{{ domain.rgpstatus }}</span>
{% endif %}
{% else %}
<span class="status status-info" title="Status">ok</span>
{% endif %}
</h3>
</div>
<div class="card-body">
<div class="datagrid">
<div class="datagrid-item">
<div class="datagrid-title">{{ __('Registered On') }}</div>
<div class="datagrid-content">{{ domain.crdate }}</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">{{ __('Last Updated') }}</div>
<div class="datagrid-content">{{ domain.lastupdate }}</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">{{ __('Expiration Date') }}</div>
<div class="datagrid-content">{{ domain.exdate }}</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">{{ __('Registrar') }}</div>
<div class="datagrid-content">{{ registrar_details.name }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="row">
<!-- Fields for 4 contacts with roles -->
<div class="col-md-6">
{% if minimum_data == 'false' %}<div class="mb-3">
<label for="contactRegistrant" class="form-label required">{{ __('Registrant Contact') }}</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" value="{{ domainRegistrant.identifier }}" required>
<span class="input-group-text">
<a href="#" class="link-secondary ms-2 open-modal" data-bs-toggle="modal" data-bs-target="#contactModal" data-input="contactRegistrant" title="{{ __('Assign Contact') }}">
<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="#" class="link-secondary ms-2 open-add-modal" title="{{ __('Create Contact') }}" data-bs-toggle="modal" data-bs-target="#addContactModal" data-input="contactRegistrant">
<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 = '' %}
{% set contactBilling = '' %}
{% for contact in domainContacts %}
{% if contact.type == 'admin' %}
{% set contactAdmin = contact.identifier %}
{% elseif contact.type == 'tech' %}
{% set contactTech = contact.identifier %}
{% elseif contact.type == 'billing' %}
{% set contactBilling = contact.identifier %}
{% endif %}
{% endfor %}
<label for="contactAdmin" class="form-label required">{{ __('Admin Contact') }}</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="{{ __('Admin Contact') }}" name="contactAdmin" id="contactAdmin" value="{{ contactAdmin }}" required>
<span class="input-group-text">
<a href="#" class="link-secondary ms-2 open-modal" data-bs-toggle="modal" data-bs-target="#contactModal" data-input="contactAdmin" title="{{ __('Assign Contact') }}">
<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="#" class="link-secondary ms-2 open-add-modal" title="{{ __('Create Contact') }}" data-bs-toggle="modal" data-bs-target="#addContactModal" data-input="contactAdmin">
<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>
<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="#" class="link-secondary ms-2 open-modal" data-bs-toggle="modal" data-bs-target="#contactModal" data-input="contactTech" title="{{ __('Assign Contact') }}">
<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="#" class="link-secondary ms-2 open-add-modal" title="{{ __('Create Contact') }}" data-bs-toggle="modal" data-bs-target="#addContactModal" data-input="contactTech">
<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>
<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="#" class="link-secondary ms-2 open-modal" data-bs-toggle="modal" data-bs-target="#contactModal" data-input="contactBilling" title="{{ __('Assign Contact') }}">
<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="#" class="link-secondary ms-2 open-add-modal" title="{{ __('Create Contact') }}" data-bs-toggle="modal" data-bs-target="#addContactModal" data-input="contactBilling">
<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">
<span>{{ __('Domain Security') }}</span>
</div>
<!-- AuthInfo -->
<div class="mb-3 mt-3">
<label for="authInfo" class="form-label required">{{ __('Auth Info') }}</label>
<input type="text" class="form-control" id="authInfo" name="authInfo" value="{{ domainAuth.authinfo }}" required>
</div>
</div>
<!-- Fields for nameservers -->
<div class="col-md-6">
<div id="nameserverFields">
<div class="form-label">{{ __('Nameservers') }}&nbsp;<button type="button" id="addNameserver" class="btn btn-success btn-sm mb-2">+</button>&nbsp;<button type="button" id="removeNameserver" class="btn btn-danger btn-sm mb-2">-</button></div>
{% for host in domainHosts %}
<div class="nameserver-group mb-1 row">
<div class="input-group mb-1">
<input type="text" class="form-control" placeholder="{{ __('Nameserver') }} {{ loop.index }}" value="{{ host.name }}" autocapitalize="none" disabled>
<button type="button" class="btn btn-secondary btn-icon" onclick="sendRequest('{{ host.name }}','{{ domain.id }}')" title="Delete nameserver"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10l4 4m0 -4l-4 4" /><path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z" /></svg></button>
</div>
</div>
{% endfor %}
</div>
{% set statuses = domainStatus ? domainStatus|map(status => status.status) : [] %}
<div class="mb-3 mt-3">
<div class="form-label">{{ __('Statuses') }}</div>
<div>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="clientStatuses[clientHold]" {% if 'clientHold' in statuses %}checked{% endif %}>
<span class="form-check-label">clientHold</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="clientStatuses[clientRenewProhibited]" {% if 'clientRenewProhibited' in statuses %}checked{% endif %}>
<span class="form-check-label">clientRenewProhibited</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="clientStatuses[clientTransferProhibited]" {% if 'clientTransferProhibited' in statuses %}checked{% endif %}>
<span class="form-check-label">clientTransferProhibited</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="clientStatuses[clientDeleteProhibited]" {% if 'clientDeleteProhibited' in statuses %}checked{% endif %}>
<span class="form-check-label">clientDeleteProhibited</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="clientStatuses[clientUpdateProhibited]" {% if 'clientUpdateProhibited' in statuses %}checked{% endif %}>
<span class="form-check-label">clientUpdateProhibited</span>
</label>
</div>
</div>
<div class="mb-3 mt-3">
<div class="form-label">{{ __('Server Statuses') }}</div>
<div>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="serverStatuses[serverHold]"{% if roles != 0 %}disabled{% endif %} {% if 'serverHold' in statuses %}checked{% endif %}>
<span class="form-check-label">serverHold</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="serverStatuses[serverRenewProhibited]"{% if roles != 0 %}disabled{% endif %} {% if 'serverRenewProhibited' in statuses %}checked{% endif %}>
<span class="form-check-label">serverRenewProhibited</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="serverStatuses[serverTransferProhibited]"{% if roles != 0 %}disabled{% endif %} {% if 'serverTransferProhibited' in statuses %}checked{% endif %}>
<span class="form-check-label">serverTransferProhibited</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="serverStatuses[serverDeleteProhibited]"{% if roles != 0 %}disabled{% endif %} {% if 'serverDeleteProhibited' in statuses %}checked{% endif %}>
<span class="form-check-label">serverDeleteProhibited</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="serverStatuses[serverUpdateProhibited]"{% if roles != 0 %}disabled{% endif %} {% if 'serverUpdateProhibited' in statuses %}checked{% endif %}>
<span class="form-check-label">serverUpdateProhibited</span>
</label>
</div>
</div>
</div>
</div>
{% if domainSecdns|length > 0 %}
<!-- DNSSEC data is available, display the form directly -->
<div id="dnssecTable" class="mb-3">
<label for="authInfo" class="form-label">{{ __('DNSSEC Data') }}</label>
<div class="table-responsive">
<table class="table table-vcenter card-table table-striped">
<thead>
<tr>
{% set dsDataExists = false %}
{% set keyDataExists = false %}
{% for row in domainSecdns %}
{% if row.interface == 'dsData' %}
{% set dsDataExists = true %}
{% elseif row.interface == 'keyData' %}
{% set keyDataExists = true %}
{% endif %}
{% endfor %}
<!-- Headers for dsData -->
{% if dsDataExists %}
<th>Keytag</th>
<th>Algorithm</th>
<th>Digest Type</th>
<th>Digest</th>
{% endif %}
<!-- Headers for keyData -->
{% if keyDataExists %}
<th>Flags</th>
<th>Protocol</th>
<th>Keydata Algorithm</th>
<th>Public Key</th>
{% endif %}
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
{% for row in domainSecdns %}
<tr>
{% if row.interface == 'dsData' %}
<td>{{ row.keytag }}</td>
<td>{{ row.alg }}</td>
<td>{{ row.digesttype }}</td>
<td>{{ row.digest }}</td>
{% elseif row.interface == 'keyData' %}
<td>{{ row.flags }}</td>
<td>{{ row.protocol }}</td>
<td>{{ row.keydata_alg }}</td>
<td>{{ row.pubkey }}</td>
{% endif %}
<td><button type="button" class="btn btn-dark btn-icon" onclick="sendSecRequest('{{ row.id }}','{{ row.domain_id }}')" title="Delete record"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10l4 4m0 -4l-4 4" /><path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z" /></svg></button></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
<!-- DNSSEC Data with checkbox -->
<div class="mb-3 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-select 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-select 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-select 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>
<div class="card-footer">
<div class="row align-items-center">
<div class="col-auto">
<button type="submit" class="btn btn-primary">{{ __('Update Domain') }}</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% include 'partials/footer.twig' %}
</div>
<div class="modal modal-blur fade" id="contactModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ __('Choose Contact to Assign') }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-4 text-secondary">
{{ __('Search') }}:
<div class="ms-2 d-inline-block">
<input id="search-input" type="text" class="form-control" aria-label="{{ __('Search contacts') }}">
</div>
</div>
<div id="contactTable"></div>
</div>
</div>
</div>
</div>
<div class="modal modal-blur fade" id="addContactModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ __('Create Contact') }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<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>
<!-- Internationalized Name -->
<div class="mb-3">
<label for="intName" class="form-label required">{{ __('Name') }}</label>
<input type="text" class="form-control" id="intName" name="intName">
<label class="form-check form-switch mt-1">
<input class="form-check-input" type="checkbox" id="discloseNameInt" name="disclose_name_int">
<span class="form-check-label" for="discloseNameInt">{{ __('Disclose in WHOIS') }}</span>
</label>
</div>
{% if registrars_list and not registrar %}
<div class="form-group mb-3">
<label for="registrarDropdown2" class="form-label required">{{ __('Select Registrar') }}</label>
<select id="registrarDropdown2" name="registrar" class="form-select" required="required">
{% for registrar in registrars_list %}
<option value="{{ registrar.id }}">{{ registrar.name }}</option>
{% endfor %}
</select>
</div>
{% endif %}
<!-- Internationalized Organization -->
<div class="mb-3">
<label for="intOrg" class="form-label">{{ __('Organization') }}</label>
<input type="text" class="form-control" id="intOrg" name="org">
<label class="form-check form-switch mt-1">
<input class="form-check-input" type="checkbox" id="discloseOrgInt" name="disclose_org_int">
<span class="form-check-label" for="discloseOrgInt">{{ __('Disclose in WHOIS') }}</span>
</label>
</div>
<!-- Internationalized Address: Street Details -->
<div class="mb-3">
<label for="street1" class="form-label required">{{ __('Street') }} 1</label>
<input type="text" class="form-control" id="street1" name="street1">
</div>
<div class="mb-3">
<label for="street2" class="form-label">{{ __('Street') }} 2</label>
<input type="text" class="form-control" id="street2" name="street2">
</div>
<div class="mb-3">
<label for="street3" class="form-label">{{ __('Street') }} 3</label>
<input type="text" class="form-control" id="street3" name="street3">
</div>
<!-- Internationalized Address: City, SP, PC, CC -->
<div class="mb-3">
<label for="city" class="form-label required">{{ __('City') }}</label>
<input type="text" class="form-control" id="city" name="city">
</div>
<div class="mb-3">
<label for="sp" class="form-label">{{ __('State/Province') }}</label>
<input type="text" class="form-control" id="sp" name="sp">
</div>
<div class="mb-3">
<label for="pc" class="form-label">{{ __('Postal Code') }}</label>
<input type="text" class="form-control" id="pc" name="pc">
</div>
<div class="mb-3">
<label for="cc" class="form-label required">{{ __('Country') }}</label>
<select class="form-select" id="cc" name="cc">
{% for country in countries %}
<option value="{{ country.alpha2|lower }}">{{ country.name }}</option>
{% endfor %}
</select>
</div>
<label class="form-check form-switch mt-1">
<input class="form-check-input" type="checkbox" id="discloseAddrInt" name="disclose_addr_int">
<span class="form-check-label" for="discloseAddrInt">{{ __('Disclose Address in WHOIS') }}</span>
</label>
</div>
<!-- Second Column: Voice, Fax, Email, and other details -->
<div class="col-md-6">
<h5 class="card-title mb-3">{{ __('Contact Details') }}</h5>
<!-- Contact ID -->
<div class="mb-3">
<label for="contactid" class="form-label required">{{ __('Contact ID') }}</label>
<input type="text" class="form-control" id="contactid" name="contactid" required="required">
<small class="form-text text-muted">{{ __('Auto-generated ID for the contact') }}.</small>
</div>
<!-- Voice -->
<div class="mb-3">
<label for="voice" class="form-label required">{{ __('Voice') }}</label>
<input type="tel" class="form-control" id="voice" name="voice" required="required">
<label class="form-check form-switch mt-1">
<input class="form-check-input" type="checkbox" id="discloseVoice" name="disclose_voice">
<span class="form-check-label" for="discloseVoice">{{ __('Disclose in WHOIS') }}</span>
</label>
</div>
<!-- Fax -->
<div class="mb-3">
<label for="fax" class="form-label">{{ __('Fax') }}</label>
<input type="tel" class="form-control" id="fax" name="fax">
<label class="form-check form-switch mt-1">
<input class="form-check-input" type="checkbox" id="discloseFax" name="disclose_fax">
<span class="form-check-label" for="discloseFax">{{ __('Disclose in WHOIS') }}</span>
</label>
</div>
<!-- Email -->
<div class="mb-3">
<label for="email" class="form-label required">{{ __('Email') }}</label>
<input type="text" class="form-control" id="email" name="email" required="required" autocapitalize="none">
<label class="form-check form-switch mt-1">
<input class="form-check-input" type="checkbox" id="discloseEmail" name="disclose_email">
<span class="form-check-label" for="discloseEmail">{{ __('Disclose in WHOIS') }}</span>
</label>
</div>
<!-- AuthInfo for Contact -->
<div class="mb-3">
<label for="authInfoc" class="form-label required">{{ __('Contact AuthInfo') }}</label>
<input type="text" class="form-control" id="authInfoc" name="authInfoc" readonly>
<small class="form-text text-muted">{{ __('Auto-generated authentication information for the contact') }}.</small>
</div>
<!-- NIN - National Identification Number -->
<div class="mb-3">
<label for="nin" class="form-label">{{ __('NIN - National Identification Number') }}</label>
<input type="text" class="form-control" id="nin" name="nin">
</div>
<!-- Personal or Business Checkbox -->
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isBusiness" name="isBusiness">
<label class="form-check-label" for="isBusiness">{{ __('This is a Business Contact') }}</label>
</div>
<!-- You can invert the logic if you prefer the default to be 'Personal' instead of 'Business' -->
</div>
</div>
</div>
<!-- Localized Info Checkbox -->
<div class="mb-3">
<label class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="toggleLoc">
<span class="form-check-label" for="toggleLoc">{{ __('Include Localized Info') }}</span>
</label>
</div>
<!-- Hidden Localized Info Rows -->
<div class="row" id="localizedInfo" style="display: none;">
<!-- Localized Postal Info: First Column -->
<div class="col-md-6">
<h5 class="card-title mb-3">{{ __('Localized Postal Info: Personal Details') }}</h5>
<!-- Localized Name -->
<div class="mb-3">
<label for="locName" class="form-label">{{ __('Name') }}</label>
<input type="text" class="form-control" id="locName" name="locName">
<label class="form-check form-switch mt-1">
<input class="form-check-input" type="checkbox" id="discloseNameLoc" name="disclose_name_loc">
<span class="form-check-label" for="discloseNameLoc">{{ __('Disclose in WHOIS') }}</span>
</label>
</div>
<!-- Localized Organization -->
<div class="mb-3">
<label for="locOrg" class="form-label">{{ __('Organization') }}</label>
<input type="text" class="form-control" id="locOrg" name="locOrg">
<label class="form-check form-switch mt-1">
<input class="form-check-input" type="checkbox" id="discloseOrgLoc" name="disclose_org_loc">
<span class="form-check-label" for="discloseOrgLoc">{{ __('Disclose in WHOIS') }}</span>
</label>
</div>
<!-- Localized Street Details -->
<div class="mb-3">
<label for="locStreet1" class="form-label">{{ __('Street') }} 1</label>
<input type="text" class="form-control" id="locStreet1" name="locStreet1">
</div>
<div class="mb-3">
<label for="locStreet2" class="form-label">{{ __('Street') }} 2</label>
<input type="text" class="form-control" id="locStreet2" name="locStreet2">
</div>
</div>
<!-- Localized Postal Info: Second Column -->
<div class="col-md-6">
<h5 class="card-title mb-3">{{ __('Localized Postal Info: Address Details') }}</h5>
<!-- Continued Localized Street Detail -->
<div class="mb-3">
<label for="locStreet3" class="form-label">{{ __('Street') }} 3</label>
<input type="text" class="form-control" id="locStreet3" name="locStreet3">
</div>
<!-- Localized City, SP, PC, CC -->
<div class="mb-3">
<label for="locCity" class="form-label">{{ __('City') }}</label>
<input type="text" class="form-control" id="locCity" name="locCity">
</div>
<div class="mb-3">
<label for="locSP" class="form-label">{{ __('State/Province') }}</label>
<input type="text" class="form-control" id="locSP" name="locSP">
</div>
<div class="mb-3">
<label for="locPC" class="form-label">{{ __('Postal Code') }}</label>
<input type="text" class="form-control" id="locPC" name="locPC">
</div>
<div class="mb-3">
<label for="locCC" class="form-label">{{ __('Country') }}</label>
<select class="form-select" id="locCC" name="locCC">
{% for country in countries %}
<option value="{{ country.alpha2|lower }}">{{ country.name }}</option>
{% endfor %}
</select>
</div>
<label class="form-check form-switch mt-1">
<input class="form-check-input" type="checkbox" id="discloseAddrLoc" name="disclose_addr_loc">
<span class="form-check-label" for="discloseAddrLoc">{{ __('Disclose Address in WHOIS') }}</span>
</label>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-link link-secondary btn-3" data-bs-dismiss="modal" id="cancelButton">{{ __('Close') }}</a>
<button type="submit" class="btn btn-primary">{{ __('Create Contact') }}</button></form>
</div>
</div>
</div>
</div>
<link href="/assets/css/tabulator.min.css" rel="stylesheet">
<script src="/assets/js/tabulator.min.js" defer></script>
<script>
let addContactTargetInputId = null;
// Capture the target input when opening "Add Contact" modal
document.addEventListener("click", function (e) {
let openBtn = e.target.closest('.open-add-modal');
if (openBtn) {
addContactTargetInputId = openBtn.getAttribute('data-input');
}
});
document.getElementById("addContactForm").addEventListener("submit", function (e) {
e.preventDefault(); // Prevent full-page reload
let form = this;
let formData = new FormData(form);
fetch("/contact/create-api", {
method: "POST",
body: formData,
headers: {
"Accept": "application/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 => {
console.log("✅ Contact Added:", data);
if (data.identifier && addContactTargetInputId) {
let targetInput = document.getElementById(addContactTargetInputId);
if (targetInput) {
targetInput.value = data.identifier;
}
}
// ✅ 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 and clear errors after success
form.reset();
addContactTargetInputId = null;
document.getElementById("addContactError").classList.add("d-none");
}
})
.catch(error => {
console.error("❌ Error adding contact:", error.message);
showErrorMessage(error.message);
refreshCsrfToken();
// ❌ 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;
}
}
let targetInputId = null;
// Ensure target input is set correctly before the modal opens
document.addEventListener("mousedown", function(e) {
let openBtn = e.target.closest('.open-modal');
if (openBtn) {
targetInputId = openBtn.getAttribute('data-input');
}
});
// Handle click on "Add to Main" button
document.addEventListener("click", function(e) {
let addBtn = e.target.closest('.add-to-main');
if (!addBtn) return;
if (!targetInputId) {
return;
}
let identifier = addBtn.getAttribute('data-identifier');
let targetInput = document.getElementById(targetInputId);
if (targetInput) {
targetInput.value = identifier;
}
// Close the modal
let modalElement = document.getElementById("contactModal");
if (modalElement) {
let modalInstance = bootstrap.Modal.getInstance(modalElement);
if (modalInstance) {
modalInstance.hide();
}
}
// Reset input selection after choosing a contact
targetInputId = null;
});
function generateAuthInfoC() {
const length = 16;
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let retVal = "";
let digitCount = 0;
// Generate initial random string
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
const char = charset.charAt(randomIndex);
retVal += char;
if (char >= '0' && char <= '9') {
digitCount++;
}
}
// Ensure there are at least two digits in the string
while (digitCount < 2) {
// Replace a non-digit character at a random position with a digit
const replacePosition = Math.floor(Math.random() * length);
if (!(retVal[replacePosition] >= '0' && retVal[replacePosition] <= '9')) {
const randomDigit = Math.floor(Math.random() * 10); // Generate a digit from 0 to 9
retVal = retVal.substring(0, replacePosition) + randomDigit + retVal.substring(replacePosition + 1);
digitCount++;
}
}
return retVal;
}
async function refreshCsrfToken() {
try {
let response = await fetch('/token-well', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({})
});
if (!response.ok) {
console.error("Failed to fetch CSRF token:", response.status);
return;
}
let data = await response.json();
let csrfNameField = document.querySelector('#addContactModal input[name="csrf_name"]');
let csrfValueField = document.querySelector('#addContactModal input[name="csrf_value"]');
if (csrfNameField && csrfValueField) {
csrfNameField.value = Object.keys(data)[0]; // Set the token name
csrfValueField.value = Object.values(data)[0]; // Set the token value
}
} catch (error) {
console.error("Error refreshing CSRF token:", error);
}
}
document.getElementById("addContactModal").addEventListener("show.bs.modal", function () {
document.getElementById('contactid').value = generateAuthInfoC();
document.getElementById('authInfoc').value = generateAuthInfoC();
});
var table;
document.addEventListener("DOMContentLoaded", function(){
// Only refresh CSRF token when opening the "Add Contact" modal
let addContactModal = document.getElementById("addContactModal");
if (addContactModal) {
addContactModal.addEventListener("show.bs.modal", refreshCsrfToken);
}
const toggleLocCheckbox = document.getElementById('toggleLoc');
const localizedSection = document.getElementById('localizedInfo');
toggleLocCheckbox.addEventListener('change', function() {
if (toggleLocCheckbox.checked) {
localizedSection.style.display = "flex";
} else {
localizedSection.style.display = "none";
}
});
// Generate ID for Contact
const contactidInput = document.getElementById('contactid');
contactidInput.value = generateAuthInfoC();
// Generate authInfo for Contact
const authInfoInput = document.getElementById('authInfoc');
authInfoInput.value = generateAuthInfoC();
function contactLinkFormatter(cell){
var value = cell.getValue();
return `<a href="/contact/view/${value}" style="font-weight:bold;">${value}</a>`;
}
function actionsFormatter(cell, formatterParams, onRendered) {
return `
<button class="btn btn-outline-success btn-icon add-to-main" data-identifier="${cell.getRow().getData().identifier}" title="{{ __('Assign Contact') }}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 5v14m-7 -7h14"></path>
</svg>
</button>
`;
}
var searchTerm = ""; // global variable to hold the search term
function updateSearchTerm(term) {
searchTerm = term;
table.replaceData();
}
table = new Tabulator("#contactTable", {
pagination: true,
paginationMode: "remote",
paginationSize: 10,
height:400,
paginationSizeSelector:[10, 25, 50, 100],
clipboard:true,
clipboardPasteAction:"replace",
sortMode: "remote",
ajaxURL: "/api/records/contact",
ajaxURLGenerator: function(url, config, params) {
var queryParts = [];
// Handle search term
if (searchTerm) {
queryParts.push("filter1=identifier,cs," + encodeURIComponent(searchTerm));
queryParts.push("filter2=email,cs," + encodeURIComponent(searchTerm));
queryParts.push("filter3=voice,cs," + encodeURIComponent(searchTerm));
queryParts.push("filter4=crdate,cs," + encodeURIComponent(searchTerm));
}
// Handle sorting from Tabulator
if (params.sort && params.sort.length > 0) {
var sorter = params.sort[0]; // single-column sorting
var sortField = encodeURIComponent(sorter.field);
var sortDir = (sorter.dir === "asc" ? "asc" : "desc");
queryParts.push("order=" + sortField + "," + sortDir);
} else {
// fallback default order if no sorters
queryParts.push("order=id,desc");
}
// Include pagination parameters
if (params.page) {
queryParts.push("page=" + params.page + "," + params.size);
}
return url + "?" + queryParts.join("&");
},
ajaxResponse: function(url, params, response) {
if (response && Array.isArray(response.records) && typeof response.results === 'number') {
var lastPage = Math.ceil(response.results / this.options.paginationSize);
return {
last_page: lastPage, // Calculated total number of pages
data: response.records, // Data for the current page
};
} else {
console.error('Unexpected response format', response);
return { last_page: 1, data: [] };
}
},
layout:"fitColumns",
responsiveLayout: "collapse",
responsiveLayoutCollapseStartOpen:false,
resizableColumns:false,
placeholder: "{{ __('No Data') }}",
columns:[
{formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
{title:"{{ __('Identifier') }}", field:"identifier", width:200, minWidth:150, resizable:false, headerSort:true, formatter: contactLinkFormatter, responsive:0},
{title:"{{ __('Email') }}", field:"email", minWidth:250, resizable:false, headerSort:true, responsive:2},
{title: "{{ __('Actions') }}", formatter: actionsFormatter, minWidth:80, resizable:false, headerSort:false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
if (e.target.closest('.delete-btn')) {
e.preventDefault(); // Prevent the default link behavior
Swal.fire({
title: "{{ __('Are you sure you want to delete this contact?') }}",
showCancelButton: true,
confirmButtonText: "{{ __('Confirm') }}"
}).then((result) => {
if (result.isConfirmed) {
let deleteUrl = e.target.closest('.delete-btn').getAttribute('data-delete-url');
window.location.href = deleteUrl;
}
});
}
}},
]
});
var searchInput = document.getElementById("search-input");
let searchTimeout;
searchInput.addEventListener("input", function () {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
updateSearchTerm(searchInput.value);
}, 300); // 300ms delay
});
});
</script>
<script>
var csrfTokenName = "{{ csrfTokenName }}";
var csrfTokenValue = "{{ csrfTokenValue }}";
function sendRequest(nameserver,domain_id) {
var formData = new FormData();
formData.append('nameserver', nameserver);
formData.append('domain_id', domain_id);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/domain/deletehost');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var response = JSON.parse(xhr.responseText);
if (xhr.status == 200 && response.success) {
// Redirect to the provided URL
window.location.href = response.redirect;
} else {
// Handle error
console.error('Error: ' + response.error);
alert('Error: ' + response.error); // Display error message to the user
}
}
};
xhr.send(formData);
}
function sendSecRequest(record,domain_id) {
var formData = new FormData();
formData.append('record', record);
formData.append('domain_id', domain_id);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/domain/deletesecdns');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var response = JSON.parse(xhr.responseText);
if (xhr.status == 200 && response.success) {
// Redirect to the provided URL
window.location.href = response.redirect;
} else {
// Handle error
console.error('Error: ' + response.error);
alert('Error: ' + response.error); // Display error message to the user
}
}
};
xhr.send(formData);
}
document.addEventListener("DOMContentLoaded", function() {
const addNameserverBtn = document.getElementById('addNameserver');
const removeNameserverBtn = document.getElementById('removeNameserver');
const nameserverFields = document.getElementById('nameserverFields');
function createNameserverGroup(count) {
const group = document.createElement('div');
group.className = 'nameserver-group mb-1 row';
const nameserverCol = document.createElement('div');
nameserverCol.className = 'col-md-12';
const nameserverField = document.createElement('input');
nameserverField.type = 'text';
nameserverField.className = 'form-control mb-1';
nameserverField.placeholder = `{{ __('Nameserver') }} ${count}`;
nameserverField.name = `nameserver[]`;
nameserverCol.appendChild(nameserverField);
group.appendChild(nameserverCol);
return group;
}
// Add nameserver fields
let nameserverCount = {{ domainHosts|length }}; // Initialize count based on the number of domain hosts
addNameserverBtn.addEventListener('click', function() {
if (nameserverCount < 13) {
nameserverCount++;
const nameserverGroup = createNameserverGroup(nameserverCount);
nameserverFields.appendChild(nameserverGroup);
}
});
// Remove nameserver group
removeNameserverBtn.addEventListener('click', function() {
if (nameserverCount > {{ domainHosts|length }}) {
const lastGroup = nameserverFields.querySelector('.nameserver-group:last-child');
if (lastGroup) {
nameserverFields.removeChild(lastGroup);
nameserverCount--;
}
}
});
// Display DNSSEC data when the checkbox is ticked
document.getElementById('addDnssec').addEventListener('change', function() {
const dnssecData = document.getElementById('dnssecData');
if (this.checked) {
dnssecData.style.display = 'block';
} else {
dnssecData.style.display = 'none';
}
});
});
</script>
{% endblock %}