gitea-admin/gh-christianlouis-docuelevate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): localize status page with i18n translations

Browse Source 
Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-03-15 15:56:55 +00:00
parent 19b7eb2ae8
commit e46dadbf45
2 changed files with 200 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/templates/status_dashboard.html
+121 -91
View File
@@ -1,5 +1,5 @@
{% extends "base.html" %}
{% block title %}System Status{% endblock %}
{% block title %}{{ _("status.page_title") }}{% endblock %}
{% block head %}
<!-- Font Awesome is loaded in base.html -->
@@ -8,25 +8,25 @@
{% 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>
<h1 class="text-3xl font-bold mb-2">{{ _("status.page_title") }}</h1>
<p class="text-gray-600">
This dashboard shows the status of all configured integrations and targets.
{{ _("status.dashboard_subtitle") }}
</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 }}{% if release_name %} <span class="italic">"{{ release_name }}"</span>{% endif %}</p>
<p><strong>Build Date:</strong> {{ build_date }}</p>
<p><strong>Debug Mode:</strong> {{ "Enabled" if debug_enabled else "Disabled" }}</p>
<p><strong>{{ _("status.app_version") }}:</strong> {{ app_version }}{% if release_name %} <span class="italic">"{{ release_name }}"</span>{% endif %}</p>
<p><strong>{{ _("status.build_date") }}:</strong> {{ build_date }}</p>
<p><strong>{{ _("status.debug_mode") }}:</strong> {{ _("common.enabled") if debug_enabled else _("common.disabled") }}</p>
{% if last_check %}
<p><strong>Last Check:</strong> {{ last_check }}</p>
<p><strong>{{ _("status.last_check") }}:</strong> {{ last_check }}</p>
{% endif %}
{% if container_info.is_docker %}
<p><strong>Container ID:</strong> {{ container_info.id }}</p>
<p><strong>{{ _("status.container_id") }}:</strong> {{ container_info.id }}</p>
{% endif %}
{% if container_info.git_sha and container_info.git_sha != 'Unknown' %}
<p><strong>Git Commit:</strong> {{ container_info.git_sha }}</p>
<p><strong>{{ _("status.git_commit") }}:</strong> {{ container_info.git_sha }}</p>
{% endif %}
{% if container_info.runtime_info %}
<p><strong>Container Started:</strong> {{ container_info.runtime_info }}</p>
<p><strong>{{ _("status.container_started") }}:</strong> {{ container_info.runtime_info }}</p>
{% endif %}
</div>
</div>
@@ -44,11 +44,11 @@
</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
{{ _("status.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
{{ _("status.not_configured") }}
</span>
{% endif %}
</div>
@@ -81,14 +81,14 @@
<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
{{ _("status.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
{{ _("status.inactive") }}
</span>
{% endif %}
</div>
@@ -100,7 +100,7 @@
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
{{ _("status.view_details") }}
</button>
{% endif %}
@@ -111,7 +111,7 @@
class="test-generic-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-endpoint="{{ provider.test_endpoint }}"
data-method="POST">
Test Notifications
{{ _("status.test_notifications") }}
</button>
{% endif %}
@@ -121,7 +121,7 @@
class="test-generic-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-endpoint="{{ provider.test_endpoint }}"
data-method="{{ provider.test_method|default('GET') }}">
Test {{ name }}
{{ _("status.test_provider", name=name) }}
</button>
{% endif %}
@@ -131,15 +131,15 @@
<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
{{ _("status.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">
<i class="fa-solid fa-gear h-3 w-3 mr-1"></i>
Manage
<i class="fa-solid fa-gear h-3 w-3 mr-1" aria-hidden="true"></i>
{{ _("status.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
{{ _("status.configure_now") }}
</a>
{% endif %}
{% elif name == "OneDrive" %}
@@ -147,15 +147,15 @@
<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
{{ _("status.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">
<i class="fa-solid fa-gear h-3 w-3 mr-1"></i>
Manage
<i class="fa-solid fa-gear h-3 w-3 mr-1" aria-hidden="true"></i>
{{ _("status.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
{{ _("status.configure_now") }}
</a>
{% endif %}
{% elif name == "Google Drive" %}
@@ -163,15 +163,15 @@
<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="google_drive">
Test Connection
{{ _("status.test_connection") }}
</button>
<a href="/google-drive-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">
<i class="fa-solid fa-gear h-3 w-3 mr-1"></i>
Manage
<i class="fa-solid fa-gear h-3 w-3 mr-1" aria-hidden="true"></i>
{{ _("status.manage") }}
</a>
{% else %}
<a href="/google-drive-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
{{ _("status.configure_now") }}
</a>
{% endif %}
{% elif name == "AI Provider" %}
@@ -179,13 +179,13 @@
<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="ai_provider">
Test Connection
{{ _("status.test_connection") }}
</button>
<button
id="testAiExtractionBtn"
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">
<i class="fa-solid fa-flask mr-1"></i>
Test Extraction
<i class="fa-solid fa-flask mr-1" aria-hidden="true"></i>
{{ _("status.test_extraction") }}
</button>
{% endif %}
{% elif name == "Azure AI" %}
@@ -193,20 +193,20 @@
<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="azure">
Test Connection
{{ _("status.test_connection") }}
</button>
{% 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">
<i class="fa-solid fa-external-link h-3 w-3 mr-1"></i>
Open
<i class="fa-solid fa-external-link h-3 w-3 mr-1" aria-hidden="true"></i>
{{ _("status.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">
<i class="fa-solid fa-external-link h-3 w-3 mr-1"></i>
Open
<i class="fa-solid fa-external-link h-3 w-3 mr-1" aria-hidden="true"></i>
{{ _("status.open") }}
</a>
{% endif %}
{% endif %}
@@ -219,14 +219,14 @@
</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>
<h3 class="text-lg font-medium text-gray-900">{{ _("status.config_settings") }}</h3>
<p class="text-sm text-gray-600 mt-1">
For more detailed configuration settings and environment variables, check the settings page.
{{ _("status.config_settings_desc") }}
</p>
<div class="mt-4">
<a href="/settings" 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
{{ _("status.view_config") }}
</a>
</div>
</div>
@@ -238,15 +238,15 @@
<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>
<h3 id="modalTitle" class="text-lg leading-6 font-medium text-gray-900">{{ _("status.modal_default_title") }}</h3>
<div class="mt-2 px-7 py-3">
<p id="modalMessage" class="text-sm text-gray-500">
Operation completed successfully.
{{ _("status.modal_default_message") }}
</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
{{ _("common.close") }}
</button>
</div>
</div>
@@ -258,12 +258,12 @@
<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>
<i class="fa-solid fa-xmark h-6 w-6"></i>
<span class="sr-only">{{ _("common.close") }}</span>
<i class="fa-solid fa-xmark h-6 w-6" aria-hidden="true"></i>
</button>
</div>
<div class="mt-3">
<h3 id="detailsModalTitle" class="text-lg leading-6 font-medium text-gray-900 mb-4">Provider Details</h3>
<h3 id="detailsModalTitle" class="text-lg leading-6 font-medium text-gray-900 mb-4">{{ _("status.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">
@@ -273,7 +273,7 @@
</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
{{ _("common.close") }}
</button>
</div>
</div>
@@ -285,35 +285,34 @@
<div class="relative top-10 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-2/3 xl:w-1/2 shadow-lg rounded-md bg-white">
<div class="absolute top-0 right-0 pt-4 pr-4">
<button type="button" id="closeAiExtractionModal" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Close</span>
<i class="fa-solid fa-xmark h-6 w-6"></i>
<span class="sr-only">{{ _("common.close") }}</span>
<i class="fa-solid fa-xmark h-6 w-6" aria-hidden="true"></i>
</button>
</div>
<div class="mt-3">
<h3 id="aiExtractionModalTitle" class="text-lg leading-6 font-medium text-gray-900 mb-1">
<i class="fa-solid fa-flask mr-2 text-indigo-600"></i>AI Extraction Test
<i class="fa-solid fa-flask mr-2 text-indigo-600" aria-hidden="true"></i>{{ _("status.ai_extraction_title") }}
</h3>
<p class="text-sm text-gray-500 mb-4">
Paste the plain-text content of a document below and run it through the configured AI provider
to inspect the raw response, extracted JSON, and tags.
{{ _("status.ai_extraction_desc") }}
</p>
<!-- Input area -->
<div id="aiExtractionInput">
<label for="aiExtractionText" class="block text-sm font-medium text-gray-700 mb-1">Document Text</label>
<label for="aiExtractionText" class="block text-sm font-medium text-gray-700 mb-1">{{ _("status.ai_extraction_label") }}</label>
<textarea
id="aiExtractionText"
rows="10"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-mono focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
placeholder="Paste the plain-text content of your document here…"></textarea>
placeholder="{{ _('status.ai_extraction_placeholder') }}"></textarea>
<div class="mt-3 flex justify-end space-x-2">
<button type="button" id="cancelAiExtractionBtn"
class="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Cancel
{{ _("common.cancel") }}
</button>
<button type="button" id="runAiExtractionBtn"
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">
<i class="fa-solid fa-play mr-2"></i>Run Extraction
<i class="fa-solid fa-play mr-2" aria-hidden="true"></i>{{ _("status.run_extraction") }}
</button>
</div>
</div>
@@ -328,30 +327,30 @@
<!-- Raw response -->
<div>
<h4 class="text-sm font-medium text-gray-900 mb-1">Raw LLM Response</h4>
<h4 class="text-sm font-medium text-gray-900 mb-1">{{ _("status.raw_llm_response") }}</h4>
<pre id="aiRawResponse" class="bg-gray-50 border border-gray-200 rounded p-3 text-xs overflow-auto max-h-48 whitespace-pre-wrap break-words"></pre>
</div>
<!-- Parsed JSON -->
<div id="aiParsedJsonSection">
<h4 class="text-sm font-medium text-gray-900 mb-1">Parsed JSON</h4>
<h4 class="text-sm font-medium text-gray-900 mb-1">{{ _("status.parsed_json_label") }}</h4>
<pre id="aiParsedJson" class="bg-gray-50 border border-gray-200 rounded p-3 text-xs overflow-auto max-h-64 whitespace-pre-wrap break-words"></pre>
</div>
<!-- Tags -->
<div id="aiTagsSection">
<h4 class="text-sm font-medium text-gray-900 mb-1">Extracted Tags</h4>
<h4 class="text-sm font-medium text-gray-900 mb-1">{{ _("status.extracted_tags") }}</h4>
<div id="aiTags" class="flex flex-wrap gap-2"></div>
</div>
<div class="flex justify-end space-x-2 pt-2">
<button type="button" id="aiExtractionBackBtn"
class="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<i class="fa-solid fa-arrow-left mr-1"></i>Back
<i class="fa-solid fa-arrow-left mr-1" aria-hidden="true"></i>{{ _("common.back") }}
</button>
<button type="button" id="aiExtractionCloseBtn"
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
{{ _("common.close") }}
</button>
</div>
</div>
@@ -363,6 +362,37 @@
{% block scripts %}
<script>
/* Translated strings for JavaScript use */
const i18nStrings = {
providerConfigDetails: {{ _("status.provider_config_details") | tojson }},
noDetails: {{ _("status.no_details") | tojson }},
settingLabel: {{ _("status.setting_label") | tojson }},
valueLabel: {{ _("status.value_label") | tojson }},
testNotificationSent: {{ _("status.test_notification_sent") | tojson }},
notificationConfigMissing: {{ _("status.notification_config_missing") | tojson }},
testNotificationFailed: {{ _("status.test_notification_failed") | tojson }},
errorTestingNotifications: {{ _("status.error_testing_notifications") | tojson }},
testSuccessful: {{ _("status.test_successful") | tojson }},
tokenValidFor: {{ _("status.token_valid_for") | tojson }},
warning: {{ _("common.warning") | tojson }},
authRequired: {{ _("status.auth_required") | tojson }},
tokenExpired: {{ _("status.token_expired") | tojson }},
testFailed: {{ _("status.test_failed") | tojson }},
connectionError: {{ _("status.connection_error") | tojson }},
connectionTestSuccessful: {{ _("status.connection_test_successful") | tojson }},
connectionTestFailed: {{ _("status.connection_test_failed") | tojson }},
errorTestingConnection: {{ _("status.error_testing_connection") | tojson }},
sending: {{ _("status.sending") | tojson }},
testing: {{ _("status.testing") | tojson }},
jsonParseIssue: {{ _("status.json_parse_issue") | tojson }},
aiExtractionFailed: {{ _("status.ai_extraction_failed") | tojson }},
errorRunningExtraction: {{ _("status.error_running_extraction") | tojson }},
running: {{ _("status.running") | tojson }},
aiEmptyResponse: {{ _("status.ai_empty_response") | tojson }},
asAccount: {{ _("status.as_account") | tojson }},
configureNow: {{ _("status.configure_now") | tojson }},
};
document.addEventListener('DOMContentLoaded', function() {
// Modal elements
const resultModal = document.getElementById('resultModal');
@@ -400,7 +430,7 @@ document.addEventListener('DOMContentLoaded', function() {
}
function showDetailsModal(providerName, details) {
detailsModalTitle.textContent = providerName + ' Configuration Details';
detailsModalTitle.textContent = i18nStrings.providerConfigDetails.replace('{name}', providerName);
// Clear previous content
detailsContent.innerHTML = '';
@@ -414,8 +444,8 @@ document.addEventListener('DOMContentLoaded', function() {
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>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">${i18nStrings.settingLabel}</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">${i18nStrings.valueLabel}</th>
</tr>
`;
@@ -456,7 +486,7 @@ document.addEventListener('DOMContentLoaded', function() {
table.appendChild(tbody);
detailsContent.appendChild(table);
} else {
detailsContent.innerHTML = '<p class="text-sm text-gray-500">No details available</p>';
detailsContent.innerHTML = `<p class="text-sm text-gray-500">${i18nStrings.noDetails}</p>`;
}
detailsModal.classList.remove('hidden');
@@ -510,7 +540,7 @@ document.addEventListener('DOMContentLoaded', function() {
testNotificationBtn.addEventListener('click', function() {
const originalText = this.innerHTML;
this.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i> Sending...';
this.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i> ${i18nStrings.sending}`;
this.disabled = true;
fetch('/api/diagnostic/test-notification', {
@@ -519,15 +549,15 @@ document.addEventListener('DOMContentLoaded', function() {
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
showModal('success', 'Test Notification Sent', data.message);
showModal('success', i18nStrings.testNotificationSent, data.message);
} else if (data.status === 'warning') {
showModal('error', 'Notification Configuration Missing', data.message);
showModal('error', i18nStrings.notificationConfigMissing, data.message);
} else {
showModal('error', 'Test Notification Failed', data.message);
showModal('error', i18nStrings.testNotificationFailed, data.message);
}
})
.catch(error => {
showModal('error', 'Connection Error', 'Error testing notifications: ' + error.message);
showModal('error', i18nStrings.connectionError, i18nStrings.errorTestingNotifications + error.message);
})
.finally(() => {
// Always restore the button text and enable the button, regardless of success or failure
@@ -545,7 +575,7 @@ document.addEventListener('DOMContentLoaded', function() {
const endpoint = this.getAttribute('data-endpoint');
const method = this.getAttribute('data-method') || 'GET';
this.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i> Testing...';
this.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i> ${i18nStrings.testing}`;
this.disabled = true;
fetch(endpoint, {
@@ -558,28 +588,28 @@ document.addEventListener('DOMContentLoaded', function() {
if (data.token_info && data.token_info.expires_in_human) {
let message = data.message || 'Connection successful';
message += `<br><br><div class="bg-blue-50 p-3 rounded mt-2">
<span class="font-medium">Token valid for:</span> ${data.token_info.expires_in_human}
<span class="font-medium">${i18nStrings.tokenValidFor}</span> ${data.token_info.expires_in_human}
</div>`;
modalTitle.textContent = 'Test Successful';
modalTitle.textContent = i18nStrings.testSuccessful;
modalMessage.innerHTML = message;
modalIcon.innerHTML = '<i class="fa-solid fa-check text-green-600 fa-2x"></i>';
modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4';
resultModal.classList.remove('hidden');
} else {
// Regular success
showModal('success', 'Test Successful', data.message + (data.account ? ' as ' + data.account : ''));
showModal('success', i18nStrings.testSuccessful, data.message + (data.account ? ' ' + i18nStrings.asAccount + ' ' + data.account : ''));
}
} else if (data.status === 'warning') {
showModal('error', 'Warning', data.message);
showModal('error', i18nStrings.warning, data.message);
} else if (data.needs_reauth) {
showModal('error', 'Authentication Required', 'Your token has expired or is invalid. Please reconfigure this connection.');
showModal('error', i18nStrings.authRequired, i18nStrings.tokenExpired);
} else {
showModal('error', 'Test Failed', data.message);
showModal('error', i18nStrings.testFailed, data.message);
}
})
.catch(error => {
showModal('error', 'Connection Error', `Error: ${error.message}`);
showModal('error', i18nStrings.connectionError, `Error: ${error.message}`);
})
.finally(() => {
// Always restore the button state
@@ -596,7 +626,7 @@ document.addEventListener('DOMContentLoaded', function() {
const provider = this.getAttribute('data-provider');
const originalText = this.textContent;
this.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i> Testing...';
this.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i> ${i18nStrings.testing}`;
this.disabled = true;
let endpoint = '';
@@ -622,35 +652,35 @@ document.addEventListener('DOMContentLoaded', function() {
// Add token expiration info if available (especially for Google Drive)
if (data.token_info && data.token_info.expires_in_human) {
message += `<br><br><div class="bg-blue-50 p-3 rounded mt-2">
<span class="font-medium">Token valid for:</span> ${data.token_info.expires_in_human}
<span class="font-medium">${i18nStrings.tokenValidFor}</span> ${data.token_info.expires_in_human}
</div>`;
// Show the message with HTML
modalTitle.textContent = 'Connection Test Successful';
modalTitle.textContent = i18nStrings.connectionTestSuccessful;
modalMessage.innerHTML = message;
modalIcon.innerHTML = '<i class="fa-solid fa-check text-green-600 fa-2x"></i>';
modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4';
resultModal.classList.remove('hidden');
} else {
// Use the regular modal without HTML
showModal('success', 'Connection Test Successful', `${data.message} ${data.account ? 'as ' + data.account : ''}`);
showModal('success', i18nStrings.connectionTestSuccessful, `${data.message} ${data.account ? i18nStrings.asAccount + ' ' + data.account : ''}`);
}
} else {
if (data.needs_reauth) {
showModal('error', 'Authentication Required', 'Your token has expired or is invalid. Please reconfigure this connection.');
showModal('error', i18nStrings.authRequired, i18nStrings.tokenExpired);
// Add option to go to config page
modalClose.textContent = "Configure Now";
modalClose.textContent = i18nStrings.configureNow;
modalClose.addEventListener('click', function redirectToConfig() {
window.location.href = `/${provider.replace('_', '-')}-setup`;
modalClose.removeEventListener('click', redirectToConfig);
}, { once: true });
} else {
showModal('error', 'Connection Test Failed', data.message);
showModal('error', i18nStrings.connectionTestFailed, data.message);
}
}
})
.catch(error => {
showModal('error', 'Connection Error', 'Error testing connection: ' + error.message);
showModal('error', i18nStrings.connectionError, i18nStrings.errorTestingConnection + error.message);
})
.finally(() => {
this.textContent = originalText;
@@ -696,11 +726,11 @@ document.addEventListener('DOMContentLoaded', function() {
aiExtractionMeta.textContent = `Provider: ${data.provider || '—'} | Model: ${data.model || '—'}`;
// Raw response
aiRawResponse.textContent = data.raw_response || '(empty)';
aiRawResponse.textContent = data.raw_response || i18nStrings.aiEmptyResponse;
// Parse warning
if (data.parse_error) {
aiParseWarning.textContent = `JSON parse issue: ${data.parse_error}`;
aiParseWarning.textContent = i18nStrings.jsonParseIssue + data.parse_error;
aiParseWarning.classList.remove('hidden');
} else {
aiParseWarning.classList.add('hidden');
@@ -775,7 +805,7 @@ document.addEventListener('DOMContentLoaded', function() {
}
const originalHTML = runAiExtractionBtn.innerHTML;
runAiExtractionBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i>Running…';
runAiExtractionBtn.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i>${i18nStrings.running}`;
runAiExtractionBtn.disabled = true;
cancelAiExtractionBtn.disabled = true;
@@ -790,12 +820,12 @@ document.addEventListener('DOMContentLoaded', function() {
showAiExtractionResults(data);
} else {
closeAiExtractionModalFn();
showModal('error', 'AI Extraction Failed', data.message || 'Unknown error');
showModal('error', i18nStrings.aiExtractionFailed, data.message || 'Unknown error');
}
})
.catch(error => {
closeAiExtractionModalFn();
showModal('error', 'Connection Error', 'Error running extraction: ' + error.message);
showModal('error', i18nStrings.connectionError, i18nStrings.errorRunningExtraction + error.message);
})
.finally(() => {
runAiExtractionBtn.innerHTML = originalHTML;