253 lines
13 KiB
HTML
253 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}S3 Configuration - HKFC Men's C Team{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<style>
|
|
.config-section {
|
|
background-color: #f8f9fa;
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.help-text {
|
|
font-size: 0.875rem;
|
|
color: #6c757d;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="POST">
|
|
{{ form.hidden_tag() }}
|
|
|
|
<!-- Enable S3 Section -->
|
|
<div class="config-section">
|
|
<h4>Storage Configuration</h4>
|
|
<div class="form-check form-switch mb-3">
|
|
{{ form.enable_s3(class="form-check-input") }}
|
|
{{ form.enable_s3.label(class="form-check-label") }}
|
|
<div class="help-text">When enabled, logos and assets will be served from S3. When disabled, local static files will be used.</div>
|
|
</div>
|
|
|
|
<div class="form-check form-switch mb-3">
|
|
{{ form.fallback_to_static(class="form-check-input") }}
|
|
{{ form.fallback_to_static.label(class="form-check-label") }}
|
|
<div class="help-text">If S3 is unavailable, fallback to local static files.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Storage Provider Section -->
|
|
<div class="config-section">
|
|
<h4>Storage Provider</h4>
|
|
<div class="mb-3">
|
|
{{ form.storage_provider.label(class="form-label") }}
|
|
{{ form.storage_provider(class="form-select") }}
|
|
<div class="help-text">Choose between AWS S3 or MinIO (self-hosted S3-compatible storage).</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Credentials Section -->
|
|
<div class="config-section">
|
|
<h4>Access Credentials</h4>
|
|
<div class="alert alert-warning" role="alert">
|
|
<strong>🔒 Security Notice:</strong> For security reasons, credentials are <strong>NOT</strong> saved to the database.
|
|
<ul class="mb-0 mt-2">
|
|
<li><strong>Local Development:</strong> Credentials entered here are saved to the <code>s3_config.json</code> file.</li>
|
|
<li><strong>Production/Kubernetes:</strong> Credentials MUST be provided via environment variables (<code>S3_ACCESS_KEY_ID</code> and <code>S3_SECRET_ACCESS_KEY</code>), typically from Kubernetes secrets.</li>
|
|
<li>Only bucket settings and configuration options are saved to the database.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
{{ form.aws_access_key_id.label(class="form-label") }}
|
|
{{ form.aws_access_key_id(class="form-control", placeholder="AKIA...") }}
|
|
<div class="help-text">Your Access Key ID (AWS or MinIO)</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
{{ form.aws_secret_access_key.label(class="form-label") }}
|
|
{{ form.aws_secret_access_key(class="form-control", placeholder="Enter secret key") }}
|
|
<div class="help-text">Your Secret Access Key (AWS or MinIO)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
{{ form.aws_region.label(class="form-label") }}
|
|
{{ form.aws_region(class="form-control") }}
|
|
<div class="help-text">Region (AWS) or leave default for MinIO</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MinIO Configuration Section -->
|
|
<div class="config-section" id="minio-config" style="display: none;">
|
|
<h4>MinIO Configuration</h4>
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="mb-3">
|
|
{{ form.minio_endpoint.label(class="form-label") }}
|
|
{{ form.minio_endpoint(class="form-control", placeholder="minio.example.com:9000") }}
|
|
<div class="help-text">MinIO server endpoint (hostname:port)</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
{{ form.minio_use_ssl(class="form-check-input") }}
|
|
{{ form.minio_use_ssl.label(class="form-check-label") }}
|
|
</div>
|
|
<div class="help-text">Enable SSL/TLS for MinIO connection</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- S3 Bucket Configuration -->
|
|
<div class="config-section">
|
|
<h4>S3 Bucket Configuration</h4>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
{{ form.bucket_name.label(class="form-label") }}
|
|
{{ form.bucket_name(class="form-control", placeholder="my-motm-assets") }}
|
|
<div class="help-text">Name of your S3 bucket</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
{{ form.bucket_prefix.label(class="form-label") }}
|
|
{{ form.bucket_prefix(class="form-control") }}
|
|
<div class="help-text">Prefix for objects in the bucket (e.g., motm-assets/)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- URL Configuration -->
|
|
<div class="config-section">
|
|
<h4>URL Configuration</h4>
|
|
<div class="form-check form-switch mb-3">
|
|
{{ form.use_signed_urls(class="form-check-input") }}
|
|
{{ form.use_signed_urls.label(class="form-check-label") }}
|
|
<div class="help-text">Use signed URLs for secure access to private objects. If disabled, objects must be public.</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
{{ form.signed_url_expiry.label(class="form-label") }}
|
|
{{ form.signed_url_expiry(class="form-control") }}
|
|
<div class="help-text">How long signed URLs remain valid (in seconds)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="d-flex gap-2">
|
|
{{ form.test_connection(class="btn btn-info") }}
|
|
{{ form.save_config(class="btn btn-primary") }}
|
|
{{ form.cancel(class="btn btn-secondary") }}
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Current Configuration Display -->
|
|
<div class="config-section mt-4">
|
|
<h4>Current Configuration</h4>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<strong>S3 Status:</strong>
|
|
<span class="badge bg-{{ 'success' if current_config.get('enable_s3') else 'secondary' }}">
|
|
{{ 'Enabled' if current_config.get('enable_s3') else 'Disabled' }}
|
|
</span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<strong>Bucket:</strong> {{ current_config.get('bucket_name', 'Not configured') }}
|
|
</div>
|
|
</div>
|
|
<div class="row mt-2">
|
|
<div class="col-md-6">
|
|
<strong>Region:</strong> {{ current_config.get('aws_region', 'Not configured') }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<strong>Signed URLs:</strong>
|
|
<span class="badge bg-{{ 'success' if current_config.get('use_signed_urls') else 'secondary' }}">
|
|
{{ 'Enabled' if current_config.get('use_signed_urls') else 'Disabled' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Section -->
|
|
<div class="config-section mt-4">
|
|
<h4>Setup Instructions</h4>
|
|
<ol>
|
|
<li><strong>Create S3 Bucket:</strong> Create an S3 bucket in your AWS account</li>
|
|
<li><strong>Set Permissions:</strong> Configure bucket permissions for your access key</li>
|
|
<li><strong>Upload Assets:</strong> Upload your logos and assets to the bucket</li>
|
|
<li><strong>Configure Here:</strong> Enter your credentials and bucket details above</li>
|
|
<li><strong>Test Connection:</strong> Use the "Test S3 Connection" button to verify</li>
|
|
<li><strong>Save Configuration:</strong> Save your settings to enable S3 storage</li>
|
|
</ol>
|
|
|
|
<div class="alert alert-info">
|
|
<h6>Asset Organization</h6>
|
|
<p>Organize your assets in the S3 bucket as follows:</p>
|
|
<ul class="mb-0">
|
|
<li><code>assets/images/clubs/</code> - Club logos</li>
|
|
<li><code>assets/images/</code> - General images</li>
|
|
<li><code>assets/logos/</code> - Alternative logo location</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
// Show/hide MinIO configuration based on storage provider selection
|
|
function toggleMinioConfig() {
|
|
const storageProvider = document.getElementById('storage_provider');
|
|
const minioConfig = document.getElementById('minio-config');
|
|
|
|
if (storageProvider.value === 'minio') {
|
|
minioConfig.style.display = 'block';
|
|
} else {
|
|
minioConfig.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
toggleMinioConfig();
|
|
|
|
// Add event listener for storage provider changes
|
|
const storageProviderSelect = document.getElementById('storage_provider');
|
|
if (storageProviderSelect) {
|
|
storageProviderSelect.addEventListener('change', toggleMinioConfig);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|