websites/homedocs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
pika 2025-04-03 14:08:11 +02:00
parent 0a31714a93
commit 66fe31eabe
3 changed files with 419 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

443
app/templates/dashboard/app_form.html
View file

@ -6,25 +6,8 @@
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">
{{ title }}
{% if edit_mode %}Edit Application: {{ app.name }}{% else %}New Application{% endif %}
</h2>
<div class="text-muted mt-1">
{% if edit_mode %}Edit{% else %}Create{% endif %} application details and configure ports
</div>
</div>
<div class="col-auto ms-auto">
<div class="btn-list">
<a href="{{ dashboard_link }}" class="btn btn-outline-primary">
<span class="ti ti-dashboard"></span>
Dashboard
</a>
{% if edit_mode %}
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary">
<span class="ti ti-eye"></span>
View Application
</a>
{% endif %}
</div>
</div>
</div>
</div>
@ -35,7 +18,7 @@
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
{{ message }}
{{ message|safe }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
@ -43,77 +26,55 @@
{% endwith %}
<form method="POST"
action="{% if edit_mode %}{{ url_for('dashboard.app_edit', app_id=app.id) }}{% else %}{{ url_for('dashboard.app_new') }}{% endif %}">
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() }}">
{% if app %}
<input type="hidden" id="app-id" name="app_id" value="{{ app.id }}">
{% endif %}
<div class="mb-3">
<label for="app-name" class="form-label required">Application Name</label>
<input type="text" class="form-control" id="app-name" name="name" required
value="{% if app %}{{ app.name }}{% endif %}">
<div id="name-feedback"></div>
<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">Application URL (Optional)</label>
<div class="input-group">
<span class="input-group-text">
<span class="ti ti-link"></span>
</span>
<input type="url" class="form-control" name="url" id="url" value="{{ app.url if app else '' }}"
placeholder="https://example.com">
</div>
<small class="form-hint">
If provided, the application name will be clickable and link to this URL.
</small>
<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 for="server-id" class="form-label required">Server</label>
<select class="form-select" id="server-id" name="server_id" required>
<option value="">Select Server</option>
<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 (app and app.server_id==server.id) or (selected_server_id and
selected_server_id|int==server.id|int) %}selected{% endif %}>
<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">
<div class="d-flex justify-content-between align-items-center mb-2">
<label class="form-label mb-0">Application Ports</label>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary" id="add-port-btn">
<span class="ti ti-plus"></span> Add Port
</button>
<button type="button" class="btn btn-sm btn-outline-secondary" id="random-port-btn"
title="Generate random available port">
<span class="ti ti-dice"></span> Random Port
</button>
</div>
</div>
<label class="form-label">Ports</label>
<div class="table-responsive">
<table class="table table-vcenter card-table" id="ports-table">
<thead>
<tr>
<th>Port</th>
<th>Port Number</th>
<th>Protocol</th>
<th>Description</th>
<th width="40"></th>
<th width="50"></th>
</tr>
</thead>
<tbody>
{% if app and app.ports %}
{% if edit_mode and app.ports %}
{% for port in app.ports %}
<tr>
<td>
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
value="{{ port.port_number }}" required>
value="{{ port.port_number }}">
</td>
<td>
<select name="protocols[]" class="form-select">
@ -133,14 +94,14 @@
</tr>
{% endfor %}
{% else %}
<!-- Always show at least one empty port row if no ports exist -->
<tr>
<td>
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535" required>
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
placeholder="Port number">
</td>
<td>
<select name="protocols[]" class="form-select">
<option value="TCP" selected>TCP</option>
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
</select>
</td>
@ -157,94 +118,26 @@
</tbody>
</table>
</div>
<small class="form-hint">Configure the network ports used by this application</small>
</div>
<div class="mb-3">
<label class="form-label">Documentation</label>
<textarea class="form-control" name="documentation" id="documentation" rows="10"
placeholder="Enter documentation in Markdown format">{{ app.documentation if app else '' }}</textarea>
<small class="form-hint">
Use <a href="https://www.markdownguide.org/basic-syntax/" target="_blank">Markdown syntax</a>
to format your documentation. You can use GitHub-style alerts:
</small>
<div class="mt-2 d-flex gap-2 flex-wrap">
<code>> [!NOTE] This is a note</code>
<code>> [!TIP] This is a tip</code>
<code>> [!IMPORTANT] Important info</code>
<code>> [!WARNING] Warning message</code>
<code>> [!CAUTION] Critical caution</code>
<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">
<button type="submit" class="btn btn-primary">Save Application</button>
{% if edit_mode %}
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary ms-2">Cancel</a>
{% else %}
<a href="{{ dashboard_link }}" class="btn btn-outline-secondary ms-2">Cancel</a>
{% endif %}
<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>
{% endblock %}
{% block extra_js %}
<script>
{% if app and app.id %}
const appId = {{ app.id | tojson }};
{% else %}
const appId = null;
{% endif %}
// Initialize everything once the DOM is loaded
document.addEventListener('DOMContentLoaded', function () {
// Connect port management buttons
const addPortBtn = document.getElementById('add-port-btn');
const randomPortBtn = document.getElementById('random-port-btn');
if (addPortBtn) {
addPortBtn.addEventListener('click', function () {
addPortRow();
});
}
if (randomPortBtn) {
randomPortBtn.addEventListener('click', function () {
generateRandomPort();
});
}
});
// Show notifications
function showNotification(message, type = 'info') {
const alertDiv = document.createElement('div');
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
alertDiv.innerHTML = `
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
`;
const container = document.querySelector('.card-body');
if (container) {
container.insertBefore(alertDiv, container.firstChild);
// Auto-dismiss after 5 seconds
setTimeout(() => {
alertDiv.classList.remove('show');
setTimeout(() => alertDiv.remove(), 150);
}, 5000);
}
}
</script>
<script>
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['X-CSRFToken'] = "{{ csrf_token() }}";
});
</script>
<script>
// Make sure removePortRow is in the global scope
@ -270,16 +163,12 @@
// Add a visual indicator that this row is empty
row.classList.add('table-secondary', 'opacity-50');
// Show a helping message
showNotification('Application saved with no ports. Use "Add Port" to add ports.', 'info');
} else {
// Remove the row if there are other rows
row.remove();
}
};
// Port management functions
function addPortRow(portNumber = '', protocol = 'TCP', description = '') {
const tbody = document.querySelector('#ports-table tbody');
@ -293,7 +182,7 @@
newRow.innerHTML = `
<td class="position-relative">
<input type="number" name="port_numbers[]" class="form-control"
min="1" max="65535" value="${portNumber}" required>
min="1" max="65535" value="${portNumber}" placeholder="Port number">
<div class="feedback"></div>
</td>
<td>
@ -313,36 +202,240 @@
</td>
`;
tbody.appendChild(newRow);
// Set up validation for the new row
setTimeout(setupPortValidation, 50);
}
async function generateRandomPort() {
try {
const serverId = document.querySelector('select[name="server_id"]').value;
if (!serverId) {
showNotification('Please select a server first', 'warning');
return;
}
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"]');
const response = await fetch(`/api/server/${serverId}/free-port`);
const data = await response.json();
// Set up name validation
if (nameField && serverSelect) {
// Validate on typing (with debounce)
nameField.addEventListener('input', function () {
validateAppName(nameField, serverSelect, 300);
});
if (data.success && data.port) {
addPortRow(data.port);
} else {
showNotification(data.error || 'No available ports found', 'warning');
}
} catch (error) {
console.error('Error generating random port:', error);
showNotification('Failed to generate random port', 'danger');
// 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) {
// Create feedback element if it doesn't exist
if (!portField.nextElementSibling || !portField.nextElementSibling.classList.contains('feedback')) {
const feedback = document.createElement('div');
feedback.className = 'feedback';
portField.parentNode.insertBefore(feedback, portField.nextSibling);
}
const feedbackElement = portField.nextElementSibling;
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');
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');
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');
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 %}
{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/validation.js') }}"></script>
{% endblock %}