Improvements in contacts UI

Also added better phone validation and made some fixes
This commit is contained in:
Pinga 2024-02-21 12:41:10 +02:00
parent d437635fef
commit 9c3ad18845
5 changed files with 106 additions and 18 deletions

View file

@ -57,8 +57,8 @@
<!-- 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 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>
@ -114,6 +114,7 @@
<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 -->
@ -280,6 +281,10 @@ document.addEventListener("DOMContentLoaded", function() {
}
});
// Generate ID for Contact
const contactidInput = document.getElementById('contactid');
contactidInput.value = generateAuthInfo();
// Generate authInfo for Contact
const authInfoInput = document.getElementById('authInfo');
authInfoInput.value = generateAuthInfo();
@ -288,10 +293,29 @@ document.addEventListener("DOMContentLoaded", function() {
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);
retVal += charset.charAt(randomIndex);
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;
}
});

View file

@ -56,8 +56,8 @@
<!-- 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" value="{{ postal_int.org }}">
<label for="intOrg" class="form-label">{{ __('Organization') }}</label>
<input type="text" class="form-control" id="intOrg" name="org" value="{{ postal_int.org }}">
<label class="form-check form-switch mt-1">
<input class="form-check-input" type="checkbox" id="discloseOrgInt" name="disclose_org_int" {% if postal_int.disclose_org_int == '1' %}checked{% endif %}>
<span class="form-check-label" for="discloseOrgInt">{{ __('Disclose in WHOIS') }}</span>
@ -95,7 +95,7 @@
<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 }}" {% if postal_int.cc == country.alpha2 %}selected{% endif %}>{{ country.name }}</option>
<option value="{{ country.alpha2|lower }}" {% if postal_int.cc|lower == country.alpha2|lower %}selected{% endif %}>{{ country.name }}</option>
{% endfor %}
</select>
</div>
@ -252,7 +252,7 @@
<label for="locCC" class="form-label">{{ __('Country') }}</label>
<select class="form-select" id="locCC" name="locCC">
{% for country in countries %}
<option value="{{ country.alpha2 }}" {% if postal_loc.cc == country.alpha2 %}selected{% endif %}>{{ country.name }}</option>
<option value="{{ country.alpha2|lower }}" {% if postal_loc.cc|lower == country.alpha2|lower %}selected{% endif %}>{{ country.name }}</option>
{% endfor %}
</select>
</div>

View file

@ -53,7 +53,7 @@
</div>
<div class="datagrid-item">
<div class="datagrid-title">{{ __('Fax') }}</div>
<div class="datagrid-content">{{ contact.fax|default('N/A') }}</div>
<div class="datagrid-content">{{ contact.fax|default('N/A') }} {% if contact.disclose_fax == '1' %}<svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><title>{{ __('Visible in Public') }}</title><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg>{% else %}<svg xmlns="http://www.w3.org/2000/svg" class="icon text-orange" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><title>{{ __('Hidden from Public') }}</title><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg>{% endif %}</div>
</div>
<div class="datagrid-item">
<div class="datagrid-title">{{ __('NIN') }}</div>
@ -160,7 +160,13 @@
</div>
<div class="datagrid-item">
<div class="datagrid-title">{{ __('Country') }}</div>
<div class="datagrid-content">{{ postal.cc }} {% if postal.disclose_addr_int == '1' %}
<div class="datagrid-content">
{% for country in countries %}
{% if postal.cc|lower == country.alpha2|lower %}
{{ country.name }}
{% endif %}
{% endfor %}
{% if postal.disclose_addr_int == '1' %}
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><title>{{ __('Visible in Public') }}</title><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg>
{% else %}
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-orange" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><title>{{ __('Hidden from Public') }}</title><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg>
@ -237,7 +243,13 @@
</div>
<div class="datagrid-item">
<div class="datagrid-title">{{ __('Country') }}</div>
<div class="datagrid-content">{{ postal.cc }} {% if postal.disclose_addr_loc == '1' %}
<div class="datagrid-content">
{% for country in countries %}
{% if postal.cc|lower == country.alpha2|lower %}
{{ country.name }}
{% endif %}
{% endfor %}
{% if postal.disclose_addr_loc == '1' %}
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><title>{{ __('Visible in Public') }}</title><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg>
{% else %}
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-orange" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><title>{{ __('Hidden from Public') }}</title><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg>