wip
This commit is contained in:
pika
parent
f939933a7c
commit
be6f7cfcbb
35 changed files with 1897 additions and 733 deletions
|
|
@ -1,47 +1,46 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-5">
|
||||
<div class="card shadow-sm mt-5">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center mb-4">
|
||||
<h2 class="card-title">Register</h2>
|
||||
<p class="text-muted">Create a new account</p>
|
||||
</div>
|
||||
<div class="container-narrow py-4">
|
||||
<div class="card card-md">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-center mb-4">Create New Account</h2>
|
||||
|
||||
{% 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 %}
|
||||
{% 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('auth.register') }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="password_confirm" class="form-label">Confirm Password</label>
|
||||
<input type="password" class="form-control" id="password_confirm" name="password_confirm" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Register</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<p>Already have an account? <a href="{{ url_for('auth.login') }}">Login here</a></p>
|
||||
</div>
|
||||
<form method="POST" action="{{ url_for('auth.register') }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" name="email" placeholder="your@email.com" required
|
||||
autocomplete="username">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" name="password" placeholder="Password" required
|
||||
autocomplete="new-password">
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary w-100">Create Account</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="hr-text">or</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="{{ url_for('auth.login') }}" class="btn w-100">
|
||||
Login with existing account
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,170 +44,130 @@
|
|||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Documentation</label>
|
||||
<textarea class="form-control" name="documentation" rows="6"
|
||||
<textarea class="form-control" name="documentation" rows="12"
|
||||
placeholder="Use Markdown for formatting">{{ app.documentation }}</textarea>
|
||||
<small class="form-hint">Supports Markdown formatting</small>
|
||||
<small class="form-hint">Supports Markdown formatting including 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>
|
||||
</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 %}
|
||||
<label class="form-label">Ports</label>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter" id="ports-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Port Number</th>
|
||||
<th>Protocol</th>
|
||||
<th>Description</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for port in app.ports %}
|
||||
<tr>
|
||||
<td>
|
||||
<input type="number" name="port_id_{{ port.id }}" value="{{ port.port_number }}"
|
||||
class="form-control" min="1" max="65535">
|
||||
</td>
|
||||
<td>
|
||||
<select name="protocol_{{ port.id }}" 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>
|
||||
<option value="SCTP" {% if port.protocol=='SCTP' %}selected{% endif %}>SCTP</option>
|
||||
<option value="OTHER" {% if port.protocol=='OTHER' %}selected{% endif %}>OTHER</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" name="description_{{ port.id }}" value="{{ port.description }}"
|
||||
class="form-control" placeholder="Description">
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-sm btn-ghost-danger"
|
||||
onclick="removePermanentPort(this, {{ port.id }})">
|
||||
<span class="ti ti-trash"></span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</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
|
||||
|
||||
<input type="hidden" name="ports_to_delete" id="ports-to-delete" value="">
|
||||
|
||||
<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="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 class="form-footer">
|
||||
<div class="d-flex">
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-link">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary ms-auto">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
let newPortIndex = 0;
|
||||
const portsToDelete = [];
|
||||
|
||||
function addPortRow() {
|
||||
const tbody = document.querySelector('#ports-table tbody');
|
||||
const tr = document.createElement('tr');
|
||||
tr.classList.add('new-port-row');
|
||||
tr.innerHTML = `
|
||||
<td>
|
||||
<input type="number" name="new_port_${newPortIndex}" class="form-control"
|
||||
min="1" max="65535" placeholder="Port number">
|
||||
</td>
|
||||
<td>
|
||||
<select name="new_protocol_${newPortIndex}" class="form-select">
|
||||
<option value="TCP">TCP</option>
|
||||
<option value="UDP">UDP</option>
|
||||
<option value="SCTP">SCTP</option>
|
||||
<option value="OTHER">OTHER</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" name="new_description_${newPortIndex}" 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>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
newPortIndex++;
|
||||
}
|
||||
|
||||
function removePortRow(button) {
|
||||
const row = button.closest('tr');
|
||||
row.remove();
|
||||
}
|
||||
|
||||
function removePermanentPort(button, portId) {
|
||||
const row = button.closest('tr');
|
||||
row.remove();
|
||||
portsToDelete.push(portId);
|
||||
document.getElementById('ports-to-delete').value = portsToDelete.join(',');
|
||||
}
|
||||
</script>
|
||||
{% 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 %}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
Add New Application
|
||||
{% if app %}Edit Application{% else %}Add New Application{% endif %}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,156 +25,85 @@
|
|||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<form method="POST" action="{{ url_for('dashboard.app_new') }}">
|
||||
<form method="POST"
|
||||
action="{% if app %}{{ url_for('dashboard.app_edit', app_id=app.id) }}{% else %}{{ url_for('dashboard.app_new') }}{% endif %}">
|
||||
<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" required>
|
||||
<input type="text" class="form-control" name="name" required value="{% if app %}{{ app.name }}{% endif %}">
|
||||
</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 }}">{{ server.hostname }} ({{ server.ip_address }})</option>
|
||||
<option value="{{ server.id }}" {% if app and app.server_id==server.id %}selected {% elif server_id and
|
||||
server.id|string==server_id|string %}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"></textarea>
|
||||
<small class="form-hint">Supports Markdown formatting</small>
|
||||
<textarea class="form-control" name="documentation"
|
||||
rows="10">{% if app %}{{ app.documentation }}{% endif %}</textarea>
|
||||
<div class="form-text">Markdown is supported</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
{% if app %}
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary ms-2">Cancel</a>
|
||||
{% else %}
|
||||
<a href="{% if server_id %}{{ url_for('dashboard.server_view', server_id=server_id) }}{% else %}{{ url_for('dashboard.dashboard_home') }}{% endif %}"
|
||||
class="btn btn-outline-secondary ms-2">Cancel</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
let portRowIndex = 1;
|
||||
|
||||
function addPortRow() {
|
||||
const tbody = document.querySelector('#ports-table tbody');
|
||||
const tr = document.createElement('tr');
|
||||
tr.classList.add('port-row');
|
||||
tr.innerHTML = `
|
||||
<td>
|
||||
<input type="number" name="port_number_${portRowIndex}" class="form-control"
|
||||
min="1" max="65535" placeholder="Port number">
|
||||
</td>
|
||||
<td>
|
||||
<select name="protocol_${portRowIndex}" class="form-select">
|
||||
<option value="TCP">TCP</option>
|
||||
<option value="UDP">UDP</option>
|
||||
<option value="SCTP">SCTP</option>
|
||||
<option value="OTHER">OTHER</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" name="description_${portRowIndex}" 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>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
portRowIndex++;
|
||||
}
|
||||
|
||||
function removePortRow(button) {
|
||||
const row = button.closest('tr');
|
||||
row.remove();
|
||||
}
|
||||
</script>
|
||||
{% 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 %}
|
||||
|
|
@ -1,26 +1,223 @@
|
|||
<!-- Documentation section -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Documentation</h3>
|
||||
</div>
|
||||
<div class="card-body markdown-content">
|
||||
{% if app.documentation %}
|
||||
{{ app.documentation|markdown|safe }}
|
||||
{% else %}
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
<span class="ti ti-file-text"></span>
|
||||
{% 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">
|
||||
<div class="page-pretitle">
|
||||
Application Details
|
||||
</div>
|
||||
<h2 class="page-title">
|
||||
{{ app.name }}
|
||||
</h2>
|
||||
</div>
|
||||
<p class="empty-title">No documentation available</p>
|
||||
<p class="empty-subtitle text-muted">
|
||||
Add documentation to this application to keep track of important information.
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}" class="btn btn-primary">
|
||||
<span class="ti ti-edit me-2"></span> Add Documentation
|
||||
</a>
|
||||
<div class="col-auto ms-auto">
|
||||
<div class="btn-list">
|
||||
<a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}" class="btn btn-primary">
|
||||
<span class="ti ti-edit me-2"></span>Edit Application
|
||||
</a>
|
||||
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteAppModal">
|
||||
<span class="ti ti-trash me-2"></span>Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-4">
|
||||
<!-- Basic Information -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Basic Information</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Server</div>
|
||||
<div>
|
||||
<a href="{{ url_for('dashboard.server_view', server_id=server.id) }}">
|
||||
{{ server.hostname }}
|
||||
</a>
|
||||
({{ server.ip_address }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Created</div>
|
||||
<div>{{ app.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Last Updated</div>
|
||||
<div>{{ app.updated_at.strftime('%Y-%m-%d %H:%M') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ports -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Ports</h3>
|
||||
<div class="card-actions">
|
||||
<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addPortModal">
|
||||
<span class="ti ti-plus me-1"></span> Add Port
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if app.ports %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Port</th>
|
||||
<th>Protocol</th>
|
||||
<th>Description</th>
|
||||
<th class="w-1"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for port in app.ports %}
|
||||
<tr>
|
||||
<td>{{ port.port_number }}</td>
|
||||
<td>{{ port.protocol }}</td>
|
||||
<td>{{ port.description or 'No description' }}</td>
|
||||
<td>
|
||||
<a href="#" data-bs-toggle="modal" data-bs-target="#deletePortModal{{ port.id }}"
|
||||
class="btn btn-sm btn-ghost-danger">
|
||||
<span class="ti ti-trash"></span>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
<span class="ti ti-plug"></span>
|
||||
</div>
|
||||
<p class="empty-title">No ports configured</p>
|
||||
<p class="empty-subtitle text-muted">
|
||||
Add port information to track which ports this application uses.
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPortModal">
|
||||
<span class="ti ti-plus me-2"></span> Add Port
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<!-- Documentation section - ENHANCED -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Documentation</h3>
|
||||
</div>
|
||||
<div class="card-body markdown-content">
|
||||
{% if app.documentation %}
|
||||
{{ app.documentation|markdown|safe }}
|
||||
{% else %}
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
<span class="ti ti-file-text"></span>
|
||||
</div>
|
||||
<p class="empty-title">No documentation available</p>
|
||||
<p class="empty-subtitle text-muted">
|
||||
Add documentation to this application to keep track of important information.
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}" class="btn btn-primary">
|
||||
<span class="ti ti-edit me-2"></span> Add Documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Port Modal -->
|
||||
<div class="modal" id="addPortModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<form method="POST" action="{{ url_for('api.add_port', app_id=app.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Add Port</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Port Number</label>
|
||||
<input type="number" class="form-control" name="port_number" required min="1" max="65535">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Protocol</label>
|
||||
<select class="form-select" name="protocol" required>
|
||||
<option value="TCP">TCP</option>
|
||||
<option value="UDP">UDP</option>
|
||||
<option value="SCTP">SCTP</option>
|
||||
<option value="OTHER">OTHER</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Description</label>
|
||||
<input type="text" class="form-control" name="description" placeholder="What is this port used for?">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Add Port</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete App Modal -->
|
||||
<div class="modal modal-blur fade" id="deleteAppModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="modal-title">Are you sure?</div>
|
||||
<div>This will permanently delete the application "{{ app.name }}" and all its ports.</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<form method="POST" action="{{ url_for('dashboard.app_delete', app_id=app.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button type="submit" class="btn btn-danger">Delete Application</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Port Modals -->
|
||||
{% for port in app.ports %}
|
||||
<div class="modal modal-blur fade" id="deletePortModal{{ port.id }}" tabindex="-1">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="modal-title">Are you sure?</div>
|
||||
<div>This will delete port {{ port.port_number }}/{{ port.protocol }}.</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<form method="POST" action="{{ url_for('api.delete_port', port_id=port.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button type="submit" class="btn btn-danger">Delete Port</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
Add New Server
|
||||
{% if server %}Edit Server{% else %}Add New Server{% endif %}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,37 +25,144 @@
|
|||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<form method="POST" action="{{ url_for('dashboard.server_new') }}">
|
||||
<form method="POST"
|
||||
action="{% if server %}{{ url_for('dashboard.server_edit', server_id=server.id) }}{% else %}{{ url_for('dashboard.server_new') }}{% endif %}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Hostname</label>
|
||||
<input type="text" class="form-control" name="hostname" required>
|
||||
<input type="text" class="form-control" name="hostname" required
|
||||
value="{% if server %}{{ server.hostname }}{% endif %}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">IP Address</label>
|
||||
<input type="text" class="form-control" name="ip_address" placeholder="192.168.1.10" required>
|
||||
<input type="text" class="form-control" name="ip_address" placeholder="192.168.1.10" required
|
||||
value="{% if server %}{{ server.ip_address }}{% endif %}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Subnet</label>
|
||||
<select class="form-select" name="subnet_id" required>
|
||||
<option value="">Select a subnet</option>
|
||||
{% for subnet in subnets %}
|
||||
<option value="{{ subnet.id }}">{{ subnet.cidr }} ({{ subnet.location }})</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="input-group">
|
||||
<select class="form-select" name="subnet_id" required id="subnet-select">
|
||||
<option value="">Select a subnet</option>
|
||||
{% for subnet in subnets %}
|
||||
<option value="{{ subnet.id }}" {% if server and server.subnet_id==subnet.id %}selected{% endif %}>
|
||||
{{ subnet.cidr }} ({{ subnet.location }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#quickSubnetModal">
|
||||
<span class="ti ti-plus"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Documentation</label>
|
||||
<textarea class="form-control" name="documentation" rows="6"
|
||||
placeholder="Use Markdown for formatting"></textarea>
|
||||
<small class="form-hint">Supports Markdown formatting</small>
|
||||
<textarea class="form-control" name="documentation"
|
||||
rows="10">{% if server %}{{ server.documentation }}{% endif %}</textarea>
|
||||
<div class="form-text">Markdown is supported</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end">
|
||||
<a href="{{ url_for('dashboard.server_list') }}" class="btn btn-link me-2">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Save Server</button>
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
{% if server %}
|
||||
<a href="{{ url_for('dashboard.server_view', server_id=server.id) }}"
|
||||
class="btn btn-outline-secondary ms-2">Cancel</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('dashboard.dashboard_home') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Subnet Creation Modal -->
|
||||
<div class="modal fade" id="quickSubnetModal" tabindex="-1" aria-labelledby="quickSubnetModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="quickSubnetModalLabel">Quick Subnet Creation</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="quickSubnetForm">
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">IP Address</label>
|
||||
<input type="text" class="form-control" id="subnet-ip" placeholder="192.168.1.0" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Prefix</label>
|
||||
<select class="form-select" id="subnet-prefix" required>
|
||||
{% for i in range(8, 31) %}
|
||||
<option value="{{ i }}" {% if i==24 %}selected{% endif %}>{{ i }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Location</label>
|
||||
<input type="text" class="form-control" id="subnet-location" required>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="createSubnetBtn">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add this JavaScript at the end -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const createSubnetBtn = document.getElementById('createSubnetBtn');
|
||||
|
||||
createSubnetBtn.addEventListener('click', function () {
|
||||
const ip = document.getElementById('subnet-ip').value;
|
||||
const prefix = document.getElementById('subnet-prefix').value;
|
||||
const location = document.getElementById('subnet-location').value;
|
||||
|
||||
// Validate inputs
|
||||
if (!ip || !prefix || !location) {
|
||||
alert('All fields are required');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the subnet via AJAX
|
||||
fetch('/ipam/subnet/create-ajax', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': document.querySelector('input[name="csrf_token"]').value
|
||||
},
|
||||
body: JSON.stringify({
|
||||
cidr: `${ip}/${prefix}`,
|
||||
location: location,
|
||||
auto_scan: false
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
// Add the new subnet to the dropdown
|
||||
const selectElement = document.getElementById('subnet-select');
|
||||
const option = document.createElement('option');
|
||||
option.value = data.subnet_id;
|
||||
option.text = `${data.cidr} (${data.location})`;
|
||||
option.selected = true;
|
||||
selectElement.appendChild(option);
|
||||
|
||||
// Close the modal
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('quickSubnetModal'));
|
||||
modal.hide();
|
||||
} else {
|
||||
alert(data.error || 'Failed to create subnet');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('An error occurred. Please try again.');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -12,13 +12,13 @@
|
|||
{{ server.hostname }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-auto ms-auto d-print-none">
|
||||
<div class="col-auto ms-auto">
|
||||
<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
|
||||
<span class="ti ti-edit me-2"></span>Edit Server
|
||||
</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 class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal">
|
||||
<span class="ti ti-trash me-2"></span>Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -27,28 +27,29 @@
|
|||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-4">
|
||||
<!-- Server Information -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Server Information</h3>
|
||||
<h3 class="card-title">Basic Information</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<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) }}">
|
||||
<div class="mb-3">
|
||||
<div class="form-label">IP Address</div>
|
||||
<div>{{ server.ip_address }}</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Subnet</div>
|
||||
<div>
|
||||
<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>
|
||||
({{ server.subnet.location }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Scan Status</div>
|
||||
<div>{{ server.last_scan or 'Not scanned yet' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -101,70 +102,8 @@
|
|||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<!-- Applications -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Applications</h3>
|
||||
<div class="card-actions">
|
||||
<a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary">
|
||||
<span class="ti ti-plus me-2"></span> Add Application
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if server.apps %}
|
||||
<div class="row row-cards">
|
||||
{% for app in server.apps %}
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}">{{ app.name }}</a>
|
||||
</h3>
|
||||
{% if app.ports %}
|
||||
<div class="mt-2">
|
||||
<span class="badge bg-blue me-1">Ports:</span>
|
||||
{% for port in app.ports %}
|
||||
<span class="badge bg-azure me-1">{{ port.port_number }}/{{ port.protocol }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if app.documentation %}
|
||||
<div class="mt-3">
|
||||
<h5>Documentation</h5>
|
||||
<div class="markdown-body">
|
||||
{{ app.documentation|markdown|safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-muted">No documentation available</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Documentation section -->
|
||||
<div class="card mt-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Documentation</h3>
|
||||
</div>
|
||||
|
|
@ -189,25 +128,103 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Applications section with collapsible cards -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Applications</h3>
|
||||
<div class="card-actions">
|
||||
<a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary me-2">
|
||||
<span class="ti ti-plus me-2"></span> Add Application
|
||||
</a>
|
||||
<button class="btn btn-outline-primary" id="toggle-all-apps">
|
||||
<span class="ti ti-chevrons-down me-1"></span> <span id="toggle-text">Expand All</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if server.apps %}
|
||||
<div class="accordion" id="accordionApps">
|
||||
{% 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 }}">
|
||||
<div class="d-flex justify-content-between align-items-center w-100 me-2">
|
||||
<span>{{ app.name }}</span>
|
||||
{% if app.ports %}
|
||||
<div>
|
||||
{% for port in app.ports %}
|
||||
<span class="badge bg-azure me-1">{{ port.port_number }}/{{ port.protocol }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapse-{{ app.id }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ app.id }}"
|
||||
data-bs-parent="#accordionApps">
|
||||
<div class="accordion-body">
|
||||
<div class="d-flex justify-content-end mb-3">
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}"
|
||||
class="btn btn-sm btn-outline-primary me-2">
|
||||
<span class="ti ti-eye me-1"></span> View
|
||||
</a>
|
||||
<a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}"
|
||||
class="btn btn-sm btn-outline-primary me-2">
|
||||
<span class="ti ti-edit me-1"></span> Edit
|
||||
</a>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="deleteApp('{{ app.id }}', '{{ app.name }}')">
|
||||
<span class="ti ti-trash me-1"></span> Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% if app.documentation %}
|
||||
<div class="markdown-content">
|
||||
{{ app.documentation|markdown|safe }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-muted">No documentation available</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
<span class="ti ti-apps"></span>
|
||||
</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">
|
||||
<span class="ti ti-plus me-1"></span> Add Application
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</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 modal-blur fade" id="deleteServerModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered">
|
||||
<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 class="modal-title">Are you sure?</div>
|
||||
<div>This will permanently delete the server "{{ server.hostname }}" and all associated applications and ports.
|
||||
</div>
|
||||
</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">
|
||||
<form method="POST" action="{{ url_for('dashboard.server_delete', server_id=server.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button type="submit" class="btn btn-danger">Delete Server</button>
|
||||
</form>
|
||||
|
|
@ -216,20 +233,17 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete App Modal (created dynamically) -->
|
||||
<div class="modal fade" id="deleteAppModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<!-- Delete App Modal Template - Will be dynamically populated -->
|
||||
<div class="modal modal-blur fade" id="deleteAppModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered">
|
||||
<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 class="modal-body">
|
||||
<div class="modal-title">Are you sure?</div>
|
||||
<div id="delete-app-message"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<form id="deleteAppForm" method="POST">
|
||||
<form id="delete-app-form" method="POST" action="">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button type="submit" class="btn btn-danger">Delete Application</button>
|
||||
</form>
|
||||
|
|
@ -237,58 +251,68 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
// Function to handle app deletion modal
|
||||
function deleteApp(appId, appName) {
|
||||
const modal = document.getElementById('deleteAppModal');
|
||||
const message = document.getElementById('delete-app-message');
|
||||
const form = document.getElementById('delete-app-form');
|
||||
|
||||
message.textContent = `This will delete the application "${appName}" and all its ports.`;
|
||||
form.action = "{{ url_for('dashboard.app_delete', app_id=0) }}".replace('0', appId);
|
||||
|
||||
// Show the modal
|
||||
new bootstrap.Modal(modal).show();
|
||||
}
|
||||
|
||||
// Toggle expand/collapse all
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const toggleBtn = document.getElementById('toggle-all-apps');
|
||||
const toggleText = document.getElementById('toggle-text');
|
||||
let isExpanded = false;
|
||||
|
||||
toggleBtn.addEventListener('click', function () {
|
||||
const accordionButtons = document.querySelectorAll('.accordion-button');
|
||||
const accordionContents = document.querySelectorAll('.accordion-collapse');
|
||||
|
||||
isExpanded = !isExpanded;
|
||||
|
||||
if (isExpanded) {
|
||||
// Expand all
|
||||
accordionButtons.forEach(button => {
|
||||
button.classList.remove('collapsed');
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
});
|
||||
|
||||
accordionContents.forEach(content => {
|
||||
content.classList.add('show');
|
||||
});
|
||||
|
||||
toggleText.textContent = 'Collapse All';
|
||||
toggleBtn.querySelector('span:first-child').classList.remove('ti-chevrons-down');
|
||||
toggleBtn.querySelector('span:first-child').classList.add('ti-chevrons-up');
|
||||
} else {
|
||||
// Collapse all
|
||||
accordionButtons.forEach(button => {
|
||||
button.classList.add('collapsed');
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
accordionContents.forEach(content => {
|
||||
content.classList.remove('show');
|
||||
});
|
||||
|
||||
toggleText.textContent = 'Expand All';
|
||||
toggleBtn.querySelector('span:first-child').classList.remove('ti-chevrons-up');
|
||||
toggleBtn.querySelector('span:first-child').classList.add('ti-chevrons-down');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% 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 %}
|
||||
|
|
|
|||
86
app/templates/dashboard/settings.html
Normal file
86
app/templates/dashboard/settings.html
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
{% 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">
|
||||
User Settings
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<!-- Password Change Card -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Change Password</h3>
|
||||
</div>
|
||||
<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.settings') }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Current Password</label>
|
||||
<input type="password" class="form-control" name="current_password" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">New Password</label>
|
||||
<input type="password" class="form-control" name="new_password" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Confirm New Password</label>
|
||||
<input type="password" class="form-control" name="confirm_password" required>
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary">Change Password</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<!-- User Information Card -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Account Information</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Email</div>
|
||||
<div>{{ current_user.email }}</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Account Type</div>
|
||||
<div>
|
||||
{% if current_user.is_admin %}
|
||||
<span class="badge bg-green">Administrator</span>
|
||||
{% else %}
|
||||
<span class="badge bg-blue">Standard User</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Created</div>
|
||||
<div>{{ current_user.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
64
app/templates/dashboard/subnet_view.html
Normal file
64
app/templates/dashboard/subnet_view.html
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<!-- Add this in the action buttons section -->
|
||||
<div class="col-auto ms-auto">
|
||||
<div class="btn-list">
|
||||
<a href="{{ url_for('dashboard.subnet_edit', subnet_id=subnet.id) }}" class="btn btn-primary">
|
||||
<span class="ti ti-edit me-2"></span>Edit Subnet
|
||||
</a>
|
||||
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteSubnetModal">
|
||||
<span class="ti ti-trash me-2"></span>Delete
|
||||
</button>
|
||||
<button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#forceDeleteSubnetModal">
|
||||
<span class="ti ti-alert-triangle me-2"></span>Force Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add this at the bottom of the template -->
|
||||
<!-- Force Delete Subnet Modal -->
|
||||
<div class="modal modal-blur fade" id="forceDeleteSubnetModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title text-danger">⚠️ Dangerous Action: Force Delete</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="alert alert-danger">
|
||||
<h4 class="alert-title">Warning: This action cannot be undone!</h4>
|
||||
<p>You are about to <strong>permanently delete</strong> the subnet {{ subnet.cidr }} and <strong>ALL</strong>
|
||||
of its:</p>
|
||||
<ul>
|
||||
<li>{{ subnet.servers|length }} server(s)</li>
|
||||
<li>All applications on those servers</li>
|
||||
<li>All port configurations</li>
|
||||
<li>All documentation</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>To confirm, please type <strong>{{ subnet.cidr }}</strong> below:</p>
|
||||
<input type="text" id="force-delete-confirmation" class="form-control"
|
||||
placeholder="Type subnet CIDR to confirm">
|
||||
</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_force_delete', subnet_id=subnet.id) }}"
|
||||
id="force-delete-form">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button type="submit" class="btn btn-danger" id="force-delete-button" disabled>Force Delete
|
||||
Everything</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const confirmationInput = document.getElementById('force-delete-confirmation');
|
||||
const deleteButton = document.getElementById('force-delete-button');
|
||||
const subnetCidr = "{{ subnet.cidr }}";
|
||||
|
||||
confirmationInput.addEventListener('input', function () {
|
||||
deleteButton.disabled = confirmationInput.value !== subnetCidr;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
Add New Subnet
|
||||
{% if subnet %}Edit Subnet{% else %}New Subnet{% endif %}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,27 +25,100 @@
|
|||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<form method="POST" action="{{ url_for('ipam.subnet_new') }}">
|
||||
<form method="POST"
|
||||
action="{% if subnet %}{{ url_for('ipam.subnet_edit', subnet_id=subnet.id) }}{% else %}{{ url_for('ipam.subnet_new') }}{% endif %}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">CIDR Notation</label>
|
||||
<input type="text" class="form-control" name="cidr" placeholder="192.168.1.0/24" required>
|
||||
<small class="form-hint">Example: 192.168.1.0/24</small>
|
||||
|
||||
<!-- IP Address and Prefix Selection -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8">
|
||||
<label class="form-label required">IP Address</label>
|
||||
<input type="text" class="form-control" id="ip-address" placeholder="192.168.1.0" required
|
||||
value="{% if subnet %}{{ subnet.cidr.split('/')[0] }}{% endif %}">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label required">Prefix</label>
|
||||
<select class="form-select" id="prefix" required>
|
||||
{% for i in range(8, 31) %}
|
||||
<option value="{{ i }}" {% if subnet and subnet.cidr.split('/')[1]|int==i %}selected{% endif %}>
|
||||
{{ i }} ({{ 2**(32-i) }} hosts)
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden CIDR field to submit combined value -->
|
||||
<input type="hidden" name="cidr" id="cidr-value" value="{% if subnet %}{{ subnet.cidr }}{% endif %}">
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Location</label>
|
||||
<input type="text" class="form-control" name="location" placeholder="Office, Datacenter, etc." required>
|
||||
<input type="text" class="form-control" name="location" required
|
||||
value="{% if subnet %}{{ subnet.location }}{% endif %}">
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="auto_scan" name="auto_scan">
|
||||
<label class="form-check-label" for="auto_scan">Enable automatic scanning</label>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="auto_scan" id="auto_scan" {% if subnet and
|
||||
subnet.auto_scan %}checked{% endif %}>
|
||||
<label class="form-check-label" for="auto_scan">
|
||||
Auto-scan for active hosts
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end">
|
||||
<a href="{{ url_for('ipam.ipam_home') }}" class="btn btn-link me-2">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Save Subnet</button>
|
||||
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
<a href="{% if subnet %}{{ url_for('ipam.subnet_view', subnet_id=subnet.id) }}{% else %}{{ url_for('ipam.ipam_home') }}{% endif %}"
|
||||
class="btn btn-outline-secondary ms-2">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const ipAddressInput = document.getElementById('ip-address');
|
||||
const prefixSelect = document.getElementById('prefix');
|
||||
const cidrValueInput = document.getElementById('cidr-value');
|
||||
|
||||
// Function to update the hidden CIDR field
|
||||
function updateCidrValue() {
|
||||
const ip = ipAddressInput.value.trim();
|
||||
const prefix = prefixSelect.value;
|
||||
|
||||
if (ip) {
|
||||
cidrValueInput.value = `${ip}/${prefix}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listeners
|
||||
ipAddressInput.addEventListener('input', updateCidrValue);
|
||||
prefixSelect.addEventListener('change', updateCidrValue);
|
||||
|
||||
// Initialize CIDR value if editing
|
||||
if (cidrValueInput.value) {
|
||||
const parts = cidrValueInput.value.split('/');
|
||||
if (parts.length === 2) {
|
||||
ipAddressInput.value = parts[0];
|
||||
const prefix = parseInt(parts[1]);
|
||||
if (!isNaN(prefix) && prefix >= 8 && prefix <= 30) {
|
||||
prefixSelect.value = prefix;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure form submission updates the CIDR value
|
||||
document.querySelector('form').addEventListener('submit', function (e) {
|
||||
updateCidrValue();
|
||||
|
||||
// Basic validation
|
||||
if (!cidrValueInput.value) {
|
||||
e.preventDefault();
|
||||
alert('Please enter a valid IP address and prefix');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title if title else 'Network Documentation' }}</title>
|
||||
<title>{{ title|default('Network Infrastructure Management') }}</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Tabler Icons -->
|
||||
|
|
@ -15,6 +15,12 @@
|
|||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tabler.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='libs/tabler-icons/tabler-icons.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/markdown.css') }}">
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
|
||||
{% block styles %}{% endblock %}
|
||||
<script>
|
||||
// Check for saved theme preference or respect OS preference
|
||||
|
|
@ -31,6 +37,71 @@
|
|||
// Run before page load to prevent flash
|
||||
initTheme();
|
||||
</script>
|
||||
<style>
|
||||
.sidebar-item-parent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-submenu {
|
||||
display: none;
|
||||
padding-left: 20px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.sidebar-item-parent.expanded .sidebar-submenu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-item-parent.expanded .toggle-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.subnet-item,
|
||||
.server-item {
|
||||
padding: 5px 10px;
|
||||
margin: 2px 0;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.subnet-item:hover,
|
||||
.server-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.subnet-item.active,
|
||||
.server-item.active {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.subnet-servers {
|
||||
margin-left: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.subnet-item-expanded .subnet-servers {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.subnet-item-expanded .subnet-toggle-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.subnet-toggle-icon {
|
||||
transition: transform 0.2s ease;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.loading-placeholder {
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="{{ 'auth-page' if not current_user.is_authenticated else '' }}">
|
||||
|
|
@ -55,10 +126,25 @@
|
|||
class="sidebar-item {{ 'active' if request.endpoint and request.endpoint.startswith('dashboard.server') }}">
|
||||
<span class="ti ti-server me-2"></span> Servers
|
||||
</a>
|
||||
<a href="{{ url_for('ipam.ipam_home') }}"
|
||||
class="sidebar-item {{ 'active' if request.endpoint and request.endpoint.startswith('ipam.') }}">
|
||||
<span class="ti ti-network me-2"></span> IPAM
|
||||
</a>
|
||||
|
||||
<!-- IPAM with Subnet Tree -->
|
||||
<div class="sidebar-item-parent">
|
||||
<a href="{{ url_for('ipam.ipam_home') }}"
|
||||
class="sidebar-item {{ 'active' if request.endpoint and request.endpoint.startswith('ipam.') }}">
|
||||
<span class="ti ti-network me-2"></span> IPAM
|
||||
<span class="ti ti-chevron-down ms-auto toggle-icon"></span>
|
||||
</a>
|
||||
<div class="sidebar-submenu">
|
||||
<div id="subnet-tree-container">
|
||||
<!-- Subnets will be loaded here -->
|
||||
<div class="text-center py-2 d-none" id="subnet-loader">
|
||||
<div class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-heading">Management</div>
|
||||
<a href="{{ url_for('dashboard.server_new') }}" class="sidebar-item">
|
||||
|
|
@ -69,6 +155,10 @@
|
|||
</a>
|
||||
|
||||
<div class="sidebar-heading">User</div>
|
||||
<a href="{{ url_for('dashboard.settings') }}"
|
||||
class="sidebar-item {{ 'active' if request.endpoint == 'dashboard.settings' }}">
|
||||
<span class="ti ti-settings me-2"></span> Settings
|
||||
</a>
|
||||
<a href="{{ url_for('auth.logout') }}" class="sidebar-item">
|
||||
<span class="ti ti-logout me-2"></span> Logout
|
||||
</a>
|
||||
|
|
@ -162,6 +252,130 @@
|
|||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Toggle sidebar submenus
|
||||
document.querySelectorAll('.sidebar-item-parent > a').forEach(item => {
|
||||
item.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const parent = this.parentElement;
|
||||
parent.classList.toggle('expanded');
|
||||
|
||||
// Load subnet data when IPAM is expanded
|
||||
if (parent.classList.contains('expanded') && this.textContent.includes('IPAM')) {
|
||||
loadSubnets();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function loadSubnets() {
|
||||
const subnetContainer = document.getElementById('subnet-tree-container');
|
||||
const loader = document.getElementById('subnet-loader');
|
||||
|
||||
if (!loader || !subnetContainer) return;
|
||||
|
||||
// Show loader
|
||||
loader.classList.remove('d-none');
|
||||
|
||||
// Fetch subnets
|
||||
fetch('/api/subnets')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(subnets => {
|
||||
loader.classList.add('d-none');
|
||||
|
||||
if (subnets.length === 0) {
|
||||
subnetContainer.innerHTML = '<div class="text-muted px-3 py-2">No subnets found</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
subnets.forEach(subnet => {
|
||||
html += `
|
||||
<div class="subnet-item-container">
|
||||
<div class="subnet-item" data-subnet-id="${subnet.id}">
|
||||
<span class="ti ti-chevron-right subnet-toggle-icon me-1"></span>
|
||||
<a href="/ipam/subnet/${subnet.id}" class="text-reset text-decoration-none flex-grow-1">
|
||||
${subnet.cidr} (${subnet.location})
|
||||
</a>
|
||||
</div>
|
||||
<div class="subnet-servers d-none" id="subnet-servers-${subnet.id}">
|
||||
<div class="text-muted px-3 py-2">Loading servers...</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
subnetContainer.innerHTML = html;
|
||||
|
||||
// Add click handlers to subnet items
|
||||
document.querySelectorAll('.subnet-item').forEach(item => {
|
||||
item.querySelector('.subnet-toggle-icon').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const subnetId = item.dataset.subnetId;
|
||||
const serversContainer = document.getElementById(`subnet-servers-${subnetId}`);
|
||||
serversContainer.classList.toggle('d-none');
|
||||
|
||||
if (!serversContainer.classList.contains('d-none') &&
|
||||
serversContainer.querySelector('.text-muted')) {
|
||||
loadServersForSubnet(subnetId);
|
||||
}
|
||||
|
||||
// Toggle icon
|
||||
this.classList.toggle('ti-chevron-right');
|
||||
this.classList.toggle('ti-chevron-down');
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading subnets:', error);
|
||||
loader.classList.add('d-none');
|
||||
subnetContainer.innerHTML = '<div class="text-danger px-3 py-2">Error loading subnets</div>';
|
||||
});
|
||||
}
|
||||
|
||||
function loadServersForSubnet(subnetId) {
|
||||
const serversContainer = document.getElementById(`subnet-servers-${subnetId}`);
|
||||
|
||||
// Fetch servers for this subnet
|
||||
fetch(`/api/subnets/${subnetId}/servers`)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(servers => {
|
||||
if (servers.length === 0) {
|
||||
serversContainer.innerHTML = '<div class="text-muted px-3 py-2">No servers in this subnet</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
servers.forEach(server => {
|
||||
html += `
|
||||
<a href="/dashboard/server/${server.id}" class="server-item d-block ps-4 py-1">
|
||||
<span class="ti ti-server me-1 small"></span>
|
||||
${server.hostname} (${server.ip_address})
|
||||
</a>
|
||||
`;
|
||||
});
|
||||
|
||||
serversContainer.innerHTML = html;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading servers:', error);
|
||||
serversContainer.innerHTML = '<div class="text-danger px-3 py-2">Error loading servers</div>';
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
<div>
|
||||
<p><strong>IP Address:</strong> {{ server.ip_address }}</p>
|
||||
<p><strong>Open Ports:</strong> {{ server.get_open_ports() | join(', ') }}</p>
|
||||
<div class="markdown-body">
|
||||
<div class="markdown-content">
|
||||
<h3>Documentation:</h3>
|
||||
<div id="markdown-preview">
|
||||
{{ markdown(server.documentation) | safe }}
|
||||
{{ server.documentation|markdown|safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue