438 lines
16 KiB
HTML
438 lines
16 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container-xl">
|
|
<div class="page-header d-print-none">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h2 class="page-title">
|
|
{% if edit_mode %}Edit Application: {{ app.name }}{% else %}New Application{% endif %}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-body">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
|
{{ message|safe }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="POST"
|
|
action="{{ url_for('dashboard.app_edit', app_id=app.id) if edit_mode else url_for('dashboard.app_new', server_id=selected_server_id) }}">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<div class="mb-3">
|
|
<label class="form-label required">Application Name</label>
|
|
<input type="text" class="form-control" name="name" value="{{ app.name if edit_mode else '' }}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">URL</label>
|
|
<input type="url" class="form-control" name="url" value="{{ app.url if edit_mode else '' }}"
|
|
placeholder="https://example.com">
|
|
<small class="form-hint">Optional URL for accessing the application</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label required">Server</label>
|
|
<select class="form-select" name="server_id" required id="server-select">
|
|
<option value="">Select a server</option>
|
|
{% for server in servers %}
|
|
<option value="{{ server.id }}" {% if (edit_mode and server.id==app.server_id) or (not edit_mode and
|
|
server.id==selected_server_id) %}selected{% endif %}>
|
|
{{ server.hostname }} ({{ server.ip_address }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Documentation</label>
|
|
<textarea class="form-control" name="documentation" rows="5"
|
|
placeholder="Add documentation about this application">{{ app.documentation if edit_mode else '' }}</textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Ports</label>
|
|
<div class="table-responsive">
|
|
<table class="table table-vcenter card-table" id="ports-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Port Number</th>
|
|
<th>Protocol</th>
|
|
<th>Description</th>
|
|
<th width="50"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if edit_mode and app.ports %}
|
|
{% for port in app.ports %}
|
|
<tr>
|
|
<td class="position-relative">
|
|
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
|
|
value="{{ port.port_number }}">
|
|
<div class="feedback"></div>
|
|
</td>
|
|
<td>
|
|
<select name="protocols[]" class="form-select">
|
|
<option value="TCP" {% if port.protocol=='TCP' %}selected{% endif %}>TCP</option>
|
|
<option value="UDP" {% if port.protocol=='UDP' %}selected{% endif %}>UDP</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="port_descriptions[]" class="form-control" value="{{ port.description }}"
|
|
placeholder="Description">
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
|
|
<span class="ti ti-trash"></span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td class="position-relative">
|
|
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
|
|
placeholder="Port number">
|
|
<div class="feedback"></div>
|
|
</td>
|
|
<td>
|
|
<select name="protocols[]" class="form-select">
|
|
<option value="TCP">TCP</option>
|
|
<option value="UDP">UDP</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="port_descriptions[]" class="form-control" placeholder="Description">
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
|
|
<span class="ti ti-trash"></span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="mt-3">
|
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="addPortRow()">
|
|
<span class="ti ti-plus me-1"></span> Add Port
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-footer">
|
|
<div class="d-flex">
|
|
<a href="{{ url_for('dashboard.app_view', app_id=app.id) if edit_mode else url_for('dashboard.app_new') }}"
|
|
class="btn btn-link">Cancel</a>
|
|
<button type="submit" class="btn btn-primary ms-auto">
|
|
{% if edit_mode %}Save Changes{% else %}Create Application{% endif %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Make sure removePortRow is in the global scope
|
|
window.removePortRow = function (button) {
|
|
const tbody = document.querySelector('#ports-table tbody');
|
|
const row = button.closest('tr');
|
|
|
|
// Get current number of rows
|
|
const rowCount = tbody.querySelectorAll('tr').length;
|
|
|
|
// If this is the last row, clear its values instead of removing
|
|
if (rowCount <= 1) {
|
|
const inputs = row.querySelectorAll('input');
|
|
inputs.forEach(input => {
|
|
input.value = '';
|
|
});
|
|
|
|
// Reset protocol to TCP
|
|
const protocolSelect = row.querySelector('select[name="protocols[]"]');
|
|
if (protocolSelect) {
|
|
protocolSelect.value = 'TCP';
|
|
}
|
|
|
|
// Add a visual indicator that this row is empty
|
|
row.classList.add('table-secondary', 'opacity-50');
|
|
} else {
|
|
// Remove the row if there are other rows
|
|
row.remove();
|
|
}
|
|
};
|
|
|
|
function addPortRow(portNumber = '', protocol = 'TCP', description = '') {
|
|
const tbody = document.querySelector('#ports-table tbody');
|
|
const newRow = document.createElement('tr');
|
|
newRow.innerHTML = `
|
|
<td class="position-relative">
|
|
<input type="number" name="port_numbers[]" class="form-control"
|
|
min="1" max="65535" value="${portNumber}" placeholder="Port number">
|
|
<div class="feedback"></div>
|
|
</td>
|
|
<td>
|
|
<select name="protocols[]" class="form-select">
|
|
<option value="TCP" ${protocol === 'TCP' ? 'selected' : ''}>TCP</option>
|
|
<option value="UDP" ${protocol === 'UDP' ? 'selected' : ''}>UDP</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="port_descriptions[]" class="form-control"
|
|
value="${description}" placeholder="Description">
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
|
|
<span class="ti ti-trash"></span>
|
|
</button>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(newRow);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Get form elements
|
|
const nameField = document.querySelector('input[name="name"]');
|
|
const serverSelect = document.getElementById('server-select');
|
|
const submitButton = document.querySelector('button[type="submit"]');
|
|
|
|
// Set up name validation
|
|
if (nameField && serverSelect) {
|
|
// Validate on typing (with debounce)
|
|
nameField.addEventListener('input', function () {
|
|
validateAppName(nameField, serverSelect, 300);
|
|
});
|
|
|
|
// Also validate on blur for completeness
|
|
nameField.addEventListener('blur', function () {
|
|
validateAppName(nameField, serverSelect, 0);
|
|
});
|
|
|
|
serverSelect.addEventListener('change', function () {
|
|
if (nameField.value.trim()) {
|
|
validateAppName(nameField, serverSelect, 0);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Set up port validation for all port inputs
|
|
function setupPortValidation() {
|
|
const portInputs = document.querySelectorAll('input[name="port_numbers[]"]');
|
|
const protocolSelects = document.querySelectorAll('select[name="protocols[]"]');
|
|
|
|
portInputs.forEach((input, index) => {
|
|
const protocolSelect = protocolSelects[index];
|
|
|
|
// Validate on typing (with debounce)
|
|
input.addEventListener('input', function () {
|
|
validatePort(input, protocolSelect, 300);
|
|
});
|
|
|
|
// Also validate on blur for completeness
|
|
input.addEventListener('blur', function () {
|
|
validatePort(input, protocolSelect, 0);
|
|
});
|
|
|
|
if (protocolSelect) {
|
|
protocolSelect.addEventListener('change', function () {
|
|
if (input.value.trim()) {
|
|
validatePort(input, protocolSelect, 0);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initial setup
|
|
setupPortValidation();
|
|
|
|
// Re-setup validation after adding a new port row
|
|
const originalAddPortRow = window.addPortRow;
|
|
window.addPortRow = function (portNumber = '', protocol = 'TCP', description = '') {
|
|
originalAddPortRow(portNumber, protocol, description);
|
|
setupPortValidation();
|
|
};
|
|
|
|
// Validate application name
|
|
function validateAppName(nameField, serverSelect, debounceTime = 300) {
|
|
// Create feedback element if it doesn't exist
|
|
if (!nameField.nextElementSibling || !nameField.nextElementSibling.classList.contains('feedback')) {
|
|
const feedback = document.createElement('div');
|
|
feedback.className = 'feedback';
|
|
nameField.parentNode.insertBefore(feedback, nameField.nextSibling);
|
|
}
|
|
|
|
const feedbackElement = nameField.nextElementSibling;
|
|
|
|
const name = nameField.value.trim();
|
|
const serverId = serverSelect.value;
|
|
const appId = {% if edit_mode %} { { app.id } } {% else %} null{% endif %};
|
|
|
|
if (!name || !serverId) {
|
|
clearFeedback(feedbackElement);
|
|
nameField.classList.remove('is-invalid');
|
|
return;
|
|
}
|
|
|
|
// Show loading indicator for better UX
|
|
if (debounceTime > 0) {
|
|
showLoading(feedbackElement, 'Checking...');
|
|
}
|
|
|
|
// Debounce to avoid too many requests
|
|
clearTimeout(nameField.timer);
|
|
nameField.timer = setTimeout(() => {
|
|
fetch(`/api/validate/app-name?name=${encodeURIComponent(name)}&server_id=${serverId}${appId ? '&app_id=' + appId : ''}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
clearFeedback(feedbackElement);
|
|
if (!data.valid) {
|
|
nameField.classList.add('is-invalid');
|
|
showError(feedbackElement, data.message);
|
|
if (data.edit_url) {
|
|
feedbackElement.innerHTML += ` <a href="${data.edit_url}" class="alert-link">View existing app</a>`;
|
|
}
|
|
} else if (data.warning) {
|
|
nameField.classList.remove('is-invalid');
|
|
nameField.classList.add('is-warning');
|
|
showWarning(feedbackElement, data.warning);
|
|
|
|
if (data.similar_apps && data.similar_apps.length > 0) {
|
|
const similarList = document.createElement('ul');
|
|
similarList.className = 'mt-1';
|
|
|
|
data.similar_apps.forEach(app => {
|
|
const li = document.createElement('li');
|
|
li.innerHTML = `<a href="/dashboard/app/${app.id}" class="alert-link">${app.name}</a>`;
|
|
similarList.appendChild(li);
|
|
});
|
|
|
|
feedbackElement.appendChild(similarList);
|
|
}
|
|
} else {
|
|
nameField.classList.remove('is-invalid');
|
|
nameField.classList.add('is-valid');
|
|
showSuccess(feedbackElement, 'Application name available');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Validation error:', error);
|
|
clearFeedback(feedbackElement);
|
|
nameField.classList.remove('is-invalid');
|
|
nameField.classList.remove('is-valid');
|
|
});
|
|
}, debounceTime);
|
|
}
|
|
|
|
// Validate port
|
|
function validatePort(portField, protocolField, debounceTime = 300) {
|
|
// Find or create the feedback container
|
|
let feedbackElement = portField.closest('td').querySelector('.feedback');
|
|
if (!feedbackElement) {
|
|
feedbackElement = document.createElement('div');
|
|
feedbackElement.className = 'feedback';
|
|
portField.parentNode.appendChild(feedbackElement);
|
|
}
|
|
|
|
const port = portField.value.trim();
|
|
const protocol = protocolField.value;
|
|
const serverId = serverSelect.value;
|
|
const appId = {% if edit_mode %}{{ app.id }}{% else %}null{% endif %};
|
|
|
|
if (!port || !serverId) {
|
|
clearFeedback(feedbackElement);
|
|
portField.classList.remove('is-invalid');
|
|
portField.classList.remove('is-valid');
|
|
return;
|
|
}
|
|
|
|
// Check for duplicate ports within the form first
|
|
const allPortFields = document.querySelectorAll('input[name="port_numbers[]"]');
|
|
const allProtocolFields = document.querySelectorAll('select[name="protocols[]"]');
|
|
let duplicateFound = false;
|
|
|
|
allPortFields.forEach((field, index) => {
|
|
if (field !== portField && field.value === port && allProtocolFields[index].value === protocol) {
|
|
duplicateFound = true;
|
|
}
|
|
});
|
|
|
|
if (duplicateFound) {
|
|
portField.classList.add('is-invalid');
|
|
portField.classList.remove('is-valid');
|
|
clearFeedback(feedbackElement);
|
|
showError(feedbackElement, `Duplicate port ${port}/${protocol} in your form`);
|
|
return;
|
|
}
|
|
|
|
// Show loading indicator for better UX
|
|
if (debounceTime > 0) {
|
|
showLoading(feedbackElement, 'Checking...');
|
|
}
|
|
|
|
// Debounce to avoid too many requests
|
|
clearTimeout(portField.timer);
|
|
portField.timer = setTimeout(() => {
|
|
fetch(`/api/validate/app-port?port_number=${encodeURIComponent(port)}&protocol=${protocol}&server_id=${serverId}${appId ? '&app_id=' + appId : ''}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
clearFeedback(feedbackElement);
|
|
if (!data.valid) {
|
|
portField.classList.add('is-invalid');
|
|
portField.classList.remove('is-valid');
|
|
showError(feedbackElement, data.message);
|
|
if (data.edit_url) {
|
|
feedbackElement.innerHTML += ` <a href="${data.edit_url}" class="alert-link">Edit conflicting app</a>`;
|
|
}
|
|
} else {
|
|
portField.classList.remove('is-invalid');
|
|
portField.classList.add('is-valid');
|
|
showSuccess(feedbackElement, 'Port available');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Validation error:', error);
|
|
clearFeedback(feedbackElement);
|
|
portField.classList.remove('is-invalid');
|
|
portField.classList.remove('is-valid');
|
|
});
|
|
}, debounceTime);
|
|
}
|
|
|
|
// Helper functions for feedback
|
|
function clearFeedback(element) {
|
|
element.innerHTML = '';
|
|
element.className = 'feedback';
|
|
}
|
|
|
|
function showError(element, message) {
|
|
element.innerHTML = message;
|
|
element.className = 'feedback invalid-feedback d-block';
|
|
}
|
|
|
|
function showWarning(element, message) {
|
|
element.innerHTML = message;
|
|
element.className = 'feedback text-warning d-block';
|
|
}
|
|
|
|
function showSuccess(element, message) {
|
|
element.innerHTML = message;
|
|
element.className = 'feedback valid-feedback d-block';
|
|
}
|
|
|
|
function showLoading(element, message) {
|
|
element.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ${message}`;
|
|
element.className = 'feedback text-muted d-block';
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|