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-03-30 19:57:41 +02:00
parent 6dd38036e7
commit 097b3dbf09
34 changed files with 1719 additions and 520 deletions
Download patch file Download diff file Expand all files Collapse all files

213
app/templates/dashboard/app_edit.html Normal file
View file

@ -0,0 +1,213 @@
{% 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">
Edit Application: {{ app.name }}
</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 }}
<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) }}">
<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 }}" required>
</div>
<div class="mb-3">
<label class="form-label required">Server</label>
<select class="form-select" name="server_id" required>
<option value="">Select a server</option>
{% for server in servers %}
<option value="{{ server.id }}" {% if server.id==app.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="6"
placeholder="Use Markdown for formatting">{{ app.documentation }}</textarea>
<small class="form-hint">Supports Markdown formatting</small>
</div>
<!-- Port management section -->
<div class="mb-3">
<label class="form-label">Application Ports</label>
<div id="ports-container">
{% if app.ports %}
{% for port in app.ports %}
<div class="port-entry mb-2 row">
<div class="col-4">
<input type="number" class="form-control" name="port_numbers[]" value="{{ port.port_number }}"
placeholder="Port number" min="1" max="65535">
</div>
<div class="col-3">
<select class="form-select" name="protocols[]">
<option value="TCP" {% if port.protocol=='TCP' %}selected{% endif %}>TCP</option>
<option value="UDP" {% if port.protocol=='UDP' %}selected{% endif %}>UDP</option>
<option value="HTTP" {% if port.protocol=='HTTP' %}selected{% endif %}>HTTP</option>
<option value="HTTPS" {% if port.protocol=='HTTPS' %}selected{% endif %}>HTTPS</option>
</select>
</div>
<div class="col-4">
<input type="text" class="form-control" name="port_descriptions[]" value="{{ port.description }}"
placeholder="Description">
</div>
<div class="col-1">
<button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
</div>
</div>
{% endfor %}
{% else %}
<div class="port-entry mb-2 row">
<div class="col-4">
<input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1"
max="65535">
</div>
<div class="col-3">
<select class="form-select" name="protocols[]">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="HTTP">HTTP</option>
<option value="HTTPS">HTTPS</option>
</select>
</div>
<div class="col-4">
<input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
</div>
<div class="col-1">
<button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
</div>
</div>
{% endif %}
</div>
<div class="mt-2">
<button type="button" id="add-port" class="btn btn-sm btn-outline-primary">
<i class="ti ti-plus me-1"></i> Add Port
</button>
<button type="button" id="suggest-port" class="btn btn-sm btn-outline-secondary ms-2">
<i class="ti ti-bolt me-1"></i> Suggest Free Port
</button>
</div>
</div>
<div class="d-flex justify-content-between mt-4">
<a href="{{ url_for('dashboard.server_view', server_id=app.server_id) }}" class="btn btn-outline-secondary">
Cancel
</a>
<button type="submit" class="btn btn-primary">
Save Changes
</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
const portsContainer = document.getElementById('ports-container');
const addPortButton = document.getElementById('add-port');
const suggestPortButton = document.getElementById('suggest-port');
// Add new port field
addPortButton.addEventListener('click', function () {
const portEntry = document.createElement('div');
portEntry.className = 'port-entry mb-2 row';
portEntry.innerHTML = `
<div class="col-4">
<input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1" max="65535">
</div>
<div class="col-3">
<select class="form-select" name="protocols[]">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="HTTP">HTTP</option>
<option value="HTTPS">HTTPS</option>
</select>
</div>
<div class="col-4">
<input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
</div>
<div class="col-1">
<button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
</div>
`;
portsContainer.appendChild(portEntry);
// Add event listener to the new remove button
const removeButton = portEntry.querySelector('.remove-port');
removeButton.addEventListener('click', function () {
portEntry.remove();
});
});
// Add event listeners to initial remove buttons
document.querySelectorAll('.remove-port').forEach(button => {
button.addEventListener('click', function () {
this.closest('.port-entry').remove();
});
});
// Suggest a free port
suggestPortButton.addEventListener('click', async function () {
try {
const serverId = document.querySelector('select[name="server_id"]').value;
if (!serverId) {
alert('Please select a server first');
return;
}
const response = await fetch(`/api/servers/${serverId}/suggest_port`);
if (!response.ok) throw new Error('Failed to get port suggestion');
const data = await response.json();
if (data.port) {
// Find the first empty port input or add a new one
let portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
if (!portInput) {
addPortButton.click();
portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
}
portInput.value = data.port;
// Copy to clipboard
navigator.clipboard.writeText(data.port.toString())
.then(() => {
showNotification('Port copied to clipboard!', 'success');
})
.catch(err => {
console.error('Failed to copy: ', err);
});
}
} catch (error) {
console.error('Error:', error);
showNotification('Failed to suggest port', 'danger');
}
});
});
</script>
{% endblock %}

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

@ -46,12 +46,135 @@
placeholder="Use Markdown for formatting"></textarea>
<small class="form-hint">Supports Markdown formatting</small>
</div>
<div class="d-flex justify-content-end">
<a href="{{ url_for('dashboard.server_list') }}" class="btn btn-link me-2">Cancel</a>
<!-- Port management section -->
<div class="mb-3">
<label class="form-label">Application Ports</label>
<div id="ports-container">
<div class="port-entry mb-2 row">
<div class="col-4">
<input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1"
max="65535">
</div>
<div class="col-3">
<select class="form-select" name="protocols[]">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="HTTP">HTTP</option>
<option value="HTTPS">HTTPS</option>
</select>
</div>
<div class="col-4">
<input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
</div>
<div class="col-1">
<button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
</div>
</div>
</div>
<div class="mt-2">
<button type="button" class="btn btn-outline-primary btn-sm" id="add-port">
<i class="ti ti-plus me-1"></i> Add Port
</button>
<button type="button" class="btn btn-outline-secondary btn-sm ms-2" id="suggest-port">
<i class="ti ti-bulb me-1"></i> Suggest Free Port
</button>
</div>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary">Save Application</button>
<a href="{{ url_for('dashboard.dashboard_home') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
const portsContainer = document.getElementById('ports-container');
const addPortButton = document.getElementById('add-port');
const suggestPortButton = document.getElementById('suggest-port');
// Add a new port field
addPortButton.addEventListener('click', function () {
const portEntry = document.createElement('div');
portEntry.className = 'port-entry mb-2 row';
portEntry.innerHTML = `
<div class="col-4">
<input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1" max="65535">
</div>
<div class="col-3">
<select class="form-select" name="protocols[]">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="HTTP">HTTP</option>
<option value="HTTPS">HTTPS</option>
</select>
</div>
<div class="col-4">
<input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
</div>
<div class="col-1">
<button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
</div>
`;
portsContainer.appendChild(portEntry);
// Add event listener to the new remove button
const removeButton = portEntry.querySelector('.remove-port');
removeButton.addEventListener('click', function () {
portEntry.remove();
});
});
// Add event listeners to initial remove buttons
document.querySelectorAll('.remove-port').forEach(button => {
button.addEventListener('click', function () {
this.closest('.port-entry').remove();
});
});
// Suggest a free port
suggestPortButton.addEventListener('click', async function () {
try {
const serverId = document.querySelector('select[name="server_id"]').value;
if (!serverId) {
alert('Please select a server first');
return;
}
const response = await fetch(`/api/servers/${serverId}/suggest_port`);
if (!response.ok) throw new Error('Failed to get port suggestion');
const data = await response.json();
if (data.port) {
// Find the first empty port input or add a new one
let portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
if (!portInput) {
addPortButton.click();
portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
}
portInput.value = data.port;
// Copy to clipboard
navigator.clipboard.writeText(data.port.toString())
.then(() => {
showNotification('Port copied to clipboard!', 'success');
})
.catch(err => {
console.error('Failed to copy: ', err);
});
}
} catch (error) {
console.error('Error:', error);
showNotification('Failed to suggest port', 'danger');
}
});
});
</script>
{% endblock %}

395
app/templates/dashboard/server_view.html
View file

@ -5,133 +5,201 @@
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="col">
<div class="page-pretitle">
Server Details
</div>
<h2 class="page-title">
{{ server.hostname }}
</h2>
<div class="text-muted mt-1">{{ server.ip_address }}</div>
</div>
<div class="col-auto ms-auto d-print-none">
<a href="{{ url_for('dashboard.server_list') }}" class="btn btn-link">
Back to Servers
</a>
<div class="btn-list">
<a href="{{ url_for('dashboard.server_edit', server_id=server.id) }}" class="btn btn-primary">
<i class="ti ti-edit me-1"></i> Edit
</a>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal">
<i class="ti ti-trash me-1"></i> Delete
</button>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h3 class="card-title">Documentation</h3>
</div>
<div class="card-body markdown-body">
{% if server.documentation %}
{{ markdown(server.documentation)|safe }}
{% else %}
<div class="text-center text-muted py-3">
No documentation available for this server.
</div>
{% endif %}
</div>
</div>
<div class="card mt-3">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<h3 class="card-title">Applications</h3>
<a href="{{ url_for('dashboard.app_new') }}" class="btn btn-sm btn-primary">
Add Application
</a>
</div>
</div>
<div class="card-body">
{% if apps %}
<table class="table table-vcenter">
<thead>
<tr>
<th>Name</th>
<th>Ports</th>
</tr>
</thead>
<tbody>
{% for app in apps %}
<tr>
<td>{{ app.name }}</td>
<td>
{% for port in app.ports %}
<span class="badge bg-primary">
{{ port.port }}/{{ port.type }} {% if port.desc %}({{ port.desc }}){% endif %}
</span>
{% endfor %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="text-center py-3">
<div class="mb-3">No applications registered for this server</div>
<a href="{{ url_for('dashboard.app_new') }}" class="btn btn-outline-primary">
Add Application
</a>
</div>
{% endif %}
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Server Information</h3>
</div>
<div class="card-body">
<div class="mb-2">
<strong>Hostname:</strong> {{ server.hostname }}
</div>
<div class="mb-2">
<strong>IP Address:</strong> {{ server.ip_address }}
</div>
<div class="mb-2">
<strong>Subnet:</strong> {{ server.subnet.cidr if server.subnet else 'N/A' }}
</div>
<div class="mb-2">
<strong>Location:</strong> {{ server.subnet.location if server.subnet else 'N/A' }}
</div>
<div class="mb-2">
<strong>Created:</strong> {{ server.created_at.strftime('%Y-%m-%d') }}
</div>
<dl class="row">
<dt class="col-5">IP Address:</dt>
<dd class="col-7">{{ server.ip_address }}</dd>
<dt class="col-5">Subnet:</dt>
<dd class="col-7">
<a href="{{ url_for('ipam.subnet_view', subnet_id=server.subnet.id) }}">
{{ server.subnet.cidr }}
</a>
</dd>
<dt class="col-5">Location:</dt>
<dd class="col-7">{{ server.subnet.location }}</dd>
<dt class="col-5">Created:</dt>
<dd class="col-7">{{ server.created_at.strftime('%Y-%m-%d') }}</dd>
</dl>
</div>
</div>
<!-- Port Usage Map -->
<div class="card mt-3">
<div class="card-header">
<h3 class="card-title">Open Ports</h3>
<div class="card-header d-flex align-items-center">
<h3 class="card-title">Port Usage</h3>
<div class="ms-auto">
<button id="get-random-port" class="btn btn-sm btn-outline-primary">
<i class="ti ti-clipboard-copy me-1"></i> Get Free Port
</button>
</div>
</div>
<div class="card-body">
{% if server.get_open_ports() %}
<div class="list-group list-group-flush">
{% for port in server.get_open_ports() %}
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto">
<span class="badge bg-primary">{{ port.port }}</span>
</div>
<div class="col">
<div class="text-truncate">
{{ port.type|upper }}
{% if port.desc %}
<span class="text-muted">{{ port.desc }}</span>
{% endif %}
<div class="port-map">
<div class="port-map-grid">
{% for i in range(1, 101) %}
{% set port_num = 8000 + i - 1 %}
{% set port_used = false %}
{% set port_app = "" %}
{% set port_color = "" %}
{% set tooltip = "" %}
{% for app in server.apps %}
{% for port in app.ports %}
{% if port.port_number == port_num %}
{% set port_used = true %}
{% set port_app = app.name %}
{% set port_color = "bg-" ~ ["primary", "success", "info", "warning", "danger"][(app.id % 5)] %}
{% set tooltip = app.name ~ " - " ~ port.description %}
{% endif %}
{% endfor %}
{% endfor %}
<div class="port-item {{ port_color if port_used else 'bg-light' }}" data-port="{{ port_num }}"
data-bs-toggle="tooltip" title="{{ tooltip if port_used else 'Free port: ' ~ port_num }}">
{{ port_num }}
</div>
{% endfor %}
</div>
</div>
<div class="mt-2 text-muted small">
<div class="d-flex flex-wrap">
<div class="me-3"><span class="badge bg-light">Port</span> Free</div>
<div><span class="badge bg-primary">Port</span> Used</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<!-- Applications -->
<div class="card">
<div class="card-header d-flex align-items-center">
<h3 class="card-title">Applications</h3>
<div class="ms-auto">
<a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-sm btn-primary">
<i class="ti ti-plus me-1"></i> Add Application
</a>
</div>
</div>
<div class="card-body">
{% if server.apps %}
<div class="accordion" id="applicationAccordion">
{% for app in server.apps %}
<div class="accordion-item">
<h2 class="accordion-header" id="heading{{ app.id }}">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse{{ app.id }}" aria-expanded="false" aria-controls="collapse{{ app.id }}">
<span class="me-2">{{ app.name }}</span>
{% if app.ports %}
<div class="ms-auto d-flex">
{% for port in app.ports %}
<span class="badge bg-primary me-1">{{ port.port_number }}/{{ port.protocol }}</span>
{% endfor %}
</div>
{% endif %}
</button>
</h2>
<div id="collapse{{ app.id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ app.id }}"
data-bs-parent="#applicationAccordion">
<div class="accordion-body">
<div class="d-flex justify-content-end mb-2">
<a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}"
class="btn btn-sm btn-outline-primary me-2">
<i class="ti ti-edit"></i> Edit
</a>
<button type="button" class="btn btn-sm btn-outline-danger"
onclick="confirmDeleteApp({{ app.id }}, '{{ app.name }}')">
<i class="ti ti-trash"></i> Delete
</button>
</div>
<!-- Ports -->
{% if app.ports %}
<div class="mb-3">
<h5>Ports</h5>
<div class="table-responsive">
<table class="table table-vcenter table-sm">
<thead>
<tr>
<th>Port</th>
<th>Protocol</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{% for port in app.ports %}
<tr>
<td>{{ port.port_number }}</td>
<td>{{ port.protocol }}</td>
<td>{{ port.description }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
<!-- Documentation -->
{% if app.documentation %}
<div class="mt-3">
<h5>Documentation</h5>
<div class="markdown-body">
{{ app.documentation|markdown }}
</div>
</div>
{% else %}
<div class="text-muted">No documentation available</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center text-muted py-3">
No open ports detected.
<div class="empty">
<div class="empty-icon">
<i class="ti ti-apps"></i>
</div>
<p class="empty-title">No applications found</p>
<p class="empty-subtitle text-muted">
This server doesn't have any applications yet.
</p>
<div class="empty-action">
<a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary">
<i class="ti ti-plus me-1"></i> Add Application
</a>
</div>
</div>
{% endif %}
</div>
@ -139,4 +207,135 @@
</div>
</div>
</div>
<!-- Delete Server Modal -->
<div class="modal fade" id="deleteServerModal" tabindex="-1" aria-labelledby="deleteServerModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteServerModalLabel">Confirm Delete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure you want to delete server <strong>{{ server.hostname }}</strong>? This action cannot be undone.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<form action="{{ url_for('dashboard.server_delete', server_id=server.id) }}" method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-danger">Delete Server</button>
</form>
</div>
</div>
</div>
</div>
<!-- Delete App Modal (created dynamically) -->
<div class="modal fade" id="deleteAppModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirm Delete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="deleteAppModalBody">
Are you sure you want to delete this application?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<form id="deleteAppForm" method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-danger">Delete Application</button>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
// Initialize tooltips
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Random port generator
const getRandomPortBtn = document.getElementById('get-random-port');
if (getRandomPortBtn) {
getRandomPortBtn.addEventListener('click', async function () {
try {
const response = await fetch(`/api/servers/{{ server.id }}/suggest_port`);
if (!response.ok) throw new Error('Failed to get port suggestion');
const data = await response.json();
if (data.port) {
// Copy to clipboard
navigator.clipboard.writeText(data.port.toString())
.then(() => {
showNotification(`Port ${data.port} copied to clipboard!`, 'success');
})
.catch(err => {
console.error('Failed to copy: ', err);
showNotification(`Suggested free port: ${data.port}`, 'info');
});
}
} catch (error) {
console.error('Error:', error);
showNotification('Failed to suggest port', 'danger');
}
});
}
});
// Function to handle app deletion confirmation
function confirmDeleteApp(appId, appName) {
const modal = document.getElementById('deleteAppModal');
const modalBody = document.getElementById('deleteAppModalBody');
const deleteForm = document.getElementById('deleteAppForm');
modalBody.textContent = `Are you sure you want to delete application "${appName}"? This action cannot be undone.`;
deleteForm.action = `/dashboard/apps/${appId}/delete`;
const bsModal = new bootstrap.Modal(modal);
bsModal.show();
}
</script>
{% endblock %}
{% block styles %}
<style>
.port-map {
overflow-x: auto;
}
.port-map-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 4px;
}
.port-item {
padding: 4px;
font-size: 10px;
text-align: center;
border-radius: 3px;
cursor: pointer;
user-select: none;
}
.port-item:hover {
opacity: 0.8;
}
.markdown-body {
padding: 1rem;
background-color: var(--tblr-bg-surface);
border: 1px solid var(--tblr-border-color);
border-radius: 4px;
}
</style>
{% endblock %}

6
app/templates/errors/404.html
View file

@ -2,13 +2,13 @@
{% block content %}
<div class="container text-center py-5">
<div class="display-1 text-muted mb-3">404</div>
<div class="display-1 text-muted mb-5">404</div>
<h1 class="h2 mb-3">Page not found</h1>
<p class="h4 text-muted font-weight-normal mb-4">
We are sorry but the page you are looking for was not found.
We are sorry but the page you are looking for was not found
</p>
<a href="{{ url_for('dashboard.dashboard_home') }}" class="btn btn-primary">
<i class="ti ti-arrow-left me-2"></i> Return to dashboard
<i class="ti ti-arrow-left me-2"></i>Go back to dashboard
</a>
</div>
{% endblock %}

8
app/templates/errors/500.html
View file

@ -2,13 +2,13 @@
{% block content %}
<div class="container text-center py-5">
<div class="display-1 text-muted mb-3">500</div>
<h1 class="h2 mb-3">Internal Server Error</h1>
<div class="display-1 text-muted mb-5">500</div>
<h1 class="h2 mb-3">Server Error</h1>
<p class="h4 text-muted font-weight-normal mb-4">
Something went wrong on our end. Please try again later.
Oops, something went wrong on our end
</p>
<a href="{{ url_for('dashboard.dashboard_home') }}" class="btn btn-primary">
<i class="ti ti-arrow-left me-2"></i> Return to dashboard
<i class="ti ti-arrow-left me-2"></i>Go back to dashboard
</a>
</div>
{% endblock %}

206
app/templates/ipam/subnet_view.html
View file

@ -5,55 +5,129 @@
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="col">
<div class="page-pretitle">
Subnet Details
</div>
<h2 class="page-title">
{{ subnet.cidr }}
{{ subnet.cidr }} - {{ subnet.location }}
</h2>
<div class="text-muted mt-1">{{ subnet.location }}</div>
</div>
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<a href="{{ url_for('ipam.subnet_scan', subnet_id=subnet.id) }}" class="btn btn-outline-primary">
<i class="fas fa-search me-2"></i> Scan Subnet
</a>
<a href="{{ url_for('ipam.subnet_visualize', subnet_id=subnet.id) }}" class="btn btn-outline-primary">
<i class="fas fa-chart-network me-2"></i> Visualize
</a>
<a href="{{ url_for('ipam.ipam_home') }}" class="btn btn-link">
Back to IPAM
<a href="{{ url_for('ipam.subnet_edit', subnet_id=subnet.id) }}" class="btn btn-primary">
<i class="ti ti-edit me-1"></i> Edit
</a>
<form method="POST" action="{{ url_for('ipam.subnet_scan', subnet_id=subnet.id) }}" class="d-inline">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-warning">
<i class="ti ti-search me-1"></i> Scan Now
</button>
</form>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteSubnetModal">
<i class="ti ti-trash me-1"></i> Delete
</button>
</div>
</div>
</div>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible fade show mt-3" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="row mt-3">
<div class="col-md-8">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Registered Hosts</h3>
<h3 class="card-title">Subnet Information</h3>
</div>
<div class="card-body">
{% if servers %}
<table class="table table-vcenter">
<tr>
<td><strong>CIDR Notation</strong></td>
<td>{{ subnet.cidr }}</td>
</tr>
<tr>
<td><strong>Location</strong></td>
<td>{{ subnet.location }}</td>
</tr>
{% set network = get_ip_network(subnet.cidr) %}
{% if network %}
<tr>
<td><strong>Network Address</strong></td>
<td>{{ network.network_address }}</td>
</tr>
<tr>
<td><strong>Broadcast Address</strong></td>
<td>{{ network.broadcast_address if network.prefixlen < 31 else 'N/A' }}</td>
</tr>
<tr>
<td><strong>Netmask</strong></td>
<td>{{ network.netmask }}</td>
</tr>
<tr>
<td><strong>Host Range</strong></td>
<td>
{% if network.prefixlen < 31 %} {{ network.network_address + 1 }} - {{ network.broadcast_address - 1 }}
{% else %} {{ network.network_address }} - {{ network.broadcast_address }} {% endif %} </td>
</tr>
<tr>
<td><strong>Total Hosts</strong></td>
<td>
{% if network.prefixlen < 31 %} {{ network.num_addresses - 2 }} {% else %} {{ network.num_addresses }}
{% endif %} </td>
</tr>
{% endif %}
<tr>
<td><strong>Auto Scan</strong></td>
<td>{{ 'Yes' if subnet.auto_scan else 'No' }}</td>
</tr>
<tr>
<td><strong>Last Scanned</strong></td>
<td>{{ subnet.last_scanned|default('Never', true) }}</td>
</tr>
<tr>
<td><strong>Created</strong></td>
<td>{{ subnet.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Servers in Subnet</h3>
</div>
<div class="card-body">
{% if subnet.servers %}
<div class="table-responsive">
<table class="table table-vcenter">
<table class="table table-vcenter card-table">
<thead>
<tr>
<th>Hostname</th>
<th>IP Address</th>
<th>Created</th>
<th class="w-1"></th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for server in servers %}
{% for server in subnet.servers %}
<tr>
<td>{{ server.hostname }}</td>
<td><a href="{{ url_for('dashboard.server_view', server_id=server.id) }}">{{ server.hostname }}</a>
</td>
<td>{{ server.ip_address }}</td>
<td>{{ server.created_at.strftime('%Y-%m-%d') }}</td>
<td>
<a href="{{ url_for('dashboard.server_view', server_id=server.id) }}"
class="btn btn-sm btn-primary">
View
<i class="ti ti-eye"></i>
</a>
</td>
</tr>
@ -62,69 +136,51 @@
</table>
</div>
{% else %}
<div class="text-center py-3">
<div class="mb-3">No hosts registered in this subnet</div>
<a href="{{ url_for('dashboard.server_new') }}" class="btn btn-outline-primary">
Add New Server
</a>
<a href="{{ url_for('ipam.subnet_scan', subnet_id=subnet.id) }}" class="btn btn-outline-primary ms-2">
Scan Subnet
</a>
<div class="empty">
<div class="empty-icon">
<i class="ti ti-server"></i>
</div>
<p class="empty-title">No servers in this subnet</p>
<p class="empty-subtitle text-muted">
You can add a new server to this subnet from the dashboard
</p>
<div class="empty-action">
<a href="{{ url_for('dashboard.server_new') }}" class="btn btn-primary">
<i class="ti ti-plus me-2"></i> Add New Server
</a>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Subnet Information</h3>
</div>
<div class="card-body">
<div class="mb-2">
<strong>Network:</strong> {{ subnet.cidr }}
</div>
<div class="mb-2">
<strong>Location:</strong> {{ subnet.location }}
</div>
<div class="mb-2">
<strong>Total IPs:</strong> {{ total_ips }}
</div>
<div class="mb-2">
<strong>Used IPs:</strong> {{ used_ips }} ({{ '%.1f'|format(usage_percent) }}%)
</div>
<div class="mb-2">
<strong>Available IPs:</strong> {{ total_ips - used_ips }}
</div>
<div class="mb-2">
<strong>Auto Scan:</strong>
{% if subnet.auto_scan %}
<span class="badge bg-success">Enabled</span>
{% else %}
<span class="badge bg-secondary">Disabled</span>
{% endif %}
</div>
<div class="mb-2">
<strong>Created:</strong> {{ subnet.created_at.strftime('%Y-%m-%d') }}
</div>
</div>
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteSubnetModal" tabindex="-1" aria-labelledby="deleteSubnetModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteSubnetModalLabel">Confirm Deletion</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="card mt-3">
<div class="card-header">
<h3 class="card-title">Actions</h3>
</div>
<div class="card-body">
<div class="d-grid gap-2">
<a href="{{ url_for('ipam.subnet_scan', subnet_id=subnet.id) }}" class="btn btn-outline-primary">
<i class="fas fa-search me-2"></i> Scan Now
</a>
<a href="{{ url_for('ipam.subnet_visualize', subnet_id=subnet.id) }}" class="btn btn-outline-primary">
<i class="fas fa-chart-network me-2"></i> IP Visualization
</a>
</div>
<div class="modal-body">
<p>Are you sure you want to delete the subnet {{ subnet.cidr }}?</p>
{% if subnet.servers %}
<div class="alert alert-danger">
<strong>Warning:</strong> This subnet has {{ subnet.servers|length }} servers assigned to it.
You must delete or reassign these servers before deleting the subnet.
</div>
{% endif %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<form method="POST" action="{{ url_for('ipam.subnet_delete', subnet_id=subnet.id) }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-danger" {{ 'disabled' if subnet.servers }}>Delete Subnet</button>
</form>
</div>
</div>
</div>

21
app/templates/layout.html
View file

@ -16,6 +16,21 @@
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
{% block styles %}{% endblock %}
<script>
// Check for saved theme preference or respect OS preference
function initTheme() {
const storedTheme = localStorage.getItem('theme');
if (storedTheme) {
document.documentElement.setAttribute('data-bs-theme', storedTheme);
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
}
// Run before page load to prevent flash
initTheme();
</script>
</head>
<body class="{{ 'auth-page' if not current_user.is_authenticated else '' }}">
@ -84,6 +99,12 @@
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">Logout</a></li>
</ul>
</div>
<div class="ms-auto me-3">
<button class="btn btn-icon" id="theme-toggle" aria-label="Toggle theme">
<span class="ti ti-moon theme-icon-light"></span>
<span class="ti ti-sun theme-icon-dark"></span>
</button>
</div>
</div>
</div>
</nav>