Files
docupulse/templates/settings/tabs/connections.html

189 lines
12 KiB
HTML

{% from "settings/components/connection_modals.html" import connection_modals %}
{% macro connections_tab(portainer_settings, nginx_settings, site_settings, git_settings) %}
<!-- Meta tags for JavaScript -->
<meta name="management-api-key" content="{{ site_settings.management_api_key }}">
<meta name="git-settings" content="{{ git_settings|tojson|safe }}">
<div class="container-fluid">
<div class="row">
<!-- Portainer Connection Card -->
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">
<i class="fas fa-server me-2"></i>Portainer Connection
</h5>
<button class="btn btn-sm btn-outline-primary" onclick="testPortainerConnection()">
<i class="fas fa-plug me-1"></i>Test Connection
</button>
</div>
<div class="card-body">
<form id="portainerForm" onsubmit="savePortainerConnection(event)">
<div class="mb-3">
<label for="portainerUrl" class="form-label">Portainer Server URL</label>
<input type="url" class="form-control" id="portainerUrl" name="portainerUrl"
placeholder="https://portainer.example.com" required
value="{{ portainer_settings.url if portainer_settings and portainer_settings.url else '' }}">
<div class="form-text">The URL of your Portainer server</div>
</div>
<div class="mb-3">
<label for="portainerApiKey" class="form-label">API Key</label>
<input type="password" class="form-control" id="portainerApiKey" name="portainerApiKey"
placeholder="Enter your Portainer API key" required
value="{{ portainer_settings.api_key if portainer_settings and portainer_settings.api_key else '' }}">
<div class="form-text">You can generate this in your Portainer user settings</div>
</div>
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save me-1"></i>Save Portainer Settings
</button>
</div>
</form>
</div>
</div>
</div>
<!-- NGINX Connection Card -->
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">
<i class="fas fa-globe me-2"></i>NGINX Connection
</h5>
<button class="btn btn-sm btn-outline-primary" onclick="testNginxConnection()">
<i class="fas fa-plug me-1"></i>Test Connection
</button>
</div>
<div class="card-body">
<form id="nginxForm" onsubmit="saveNginxConnection(event)">
<div class="mb-3">
<label for="nginxUrl" class="form-label">NGINX Proxy Manager URL</label>
<input type="url" class="form-control" id="nginxUrl" name="nginxUrl"
placeholder="https://nginx.example.com" required
value="{{ nginx_settings.url if nginx_settings and nginx_settings.url else '' }}">
<div class="form-text">The URL of your NGINX Proxy Manager instance</div>
</div>
<div class="mb-3">
<label for="nginxUsername" class="form-label">Username</label>
<input type="text" class="form-control" id="nginxUsername" name="nginxUsername"
placeholder="Enter your NGINX Proxy Manager username" required
value="{{ nginx_settings.username if nginx_settings and nginx_settings.username else '' }}">
</div>
<div class="mb-3">
<label for="nginxPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="nginxPassword" name="nginxPassword"
placeholder="Enter your NGINX Proxy Manager password" required
value="{{ nginx_settings.password if nginx_settings and nginx_settings.password else '' }}">
</div>
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save me-1"></i>Save NGINX Settings
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Gitea Connection Card -->
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">
<i class="fas fa-code-branch me-2"></i>Gitea Connection
</h5>
<button class="btn btn-sm btn-outline-primary" onclick="testGitConnection('gitea')">
<i class="fas fa-plug me-1"></i>Test Connection
</button>
</div>
<div class="card-body">
<form id="giteaForm" onsubmit="saveGitConnection(event, 'gitea')">
<div class="mb-3">
<label for="giteaUrl" class="form-label">Gitea Server URL</label>
<input type="url" class="form-control" id="giteaUrl" name="giteaUrl"
placeholder="https://gitea.example.com" required
value="{{ git_settings.url if git_settings and git_settings.provider == 'gitea' and git_settings.url else '' }}">
<div class="form-text">The URL of your Gitea server</div>
</div>
<div class="mb-3">
<label for="giteaUsername" class="form-label">Username</label>
<input type="text" class="form-control" id="giteaUsername" name="giteaUsername"
placeholder="Enter your Gitea username" required
value="{{ git_settings.username if git_settings and git_settings.provider == 'gitea' and git_settings.username else '' }}">
</div>
<div class="mb-3">
<label for="giteaPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="giteaPassword" name="giteaPassword"
placeholder="Enter your Gitea password"
value="{{ git_settings.password if git_settings and git_settings.provider == 'gitea' and git_settings.password else '' }}">
<div class="form-text">Required for token generation if you don't have an existing token</div>
</div>
<div class="mb-3">
<label for="giteaOtp" class="form-label">Two-Factor Code (if enabled)</label>
<input type="text" class="form-control" id="giteaOtp" name="giteaOtp"
placeholder="Enter 2FA code if enabled">
<div class="form-text">Required if you have two-factor authentication enabled</div>
</div>
<div class="mb-3">
<label for="giteaToken" class="form-label">Access Token</label>
<div class="input-group">
<input type="password" class="form-control" id="giteaToken" name="giteaToken"
placeholder="Enter your Gitea access token" required
value="{{ git_settings.token if git_settings and git_settings.provider == 'gitea' and git_settings.token else '' }}">
<button class="btn btn-outline-secondary" type="button" onclick="generateGiteaToken()">
<i class="fas fa-key me-1"></i>Generate Token
</button>
</div>
<div class="form-text">You can generate a new token or use an existing one</div>
</div>
<div class="mb-3">
<label for="giteaRepo" class="form-label">Repository</label>
<div class="input-group">
<select class="form-select" id="giteaRepo" name="giteaRepo" required>
<option value="">Select a repository</option>
{% if git_settings and git_settings.provider == 'gitea' and git_settings.repo %}
<option value="{{ git_settings.repo }}" selected>{{ git_settings.repo }}</option>
{% endif %}
</select>
<button class="btn btn-outline-secondary" type="button" onclick="loadGiteaRepos()">
<i class="fas fa-sync-alt"></i>
</button>
</div>
<div class="form-text">Select the repository to connect to</div>
</div>
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save me-1"></i>Save Gitea Settings
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Save Connection Modal -->
<div class="modal fade" id="saveConnectionModal" tabindex="-1" aria-labelledby="saveConnectionModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="saveConnectionModalLabel">Save Connection</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p id="saveConnectionMessage"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
{{ connection_modals() }}
<!-- Load JavaScript -->
<script src="{{ url_for('static', filename='js/settings/connections.js') }}?v={{ 'js/settings/connections.js'|asset_version }}"></script>
{% endmacro %}