DNS & Domains Management Pages

Built as part of the IT Pro Partner operations portal concept. Two-tab page with DNS zone management and Cloudflare domain registration.

Key mockup file

/root/portal-mockup/dns.html — URL: https://vaultwarden.tailc2f3b0.ts.net/portal/dns.html

Tab switching implementation

Important: the tab panes use class="tab-pane" as their selector. The JS iterates document.querySelectorAll('.tab-pane') by index. Each pane must have this class. Tab headers use class="tab" and class="tab active". The click handler:

document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', function() {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    this.classList.add('active');
    const idx = Array.from(document.querySelectorAll('.tab')).indexOf(this);
    document.querySelectorAll('.tab-pane').forEach((p, i) => {
      p.style.display = i === idx ? 'block' : 'none';
    });
  });
});

Cloudflare API endpoints used

Verify token: GET /client/v4/user/tokens/verify List zones: GET /client/v4/zones DNS records: GET /client/v4/zones/{id}/dns_records List accounts: GET /client/v4/accounts Domain list: GET /client/v4/accounts/{id}/registrar/domains Domain check: GET /client/v4/accounts/{id}/registrar/domains/{domain}/check Returns: available, can_register, supported_tld, premium, fees { transfer_fee, redemption_fee, registration_fee, renewal_fee, currency }

Domain pricing (verified)

.com registration: $10.46/year (Cloudflare at cost, no markup) .com renewal: $10.46/year .com transfer: $10.46 Premium domains: flagged separately

Token permissions required

DNS read/write: Zone -> DNS -> Edit
Domain list + expiry: Account -> Registrar -> Read
Domain purchase/transfer: Account -> Registrar -> Admin

When the DNS page exists, add href="dns.html" to the nav bar of every other mockup page.

1.9 KiB Raw Permalink Blame History