wip
This commit is contained in:
pika
parent
3b2f1db4ce
commit
5c16964b76
47 changed files with 2080 additions and 1053 deletions
|
|
@ -1,11 +1,14 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<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>
|
||||
<div class="container-tight py-4">
|
||||
<div class="text-center mb-4">
|
||||
<h1>Create an account</h1>
|
||||
</div>
|
||||
|
||||
<form class="card card-md" method="POST" action="{{ url_for('auth.register') }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="card-body">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
|
|
@ -17,33 +20,37 @@
|
|||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<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 class="mb-3">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" name="email" class="form-control" placeholder="your@email.com" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Username</label>
|
||||
<input type="text" name="username" class="form-control" placeholder="Username" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" name="password" class="form-control" placeholder="Password" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Confirm Password</label>
|
||||
<input type="password" name="password_confirm" class="form-control" placeholder="Confirm password" required>
|
||||
<div class="form-text text-muted">
|
||||
Make sure to use a strong, unique password
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary w-100">Create account</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="text-center text-muted mt-3">
|
||||
Already have an account? <a href="{{ url_for('auth.login') }}" tabindex="-1">Sign in</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -6,8 +6,25 @@
|
|||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
{% if app %}Edit Application{% else %}Add New Application{% endif %}
|
||||
{{ title }}
|
||||
</h2>
|
||||
<div class="text-muted mt-1">
|
||||
{% if edit_mode %}Edit{% else %}Create{% endif %} application details and configure ports
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto ms-auto">
|
||||
<div class="btn-list">
|
||||
<a href="{{ dashboard_link }}" class="btn btn-outline-primary">
|
||||
<span class="ti ti-dashboard"></span>
|
||||
Dashboard
|
||||
</a>
|
||||
{% if edit_mode %}
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary">
|
||||
<span class="ti ti-eye"></span>
|
||||
View Application
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,86 +43,148 @@
|
|||
{% endwith %}
|
||||
|
||||
<form method="POST"
|
||||
action="{% if app %}{{ url_for('dashboard.app_edit', app_id=app.id) }}{% else %}{{ url_for('dashboard.app_new') }}{% endif %}">
|
||||
action="{{ url_for('dashboard.app_edit', app_id=app.id) if edit_mode else url_for('dashboard.app_new') }}">
|
||||
<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 value="{% if app %}{{ app.name }}{% endif %}">
|
||||
<input type="text" class="form-control" name="name" value="{{ app.name if app else '' }}" required
|
||||
placeholder="Enter application name">
|
||||
<small class="form-hint">Choose a unique name for this application</small>
|
||||
</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 app and app.server_id==server.id %}selected {% elif server_id and
|
||||
server.id|string==server_id|string %}selected{% endif %}>
|
||||
<option value="{{ server.id }}" {% if app and server.id==app.server_id %}selected{% endif %}>
|
||||
{{ server.hostname }} ({{ server.ip_address }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<small class="form-hint">Select the server where this application runs</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Documentation</label>
|
||||
<textarea class="form-control" name="documentation"
|
||||
rows="10">{% if app %}{{ app.documentation }}{% endif %}</textarea>
|
||||
<div class="form-text">Markdown is supported</div>
|
||||
<ul class="nav nav-tabs mb-2" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<a href="#markdown-edit" class="nav-link active" data-bs-toggle="tab" role="tab">Edit</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a href="#markdown-preview" class="nav-link" data-bs-toggle="tab" role="tab" id="preview-tab">Preview</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="markdown-edit" role="tabpanel">
|
||||
<textarea class="form-control" name="documentation" id="documentation" rows="6"
|
||||
placeholder="Document your application using Markdown...">{{ app.documentation if app else '' }}</textarea>
|
||||
<small class="form-hint">
|
||||
Markdown formatting is supported. Include details about what this application does, contact info, etc.
|
||||
</small>
|
||||
</div>
|
||||
<div class="tab-pane" id="markdown-preview" role="tabpanel">
|
||||
<div class="markdown-content border rounded p-3" style="min-height: 12rem;">
|
||||
<div id="preview-content">Preview will be shown here...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hr-text">Port Configuration</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<label class="form-label mb-0">Application Ports</label>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary" id="add-port-btn">
|
||||
<span class="ti ti-plus"></span> Add Port
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" id="random-port-btn"
|
||||
title="Generate random available port">
|
||||
<span class="ti ti-dice"></span> Random Port
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter card-table" id="ports-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 20%">Port Number</th>
|
||||
<th style="width: 20%">Protocol</th>
|
||||
<th style="width: 50%">Description</th>
|
||||
<th style="width: 10%">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% if app and app.ports %}
|
||||
{% for port in app.ports %}
|
||||
<tr data-port-id="{{ port.id }}">
|
||||
<td>
|
||||
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
|
||||
value="{{ port.port_number }}" required>
|
||||
</td>
|
||||
<td>
|
||||
<select name="protocols[]" class="form-select">
|
||||
<option value="TCP" {% if port.protocol=='TCP' %}selected{% endif %}>TCP</option>
|
||||
<option value="UDP" {% if port.protocol=='UDP' %}selected{% endif %}>UDP</option>
|
||||
<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="port_descriptions[]" class="form-control" value="{{ port.description }}"
|
||||
placeholder="Description">
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
|
||||
<span class="ti ti-trash"></span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<!-- New rows will be added here dynamically -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<small class="form-hint">Configure the network ports used by this application</small>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
{% if app %}
|
||||
<button type="submit" class="btn btn-primary">Save Application</button>
|
||||
{% if edit_mode %}
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary ms-2">Cancel</a>
|
||||
{% elif server_id %}
|
||||
<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>
|
||||
<a href="{{ dashboard_link }}" class="btn btn-outline-secondary ms-2">Cancel</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
let portRowIndex = 1;
|
||||
{% if app and app.id %}
|
||||
const appId = {{ app.id | tojson }};
|
||||
{% else %}
|
||||
const appId = null;
|
||||
{% endif %}
|
||||
|
||||
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++;
|
||||
}
|
||||
// Setup markdown preview
|
||||
setupMarkdownPreview();
|
||||
|
||||
function removePortRow(button) {
|
||||
const row = button.closest('tr');
|
||||
row.remove();
|
||||
}
|
||||
// Setup port management
|
||||
setupPortHandlers();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
<script>
|
||||
document.body.addEventListener('htmx:configRequest', (event) => {
|
||||
event.detail.headers['X-CSRFToken'] = "{{ csrf_token() }}";
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -155,6 +155,69 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Applications in this Subnet Section -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<div class="card glass-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Applications in this Subnet</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if subnet_apps %}
|
||||
<div class="app-grid">
|
||||
{% for app in subnet_apps %}
|
||||
<div class="app-card">
|
||||
<div class="app-card-header">
|
||||
<div class="app-card-title">
|
||||
<h4>{{ app.name }}</h4>
|
||||
<span class="text-muted small">on {{ app.server.hostname }} ({{ app.server.ip_address }})</span>
|
||||
</div>
|
||||
<div class="app-card-actions">
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-sm btn-outline-primary">
|
||||
View
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-card-body markdown-content">
|
||||
{% if app.documentation %}
|
||||
{{ app.documentation|markdown|truncate(300, true) }}
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-primary">Read more</a>
|
||||
{% else %}
|
||||
<p class="text-muted">No documentation available for this application.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
<span class="ti ti-app-window"></span>
|
||||
</div>
|
||||
<p class="empty-title">No applications found</p>
|
||||
<p class="empty-subtitle text-muted">
|
||||
No applications are running on servers in this subnet.
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Update the usage progress bar section -->
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Usage</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar" style="width: {{ (used_ips / total_ips * 100) if total_ips > 0 else 0 }}%"
|
||||
role="progressbar"></div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>{{ used_ips }} used</span>
|
||||
<span>{{ total_ips }} total</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
|
|
@ -185,4 +248,65 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.glass-card {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .glass-card {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .app-card {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.app-card-header {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .app-card-header {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.app-card-title h4 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.app-card-body {
|
||||
padding: 1rem;
|
||||
max-height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
@ -15,10 +15,13 @@
|
|||
<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/tabler.min.css') }}"
|
||||
onerror="this.onerror=null;this.href='https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css';">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='libs/tabler-icons/tabler-icons.min.css') }}"
|
||||
onerror="this.onerror=null;this.href='https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/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') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
|
||||
{% block styles %}{% endblock %}
|
||||
|
|
@ -267,11 +270,13 @@
|
|||
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-item ms-2">
|
||||
<button id="theme-toggle" class="btn btn-icon" aria-label="Toggle theme">
|
||||
<span class="ti ti-moon dark-icon d-none"></span>
|
||||
<span class="ti ti-sun light-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-nav flex-row order-md-last">
|
||||
<div class="nav-item me-2">
|
||||
<button id="theme-toggle" class="btn btn-icon" aria-label="Toggle theme">
|
||||
<span class="ti ti-moon dark-icon d-none"></span>
|
||||
<span class="ti ti-sun light-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -529,6 +534,73 @@
|
|||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Add transition class to main content
|
||||
const mainContent = document.querySelector('.page-body');
|
||||
if (mainContent) {
|
||||
mainContent.classList.add('page-transition');
|
||||
}
|
||||
|
||||
// Theme toggle enhancement
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
if (themeToggle) {
|
||||
themeToggle.addEventListener('click', function () {
|
||||
const currentTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
document.documentElement.setAttribute('data-bs-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
|
||||
// Update toggle icon
|
||||
const darkIcon = document.querySelector('.dark-icon');
|
||||
const lightIcon = document.querySelector('.light-icon');
|
||||
|
||||
if (darkIcon && lightIcon) {
|
||||
if (newTheme === 'dark') {
|
||||
darkIcon.classList.remove('d-none');
|
||||
lightIcon.classList.add('d-none');
|
||||
} else {
|
||||
darkIcon.classList.add('d-none');
|
||||
lightIcon.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
// Show theme change notification
|
||||
showNotification('success', `${newTheme.charAt(0).toUpperCase() + newTheme.slice(1)} mode activated`);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Notification function
|
||||
function showNotification(type, message) {
|
||||
const notificationArea = document.getElementById('notification-area');
|
||||
if (!notificationArea) return;
|
||||
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `alert alert-${type} alert-dismissible fade show`;
|
||||
notification.style.animation = 'fadeIn 0.3s ease-out';
|
||||
notification.innerHTML = `
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
`;
|
||||
|
||||
notificationArea.appendChild(notification);
|
||||
|
||||
// Auto dismiss after 3 seconds
|
||||
setTimeout(() => {
|
||||
notification.style.animation = 'fadeOut 0.3s ease-in';
|
||||
setTimeout(() => {
|
||||
notification.remove();
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue