cloud-hosting-platform/haproxy-manager-base
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix issue with existing domains and new domains conflicting
All checks were successful
HAProxy Manager Build and Push / Build-and-Push (push) Successful in 38s
Details

Browse Source
This commit is contained in:
jknapp 2025-03-06 17:45:02 -08:00
parent 94f9223bc7
commit 6f395fa621
1 changed files with 66 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
templates/index.html
View File

@ -47,11 +47,17 @@
.server-list { .server-list {
margin-top: 10px; margin-top: 10px;
} }
.server-item { .server-item, .domain-list-item {
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 10px; padding: 15px;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 4px; border-radius: 5px;
}
.domain-list-item {
background-color: #f9f9f9;
}
.server-item {
background-color: #fff;
} }
.delete-btn { .delete-btn {
background-color: #f44336; background-color: #f44336;
@ -84,55 +90,41 @@
</style> </style>
</head> </head>
<body> <body>
<script>
window.onerror = function(msg, url, lineNo, columnNo, error) {
console.log('Error: ' + msg + '\nURL: ' + url + '\nLine: ' + lineNo + '\nColumn: ' + columnNo + '\nError object: ' + JSON.stringify(error));
return false;
};
</script>
<div class="container"> <div class="container">
<h1>HAProxy Domain Manager</h1> <h1>HAProxy Domain Manager</h1>
<!-- Add Domain Form -->
<h2>Add New Domain</h2>
<form id="domainForm"> <form id="domainForm">
<div class="form-group"> <div class="form-group">
<label for="domain">Domain:</label> <label for="domain">Domain:</label>
<input type="text" id="domain" required placeholder="example.com"> <input type="text" id="domain" required placeholder="example.com">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="backendName">Backend Name:</label> <label for="backendName">Backend Name:</label>
<input type="text" id="backendName" required placeholder="example_backend"> <input type="text" id="backendName" required placeholder="example_backend">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="templateOverride">Template Override (optional):</label> <label for="templateOverride">Template Override (optional):</label>
<input type="text" id="templateOverride" placeholder="custom_template"> <input type="text" id="templateOverride" placeholder="custom_template">
</div> </div>
<h3>Backend Servers</h3> <h3>Backend Servers</h3>
<div id="serverList" class="server-list"></div> <div id="serverList" class="server-list"></div>
<button type="button" onclick="addServerField()">Add Server</button> <button type="button" onclick="addServerField()">Add Server</button>
<button type="submit">Add Domain</button> <button type="submit">Add Domain</button>
</form> </form>
<!-- Domain List -->
<h2>Existing Domains</h2> <h2>Existing Domains</h2>
<div id="domainList" class="domain-list"> <div id="domainList" class="domain-list"></div>
<!-- Domains will be listed here -->
</div>
</div> </div>
<script> <script>
// Add server field to the form window.onerror = function(msg, url, lineNo, columnNo, error) {
console.log('Error: ' + msg + '\nURL: ' + url + '\nLine: ' + lineNo + '\nColumn: ' + columnNo + '\nError object: ' + JSON.stringify(error));
return false;
};
function addServerField() { function addServerField() {
const serverList = document.getElementById('serverList'); const serverList = document.getElementById('serverList');
const serverDiv = document.createElement('div'); const serverDiv = document.createElement('div');
serverDiv.className = 'server-item'; serverDiv.className = 'server-item';
serverDiv.innerHTML = ` const serverHTML = `
<div class="form-group"> <div class="form-group">
<label>Server Name:</label> <label>Server Name:</label>
<input type="text" class="server-name" required placeholder="server1"> <input type="text" class="server-name" required placeholder="server1">
@ -151,17 +143,21 @@
</div> </div>
<button type="button" class="delete-btn" onclick="this.parentElement.remove()">Remove Server</button> <button type="button" class="delete-btn" onclick="this.parentElement.remove()">Remove Server</button>
`; `;
serverDiv.innerHTML = serverHTML;
serverList.appendChild(serverDiv); serverList.appendChild(serverDiv);
} }
// Handle form submission
document.getElementById('domainForm').addEventListener('submit', async (e) => { document.getElementById('domainForm').addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
const serverItems = document.getElementById('serverList').getElementsByClassName('server-item');
console.log("Form submitted");
console.log("Server items found:", serverItems.length);
const domainInput = document.getElementById('domain'); const domainInput = document.getElementById('domain');
const backendNameInput = document.getElementById('backendName'); const backendNameInput = document.getElementById('backendName');
const templateOverrideInput = document.getElementById('templateOverride'); const templateOverrideInput = document.getElementById('templateOverride');
const serverItems = document.getElementsByClassName('server-item');
if (!domainInput || !backendNameInput) { if (!domainInput || !backendNameInput) {
showStatus('Required form fields are missing', 'error'); showStatus('Required form fields are missing', 'error');
@ -175,18 +171,33 @@
const servers = []; const servers = [];
for (const item of serverItems) { for (const item of serverItems) {
if (!item.querySelector('.form-group')) {
continue;
}
const nameInput = item.querySelector('.server-name'); const nameInput = item.querySelector('.server-name');
const addressInput = item.querySelector('.server-address'); const addressInput = item.querySelector('.server-address');
const portInput = item.querySelector('.server-port'); const portInput = item.querySelector('.server-port');
const optionsInput = item.querySelector('.server-options'); const optionsInput = item.querySelector('.server-options');
if (!nameInput || !addressInput || !portInput) { const missingFields = [];
showStatus('Server configuration is incomplete', 'error'); if (!nameInput) missingFields.push('name input');
if (!addressInput) missingFields.push('address input');
if (!portInput) missingFields.push('port input');
if (missingFields.length > 0) {
showStatus(`Server configuration is incomplete. Missing: ${missingFields.join(', ')}`, 'error');
console.error('Missing fields:', missingFields);
console.error('Server item HTML:', item.innerHTML);
return; return;
} }
if (!nameInput.value || !addressInput.value || !portInput.value) { const missingValues = [];
showStatus('Please fill in all required server fields', 'error'); if (!nameInput.value) missingValues.push('server name');
if (!addressInput.value) missingValues.push('server address');
if (!portInput.value) missingValues.push('server port');
if (missingValues.length > 0) {
showStatus(`Please fill in all required server fields: ${missingValues.join(', ')}`, 'error');
return; return;
} }
@ -204,6 +215,7 @@
template_override: templateOverrideInput ? templateOverrideInput.value : null, template_override: templateOverrideInput ? templateOverrideInput.value : null,
servers: servers servers: servers
}; };
try { try {
const response = await fetch('/api/domain', { const response = await fetch('/api/domain', {
method: 'POST', method: 'POST',
@ -217,8 +229,8 @@
showStatus('Domain added successfully!', 'success'); showStatus('Domain added successfully!', 'success');
document.getElementById('domainForm').reset(); document.getElementById('domainForm').reset();
document.getElementById('serverList').innerHTML = ''; document.getElementById('serverList').innerHTML = '';
addServerField(); addServerField();
loadDomains(); loadDomains();
} else { } else {
const errorData = await response.json(); const errorData = await response.json();
showStatus('Failed to add domain: ' + (errorData.message || 'Unknown error'), 'error'); showStatus('Failed to add domain: ' + (errorData.message || 'Unknown error'), 'error');
@ -229,7 +241,6 @@
} }
}); });
// Request SSL certificate
async function requestSSL(domain) { async function requestSSL(domain) {
try { try {
const response = await fetch('/api/ssl', { const response = await fetch('/api/ssl', {
@ -251,7 +262,6 @@
} }
} }
// Delete domain
async function deleteDomain(domain) { async function deleteDomain(domain) {
if (!confirm(`Are you sure you want to delete ${domain}?`)) { if (!confirm(`Are you sure you want to delete ${domain}?`)) {
return; return;
@ -278,7 +288,6 @@
} }
function showStatus(message, type) { function showStatus(message, type) {
console.log(`Status [${type}]:`, message);
const statusDiv = document.createElement('div'); const statusDiv = document.createElement('div');
statusDiv.className = `status ${type}`; statusDiv.className = `status ${type}`;
statusDiv.textContent = message; statusDiv.textContent = message;
@ -296,31 +305,34 @@
}, 5000); }, 5000);
} }
// Load existing domains function loadDomains() {
async function loadDomains() { fetch('/api/domains')
try { .then(response => response.json())
const response = await fetch('/api/domains'); .then(domains => {
const domains = await response.json(); const domainList = document.querySelector('.domain-list');
const domainList = document.getElementById('domainList'); domainList.innerHTML = '';
domainList.innerHTML = domains.map(domain => ` domains.forEach(domain => {
<div class="server-item"> const domainDiv = document.createElement('div');
<h3>${domain.domain}</h3> domainDiv.className = 'domain-list-item';
<p>Backend: ${domain.backend_name}</p> domainDiv.innerHTML = `
<h3>${domain.domain}</h3>
<p>Backend: ${domain.backend_name}</p>
<p>SSL: ${domain.ssl_enabled ? 'Enabled' : 'Disabled'}</p> <p>SSL: ${domain.ssl_enabled ? 'Enabled' : 'Disabled'}</p>
<button onclick="requestSSL('${domain.domain}')" class="ssl-btn"> <button onclick="requestSSL('${domain.domain}')" class="ssl-btn">
${domain.ssl_enabled ? 'Renew SSL' : 'Enable SSL'} ${domain.ssl_enabled ? 'Disable' : 'Enable'} SSL
</button> </button>
<button onclick="deleteDomain('${domain.domain}')" class="delete-btn">Delete</button> <button onclick="deleteDomain('${domain.domain}')" class="delete-btn">Delete</button>
</div> `;
`).join(''); domainList.appendChild(domainDiv);
} catch (error) { });
showStatus('Error loading domains: ' + error.message, 'error'); })
.catch(error => {
console.error('Error loading domains:', error);
showStatus('Error loading domains', 'error');
});
} }
}
// Add initial server field and load domains
addServerField(); addServerField();
loadDomains(); loadDomains();
</script> </script>
</body> </body>
</html> </html>