mirror of
https://github.com/getnamingo/registry.git
synced 2025-08-12 12:29:20 +02:00
Preparation for domain transfer / UI
This commit is contained in:
parent
2467964761
commit
423f570235
3 changed files with 179 additions and 2 deletions
|
@ -41,6 +41,7 @@
|
||||||
<div class="page-body">
|
<div class="page-body">
|
||||||
<div class="container-xl">
|
<div class="container-xl">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
{% include 'partials/flash.twig' %}
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body border-bottom py-3">
|
<div class="card-body border-bottom py-3">
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
|
|
|
@ -20,11 +20,11 @@
|
||||||
<!-- Page title actions -->
|
<!-- Page title actions -->
|
||||||
<div class="col-auto ms-auto d-print-none">
|
<div class="col-auto ms-auto d-print-none">
|
||||||
<div class="btn-list">
|
<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>
|
<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') }}
|
{{ __('Request Transfer') }}
|
||||||
</a>
|
</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>
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -36,6 +36,7 @@
|
||||||
<div class="page-body">
|
<div class="page-body">
|
||||||
<div class="container-xl">
|
<div class="container-xl">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
{% include 'partials/flash.twig' %}
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body border-bottom py-3">
|
<div class="card-body border-bottom py-3">
|
||||||
<div class="d-flex">
|
<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