getnamingo-registry/cp/resources/views/admin/contacts/create.twig
2023-09-03 18:02:28 +03:00

318 lines
No EOL
19 KiB
Twig

{% extends "layouts/app.twig" %}
{% block title %}{{ __('Contacts') }}{% 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">
{{ __('Contacts') }}
</h2>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
<div class="row row-cards">
<div class="card">
<div class="card-body">
<form action="/your_endpoint" method="post">
<div class="row">
<!-- First Column: General & Internationalized Info -->
<div class="col-md-6">
<h6 class="mb-3">General & Internationalized Info</h6>
<!-- 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" required="required">
<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 %}
<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 %}
<!-- Internationalized Organization -->
<div class="mb-3">
<label for="intOrg" class="form-label required">Organization</label>
<input type="text" class="form-control" id="intOrg" name="org" required="required">
<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" required="required">
</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" required="required">
</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" required="required">
{% 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">
<h6 class="mb-3">Contact Details</h6>
<!-- 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="email" class="form-control" id="email" name="email" required="required">
<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="authInfo" class="form-label required">Contact AuthInfo</label>
<input type="text" class="form-control" id="authInfo" name="authInfo" 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 class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="verifyPhone" name="verifyPhone">
<label class="form-check-label" for="verifyPhone">Verify by Phone</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="verifyEmail" name="verifyEmail">
<label class="form-check-label" for="verifyEmail">Verify by Email</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="verifyPostal" name="verifyPostal">
<label class="form-check-label" for="verifyPostal">Verify by Postal Mail</label>
</div>
</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">
<h6 class="mb-3">Localized Postal Info: Personal Details</h6>
<!-- 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">
<h6 class="mb-3">Localized Postal Info: Address Details</h6>
<!-- 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="card-footer">
<div class="row align-items-center">
<div class="col-auto">
<button type="submit" class="btn btn-primary">Create Contact</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item">
Copyright &copy; 2023
<a href="https://namingo.org" target="_blank" class="link-secondary">Namingo</a>.
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
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 authInfo for Contact
const authInfoInput = document.getElementById('authInfo');
authInfoInput.value = generateAuthInfo();
function generateAuthInfo() {
const length = 16;
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let retVal = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
retVal += charset.charAt(randomIndex);
}
return retVal;
}
});
</script>
{% endblock %}