mirror of
https://github.com/getnamingo/registry.git
synced 2025-08-05 01:01:30 +02:00
Preparation for domain transfer / UI
This commit is contained in:
Pinga
parent
2467964761
commit
423f570235
3 changed files with 179 additions and 2 deletions
|
|
@ -41,6 +41,7 @@
|
|||
<div class="page-body">
|
||||
<div class="container-xl">
|
||||
<div class="col-12">
|
||||
{% include 'partials/flash.twig' %}
|
||||
<div class="card">
|
||||
<div class="card-body border-bottom py-3">
|
||||
<div class="d-flex">
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@
|
|||
<!-- Page title actions -->
|
||||
<div class="col-auto ms-auto d-print-none">
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn btn-primary d-none d-sm-inline-block">
|
||||
<a href="{{route('requestTransfer')}}" class="btn btn-primary d-none d-sm-inline-block">
|
||||
<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"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
|
||||
{{ __('Request Transfer') }}
|
||||
</a>
|
||||
<a href="#" class="btn btn-primary d-sm-none btn-icon" aria-label="{{ __('Request Transfer') }}">
|
||||
<a href="{{route('requestTransfer')}}" class="btn btn-primary d-sm-none btn-icon" aria-label="{{ __('Request Transfer') }}">
|
||||
<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"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -36,6 +36,7 @@
|
|||
<div class="page-body">
|
||||
<div class="container-xl">
|
||||
<div class="col-12">
|
||||
{% include 'partials/flash.twig' %}
|
||||
<div class="card">
|
||||
<div class="card-body border-bottom py-3">
|
||||
<div class="d-flex">
|
||||
|
|
|
|||
175
cp/resources/views/admin/domains/requestTransfer.twig
Normal file
175
cp/resources/views/admin/domains/requestTransfer.twig
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
{% extends "layouts/app.twig" %}
|
||||
|
||||
{% block title %}{{ __('Request Domain Transfer') }}{% 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">
|
||||
{{ __('Request Domain Transfer') }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page body -->
|
||||
<div class="page-body">
|
||||
<div class="container-xl">
|
||||
<div class="col-12">
|
||||
{% include 'partials/flash.twig' %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form id="domainTransferForm" action="/transfer/request" method="post">
|
||||
{{ csrf.field | raw }}
|
||||
<div class="mb-3">
|
||||
<label for="domainName" class="form-label required">{{ __('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">
|
||||
<label for="registrarDropdown" class="form-label required">{{ __('Gaining 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 %}
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Slider for years -->
|
||||
<div class="mb-3">
|
||||
<label for="transferYears" class="form-label">{{ __('Transfer And Renew') }}</label>
|
||||
<input type="range" class="form-range" min="1" max="10" step="1" id="transferYears" name="transferYears" value="1">
|
||||
<span id="yearValue">1 Year</span>
|
||||
</div>
|
||||
|
||||
<!-- Placeholder for displaying domain price -->
|
||||
<div class="mb-3" id="domainPriceDisplay" style="display:none;">
|
||||
<strong>{{ __('Estimated Price') }}: </strong><span id="domainPrice">$0.00</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<button type="submit" class="btn btn-primary">{{ __('Request Transfer') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</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 © 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() {
|
||||
|
||||
window.currencySymbol = "{{ currencySymbol }}";
|
||||
window.currencyPosition = "{{ currencyPosition }}";
|
||||
|
||||
const yearSlider = document.getElementById('transferYears');
|
||||
const yearValueDisplay = document.getElementById('yearValue');
|
||||
|
||||
// Display year value from slider
|
||||
yearSlider.addEventListener('input', function() {
|
||||
yearValueDisplay.textContent = `${yearSlider.value} Year${yearSlider.value > 1 ? 's' : ''}`;
|
||||
});
|
||||
|
||||
const domainInput = document.getElementById('domainName');
|
||||
const yearInput = document.getElementById('transferYears');
|
||||
const priceDisplay = document.getElementById('domainPriceDisplay');
|
||||
const priceValue = document.getElementById('domainPrice');
|
||||
|
||||
function extractTLD(domain) {
|
||||
const match = domain.match(/\.[a-zA-Z0-9]+$/);
|
||||
return match ? match[0].toLowerCase() : null;
|
||||
}
|
||||
|
||||
function getDomainPrice(domain, years) {
|
||||
const tld = extractTLD(domain);
|
||||
if (!tld) {
|
||||
return Promise.reject("Invalid TLD");
|
||||
}
|
||||
|
||||
// Call your API to get the domain price based on its TLD.
|
||||
return fetch(`/api/records/domain_price?join=domain_tld`)
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
} else {
|
||||
return Promise.reject("Failed to fetch domain prices");
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
// Find the domain TLD and then get its price for the "transfer" command
|
||||
const tldData = data.records.find(record =>
|
||||
record.tldid && record.tldid.tld.toLowerCase() === tld.toLowerCase() &&
|
||||
record.command === 'transfer'
|
||||
);
|
||||
if (tldData) {
|
||||
const priceField = `m${years * 12}`;
|
||||
const price = parseFloat(tldData[priceField]);
|
||||
if (!isNaN(price)) {
|
||||
return price;
|
||||
}
|
||||
}
|
||||
return Promise.reject("TLD price not found");
|
||||
});
|
||||
}
|
||||
|
||||
function formatPrice(price) {
|
||||
switch(window.currencyPosition) {
|
||||
case 'before':
|
||||
return `${window.currencySymbol}${price.toFixed(2)}`;
|
||||
case 'after':
|
||||
return `${price.toFixed(2)} ${window.currencySymbol}`;
|
||||
default:
|
||||
return price.toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
function updatePrice() {
|
||||
if (domainInput.value) {
|
||||
getDomainPrice(domainInput.value, yearInput.value).then(price => {
|
||||
priceValue.innerText = formatPrice(price);
|
||||
priceDisplay.style.display = 'block';
|
||||
});
|
||||
} else {
|
||||
priceDisplay.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
domainInput.addEventListener('input', updatePrice);
|
||||
yearInput.addEventListener('input', updatePrice);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue