Christian Krakau-Louis
450 lines
25 KiB
HTML
450 lines
25 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}System Status{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold mb-2">System Status</h1>
|
|
<p class="text-gray-600">
|
|
This dashboard shows the status of all configured integrations and targets.
|
|
</p>
|
|
<div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 my-4" role="alert">
|
|
<p><strong>App Version:</strong> {{ app_version }}</p>
|
|
<p><strong>Debug Mode:</strong> {{ "Enabled" if debug_enabled else "Disabled" }}</p>
|
|
{% if last_check %}
|
|
<p><strong>Last Check:</strong> {{ last_check }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{% for name, provider in providers.items() %}
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:px-6 flex justify-between items-center">
|
|
<div class="flex items-center">
|
|
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md {{ 'bg-green-500' if provider.configured else 'bg-gray-400' }} text-white mr-3">
|
|
<!-- Use appropriate icon based on provider -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
{% if provider.icon == "mail" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
{% elif provider.icon == "cloud" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
|
{% elif provider.icon == "dropbox" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
{% elif provider.icon == "file-text" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
{% elif provider.icon == "server" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
|
{% elif provider.icon == "database" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
|
|
{% elif provider.icon == "hard-drive" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12h18M3 6h18M3 18h18" />
|
|
{% elif provider.icon == "globe" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
{% elif provider.icon == "google" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
{% elif provider.icon == "microsoft" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
|
|
{% elif provider.icon == "activity" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
{% elif provider.icon == "ftp" %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l-6-6 6-6M2 10h16m4 0l-6 6m0-12l6 6" />
|
|
{% else %}
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
{% endif %}
|
|
</svg>
|
|
</span>
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">{{ name }}</h3>
|
|
</div>
|
|
{% if provider.configured %}
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
|
Configured
|
|
</span>
|
|
{% else %}
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
|
|
Not Configured
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="border-t border-gray-200">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<p class="text-sm text-gray-500">{{ provider.description }}</p>
|
|
|
|
<!-- NextCloud or link to provider URL -->
|
|
{% if provider.configured and name == "NextCloud" %}
|
|
{% if provider.details and provider.details.url %}
|
|
{% set nextcloud_base_url = provider.details.url.split('/remote.php')[0] %}
|
|
<div class="mt-3">
|
|
<a href="{{ nextcloud_base_url }}" target="_blank" class="text-sm text-blue-600 hover:text-blue-800">
|
|
{{ nextcloud_base_url|truncate(30) }} <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% elif provider.url and provider.configured %}
|
|
<div class="mt-3">
|
|
<a href="{{ provider.url }}" target="_blank" class="text-sm text-blue-600 hover:text-blue-800">
|
|
{{ provider.url|truncate(30) }} <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mt-4 flex items-center justify-between">
|
|
<div>
|
|
{% if provider.configured %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800">
|
|
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-green-400" fill="currentColor" viewBox="0 0 8 8">
|
|
<circle cx="4" cy="4" r="3" />
|
|
</svg>
|
|
Active
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-100 text-gray-800">
|
|
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-gray-400" fill="currentColor" viewBox="0 0 8 8">
|
|
<circle cx="4" cy="4" r="3" />
|
|
</svg>
|
|
Inactive
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="flex space-x-2">
|
|
{% if provider.configured and provider.details %}
|
|
<button
|
|
class="view-details-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
data-provider="{{ name }}"
|
|
data-details="{{ provider.details|tojson|forceescape }}">
|
|
View Details
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if name == "Dropbox" %}
|
|
{% if provider.configured %}
|
|
<button
|
|
class="test-provider-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
data-provider="dropbox">
|
|
Test Connection
|
|
</button>
|
|
<a href="/dropbox-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Manage
|
|
</a>
|
|
{% else %}
|
|
<a href="/dropbox-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
Configure Now
|
|
</a>
|
|
{% endif %}
|
|
{% elif name == "OneDrive" %}
|
|
{% if provider.configured %}
|
|
<button
|
|
class="test-provider-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
data-provider="onedrive">
|
|
Test Connection
|
|
</button>
|
|
<a href="/onedrive-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Manage
|
|
</a>
|
|
{% else %}
|
|
<a href="/onedrive-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
Configure Now
|
|
</a>
|
|
{% endif %}
|
|
{% elif provider.configured and name == "Paperless-ngx" %}
|
|
<a href="{{ provider.details.host }}" target="_blank" class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
Open
|
|
</a>
|
|
{% elif provider.configured and name == "NextCloud" %}
|
|
{% if provider.details and provider.details.url %}
|
|
{% set nextcloud_base_url = provider.details.url.split('/remote.php')[0] %}
|
|
<a href="{{ nextcloud_base_url }}" target="_blank" class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
Open
|
|
</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="mt-8 bg-gray-50 p-4 rounded-lg border border-gray-200">
|
|
<h3 class="text-lg font-medium text-gray-900">Configuration Settings</h3>
|
|
<p class="text-sm text-gray-600 mt-1">
|
|
For more detailed configuration settings and environment variables, check the environment debug page.
|
|
</p>
|
|
|
|
<div class="mt-4">
|
|
<a href="/env" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
View Detailed Configuration
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result Modal -->
|
|
<div id="resultModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50" aria-modal="true" role="dialog">
|
|
<div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
|
|
<div class="mt-3 text-center">
|
|
<div id="modalIcon" class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
|
|
<!-- Icon will be injected by JS -->
|
|
</div>
|
|
<h3 id="modalTitle" class="text-lg leading-6 font-medium text-gray-900">Success</h3>
|
|
<div class="mt-2 px-7 py-3">
|
|
<p id="modalMessage" class="text-sm text-gray-500">
|
|
Operation completed successfully.
|
|
</p>
|
|
</div>
|
|
<div class="items-center px-4 py-3">
|
|
<button id="modalClose" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Details Modal -->
|
|
<div id="detailsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50" aria-modal="true" role="dialog">
|
|
<div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white">
|
|
<div class="absolute top-0 right-0 pt-4 pr-4">
|
|
<button type="button" id="closeDetailsModal" class="text-gray-400 hover:text-gray-500">
|
|
<span class="sr-only">Close</span>
|
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="mt-3">
|
|
<h3 id="detailsModalTitle" class="text-lg leading-6 font-medium text-gray-900 mb-4">Provider Details</h3>
|
|
<div class="mt-4">
|
|
<dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
|
|
<div id="detailsContent" class="col-span-2">
|
|
<!-- Details will be populated by JavaScript -->
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
<div class="mt-6 flex justify-end">
|
|
<button type="button" id="closeDetailsBtn" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Modal elements
|
|
const resultModal = document.getElementById('resultModal');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const modalMessage = document.getElementById('modalMessage');
|
|
const modalIcon = document.getElementById('modalIcon');
|
|
const modalClose = document.getElementById('modalClose');
|
|
|
|
// Details Modal elements
|
|
const detailsModal = document.getElementById('detailsModal');
|
|
const detailsModalTitle = document.getElementById('detailsModalTitle');
|
|
const detailsContent = document.getElementById('detailsContent');
|
|
const closeDetailsModal = document.getElementById('closeDetailsModal');
|
|
const closeDetailsBtn = document.getElementById('closeDetailsBtn');
|
|
|
|
// Modal functions
|
|
function showModal(status, title, message) {
|
|
modalTitle.textContent = title;
|
|
modalMessage.textContent = message;
|
|
|
|
// Set the appropriate icon
|
|
if (status === 'success') {
|
|
modalIcon.innerHTML = `
|
|
<svg class="h-6 w-6 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
`;
|
|
modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4';
|
|
} else {
|
|
modalIcon.innerHTML = `
|
|
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
`;
|
|
modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4';
|
|
}
|
|
|
|
resultModal.classList.remove('hidden');
|
|
}
|
|
|
|
function hideModal() {
|
|
resultModal.classList.add('hidden');
|
|
}
|
|
|
|
function showDetailsModal(providerName, details) {
|
|
detailsModalTitle.textContent = providerName + ' Configuration Details';
|
|
|
|
// Clear previous content
|
|
detailsContent.innerHTML = '';
|
|
|
|
// Create and populate the details list
|
|
if (details && Object.keys(details).length > 0) {
|
|
const table = document.createElement('table');
|
|
table.className = 'min-w-full divide-y divide-gray-200';
|
|
|
|
const thead = document.createElement('thead');
|
|
thead.className = 'bg-gray-50';
|
|
thead.innerHTML = `
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Setting</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
|
|
</tr>
|
|
`;
|
|
|
|
const tbody = document.createElement('tbody');
|
|
tbody.className = 'bg-white divide-y divide-gray-200';
|
|
|
|
let count = 0;
|
|
for (const [key, value] of Object.entries(details)) {
|
|
const row = document.createElement('tr');
|
|
row.className = count % 2 === 0 ? 'bg-white' : 'bg-gray-50';
|
|
|
|
const keyCell = document.createElement('td');
|
|
keyCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900';
|
|
keyCell.textContent = key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ');
|
|
|
|
const valueCell = document.createElement('td');
|
|
valueCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
|
|
|
|
// Check if value contains sensitive information that should be masked
|
|
const sensitiveKeys = ['token', 'password', 'secret', 'key', 'credentials'];
|
|
const isSensitive = sensitiveKeys.some(sKey => key.toLowerCase().includes(sKey));
|
|
|
|
if (isSensitive && value !== 'Not set' && value !== '') {
|
|
valueCell.textContent = value.slice(4) + '********' + value.slice(-4);
|
|
// For better readability, we can also use HTML to mask the middle part of the string
|
|
valueCell.innerHTML = value.slice(0, 4) + '<span class="text-gray-400">********</span>' + value.slice(-4);
|
|
} else {
|
|
valueCell.textContent = value;
|
|
}
|
|
|
|
row.appendChild(keyCell);
|
|
row.appendChild(valueCell);
|
|
tbody.appendChild(row);
|
|
count++;
|
|
}
|
|
|
|
table.appendChild(thead);
|
|
table.appendChild(tbody);
|
|
detailsContent.appendChild(table);
|
|
} else {
|
|
detailsContent.innerHTML = '<p class="text-sm text-gray-500">No details available</p>';
|
|
}
|
|
|
|
detailsModal.classList.remove('hidden');
|
|
}
|
|
|
|
function hideDetailsModal() {
|
|
detailsModal.classList.add('hidden');
|
|
}
|
|
|
|
// Close modal when clicking the close button
|
|
modalClose.addEventListener('click', hideModal);
|
|
|
|
// Close modal when clicking outside of it
|
|
resultModal.addEventListener('click', function(e) {
|
|
if (e.target === resultModal) {
|
|
hideModal();
|
|
}
|
|
});
|
|
|
|
// Close details modal
|
|
closeDetailsModal.addEventListener('click', hideDetailsModal);
|
|
closeDetailsBtn.addEventListener('click', hideDetailsModal);
|
|
|
|
// Close details modal when clicking outside
|
|
detailsModal.addEventListener('click', function(e) {
|
|
if (e.target === detailsModal) {
|
|
hideDetailsModal();
|
|
}
|
|
});
|
|
|
|
// View Details button handlers
|
|
const detailsButtons = document.querySelectorAll('.view-details-btn');
|
|
detailsButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const providerName = this.getAttribute('data-provider');
|
|
let detailsData = {};
|
|
|
|
try {
|
|
detailsData = JSON.parse(this.getAttribute('data-details'));
|
|
} catch (e) {
|
|
console.error('Error parsing details data:', e);
|
|
}
|
|
|
|
showDetailsModal(providerName, detailsData);
|
|
});
|
|
});
|
|
|
|
// Test provider connections
|
|
const testButtons = document.querySelectorAll('.test-provider-btn');
|
|
testButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const provider = this.getAttribute('data-provider');
|
|
const originalText = this.textContent;
|
|
|
|
this.innerHTML = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-indigo-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Testing...';
|
|
this.disabled = true;
|
|
|
|
let endpoint = '';
|
|
if (provider === 'dropbox') {
|
|
endpoint = '/api/dropbox/test-token';
|
|
} else if (provider === 'onedrive') {
|
|
endpoint = '/api/onedrive/test-token';
|
|
}
|
|
|
|
fetch(endpoint)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
showModal('success', 'Connection Test Successful', `${data.message} ${data.account ? 'as ' + data.account : ''}`);
|
|
} else {
|
|
if (data.needs_reauth) {
|
|
showModal('error', 'Authentication Required', 'Your token has expired or is invalid. Please reconfigure this connection.');
|
|
// Add option to go to config page
|
|
modalClose.textContent = "Configure Now";
|
|
modalClose.addEventListener('click', function redirectToConfig() {
|
|
window.location.href = `/${provider}-setup`;
|
|
modalClose.removeEventListener('click', redirectToConfig);
|
|
}, { once: true });
|
|
} else {
|
|
showModal('error', 'Connection Test Failed', data.message);
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showModal('error', 'Connection Error', 'Error testing connection: ' + error.message);
|
|
})
|
|
.finally(() => {
|
|
this.textContent = originalText;
|
|
this.disabled = false;
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|