21eb63659a
- Replace Caddy reverse proxy with Nginx (nginx:alpine) - Add nginx.conf with HTTP/HTTPS, gzip, and proxy settings - Add nginx-custom-domains.conf template for custom domains - Update docker-compose.yml to use Nginx service - Add ProxyFix middleware to Flask app for proper header handling - Create nginx_config_reader.py utility to read Nginx configuration - Update admin blueprint to display Nginx status in https_config page - Add Nginx configuration display to https_config.html template - Generate self-signed SSL certificates for localhost - Add utility scripts: generate_nginx_certs.sh - Add documentation: NGINX_SETUP_QUICK.md, PROXY_FIX_SETUP.md - All containers now running, HTTPS working, HTTP redirects to HTTPS - Session cookies marked as Secure - Security headers properly configured
655 lines
20 KiB
HTML
655 lines
20 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}HTTPS Configuration - DigiServer v2{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container">
|
||
<div class="page-header">
|
||
<a href="{{ url_for('admin.admin_panel') }}" class="back-link">← Back to Admin Panel</a>
|
||
<h1>🔒 HTTPS Configuration</h1>
|
||
</div>
|
||
|
||
<div class="https-config-container">
|
||
<!-- Status Display -->
|
||
<div class="card status-card">
|
||
<h2>Current Status</h2>
|
||
|
||
<!-- Real-time HTTPS detection -->
|
||
<div class="status-detection">
|
||
<p class="detection-info">
|
||
<strong>🔍 Detected Connection:</strong>
|
||
{% if is_https_active %}
|
||
<span class="badge badge-success">🔒 HTTPS ({{ request.scheme.upper() }})</span>
|
||
{% else %}
|
||
<span class="badge badge-warning">🔓 HTTP</span>
|
||
{% endif %}
|
||
<br>
|
||
<small>Current host: <code>{{ current_host }}</code> via {{ request.host }}</small>
|
||
</p>
|
||
</div>
|
||
|
||
{% if config and config.https_enabled %}
|
||
<div class="status-enabled">
|
||
<span class="status-badge">✅ HTTPS ENABLED</span>
|
||
<div class="status-details">
|
||
<p><strong>Domain:</strong> {{ config.domain }}</p>
|
||
<p><strong>Hostname:</strong> {{ config.hostname }}</p>
|
||
<p><strong>Email:</strong> {{ config.email }}</p>
|
||
<p><strong>IP Address:</strong> {{ config.ip_address }}</p>
|
||
<p><strong>Port:</strong> {{ config.port }}</p>
|
||
<p><strong>Access URL:</strong> <code>https://{{ config.domain }}</code></p>
|
||
<p><strong>Last Updated:</strong> {{ config.updated_at.strftime('%Y-%m-%d %H:%M:%S') }} by {{ config.updated_by }}</p>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<div class="status-disabled">
|
||
<span class="status-badge-inactive">⚠️ HTTPS DISABLED</span>
|
||
{% if is_https_active %}
|
||
<p style="color: #156b2e; background: #d1f0e0; padding: 10px; border-radius: 4px; margin: 10px 0;">
|
||
✅ <strong>Note:</strong> You are currently accessing this page via HTTPS, but the configuration shows as disabled.
|
||
This configuration will be automatically updated. Please refresh the page.
|
||
</p>
|
||
{% else %}
|
||
<p>The application is currently running on HTTP only (port 80)</p>
|
||
<p>Enable HTTPS below to secure your application.</p>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Configuration Form -->
|
||
<div class="card config-card">
|
||
<h2>Configure HTTPS Settings</h2>
|
||
<p class="info-text">
|
||
💡 <strong>Workflow:</strong> First, the app runs on HTTP (port 80). After you configure the HTTPS settings below,
|
||
the application will be available over HTTPS (port 443) using the domain and hostname you specify.
|
||
</p>
|
||
|
||
<form method="POST" action="{{ url_for('admin.update_https_config') }}" class="https-form">
|
||
<!-- Enable HTTPS Toggle -->
|
||
<div class="form-group">
|
||
<label class="toggle-label">
|
||
<input type="checkbox" name="https_enabled" id="https_enabled"
|
||
{% if config and config.https_enabled %}checked{% endif %}
|
||
class="toggle-input">
|
||
<span class="toggle-slider"></span>
|
||
<span class="toggle-text">Enable HTTPS</span>
|
||
</label>
|
||
<p class="form-hint">Check this box to enable HTTPS/SSL for your application</p>
|
||
</div>
|
||
|
||
<!-- Hostname Field -->
|
||
<div class="form-group">
|
||
<label for="hostname">Hostname <span class="required">*</span></label>
|
||
<input type="text" id="hostname" name="hostname"
|
||
value="{{ config.hostname or 'digiserver' }}"
|
||
placeholder="e.g., digiserver"
|
||
class="form-input"
|
||
required>
|
||
<p class="form-hint">Short name for your server (e.g., 'digiserver')</p>
|
||
</div>
|
||
|
||
<!-- Domain Field -->
|
||
<div class="form-group">
|
||
<label for="domain">Full Domain Name <span class="required">*</span></label>
|
||
<input type="text" id="domain" name="domain"
|
||
value="{{ config.domain or 'digiserver.sibiusb.harting.intra' }}"
|
||
placeholder="e.g., digiserver.sibiusb.harting.intra"
|
||
class="form-input"
|
||
required>
|
||
<p class="form-hint">Complete domain name (e.g., digiserver.sibiusb.harting.intra)</p>
|
||
</div>
|
||
|
||
<!-- IP Address Field -->
|
||
<div class="form-group">
|
||
<label for="ip_address">IP Address <span class="required">*</span></label>
|
||
<input type="text" id="ip_address" name="ip_address"
|
||
value="{{ config.ip_address or '10.76.152.164' }}"
|
||
placeholder="e.g., 10.76.152.164"
|
||
class="form-input"
|
||
required>
|
||
<p class="form-hint">Server's IP address for direct access (e.g., 10.76.152.164)</p>
|
||
</div>
|
||
|
||
<!-- Email Field -->
|
||
<div class="form-group">
|
||
<label for="email">Email Address <span class="required">*</span></label>
|
||
<input type="email" id="email" name="email"
|
||
value="{{ config.email or '' }}"
|
||
placeholder="e.g., admin@example.com"
|
||
class="form-input"
|
||
required>
|
||
<p class="form-hint">Email address for SSL certificate notifications and Let's Encrypt communications</p>
|
||
</div>
|
||
|
||
<!-- Port Field -->
|
||
<div class="form-group">
|
||
<label for="port">HTTPS Port</label>
|
||
<input type="number" id="port" name="port"
|
||
value="{{ config.port or 443 }}"
|
||
placeholder="443"
|
||
min="1" max="65535"
|
||
class="form-input">
|
||
<p class="form-hint">Port for HTTPS connections (default: 443)</p>
|
||
</div>
|
||
|
||
<!-- Preview Section -->
|
||
<div class="preview-section">
|
||
<h3>Access Points After Configuration:</h3>
|
||
<ul class="access-points">
|
||
<li>
|
||
<strong>HTTPS (Recommended):</strong>
|
||
<code>https://<span id="preview-domain">digiserver.sibiusb.harting.intra</span></code>
|
||
</li>
|
||
<li>
|
||
<strong>HTTP (Fallback):</strong>
|
||
<code>http://<span id="preview-ip">10.76.152.164</span></code>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Form Actions -->
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary btn-lg">
|
||
💾 Save HTTPS Configuration
|
||
</button>
|
||
<a href="{{ url_for('admin.admin_panel') }}" class="btn btn-secondary">
|
||
Cancel
|
||
</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Nginx Status Card -->
|
||
<div class="card nginx-status-card">
|
||
<h2>🔧 Nginx Reverse Proxy Status</h2>
|
||
{% if nginx_status.available %}
|
||
<div class="nginx-status-content">
|
||
<div class="status-item">
|
||
<strong>Status:</strong>
|
||
<span class="badge badge-success">✅ Nginx Configured</span>
|
||
</div>
|
||
|
||
<div class="status-item">
|
||
<strong>Configuration Path:</strong>
|
||
<code>{{ nginx_status.path }}</code>
|
||
</div>
|
||
|
||
{% if nginx_status.ssl_enabled %}
|
||
<div class="status-item">
|
||
<strong>SSL/TLS:</strong>
|
||
<span class="badge badge-success">🔒 Enabled</span>
|
||
</div>
|
||
{% else %}
|
||
<div class="status-item">
|
||
<strong>SSL/TLS:</strong>
|
||
<span class="badge badge-warning">⚠️ Not Configured</span>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if nginx_status.http_ports %}
|
||
<div class="status-item">
|
||
<strong>HTTP Ports:</strong>
|
||
<code>{{ nginx_status.http_ports|join(', ') }}</code>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if nginx_status.https_ports %}
|
||
<div class="status-item">
|
||
<strong>HTTPS Ports:</strong>
|
||
<code>{{ nginx_status.https_ports|join(', ') }}</code>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if nginx_status.server_names %}
|
||
<div class="status-item">
|
||
<strong>Server Names:</strong>
|
||
{% for name in nginx_status.server_names %}
|
||
<code>{{ name }}</code>{% if not loop.last %}<br>{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if nginx_status.upstream_servers %}
|
||
<div class="status-item">
|
||
<strong>Upstream Servers:</strong>
|
||
{% for server in nginx_status.upstream_servers %}
|
||
<code>{{ server }}</code>{% if not loop.last %}<br>{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if nginx_status.ssl_protocols %}
|
||
<div class="status-item">
|
||
<strong>SSL Protocols:</strong>
|
||
<code>{{ nginx_status.ssl_protocols|join(', ') }}</code>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if nginx_status.client_max_body_size %}
|
||
<div class="status-item">
|
||
<strong>Max Body Size:</strong>
|
||
<code>{{ nginx_status.client_max_body_size }}</code>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if nginx_status.gzip_enabled %}
|
||
<div class="status-item">
|
||
<strong>Gzip Compression:</strong>
|
||
<span class="badge badge-success">✅ Enabled</span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% else %}
|
||
<div class="status-disabled">
|
||
<p>⚠️ <strong>Nginx configuration not accessible</strong></p>
|
||
<p>Error: {{ nginx_status.error|default('Unknown error') }}</p>
|
||
<p style="font-size: 12px; color: #666;">Path checked: {{ nginx_status.path }}</p>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Information Section -->
|
||
<div class="card info-card">
|
||
<h2>ℹ️ Important Information</h2>
|
||
<div class="info-sections">
|
||
<div class="info-section">
|
||
<h3>📝 Before You Start</h3>
|
||
<ul>
|
||
<li>Ensure your DNS is configured to resolve the domain to your server</li>
|
||
<li>Verify the IP address matches your server's actual network interface</li>
|
||
<li>Check that ports 80, 443, and 443/UDP are open for traffic</li>
|
||
</ul>
|
||
</div>
|
||
<div class="info-section">
|
||
<h3>🔐 HTTPS Setup</h3>
|
||
<ul>
|
||
<li>SSL certificates are automatically managed by Caddy</li>
|
||
<li>Certificates are obtained from Let's Encrypt</li>
|
||
<li>Automatic renewal is handled by the system</li>
|
||
</ul>
|
||
</div>
|
||
<div class="info-section">
|
||
<h3>✅ After Configuration</h3>
|
||
<ul>
|
||
<li>Your app will restart with the new settings</li>
|
||
<li>Both HTTP and HTTPS access points will be available</li>
|
||
<li>HTTP requests will be redirected to HTTPS</li>
|
||
<li>Check the status above for current configuration</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.https-config-container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
.page-header {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.back-link {
|
||
display: inline-block;
|
||
margin-bottom: 15px;
|
||
color: #0066cc;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.back-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.status-detection {
|
||
background: #f0f7ff;
|
||
border-left: 4px solid #0066cc;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.detection-info {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.badge-success {
|
||
background: #d1f0e0;
|
||
color: #156b2e;
|
||
}
|
||
|
||
.badge-warning {
|
||
background: #fff3cd;
|
||
color: #856404;
|
||
}
|
||
|
||
.status-card {
|
||
margin-bottom: 30px;
|
||
border-left: 5px solid #ddd;
|
||
}
|
||
|
||
.status-enabled {
|
||
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
border-left: 5px solid #28a745;
|
||
}
|
||
|
||
.status-disabled {
|
||
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
border-left: 5px solid #ffc107;
|
||
}
|
||
|
||
.status-badge {
|
||
display: inline-block;
|
||
background: #28a745;
|
||
color: white;
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.status-badge-inactive {
|
||
display: inline-block;
|
||
background: #ffc107;
|
||
color: #333;
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.status-details {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.status-details p {
|
||
margin: 8px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.status-details code {
|
||
background: rgba(0,0,0,0.1);
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.config-card {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.info-text {
|
||
background: #e7f3ff;
|
||
border-left: 4px solid #0066cc;
|
||
padding: 12px 16px;
|
||
border-radius: 4px;
|
||
margin-bottom: 25px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.https-form {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
}
|
||
|
||
.required {
|
||
color: #dc3545;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.form-input:focus {
|
||
outline: none;
|
||
border-color: #0066cc;
|
||
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
|
||
}
|
||
|
||
.form-hint {
|
||
font-size: 13px;
|
||
color: #666;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* Toggle Switch Styling */
|
||
.toggle-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.toggle-input {
|
||
display: none;
|
||
}
|
||
|
||
.toggle-slider {
|
||
display: inline-block;
|
||
width: 50px;
|
||
height: 28px;
|
||
background: #ccc;
|
||
border-radius: 14px;
|
||
position: relative;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.toggle-slider::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 24px;
|
||
height: 24px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
top: 2px;
|
||
left: 2px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.toggle-input:checked + .toggle-slider {
|
||
background: #28a745;
|
||
}
|
||
|
||
.toggle-input:checked + .toggle-slider::after {
|
||
left: 24px;
|
||
}
|
||
|
||
.toggle-text {
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.preview-section {
|
||
background: #f8f9fa;
|
||
border: 2px dashed #0066cc;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
}
|
||
|
||
.preview-section h3 {
|
||
margin-top: 0;
|
||
color: #0066cc;
|
||
}
|
||
|
||
.access-points {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.access-points li {
|
||
padding: 10px;
|
||
background: white;
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
border-left: 4px solid #0066cc;
|
||
}
|
||
|
||
.access-points code {
|
||
background: #e7f3ff;
|
||
padding: 6px 10px;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
color: #0066cc;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 30px;
|
||
padding-top: 25px;
|
||
border-top: 1px solid #ddd;
|
||
}
|
||
|
||
.btn-lg {
|
||
padding: 12px 30px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.info-card {
|
||
background: linear-gradient(135deg, #e7f3ff 0%, #f0f7ff 100%);
|
||
}
|
||
|
||
.info-card h2 {
|
||
color: #0066cc;
|
||
}
|
||
|
||
.nginx-status-card {
|
||
background: linear-gradient(135deg, #f0f7ff 0%, #e7f3ff 100%);
|
||
border-left: 5px solid #0066cc;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.nginx-status-card h2 {
|
||
color: #0066cc;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.nginx-status-content {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.status-item {
|
||
padding: 12px;
|
||
background: white;
|
||
border-radius: 4px;
|
||
margin-bottom: 10px;
|
||
border-left: 3px solid #0066cc;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.status-item strong {
|
||
display: inline-block;
|
||
min-width: 150px;
|
||
color: #333;
|
||
}
|
||
|
||
.status-item code {
|
||
background: #f0f7ff;
|
||
padding: 4px 8px;
|
||
border-radius: 3px;
|
||
font-family: 'Courier New', monospace;
|
||
color: #0066cc;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.info-sections {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.info-section h3 {
|
||
color: #0066cc;
|
||
margin-top: 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.info-section ul {
|
||
padding-left: 20px;
|
||
margin: 0;
|
||
}
|
||
|
||
.info-section li {
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
color: #555;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.https-config-container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.info-sections {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.form-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.btn-lg {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// Update preview in real-time
|
||
document.getElementById('domain').addEventListener('input', function() {
|
||
document.getElementById('preview-domain').textContent = this.value || 'digiserver.sibiusb.harting.intra';
|
||
});
|
||
|
||
document.getElementById('ip_address').addEventListener('input', function() {
|
||
document.getElementById('preview-ip').textContent = this.value || '10.76.152.164';
|
||
});
|
||
|
||
// Load initial preview
|
||
document.getElementById('preview-domain').textContent = document.getElementById('domain').value || 'digiserver.sibiusb.harting.intra';
|
||
document.getElementById('preview-ip').textContent = document.getElementById('ip_address').value || '10.76.152.164';
|
||
</script>
|
||
{% endblock %}
|