merge: resolve conflicts with main branch (keep both SharePoint + iCloud integrations)
Merge origin/main into copilot/add-sharepoint-integration. All four conflicts were resolved by keeping both the SharePoint additions (from this branch) and the iCloud additions (from main): - app/models.py: added both SHAREPOINT and ICLOUD to IntegrationType - app/tasks/send_to_all.py: added both to service_map and services list - app/tasks/upload_to_user_integration.py: kept both upload handlers - frontend/templates/files.html: added both filter options No database migration conflicts — SharePoint does not require schema changes.
This commit is contained in:
copilot-swe-agent[bot]
@@ -1,16 +1,16 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}404 - Not Found{% endblock %}
|
||||
{% block title %}{{ _("error.404_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex flex-col items-center justify-center text-center px-4 py-16">
|
||||
<div class="max-w-xl">
|
||||
<h1 class="text-7xl font-extrabold text-blue-600 mb-6">404</h1>
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-4">Oops, we couldn’t find that page!</h2>
|
||||
<h1 class="text-7xl font-extrabold text-blue-600 mb-6">{{ _("error.404_code") }}</h1>
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-4">{{ _("error.404_heading") }}</h2>
|
||||
<p class="text-gray-600 mb-8">
|
||||
It seems DocuElevate has misplaced the document you were looking for. Don’t worry – we’ve got your back.
|
||||
{{ _("error.404_message") }}
|
||||
</p>
|
||||
<a href="/" class="inline-block bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors">
|
||||
← Return Home
|
||||
← {{ _("error.404_home") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Server Error - DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("error.500_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="relative isolate px-6 pt-14 lg:px-8">
|
||||
@@ -7,27 +7,27 @@
|
||||
<div class="mx-auto max-w-3xl py-12">
|
||||
<img
|
||||
src="/static/explosion.jpg"
|
||||
alt="Illustration of a server error"
|
||||
alt="{{ _('error.500_img_alt') }}"
|
||||
class="mx-auto rounded-xl shadow-xl h-[300px] w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-3xl text-center">
|
||||
<h1 class="text-7xl font-bold text-red-500">500</h1>
|
||||
<h1 class="text-7xl font-bold text-red-500">{{ _("error.500_code") }}</h1>
|
||||
<p class="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
|
||||
Oops! Something Went Wrong.
|
||||
{{ _("error.500_heading") }}
|
||||
</p>
|
||||
<p class="mt-4 text-lg leading-8 text-gray-600">
|
||||
Our servers encountered a mishap and need a moment. Maybe the hamsters spilled their coffee?
|
||||
{{ _("error.500_message1") }}
|
||||
</p>
|
||||
<p class="mt-2 text-lg leading-8 text-gray-600">
|
||||
We're already on it—sorting files, rebooting servers, and recalibrating flux capacitors.
|
||||
{{ _("error.500_message2") }}
|
||||
</p>
|
||||
|
||||
{% if exc %}
|
||||
<details class="mt-8 bg-gray-100 rounded-lg p-4 text-left shadow-md">
|
||||
<summary class="cursor-pointer font-medium text-blue-600 hover:text-blue-700">
|
||||
Show Debug Info
|
||||
{{ _("error.500_debug_info") }}
|
||||
</summary>
|
||||
<pre class="mt-4 text-sm text-gray-700 overflow-auto">{{ exc }}</pre>
|
||||
</details>
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
<div class="mt-10">
|
||||
<a href="/" class="inline-block bg-blue-600 px-6 py-3 rounded-md text-white font-semibold shadow-md hover:bg-blue-700 transition-colors">
|
||||
← Go Home
|
||||
← {{ _("error.500_home") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,69 +1,63 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}About DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("about.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-4xl font-bold mb-4">About DocuElevate</h1>
|
||||
<h1 class="text-4xl font-bold mb-4">{{ _("about.heading") }}</h1>
|
||||
<p class="text-gray-700 mb-6 leading-relaxed">
|
||||
Welcome to <strong>DocuElevate</strong> – your modern, intelligent solution for document processing!
|
||||
We've built DocuElevate to completely transform the way you handle your documents – from upload
|
||||
to extraction, from processing to storage.
|
||||
{{ _("about.intro_pre") }}<strong>{{ _("app.name") }}</strong>{{ _("about.intro_post") }}
|
||||
</p>
|
||||
|
||||
<!-- Our Story Section -->
|
||||
<section class="bg-white shadow rounded p-6 mb-8">
|
||||
<h2 class="text-2xl font-semibold mb-2">Our Story</h2>
|
||||
<h2 class="text-2xl font-semibold mb-2">{{ _("about.story_heading") }}</h2>
|
||||
<p class="text-gray-600 mb-4">
|
||||
DocuElevate was created with one goal in mind: to simplify and streamline document management
|
||||
for everyone, whether you're a small startup or a large enterprise.
|
||||
{{ _("about.story_p1") }}
|
||||
</p>
|
||||
<p class="text-gray-600">
|
||||
We harness the power of pluggable AI providers (OpenAI, Anthropic Claude, Google Gemini, Ollama,
|
||||
OpenRouter, Portkey, and more) for metadata extraction and text refinement, integrate seamlessly
|
||||
with Dropbox, Nextcloud, and Paperless NGX for storage and indexing, leverage Azure Document
|
||||
Intelligence for OCR, and even use Gotenberg for file-to-PDF conversions.
|
||||
{{ _("about.story_p2") }}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Key Features Section - Updated with more comprehensive features -->
|
||||
<section class="bg-white shadow rounded p-6 mb-8">
|
||||
<h2 class="text-2xl font-semibold mb-2">Key Features</h2>
|
||||
<h2 class="text-2xl font-semibold mb-2">{{ _("about.features_heading") }}</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h3 class="font-medium text-lg text-gray-800">Document Processing</h3>
|
||||
<h3 class="font-medium text-lg text-gray-800">{{ _("about.features_processing_heading") }}</h3>
|
||||
<ul class="list-disc list-inside text-gray-600 ml-2">
|
||||
<li>Simple and secure file uploads with drag & drop support</li>
|
||||
<li>OCR powered by Azure Document Intelligence</li>
|
||||
<li>Automated metadata extraction using a pluggable AI provider</li>
|
||||
<li>PDF conversion for various file formats via Gotenberg</li>
|
||||
<li>Intelligent document classification and date extraction</li>
|
||||
<li>{{ _("about.features_processing_upload") }}</li>
|
||||
<li>{{ _("about.features_processing_ocr") }}</li>
|
||||
<li>{{ _("about.features_processing_metadata") }}</li>
|
||||
<li>{{ _("about.features_processing_pdf") }}</li>
|
||||
<li>{{ _("about.features_processing_classification") }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium text-lg text-gray-800">Integration & Storage</h3>
|
||||
<h3 class="font-medium text-lg text-gray-800">{{ _("about.features_integration_heading") }}</h3>
|
||||
<ul class="list-disc list-inside text-gray-600 ml-2">
|
||||
<li>Multi-destination support (store documents in multiple locations)</li>
|
||||
<li>Cloud storage: Dropbox, Google Drive, OneDrive, Amazon S3</li>
|
||||
<li>Self-hosted options: Nextcloud, Paperless NGX, WebDAV</li>
|
||||
<li>Transfer protocols: FTP, SFTP, Email forwarding</li>
|
||||
<li>{{ _("about.features_integration_multi_dest") }}</li>
|
||||
<li>{{ _("about.features_integration_cloud") }}</li>
|
||||
<li>{{ _("about.features_integration_selfhosted") }}</li>
|
||||
<li>{{ _("about.features_integration_protocols") }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium text-lg text-gray-800">Automation</h3>
|
||||
<h3 class="font-medium text-lg text-gray-800">{{ _("about.features_automation_heading") }}</h3>
|
||||
<ul class="list-disc list-inside text-gray-600 ml-2">
|
||||
<li>IMAP inbox polling from multiple sources</li>
|
||||
<li>Gmail and generic email account integration</li>
|
||||
<li>Automated document ingestion from various inputs</li>
|
||||
<li>Background processing with Redis and Celery</li>
|
||||
<li>{{ _("about.features_automation_imap") }}</li>
|
||||
<li>{{ _("about.features_automation_gmail") }}</li>
|
||||
<li>{{ _("about.features_automation_ingestion") }}</li>
|
||||
<li>{{ _("about.features_automation_background") }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium text-lg text-gray-800">Administration</h3>
|
||||
<h3 class="font-medium text-lg text-gray-800">{{ _("about.features_admin_heading") }}</h3>
|
||||
<ul class="list-disc list-inside text-gray-600 ml-2">
|
||||
<li>Powerful REST API for programmatic access</li>
|
||||
<li>OAuth2 authentication support with Authentik</li>
|
||||
<li>Highly configurable via environment variables</li>
|
||||
<li>Docker-ready for easy deployment and scaling</li>
|
||||
<li>{{ _("about.features_admin_api") }}</li>
|
||||
<li>{{ _("about.features_admin_oauth2") }}</li>
|
||||
<li>{{ _("about.features_admin_config") }}</li>
|
||||
<li>{{ _("about.features_admin_docker") }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -71,43 +65,43 @@
|
||||
|
||||
<!-- Meet the Creator Section -->
|
||||
<section class="bg-white shadow rounded p-6 mb-8">
|
||||
<h2 class="text-2xl font-semibold mb-2">Meet the Creator</h2>
|
||||
<h2 class="text-2xl font-semibold mb-2">{{ _("about.creator_heading") }}</h2>
|
||||
<p class="text-gray-600">
|
||||
DocuElevate is passionately developed by
|
||||
<a href="https://www.christianlouis.de" target="_blank" class="text-blue-600 hover:underline">Christian Krakau-Louis</a>.
|
||||
{{ _("about.creator_pre") }}
|
||||
<a href="https://www.christianlouis.de" target="_blank" class="text-blue-600 hover:underline">{{ _("about.creator_name") }}</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Privacy & Legal Section -->
|
||||
<section class="bg-white shadow rounded p-6 mb-8">
|
||||
<h2 class="text-2xl font-semibold mb-2">Privacy & Legal</h2>
|
||||
<h2 class="text-2xl font-semibold mb-2">{{ _("about.legal_heading") }}</h2>
|
||||
<p class="text-gray-600 mb-4">
|
||||
We care about your privacy and data security. Please review our:
|
||||
{{ _("about.legal_description") }}
|
||||
</p>
|
||||
<div class="flex space-x-4">
|
||||
<a href="/privacy" class="text-blue-600 hover:underline">Privacy Notice</a>
|
||||
<a href="/license" class="text-blue-600 hover:underline">License Information</a>
|
||||
<a href="/privacy" class="text-blue-600 hover:underline">{{ _("about.legal_privacy") }}</a>
|
||||
<a href="/license" class="text-blue-600 hover:underline">{{ _("about.legal_license") }}</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Links Section -->
|
||||
<section class="bg-white shadow rounded p-6">
|
||||
<h2 class="text-2xl font-semibold mb-2">Get Involved</h2>
|
||||
<h2 class="text-2xl font-semibold mb-2">{{ _("about.involved_heading") }}</h2>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Want to dive into the code, contribute ideas, or learn more about DocuElevate?
|
||||
{{ _("about.involved_description") }}
|
||||
</p>
|
||||
<div class="flex flex-col space-y-3">
|
||||
<a href="https://github.com/christianlouis/DocuElevate" target="_blank" class="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
|
||||
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Logo" class="h-6 w-6" />
|
||||
<span>View DocuElevate on GitHub</span>
|
||||
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="{{ _('about.github_logo_alt') }}" class="h-6 w-6" />
|
||||
<span>{{ _("about.involved_github") }}</span>
|
||||
</a>
|
||||
<a href="https://www.docuelevate.org" target="_blank" class="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
|
||||
<i class="fas fa-globe h-6 w-6"></i>
|
||||
<span>Visit DocuElevate Website</span>
|
||||
<span>{{ _("about.involved_website") }}</span>
|
||||
</a>
|
||||
<a href="https://docuelevate.readthedocs.io" target="_blank" class="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
|
||||
<i class="fas fa-book h-6 w-6"></i>
|
||||
<span>Read the Documentation</span>
|
||||
<span>{{ _("about.involved_docs") }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
+137
-102
@@ -1,6 +1,6 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Plan Designer — DocuElevate Admin{% endblock %}
|
||||
{% block title %}{{ _("admin_plans.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
|
||||
@@ -10,43 +10,41 @@
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Plan Designer</h1>
|
||||
<p class="text-sm text-gray-500 mt-1">Manage subscription plans shown on the public pricing page.</p>
|
||||
<h1 class="text-2xl font-bold text-gray-900">{{ _("admin_plans.heading") }}</h1>
|
||||
<p class="text-sm text-gray-500 mt-1">{{ _("admin_plans.subheading") }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="/admin/stripe-wizard"
|
||||
class="inline-flex items-center px-4 py-2 border border-indigo-300 rounded-md text-sm font-medium text-indigo-700 bg-indigo-50 hover:bg-indigo-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-400"
|
||||
title="Open the Stripe Setup Wizard to configure API keys and sync plans"
|
||||
title="{{ _('admin_plans.btn_stripe_setup_title') }}"
|
||||
>
|
||||
<i class="fab fa-stripe mr-2" aria-hidden="true"></i> Stripe Setup
|
||||
<i class="fab fa-stripe mr-2" aria-hidden="true"></i> {{ _("admin_plans.btn_stripe_setup") }}
|
||||
</a>
|
||||
<button
|
||||
@click="seedDefaults()"
|
||||
:disabled="seeding"
|
||||
class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-400 disabled:opacity-50"
|
||||
title="Restore all four default plans (only if no plans exist yet)"
|
||||
title="{{ _('admin_plans.btn_restore_defaults_title') }}"
|
||||
>
|
||||
<i class="fas fa-undo mr-2 text-gray-400" aria-hidden="true"></i>
|
||||
<span x-show="!seeding">Restore Defaults</span>
|
||||
<span x-show="seeding"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> Restoring…</span>
|
||||
<span x-show="!seeding">{{ _("admin_plans.btn_restore_defaults") }}</span>
|
||||
<span x-show="seeding"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> {{ _("admin_plans.btn_restoring") }}</span>
|
||||
</button>
|
||||
<button
|
||||
@click="openCreateModal()"
|
||||
class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500"
|
||||
>
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i> Add Plan
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i> {{ _("admin_plans.btn_add_plan") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overage callout -->
|
||||
<div class="mb-6 rounded-lg border border-indigo-200 bg-indigo-50 p-4 text-sm text-indigo-800" role="note">
|
||||
<p class="font-semibold mb-1"><i class="fas fa-info-circle mr-1" aria-hidden="true"></i> About the Overage Buffer</p>
|
||||
<p class="font-semibold mb-1"><i class="fas fa-info-circle mr-1" aria-hidden="true"></i> {{ _("admin_plans.overage_buffer_title") }}</p>
|
||||
<p>
|
||||
The overage buffer is <strong>invisible to users</strong>. We advertise X docs/month but only enforce
|
||||
at <strong>X × (1 + buffer%)</strong> docs. For example, a 150-doc/month plan with a 20% buffer
|
||||
enforces at 180 docs. This prevents hard cutoffs at the exact announced limit, giving users a
|
||||
graceful soft landing.
|
||||
{{ _("admin_plans.overage_buffer_body_prefix") }} <strong>{{ _("admin_plans.overage_buffer_invisible") }}</strong>. {{ _("admin_plans.overage_buffer_body_suffix") }}
|
||||
<strong>{{ _("admin_plans.overage_buffer_formula") }}</strong> {{ _("admin_plans.overage_buffer_tail") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -63,29 +61,29 @@
|
||||
<!-- Loading -->
|
||||
<div x-show="loading" class="text-center py-12 text-gray-400">
|
||||
<i class="fas fa-spinner fa-spin text-2xl" aria-hidden="true"></i>
|
||||
<p class="mt-2 text-sm">Loading plans…</p>
|
||||
<p class="mt-2 text-sm">{{ _("admin_plans.loading") }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Plans table -->
|
||||
<div x-show="!loading" class="bg-white shadow-sm rounded-lg overflow-hidden border border-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-200" aria-label="Subscription plans">
|
||||
<table class="min-w-full divide-y divide-gray-200" aria-label="{{ _('admin_plans.table_aria_label') }}">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Plan</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Monthly</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Yearly</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Monthly Limit</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Overage %</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Active</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_plans.col_order") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_plans.col_plan") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_plans.col_monthly") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_plans.col_yearly") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_plans.col_monthly_limit") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_plans.col_overage_pct") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_plans.col_active") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_plans.col_actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
<template x-if="plans.length === 0">
|
||||
<tr>
|
||||
<td colspan="8" class="px-4 py-8 text-center text-sm text-gray-400">
|
||||
No plans yet. Click <strong>Restore Defaults</strong> to seed the four built-in plans.
|
||||
{{ _("admin_plans.no_plans_intro") }} <strong>{{ _("admin_plans.btn_restore_defaults") }}</strong> {{ _("admin_plans.no_plans_suffix") }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
@@ -97,13 +95,13 @@
|
||||
@click="moveUp(idx)"
|
||||
:disabled="idx === 0"
|
||||
class="p-1 rounded hover:bg-gray-200 disabled:opacity-30"
|
||||
:aria-label="'Move ' + plan.name + ' up'"
|
||||
:aria-label="i18n.ariaMoveUp.replace('{name}', plan.name)"
|
||||
><i class="fas fa-chevron-up text-xs" aria-hidden="true"></i></button>
|
||||
<button
|
||||
@click="moveDown(idx)"
|
||||
:disabled="idx === plans.length - 1"
|
||||
class="p-1 rounded hover:bg-gray-200 disabled:opacity-30"
|
||||
:aria-label="'Move ' + plan.name + ' down'"
|
||||
:aria-label="i18n.ariaMoveDown.replace('{name}', plan.name)"
|
||||
><i class="fas fa-chevron-down text-xs" aria-hidden="true"></i></button>
|
||||
<span x-text="idx + 1" class="w-5 text-center text-xs text-gray-400"></span>
|
||||
</div>
|
||||
@@ -115,13 +113,13 @@
|
||||
<span class="text-xs px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-700 font-medium" x-text="plan.badge_text"></span>
|
||||
</template>
|
||||
<template x-if="plan.is_highlighted">
|
||||
<span class="text-xs px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-700 font-medium"><i class="fas fa-star" aria-hidden="true"></i> Featured</span>
|
||||
<span class="text-xs px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-700 font-medium"><i class="fas fa-star" aria-hidden="true"></i> <span x-text="i18n.featuredBadge"></span></span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="text-xs text-gray-400 mt-0.5" x-text="plan.plan_id"></div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right text-sm text-gray-700">
|
||||
<span x-text="plan.price_monthly === 0 ? 'Free' : '$' + plan.price_monthly.toFixed(2)"></span>
|
||||
<span x-text="plan.price_monthly === 0 ? i18n.freeLabel : '$' + plan.price_monthly.toFixed(2)"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right text-sm text-gray-700">
|
||||
<span x-text="plan.price_yearly === 0 ? '—' : '$' + plan.price_yearly.toFixed(2)"></span>
|
||||
@@ -136,7 +134,7 @@
|
||||
<span
|
||||
class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
:class="plan.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'"
|
||||
x-text="plan.is_active ? 'Active' : 'Inactive'"
|
||||
x-text="plan.is_active ? i18n.statusActive : i18n.statusInactive"
|
||||
></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
@@ -144,16 +142,16 @@
|
||||
<button
|
||||
@click="openEditModal(plan)"
|
||||
class="text-sm text-indigo-600 hover:text-indigo-800 font-medium"
|
||||
:aria-label="'Edit ' + plan.name"
|
||||
:aria-label="i18n.ariaEditPlan.replace('{name}', plan.name)"
|
||||
>
|
||||
<i class="fas fa-pencil-alt" aria-hidden="true"></i> Edit
|
||||
<i class="fas fa-pencil-alt" aria-hidden="true"></i> <span x-text="i18n.btnEdit"></span>
|
||||
</button>
|
||||
<button
|
||||
@click="deletePlan(plan.plan_id)"
|
||||
class="text-sm text-red-500 hover:text-red-700 font-medium"
|
||||
:aria-label="'Delete ' + plan.name"
|
||||
:aria-label="i18n.ariaDeletePlan.replace('{name}', plan.name)"
|
||||
>
|
||||
<i class="fas fa-trash-alt" aria-hidden="true"></i> Delete
|
||||
<i class="fas fa-trash-alt" aria-hidden="true"></i> <span x-text="i18n.btnDelete"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
@@ -171,8 +169,8 @@
|
||||
class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 disabled:opacity-50"
|
||||
>
|
||||
<i class="fas fa-save mr-2" aria-hidden="true"></i>
|
||||
<span x-show="!saving">Save Order</span>
|
||||
<span x-show="saving"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> Saving…</span>
|
||||
<span x-show="!saving">{{ _("admin_plans.btn_save_order") }}</span>
|
||||
<span x-show="saving"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> {{ _("admin_plans.btn_saving") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -195,8 +193,8 @@
|
||||
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl my-auto" @click.outside="modalOpen = false">
|
||||
<!-- Modal header -->
|
||||
<div class="flex items-center justify-between px-6 py-4 border-b">
|
||||
<h2 id="modal-title" class="text-lg font-semibold text-gray-900" x-text="isCreate ? 'Add Plan' : 'Edit Plan: ' + form.name"></h2>
|
||||
<button @click="modalOpen = false" class="text-gray-400 hover:text-gray-600" aria-label="Close modal">
|
||||
<h2 id="modal-title" class="text-lg font-semibold text-gray-900" x-text="isCreate ? i18n.modalCreateTitle : i18n.modalEditTitlePrefix + form.name"></h2>
|
||||
<button @click="modalOpen = false" class="text-gray-400 hover:text-gray-600" aria-label="{{ _('admin_plans.modal_close_aria') }}">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -205,66 +203,66 @@
|
||||
|
||||
<!-- Basic Info -->
|
||||
<div class="px-6 py-5 space-y-4">
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">Basic Info</h3>
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">{{ _("admin_plans.section_basic_info") }}</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="f-name" class="block text-sm font-medium text-gray-700 mb-1">Name <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="f-name" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_name") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="f-name" type="text" x-model="form.name" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="f-plan-id" class="block text-sm font-medium text-gray-700 mb-1">Plan ID <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="f-plan-id" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_plan_id") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="f-plan-id" type="text" x-model="form.plan_id" :readonly="!isCreate"
|
||||
:class="!isCreate ? 'bg-gray-50 text-gray-400 cursor-not-allowed' : ''"
|
||||
required pattern="[a-z0-9_-]+" title="Lowercase letters, numbers, _ and - only"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
<p class="text-xs text-gray-400 mt-0.5">Lowercase slug, cannot be changed after creation.</p>
|
||||
<p class="text-xs text-gray-400 mt-0.5">{{ _("admin_plans.hint_plan_id") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="f-tagline" class="block text-sm font-medium text-gray-700 mb-1">Tagline</label>
|
||||
<label for="f-tagline" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_tagline") }}</label>
|
||||
<input id="f-tagline" type="text" x-model="form.tagline" maxlength="255"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label for="f-sort-order" class="block text-sm font-medium text-gray-700 mb-1">Sort Order</label>
|
||||
<label for="f-sort-order" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_sort_order") }}</label>
|
||||
<input id="f-sort-order" type="number" x-model.number="form.sort_order" min="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
<div class="flex items-center gap-3 pt-6">
|
||||
<input id="f-active" type="checkbox" x-model="form.is_active"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
<label for="f-active" class="text-sm font-medium text-gray-700">Active</label>
|
||||
<label for="f-active" class="text-sm font-medium text-gray-700">{{ _("admin_plans.field_active") }}</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 pt-6">
|
||||
<input id="f-highlighted" type="checkbox" x-model="form.is_highlighted"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
<label for="f-highlighted" class="text-sm font-medium text-gray-700">Featured / Highlighted</label>
|
||||
<label for="f-highlighted" class="text-sm font-medium text-gray-700">{{ _("admin_plans.field_featured") }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing -->
|
||||
<div class="px-6 py-5 space-y-4">
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">Pricing</h3>
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">{{ _("admin_plans.section_pricing") }}</h3>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label for="f-price-monthly" class="block text-sm font-medium text-gray-700 mb-1">Monthly Price ($)</label>
|
||||
<label for="f-price-monthly" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_price_monthly") }}</label>
|
||||
<input id="f-price-monthly" type="number" x-model.number="form.price_monthly" min="0" step="0.01"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="f-price-yearly" class="block text-sm font-medium text-gray-700 mb-1">Yearly Price ($)</label>
|
||||
<label for="f-price-yearly" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_price_yearly") }}</label>
|
||||
<input id="f-price-yearly" type="number" x-model.number="form.price_yearly" min="0" step="0.01"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
<p class="text-xs mt-0.5"
|
||||
:class="yearlySavingPct > 0 ? 'text-green-600 font-medium' : 'text-gray-400'"
|
||||
x-text="yearlySavingPct > 0 ? 'Save ' + yearlySavingPct.toFixed(0) + '% vs monthly' : 'Enter yearly price to show savings'">
|
||||
x-text="yearlySavingPct > 0 ? i18n.yearlySave.replace('{pct}', yearlySavingPct.toFixed(0)) : i18n.yearlyEnter">
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="f-trial-days" class="block text-sm font-medium text-gray-700 mb-1">Trial Days</label>
|
||||
<label for="f-trial-days" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_trial_days") }}</label>
|
||||
<input id="f-trial-days" type="number" x-model.number="form.trial_days" min="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
@@ -274,21 +272,21 @@
|
||||
<!-- Stripe Integration -->
|
||||
<div class="px-6 py-5 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">Stripe Integration</h3>
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">{{ _("admin_plans.section_stripe") }}</h3>
|
||||
<a href="/admin/stripe-wizard" target="_blank"
|
||||
class="text-xs text-indigo-600 hover:text-indigo-800 font-medium focus:outline-none focus:ring-1 focus:ring-indigo-400 rounded"
|
||||
aria-label="Open Stripe Setup Wizard in a new tab"
|
||||
><i class="fab fa-stripe mr-1" aria-hidden="true"></i>Stripe Wizard</a>
|
||||
aria-label="{{ _('admin_plans.stripe_wizard_aria') }}"
|
||||
><i class="fab fa-stripe mr-1" aria-hidden="true"></i>{{ _("admin_plans.stripe_wizard_link") }}</a>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">
|
||||
Enter the Stripe Price IDs for this plan, or use the
|
||||
<a href="/admin/stripe-wizard" target="_blank" class="text-indigo-600 hover:text-indigo-800 underline">Stripe Setup Wizard</a>
|
||||
to auto-create them. Free plans do not need Stripe Price IDs.
|
||||
{{ _("admin_plans.stripe_desc_before") }}
|
||||
<a href="/admin/stripe-wizard" target="_blank" class="text-indigo-600 hover:text-indigo-800 underline">{{ _("admin_plans.stripe_wizard_text") }}</a>
|
||||
{{ _("admin_plans.stripe_desc_after") }}
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="f-stripe-monthly" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Stripe Price ID (monthly)
|
||||
{{ _("admin_plans.field_stripe_monthly") }}
|
||||
</label>
|
||||
<input id="f-stripe-monthly" type="text" x-model="form.stripe_price_id_monthly"
|
||||
placeholder="price_1OtAbc…"
|
||||
@@ -296,7 +294,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<label for="f-stripe-yearly" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Stripe Price ID (yearly)
|
||||
{{ _("admin_plans.field_stripe_yearly") }}
|
||||
</label>
|
||||
<input id="f-stripe-yearly" type="text" x-model="form.stripe_price_id_yearly"
|
||||
placeholder="price_1OtAbc… (optional)"
|
||||
@@ -307,36 +305,36 @@
|
||||
|
||||
<!-- Volume Limits -->
|
||||
<div class="px-6 py-5 space-y-4">
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">Volume Limits</h3>
|
||||
<p class="text-xs text-gray-500">Enter <strong>0</strong> for unlimited.</p>
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">{{ _("admin_plans.section_volume") }}</h3>
|
||||
<p class="text-xs text-gray-500">{{ _("admin_plans.hint_zero_unlimited") }}</p>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label for="f-monthly-limit" class="block text-sm font-medium text-gray-700 mb-1">Docs / Month</label>
|
||||
<label for="f-monthly-limit" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_docs_month") }}</label>
|
||||
<input id="f-monthly-limit" type="number" x-model.number="form.monthly_upload_limit" min="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="f-lifetime-limit" class="block text-sm font-medium text-gray-700 mb-1">Lifetime Docs</label>
|
||||
<label for="f-lifetime-limit" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_lifetime_docs") }}</label>
|
||||
<input id="f-lifetime-limit" type="number" x-model.number="form.lifetime_file_limit" min="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="f-ocr-pages" class="block text-sm font-medium text-gray-700 mb-1">OCR Pages / Month</label>
|
||||
<label for="f-ocr-pages" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_ocr_pages") }}</label>
|
||||
<input id="f-ocr-pages" type="number" x-model.number="form.max_ocr_pages_monthly" min="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="f-dests" class="block text-sm font-medium text-gray-700 mb-1">Storage Destinations</label>
|
||||
<label for="f-dests" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_storage_dests") }}</label>
|
||||
<input id="f-dests" type="number" x-model.number="form.max_storage_destinations" min="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="f-mailboxes" class="block text-sm font-medium text-gray-700 mb-1">Email Mailboxes</label>
|
||||
<label for="f-mailboxes" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_mailboxes") }}</label>
|
||||
<input id="f-mailboxes" type="number" x-model.number="form.max_mailboxes" min="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="f-filesize" class="block text-sm font-medium text-gray-700 mb-1">Max File Size (MB)</label>
|
||||
<label for="f-filesize" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_max_file_size") }}</label>
|
||||
<input id="f-filesize" type="number" x-model.number="form.max_file_size_mb" min="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
@@ -345,15 +343,15 @@
|
||||
|
||||
<!-- Overage Designer -->
|
||||
<div class="px-6 py-5 space-y-4">
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">Overage Designer</h3>
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">{{ _("admin_plans.section_overage") }}</h3>
|
||||
<div>
|
||||
<label for="f-overage-pct" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Buffer:
|
||||
{{ _("admin_plans.field_buffer") }}
|
||||
<span class="text-indigo-700 font-semibold" x-text="form.overage_percent + '%'"></span>
|
||||
<template x-if="form.monthly_upload_limit > 0">
|
||||
<span class="text-gray-500 font-normal ml-2">
|
||||
→ announce <strong x-text="form.monthly_upload_limit"></strong> docs,
|
||||
enforce at <strong class="text-indigo-700" x-text="Math.round(form.monthly_upload_limit * (1 + form.overage_percent / 100))"></strong> docs
|
||||
{{ _("admin_plans.overage_announce") }} <strong x-text="form.monthly_upload_limit"></strong> {{ _("admin_plans.overage_docs") }}
|
||||
{{ _("admin_plans.overage_enforce_at") }} <strong class="text-indigo-700" x-text="Math.round(form.monthly_upload_limit * (1 + form.overage_percent / 100))"></strong> {{ _("admin_plans.overage_docs_end") }}
|
||||
</span>
|
||||
</template>
|
||||
</label>
|
||||
@@ -368,27 +366,27 @@
|
||||
aria-valuemax="100"
|
||||
/>
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>0% (exact)</span>
|
||||
<span>50%</span>
|
||||
<span>100%</span>
|
||||
<span>{{ _("admin_plans.overage_0pct") }}</span>
|
||||
<span>{{ _("admin_plans.overage_50pct") }}</span>
|
||||
<span>{{ _("admin_plans.overage_100pct") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 opacity-60">
|
||||
<div class="relative">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Allow Overage Billing</label>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_allow_overage") }}</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="checkbox" disabled class="h-4 w-4 rounded border-gray-300 text-indigo-600" />
|
||||
<span class="text-xs text-gray-400">Coming soon</span>
|
||||
<span class="text-xs text-gray-400">{{ _("admin_plans.coming_soon") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Overage price / doc ($)</label>
|
||||
<input type="number" disabled placeholder="Coming soon"
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_overage_doc_price") }}</label>
|
||||
<input type="number" disabled placeholder="{{ _('admin_plans.coming_soon') }}"
|
||||
class="w-full px-3 py-2 border border-gray-200 rounded-md text-sm bg-gray-50 text-gray-400 cursor-not-allowed" />
|
||||
</div>
|
||||
<div class="relative">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Overage price / OCR page ($)</label>
|
||||
<input type="number" disabled placeholder="Coming soon"
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_overage_ocr_price") }}</label>
|
||||
<input type="number" disabled placeholder="{{ _('admin_plans.coming_soon') }}"
|
||||
class="w-full px-3 py-2 border border-gray-200 rounded-md text-sm bg-gray-50 text-gray-400 cursor-not-allowed" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -396,18 +394,18 @@
|
||||
|
||||
<!-- Features -->
|
||||
<div class="px-6 py-5 space-y-3">
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">Features List</h3>
|
||||
<p class="text-xs text-gray-500">These bullet points appear on the pricing page card for this plan.</p>
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">{{ _("admin_plans.section_features") }}</h3>
|
||||
<p class="text-xs text-gray-500">{{ _("admin_plans.hint_features") }}</p>
|
||||
<template x-for="(feat, i) in form.features" :key="i">
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.features[i]"
|
||||
:aria-label="'Feature ' + (i+1)"
|
||||
:aria-label="i18n.ariaFeatureN.replace('{n}', i + 1)"
|
||||
class="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
||||
/>
|
||||
<button type="button" @click="form.features.splice(i, 1)"
|
||||
:aria-label="'Remove feature ' + (i+1)"
|
||||
:aria-label="i18n.ariaRemoveFeatureN.replace('{n}', i + 1)"
|
||||
class="text-red-400 hover:text-red-600 px-2 py-2">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
@@ -415,21 +413,21 @@
|
||||
</template>
|
||||
<button type="button" @click="form.features.push('')"
|
||||
class="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800 font-medium">
|
||||
<i class="fas fa-plus mr-1" aria-hidden="true"></i> Add Feature
|
||||
<i class="fas fa-plus mr-1" aria-hidden="true"></i> {{ _("admin_plans.btn_add_feature") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Display -->
|
||||
<div class="px-6 py-5 space-y-4">
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">Display</h3>
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider">{{ _("admin_plans.section_display") }}</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="f-cta" class="block text-sm font-medium text-gray-700 mb-1">CTA Button Text</label>
|
||||
<label for="f-cta" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_cta_text") }}</label>
|
||||
<input id="f-cta" type="text" x-model="form.cta_text" maxlength="100"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="f-badge" class="block text-sm font-medium text-gray-700 mb-1">Badge Text</label>
|
||||
<label for="f-badge" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_plans.field_badge_text") }}</label>
|
||||
<input id="f-badge" type="text" x-model="form.badge_text" maxlength="50"
|
||||
placeholder="e.g. Most Popular"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" />
|
||||
@@ -438,7 +436,7 @@
|
||||
<div class="flex items-center gap-3">
|
||||
<input id="f-api" type="checkbox" x-model="form.api_access"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
<label for="f-api" class="text-sm font-medium text-gray-700">API Access</label>
|
||||
<label for="f-api" class="text-sm font-medium text-gray-700">{{ _("admin_plans.field_api_access") }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -449,15 +447,15 @@
|
||||
@click="modalOpen = false"
|
||||
class="px-4 py-2 text-sm font-medium border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-400"
|
||||
>
|
||||
Cancel
|
||||
{{ _("admin_plans.btn_cancel") }}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving"
|
||||
class="px-4 py-2 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span x-show="!saving" x-text="isCreate ? 'Create Plan' : 'Save Changes'"></span>
|
||||
<span x-show="saving"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> Saving…</span>
|
||||
<span x-show="!saving" x-text="isCreate ? i18n.btnCreate : i18n.btnSaveChanges"></span>
|
||||
<span x-show="saving"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> <span x-text="i18n.btnSaving"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -467,9 +465,46 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
window.__i18nAdminPlans = {
|
||||
modalCreateTitle: {{ _("admin_plans.modal_create_title") | tojson }},
|
||||
modalEditTitlePrefix: {{ _("admin_plans.modal_edit_title_prefix") | tojson }},
|
||||
statusActive: {{ _("admin_plans.status_active") | tojson }},
|
||||
statusInactive: {{ _("admin_plans.status_inactive") | tojson }},
|
||||
featuredBadge: {{ _("admin_plans.featured_badge") | tojson }},
|
||||
freeLabel: {{ _("admin_plans.free_label") | tojson }},
|
||||
btnEdit: {{ _("admin_plans.btn_edit") | tojson }},
|
||||
btnDelete: {{ _("admin_plans.btn_delete") | tojson }},
|
||||
btnCreate: {{ _("admin_plans.btn_create") | tojson }},
|
||||
btnSaveChanges: {{ _("admin_plans.btn_save_changes") | tojson }},
|
||||
btnSaving: {{ _("admin_plans.btn_saving") | tojson }},
|
||||
ariaMoveUp: {{ _("admin_plans.aria_move_up") | tojson }},
|
||||
ariaMoveDown: {{ _("admin_plans.aria_move_down") | tojson }},
|
||||
ariaEditPlan: {{ _("admin_plans.aria_edit_plan") | tojson }},
|
||||
ariaDeletePlan: {{ _("admin_plans.aria_delete_plan") | tojson }},
|
||||
ariaFeatureN: {{ _("admin_plans.aria_feature_n") | tojson }},
|
||||
ariaRemoveFeatureN: {{ _("admin_plans.aria_remove_feature_n") | tojson }},
|
||||
yearlySave: {{ _("admin_plans.js_yearly_save") | tojson }},
|
||||
yearlyEnter: {{ _("admin_plans.js_yearly_enter") | tojson }},
|
||||
jsFailedLoad: {{ _("admin_plans.js_failed_load") | tojson }},
|
||||
jsPlanCreated: {{ _("admin_plans.js_plan_created") | tojson }},
|
||||
jsPlanUpdated: {{ _("admin_plans.js_plan_updated") | tojson }},
|
||||
jsDeleteConfirm: {{ _("admin_plans.js_delete_confirm") | tojson }},
|
||||
jsDeleteFailed: {{ _("admin_plans.js_delete_failed") | tojson }},
|
||||
jsPlanDeleted: {{ _("admin_plans.js_plan_deleted") | tojson }},
|
||||
jsSeedConfirm: {{ _("admin_plans.js_seed_confirm") | tojson }},
|
||||
jsSeedFailed: {{ _("admin_plans.js_seed_failed") | tojson }},
|
||||
jsReorderFailed: {{ _("admin_plans.js_reorder_failed") | tojson }},
|
||||
jsOrderSaved: {{ _("admin_plans.js_order_saved") | tojson }},
|
||||
jsSaveFailed: {{ _("admin_plans.js_save_failed") | tojson }},
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function planDesigner() {
|
||||
const i18n = window.__i18nAdminPlans;
|
||||
return {
|
||||
i18n,
|
||||
plans: [],
|
||||
loading: true,
|
||||
saving: false,
|
||||
@@ -524,7 +559,7 @@ function planDesigner() {
|
||||
this.errorMsg = '';
|
||||
try {
|
||||
const resp = await fetch('/api/plans/admin');
|
||||
if (!resp.ok) throw new Error('Failed to load plans');
|
||||
if (!resp.ok) throw new Error(i18n.jsFailedLoad);
|
||||
const data = await resp.json();
|
||||
this.plans = data.plans || [];
|
||||
} catch (e) {
|
||||
@@ -568,9 +603,9 @@ function planDesigner() {
|
||||
});
|
||||
if (!resp.ok) {
|
||||
const err = await resp.json().catch(() => ({ detail: resp.statusText }));
|
||||
throw new Error(err.detail || 'Save failed');
|
||||
throw new Error(err.detail || i18n.jsSaveFailed);
|
||||
}
|
||||
this.successMsg = this.isCreate ? 'Plan created!' : 'Plan updated!';
|
||||
this.successMsg = this.isCreate ? i18n.jsPlanCreated : i18n.jsPlanUpdated;
|
||||
this.modalOpen = false;
|
||||
await this.loadPlans();
|
||||
} catch (e) {
|
||||
@@ -581,15 +616,15 @@ function planDesigner() {
|
||||
},
|
||||
|
||||
async deletePlan(planId) {
|
||||
if (!confirm(`Delete plan "${planId}"? This cannot be undone.`)) return;
|
||||
if (!confirm(i18n.jsDeleteConfirm.replace('{id}', planId))) return;
|
||||
this.errorMsg = '';
|
||||
try {
|
||||
const resp = await fetch(`/api/plans/${encodeURIComponent(planId)}`, { method: 'DELETE' });
|
||||
if (!resp.ok && resp.status !== 204) {
|
||||
const err = await resp.json().catch(() => ({ detail: resp.statusText }));
|
||||
throw new Error(err.detail || 'Delete failed');
|
||||
throw new Error(err.detail || i18n.jsDeleteFailed);
|
||||
}
|
||||
this.successMsg = `Plan "${planId}" deleted.`;
|
||||
this.successMsg = i18n.jsPlanDeleted.replace('{id}', planId);
|
||||
await this.loadPlans();
|
||||
} catch (e) {
|
||||
this.errorMsg = e.message;
|
||||
@@ -597,12 +632,12 @@ function planDesigner() {
|
||||
},
|
||||
|
||||
async seedDefaults() {
|
||||
if (!confirm('Seed the four default plans? This is a no-op if plans already exist.')) return;
|
||||
if (!confirm(i18n.jsSeedConfirm)) return;
|
||||
this.seeding = true;
|
||||
this.errorMsg = '';
|
||||
try {
|
||||
const resp = await fetch('/api/plans/seed', { method: 'POST' });
|
||||
if (!resp.ok) throw new Error('Seed failed');
|
||||
if (!resp.ok) throw new Error(i18n.jsSeedFailed);
|
||||
const data = await resp.json();
|
||||
this.successMsg = data.message;
|
||||
await this.loadPlans();
|
||||
@@ -635,8 +670,8 @@ function planDesigner() {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ order }),
|
||||
});
|
||||
if (!resp.ok) throw new Error('Reorder failed');
|
||||
this.successMsg = 'Order saved!';
|
||||
if (!resp.ok) throw new Error(i18n.jsReorderFailed);
|
||||
this.successMsg = i18n.jsOrderSaved;
|
||||
this.orderDirty = false;
|
||||
} catch (e) {
|
||||
this.errorMsg = e.message;
|
||||
|
||||
+193
-157
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}User Management – Admin – DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("admin_users.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8" x-data="adminUsersApp()">
|
||||
@@ -9,11 +9,11 @@
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900 flex items-center gap-2">
|
||||
<i class="fas fa-users text-blue-500" aria-hidden="true"></i>
|
||||
User Management
|
||||
<span class="text-xs font-semibold text-red-600 bg-red-50 border border-red-200 rounded px-2 py-0.5 ml-1">Admin Only</span>
|
||||
{{ _("admin_users.heading") }}
|
||||
<span class="text-xs font-semibold text-red-600 bg-red-50 border border-red-200 rounded px-2 py-0.5 ml-1">{{ _("admin_users.admin_only_badge") }}</span>
|
||||
</h1>
|
||||
<p class="text-gray-500 text-sm mt-1">
|
||||
Manage user profiles, per-user upload limits, and document ownership.
|
||||
{{ _("admin_users.subheading") }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@@ -21,14 +21,14 @@
|
||||
@click="openCreateModal()"
|
||||
class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
<i class="fas fa-user-plus mr-2" aria-hidden="true"></i> Add User Profile
|
||||
<i class="fas fa-user-plus mr-2" aria-hidden="true"></i> {{ _("admin_users.add_user_profile_btn") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="openCreateLocalUserModal()"
|
||||
class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
||||
>
|
||||
<i class="fas fa-user-lock mr-2" aria-hidden="true"></i> Create Local Account
|
||||
<i class="fas fa-user-lock mr-2" aria-hidden="true"></i> {{ _("admin_users.create_local_account_btn") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<!-- ── Search & pagination controls ──────────────────────────────────────── -->
|
||||
<div class="mb-4 flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
|
||||
<div class="flex-1 max-w-sm">
|
||||
<label for="userSearch" class="sr-only">Search users</label>
|
||||
<label for="userSearch" class="sr-only">{{ _("admin_users.search_users_label") }}</label>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i class="fas fa-search text-gray-400 text-sm" aria-hidden="true"></i>
|
||||
@@ -58,7 +58,7 @@
|
||||
type="search"
|
||||
x-model="search"
|
||||
@input.debounce.300ms="fetchUsers(1)"
|
||||
placeholder="Filter by user ID…"
|
||||
placeholder="{{ _('admin_users.filter_placeholder') }}"
|
||||
class="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
/>
|
||||
</div>
|
||||
@@ -68,24 +68,24 @@
|
||||
|
||||
<!-- ── Table ──────────────────────────────────────────────────────────────── -->
|
||||
<div class="bg-white shadow rounded-lg overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200" aria-label="User list">
|
||||
<table class="min-w-full divide-y divide-gray-200" aria-label="{{ _('admin_users.heading') }}">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User ID</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Display Name</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Documents</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Upload</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Plan</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Upload Limit</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_users.col_user_id") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_users.col_display_name") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_users.col_documents") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_users.col_last_upload") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_users.col_plan") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_users.col_upload_limit") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("common.status") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("common.actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<template x-if="loading">
|
||||
<tr>
|
||||
<td colspan="8" class="px-4 py-8 text-center text-gray-400">
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i> Loading users…
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i> {{ _("admin_users.loading_users") }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
@@ -93,9 +93,9 @@
|
||||
<tr>
|
||||
<td colspan="8" class="px-4 py-8 text-center text-gray-400">
|
||||
<i class="fas fa-users-slash text-3xl block mb-2" aria-hidden="true"></i>
|
||||
No users found.
|
||||
<span x-show="search"> Try a different search term.</span>
|
||||
<span x-show="!search"> Upload some documents or add a profile above.</span>
|
||||
{{ _("admin_users.no_users_found") }}
|
||||
<span x-show="search"> {{ _("admin_users.no_users_search_hint") }}</span>
|
||||
<span x-show="!search"> {{ _("admin_users.no_users_add_hint") }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
@@ -159,9 +159,9 @@
|
||||
<td class="px-4 py-3 text-sm text-center text-gray-700">
|
||||
<span x-show="user.daily_upload_limit !== null && user.daily_upload_limit !== undefined"
|
||||
class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700"
|
||||
x-text="user.daily_upload_limit + ' / day'"></span>
|
||||
x-text="user.daily_upload_limit + ' {{ _("admin_users.per_day") }}'"></span>
|
||||
<span x-show="user.daily_upload_limit === null || user.daily_upload_limit === undefined"
|
||||
class="text-gray-400 text-xs">global default</span>
|
||||
class="text-gray-400 text-xs">{{ _("admin_users.global_default") }}</span>
|
||||
</td>
|
||||
<!-- Status -->
|
||||
<td class="px-4 py-3 text-sm text-center">
|
||||
@@ -172,7 +172,7 @@
|
||||
class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
>
|
||||
<i :class="user.is_blocked ? 'fas fa-ban' : 'fas fa-check-circle'" aria-hidden="true"></i>
|
||||
<span x-text="user.is_blocked ? 'Blocked' : 'Active'"></span>
|
||||
<span x-text="user.is_blocked ? '{{ _("admin_users.status_blocked") }}' : '{{ _("common.active") }}'"></span>
|
||||
</span>
|
||||
</td>
|
||||
<!-- Actions -->
|
||||
@@ -181,18 +181,18 @@
|
||||
type="button"
|
||||
@click="openEditModal(user)"
|
||||
class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 mr-1"
|
||||
:aria-label="`Edit profile for ${user.user_id}`"
|
||||
:aria-label="`{{ _('common.edit') }} ${user.user_id}`"
|
||||
>
|
||||
<i class="fas fa-edit mr-1" aria-hidden="true"></i> Edit
|
||||
<i class="fas fa-edit mr-1" aria-hidden="true"></i> {{ _("common.edit") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="confirmDelete(user)"
|
||||
x-show="user.profile_id !== null"
|
||||
class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded border border-red-300 text-red-600 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-red-400"
|
||||
:aria-label="`Delete profile for ${user.user_id}`"
|
||||
:aria-label="`{{ _('common.delete') }} ${user.user_id}`"
|
||||
>
|
||||
<i class="fas fa-trash mr-1" aria-hidden="true"></i> Delete
|
||||
<i class="fas fa-trash mr-1" aria-hidden="true"></i> {{ _("common.delete") }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -209,10 +209,10 @@
|
||||
:disabled="currentPage <= 1"
|
||||
class="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
<i class="fas fa-chevron-left mr-1" aria-hidden="true"></i> Previous
|
||||
<i class="fas fa-chevron-left mr-1" aria-hidden="true"></i> {{ _("common.previous") }}
|
||||
</button>
|
||||
<span class="text-sm text-gray-500">
|
||||
Page <span x-text="currentPage"></span> of <span x-text="pages"></span>
|
||||
{{ _("common.page") }} <span x-text="currentPage"></span> {{ _("admin_users.pagination_page_of") }} <span x-text="pages"></span>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
@@ -220,7 +220,7 @@
|
||||
:disabled="currentPage >= pages"
|
||||
class="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
Next <i class="fas fa-chevron-right ml-1" aria-hidden="true"></i>
|
||||
{{ _("common.next") }} <i class="fas fa-chevron-right ml-1" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -250,7 +250,7 @@
|
||||
type="button"
|
||||
@click="modalOpen = false"
|
||||
class="text-gray-400 hover:text-gray-600 focus:outline-none"
|
||||
aria-label="Close dialog"
|
||||
aria-label="{{ _('admin_users.modal_close_aria') }}"
|
||||
>
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
@@ -261,7 +261,7 @@
|
||||
|
||||
<!-- User ID (read-only when editing) -->
|
||||
<div>
|
||||
<label for="modal-user-id" class="block text-sm font-medium text-gray-700 mb-1">User ID</label>
|
||||
<label for="modal-user-id" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_users.modal_user_id_label") }}</label>
|
||||
<input
|
||||
id="modal-user-id"
|
||||
type="text"
|
||||
@@ -269,32 +269,32 @@
|
||||
:readonly="!isCreate"
|
||||
:class="!isCreate ? 'bg-gray-100 cursor-not-allowed' : ''"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
placeholder="user@example.com or OAuth sub"
|
||||
placeholder="{{ _('admin_users.modal_user_id_placeholder') }}"
|
||||
required
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<p class="text-xs text-gray-400 mt-1">The stable identifier that matches <code>owner_id</code> in documents.</p>
|
||||
<p class="text-xs text-gray-400 mt-1">{{ _("admin_users.modal_user_id_hint") }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Display name -->
|
||||
<div>
|
||||
<label for="modal-display-name" class="block text-sm font-medium text-gray-700 mb-1">Display Name</label>
|
||||
<label for="modal-display-name" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_users.modal_display_name_label") }}</label>
|
||||
<input
|
||||
id="modal-display-name"
|
||||
type="text"
|
||||
x-model="form.display_name"
|
||||
maxlength="255"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
placeholder="Alice Smith (optional)"
|
||||
placeholder="{{ _('admin_users.modal_display_name_placeholder') }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Daily upload limit -->
|
||||
<div>
|
||||
<label for="modal-limit" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Daily Upload Limit
|
||||
<span class="ml-1 text-xs font-normal text-gray-400">(leave empty to use global default)</span>
|
||||
{{ _("admin_users.modal_daily_limit_label") }}
|
||||
<span class="ml-1 text-xs font-normal text-gray-400">{{ _("admin_users.modal_daily_limit_hint") }}</span>
|
||||
</label>
|
||||
<input
|
||||
id="modal-limit"
|
||||
@@ -302,20 +302,20 @@
|
||||
x-model.number="form.daily_upload_limit"
|
||||
min="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
placeholder="e.g. 50 (0 = unlimited)"
|
||||
placeholder="{{ _('admin_users.modal_daily_limit_placeholder') }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div>
|
||||
<label for="modal-notes" class="block text-sm font-medium text-gray-700 mb-1">Admin Notes</label>
|
||||
<label for="modal-notes" class="block text-sm font-medium text-gray-700 mb-1">{{ _("admin_users.modal_notes_label") }}</label>
|
||||
<textarea
|
||||
id="modal-notes"
|
||||
x-model="form.notes"
|
||||
rows="3"
|
||||
maxlength="4096"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 resize-y"
|
||||
placeholder="Internal notes visible only to admins…"
|
||||
placeholder="{{ _('admin_users.modal_notes_placeholder') }}"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
@@ -336,50 +336,50 @@
|
||||
></span>
|
||||
</button>
|
||||
<span id="modal-blocked-label" class="text-sm font-medium text-gray-700">
|
||||
Block this user
|
||||
<span class="text-xs text-gray-400 font-normal">(prevents new document uploads)</span>
|
||||
{{ _("admin_users.modal_block_label") }}
|
||||
<span class="text-xs text-gray-400 font-normal">{{ _("admin_users.modal_block_hint") }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Subscription tier -->
|
||||
<div>
|
||||
<label for="modal-tier" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Subscription Plan
|
||||
{{ _("admin_users.modal_plan_label") }}
|
||||
</label>
|
||||
<select
|
||||
id="modal-tier"
|
||||
x-model="form.subscription_tier"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 bg-white"
|
||||
>
|
||||
<option value="free">Free — 25 lifetime files</option>
|
||||
<option value="starter">Starter — $2.99/mo (50/mo, 1 mailbox)</option>
|
||||
<option value="professional">Professional — $5.99/mo (150/mo, 3 mailboxes)</option>
|
||||
<option value="business">Business — $7.99/mo (300/mo, unlimited mailboxes)</option>
|
||||
<option value="free">{{ _("admin_users.modal_plan_free") }}</option>
|
||||
<option value="starter">{{ _("admin_users.modal_plan_starter") }}</option>
|
||||
<option value="professional">{{ _("admin_users.modal_plan_professional") }}</option>
|
||||
<option value="business">{{ _("admin_users.modal_plan_business") }}</option>
|
||||
</select>
|
||||
<p class="text-xs text-gray-400 mt-1">
|
||||
Sets the quota limits for this user. Limits are enforced on upload.
|
||||
{{ _("admin_users.modal_plan_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Billing cycle -->
|
||||
<div>
|
||||
<label for="modal-billing-cycle" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Billing Cycle
|
||||
{{ _("admin_users.modal_billing_cycle_label") }}
|
||||
</label>
|
||||
<select
|
||||
id="modal-billing-cycle"
|
||||
x-model="form.subscription_billing_cycle"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 bg-white"
|
||||
>
|
||||
<option value="monthly">Monthly</option>
|
||||
<option value="yearly">Yearly</option>
|
||||
<option value="monthly">{{ _("admin_users.modal_billing_monthly") }}</option>
|
||||
<option value="yearly">{{ _("admin_users.modal_billing_yearly") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Subscription period start (only shown for yearly) -->
|
||||
<div x-show="form.subscription_billing_cycle === 'yearly'" x-cloak>
|
||||
<label for="modal-period-start" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Subscription Period Start
|
||||
{{ _("admin_users.modal_period_start_label") }}
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
@@ -388,7 +388,7 @@
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
/>
|
||||
<p class="text-xs text-gray-400 mt-1">
|
||||
Annual carry-over calculates from this date. Leave blank for monthly enforcement.
|
||||
{{ _("admin_users.modal_period_start_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -409,8 +409,8 @@
|
||||
></span>
|
||||
</button>
|
||||
<span id="modal-complimentary-label" class="text-sm font-medium text-gray-700">
|
||||
Complimentary plan
|
||||
<span class="text-xs text-gray-400 font-normal">(user keeps tier benefits but is never billed — set automatically for admin accounts)</span>
|
||||
{{ _("admin_users.modal_complimentary_label") }}
|
||||
<span class="text-xs text-gray-400 font-normal">{{ _("admin_users.modal_complimentary_hint") }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -423,15 +423,15 @@
|
||||
@click="modalOpen = false"
|
||||
class="px-4 py-2 text-sm font-medium border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-400"
|
||||
>
|
||||
Cancel
|
||||
{{ _("common.cancel") }}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving"
|
||||
class="px-4 py-2 text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span x-show="!saving" x-text="isCreate ? 'Create' : 'Save Changes'"></span>
|
||||
<span x-show="saving"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> Saving…</span>
|
||||
<span x-show="!saving" x-text="isCreate ? '{{ _('common.create') }}' : '{{ _('admin_users.modal_save_changes') }}'"></span>
|
||||
<span x-show="saving"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> {{ _("admin_users.modal_saving") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -444,10 +444,10 @@
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||
<i class="fas fa-user-lock text-green-600" aria-hidden="true"></i>
|
||||
Local User Accounts
|
||||
{{ _("admin_users.local_accounts_heading") }}
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 mt-0.5">
|
||||
Email/password accounts created directly on this server.
|
||||
{{ _("admin_users.local_accounts_subheading") }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@@ -455,35 +455,35 @@
|
||||
@click="openCreateLocalUserModal()"
|
||||
class="inline-flex items-center px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
||||
>
|
||||
<i class="fas fa-plus mr-1" aria-hidden="true"></i> New Account
|
||||
<i class="fas fa-plus mr-1" aria-hidden="true"></i> {{ _("admin_users.new_account_btn") }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200" aria-label="Local user accounts">
|
||||
<table class="min-w-full divide-y divide-gray-200" aria-label="{{ _('admin_users.local_accounts_heading') }}">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Display Name</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_users.col_username") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_users.col_email") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_users.col_display_name") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("common.status") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("admin_users.col_role") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("common.created") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("common.actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<template x-if="localUsersLoading">
|
||||
<tr>
|
||||
<td colspan="7" class="px-4 py-6 text-center text-gray-400">
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i> Loading…
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i> {{ _("admin_users.local_loading") }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-if="!localUsersLoading && localUsers.length === 0">
|
||||
<tr>
|
||||
<td colspan="7" class="px-4 py-6 text-center text-gray-400">
|
||||
No local accounts yet.
|
||||
<button type="button" @click="openCreateLocalUserModal()" class="text-green-600 hover:underline ml-1">Create one.</button>
|
||||
{{ _("admin_users.local_no_accounts") }}
|
||||
<button type="button" @click="openCreateLocalUserModal()" class="text-green-600 hover:underline ml-1">{{ _("admin_users.local_create_one") }}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
@@ -496,14 +496,14 @@
|
||||
<span
|
||||
:class="lu.is_active ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'"
|
||||
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
|
||||
x-text="lu.is_active ? 'Active' : 'Unverified'"
|
||||
x-text="lu.is_active ? '{{ _("common.active") }}' : '{{ _("admin_users.status_unverified") }}'"
|
||||
></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-center">
|
||||
<span
|
||||
:class="lu.is_admin ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-600'"
|
||||
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
|
||||
x-text="lu.is_admin ? 'Admin' : 'User'"
|
||||
x-text="lu.is_admin ? '{{ _("admin_users.role_admin") }}' : '{{ _("admin_users.role_user") }}'"
|
||||
></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap" x-text="lu.created_at ? formatDate(lu.created_at) : '—'"></td>
|
||||
@@ -512,34 +512,34 @@
|
||||
type="button"
|
||||
@click="openEditLocalUserModal(lu)"
|
||||
class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 mr-1"
|
||||
:aria-label="`Edit account for ${lu.username}`"
|
||||
:aria-label="`{{ _('common.edit') }} ${lu.username}`"
|
||||
>
|
||||
<i class="fas fa-edit mr-1" aria-hidden="true"></i> Edit
|
||||
<i class="fas fa-edit mr-1" aria-hidden="true"></i> {{ _("common.edit") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="openSetPasswordModal(lu)"
|
||||
class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded border border-yellow-300 text-yellow-700 bg-white hover:bg-yellow-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-yellow-400 mr-1"
|
||||
:aria-label="`Set password for ${lu.username}`"
|
||||
:aria-label="`{{ _('admin_users.btn_password') }} ${lu.username}`"
|
||||
>
|
||||
<i class="fas fa-key mr-1" aria-hidden="true"></i> Password
|
||||
<i class="fas fa-key mr-1" aria-hidden="true"></i> {{ _("admin_users.btn_password") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="sendPasswordReset(lu)"
|
||||
class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded border border-indigo-300 text-indigo-600 bg-white hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-400 mr-1"
|
||||
:aria-label="`Send password reset email to ${lu.username}`"
|
||||
title="Send password reset email"
|
||||
:aria-label="`{{ _('admin_users.btn_reset') }} ${lu.username}`"
|
||||
title="{{ _('admin_users.btn_reset') }}"
|
||||
>
|
||||
<i class="fas fa-envelope mr-1" aria-hidden="true"></i> Reset
|
||||
<i class="fas fa-envelope mr-1" aria-hidden="true"></i> {{ _("admin_users.btn_reset") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="confirmDeleteLocalUser(lu)"
|
||||
class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded border border-red-300 text-red-600 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-red-400"
|
||||
:aria-label="`Delete account for ${lu.username}`"
|
||||
:aria-label="`{{ _('common.delete') }} ${lu.username}`"
|
||||
>
|
||||
<i class="fas fa-trash mr-1" aria-hidden="true"></i> Delete
|
||||
<i class="fas fa-trash mr-1" aria-hidden="true"></i> {{ _("common.delete") }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -562,44 +562,44 @@
|
||||
>
|
||||
<div class="bg-white rounded-lg shadow-xl w-full max-w-lg" @click.outside="localUserModal.open = false">
|
||||
<div class="px-6 py-4 border-b flex items-center justify-between">
|
||||
<h2 id="create-local-user-title" class="text-lg font-semibold text-gray-900">Create Local Account</h2>
|
||||
<button type="button" @click="localUserModal.open = false" aria-label="Close" class="text-gray-400 hover:text-gray-600">
|
||||
<h2 id="create-local-user-title" class="text-lg font-semibold text-gray-900">{{ _("admin_users.create_local_title") }}</h2>
|
||||
<button type="button" @click="localUserModal.open = false" aria-label="{{ _('common.close') }}" class="text-gray-400 hover:text-gray-600">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form @submit.prevent="submitCreateLocalUser" class="px-6 py-5 space-y-4">
|
||||
<div>
|
||||
<label for="lu-email" class="block text-sm font-medium text-gray-700">Email <span aria-hidden="true" class="text-red-500">*</span></label>
|
||||
<label for="lu-email" class="block text-sm font-medium text-gray-700">{{ _("admin_users.col_email") }} <span aria-hidden="true" class="text-red-500">*</span></label>
|
||||
<input type="email" id="lu-email" x-model="localUserModal.form.email" required autocomplete="off"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 text-sm"
|
||||
style="min-height:40px;" aria-required="true">
|
||||
</div>
|
||||
<div>
|
||||
<label for="lu-username" class="block text-sm font-medium text-gray-700">Username <span aria-hidden="true" class="text-red-500">*</span></label>
|
||||
<label for="lu-username" class="block text-sm font-medium text-gray-700">{{ _("admin_users.col_username") }} <span aria-hidden="true" class="text-red-500">*</span></label>
|
||||
<input type="text" id="lu-username" x-model="localUserModal.form.username" required autocomplete="off"
|
||||
pattern="^[a-zA-Z0-9_-]+$" minlength="3" maxlength="64"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 text-sm"
|
||||
style="min-height:40px;" aria-required="true" aria-describedby="lu-username-hint">
|
||||
<p id="lu-username-hint" class="mt-1 text-xs text-gray-500">3–64 characters. Letters, numbers, hyphens and underscores only.</p>
|
||||
<p id="lu-username-hint" class="mt-1 text-xs text-gray-500">{{ _("admin_users.local_username_hint") }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="lu-display-name" class="block text-sm font-medium text-gray-700">Display Name <span class="text-gray-400">(optional)</span></label>
|
||||
<label for="lu-display-name" class="block text-sm font-medium text-gray-700">{{ _("admin_users.col_display_name") }} <span class="text-gray-400">{{ _("admin_users.local_display_name_optional") }}</span></label>
|
||||
<input type="text" id="lu-display-name" x-model="localUserModal.form.display_name" autocomplete="off" maxlength="255"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 text-sm"
|
||||
style="min-height:40px;">
|
||||
</div>
|
||||
<div>
|
||||
<label for="lu-password" class="block text-sm font-medium text-gray-700">Password <span aria-hidden="true" class="text-red-500">*</span></label>
|
||||
<label for="lu-password" class="block text-sm font-medium text-gray-700">{{ _("auth.password_label") }} <span aria-hidden="true" class="text-red-500">*</span></label>
|
||||
<input type="password" id="lu-password" x-model="localUserModal.form.password" required autocomplete="new-password"
|
||||
minlength="8" maxlength="128"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 text-sm"
|
||||
style="min-height:40px;" aria-required="true" aria-describedby="lu-password-hint">
|
||||
<p id="lu-password-hint" class="mt-1 text-xs text-gray-500">Minimum 8 characters.</p>
|
||||
<p id="lu-password-hint" class="mt-1 text-xs text-gray-500">{{ _("admin_users.local_password_hint") }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="checkbox" id="lu-is-admin" x-model="localUserModal.form.is_admin"
|
||||
class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500">
|
||||
<label for="lu-is-admin" class="text-sm text-gray-700">Grant admin privileges</label>
|
||||
<label for="lu-is-admin" class="text-sm text-gray-700">{{ _("admin_users.local_admin_privileges") }}</label>
|
||||
</div>
|
||||
<div x-show="localUserModal.error" x-cloak
|
||||
class="bg-red-50 border-l-4 border-red-500 text-red-700 p-3 rounded text-sm"
|
||||
@@ -608,12 +608,12 @@
|
||||
<div class="flex justify-end gap-3 pt-2">
|
||||
<button type="button" @click="localUserModal.open = false"
|
||||
class="px-4 py-2 text-sm font-medium border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
Cancel
|
||||
{{ _("common.cancel") }}
|
||||
</button>
|
||||
<button type="submit" :disabled="localUserModal.saving"
|
||||
class="px-4 py-2 text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-green-500 disabled:opacity-50">
|
||||
<span x-show="!localUserModal.saving">Create Account</span>
|
||||
<span x-show="localUserModal.saving" x-cloak><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> Creating…</span>
|
||||
<span x-show="!localUserModal.saving">{{ _("admin_users.local_create_btn") }}</span>
|
||||
<span x-show="localUserModal.saving" x-cloak><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> {{ _("admin_users.local_creating") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -633,20 +633,20 @@
|
||||
>
|
||||
<div class="bg-white rounded-lg shadow-xl w-full max-w-lg" @click.outside="editLocalUserModal.open = false">
|
||||
<div class="px-6 py-4 border-b flex items-center justify-between">
|
||||
<h2 id="edit-local-user-title" class="text-lg font-semibold text-gray-900">Edit Local Account</h2>
|
||||
<button type="button" @click="editLocalUserModal.open = false" aria-label="Close" class="text-gray-400 hover:text-gray-600">
|
||||
<h2 id="edit-local-user-title" class="text-lg font-semibold text-gray-900">{{ _("admin_users.edit_local_title") }}</h2>
|
||||
<button type="button" @click="editLocalUserModal.open = false" aria-label="{{ _('common.close') }}" class="text-gray-400 hover:text-gray-600">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form @submit.prevent="submitEditLocalUser" class="px-6 py-5 space-y-4">
|
||||
<div>
|
||||
<label for="elu-email" class="block text-sm font-medium text-gray-700">Email <span aria-hidden="true" class="text-red-500">*</span></label>
|
||||
<label for="elu-email" class="block text-sm font-medium text-gray-700">{{ _("admin_users.col_email") }} <span aria-hidden="true" class="text-red-500">*</span></label>
|
||||
<input type="email" id="elu-email" x-model="editLocalUserModal.form.email" required autocomplete="off"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 text-sm"
|
||||
style="min-height:40px;" aria-required="true">
|
||||
</div>
|
||||
<div>
|
||||
<label for="elu-display-name" class="block text-sm font-medium text-gray-700">Display Name <span class="text-gray-400">(optional)</span></label>
|
||||
<label for="elu-display-name" class="block text-sm font-medium text-gray-700">{{ _("admin_users.col_display_name") }} <span class="text-gray-400">{{ _("admin_users.local_display_name_optional") }}</span></label>
|
||||
<input type="text" id="elu-display-name" x-model="editLocalUserModal.form.display_name" autocomplete="off" maxlength="255"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 text-sm"
|
||||
style="min-height:40px;">
|
||||
@@ -654,12 +654,12 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="checkbox" id="elu-is-admin" x-model="editLocalUserModal.form.is_admin"
|
||||
class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
|
||||
<label for="elu-is-admin" class="text-sm text-gray-700">Admin privileges</label>
|
||||
<label for="elu-is-admin" class="text-sm text-gray-700">{{ _("admin_users.local_admin_privileges_short") }}</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="checkbox" id="elu-is-active" x-model="editLocalUserModal.form.is_active"
|
||||
class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
|
||||
<label for="elu-is-active" class="text-sm text-gray-700">Account active</label>
|
||||
<label for="elu-is-active" class="text-sm text-gray-700">{{ _("admin_users.local_account_active") }}</label>
|
||||
</div>
|
||||
<div x-show="editLocalUserModal.error" x-cloak
|
||||
class="bg-red-50 border-l-4 border-red-500 text-red-700 p-3 rounded text-sm"
|
||||
@@ -668,12 +668,12 @@
|
||||
<div class="flex justify-end gap-3 pt-2">
|
||||
<button type="button" @click="editLocalUserModal.open = false"
|
||||
class="px-4 py-2 text-sm font-medium border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
Cancel
|
||||
{{ _("common.cancel") }}
|
||||
</button>
|
||||
<button type="submit" :disabled="editLocalUserModal.saving"
|
||||
class="px-4 py-2 text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 disabled:opacity-50">
|
||||
<span x-show="!editLocalUserModal.saving">Save Changes</span>
|
||||
<span x-show="editLocalUserModal.saving" x-cloak><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> Saving…</span>
|
||||
<span x-show="!editLocalUserModal.saving">{{ _("admin_users.modal_save_changes") }}</span>
|
||||
<span x-show="editLocalUserModal.saving" x-cloak><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> {{ _("admin_users.local_saving") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -693,23 +693,23 @@
|
||||
>
|
||||
<div class="bg-white rounded-lg shadow-xl w-full max-w-md" @click.outside="setPasswordModal.open = false">
|
||||
<div class="px-6 py-4 border-b flex items-center justify-between">
|
||||
<h2 id="set-password-title" class="text-lg font-semibold text-gray-900">Set Temporary Password</h2>
|
||||
<button type="button" @click="setPasswordModal.open = false" aria-label="Close" class="text-gray-400 hover:text-gray-600">
|
||||
<h2 id="set-password-title" class="text-lg font-semibold text-gray-900">{{ _("admin_users.set_password_title") }}</h2>
|
||||
<button type="button" @click="setPasswordModal.open = false" aria-label="{{ _('common.close') }}" class="text-gray-400 hover:text-gray-600">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form @submit.prevent="submitSetPassword" class="px-6 py-5 space-y-4">
|
||||
<p class="text-sm text-gray-600">
|
||||
Set a new password directly for <strong class="font-mono" x-text="setPasswordModal.username"></strong>.
|
||||
The user should change this password after logging in.
|
||||
{{ _("admin_users.set_password_desc_pre") }} <strong class="font-mono" x-text="setPasswordModal.username"></strong>.
|
||||
{{ _("admin_users.set_password_desc") }}
|
||||
</p>
|
||||
<div>
|
||||
<label for="sp-password" class="block text-sm font-medium text-gray-700">New Password <span aria-hidden="true" class="text-red-500">*</span></label>
|
||||
<label for="sp-password" class="block text-sm font-medium text-gray-700">{{ _("admin_users.new_password_label") }} <span aria-hidden="true" class="text-red-500">*</span></label>
|
||||
<input type="password" id="sp-password" x-model="setPasswordModal.password" required autocomplete="new-password"
|
||||
minlength="8" maxlength="128"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring focus:ring-yellow-500 focus:ring-opacity-50 text-sm"
|
||||
style="min-height:40px;" aria-required="true" aria-describedby="sp-password-hint">
|
||||
<p id="sp-password-hint" class="mt-1 text-xs text-gray-500">Minimum 8 characters.</p>
|
||||
<p id="sp-password-hint" class="mt-1 text-xs text-gray-500">{{ _("admin_users.local_password_hint") }}</p>
|
||||
</div>
|
||||
<div x-show="setPasswordModal.error" x-cloak
|
||||
class="bg-red-50 border-l-4 border-red-500 text-red-700 p-3 rounded text-sm"
|
||||
@@ -718,12 +718,12 @@
|
||||
<div class="flex justify-end gap-3 pt-2">
|
||||
<button type="button" @click="setPasswordModal.open = false"
|
||||
class="px-4 py-2 text-sm font-medium border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
Cancel
|
||||
{{ _("common.cancel") }}
|
||||
</button>
|
||||
<button type="submit" :disabled="setPasswordModal.saving"
|
||||
class="px-4 py-2 text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-yellow-500 disabled:opacity-50">
|
||||
<span x-show="!setPasswordModal.saving">Set Password</span>
|
||||
<span x-show="setPasswordModal.saving" x-cloak><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> Setting…</span>
|
||||
<span x-show="!setPasswordModal.saving">{{ _("admin_users.set_password_btn") }}</span>
|
||||
<span x-show="setPasswordModal.saving" x-cloak><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> {{ _("admin_users.setting") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -743,25 +743,25 @@
|
||||
>
|
||||
<div class="bg-white rounded-lg shadow-xl w-full max-w-md" @click.outside="deleteLocalUserModal.open = false">
|
||||
<div class="px-6 py-4 border-b">
|
||||
<h2 id="delete-local-user-title" class="text-lg font-semibold text-gray-900">Delete Local Account</h2>
|
||||
<h2 id="delete-local-user-title" class="text-lg font-semibold text-gray-900">{{ _("admin_users.delete_local_title") }}</h2>
|
||||
</div>
|
||||
<div class="px-6 py-5">
|
||||
<p class="text-sm text-gray-700">
|
||||
Are you sure you want to delete the account for
|
||||
{{ _("admin_users.delete_local_confirm") }}
|
||||
<strong class="font-mono" x-text="deleteLocalUserModal.username"></strong>
|
||||
(<span class="font-mono" x-text="deleteLocalUserModal.email"></span>)?
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 mt-2">This cannot be undone. Documents owned by this user are <strong>not</strong> deleted.</p>
|
||||
<p class="text-sm text-gray-500 mt-2">{{ _("admin_users.delete_local_warning") }}</p>
|
||||
</div>
|
||||
<div class="px-6 py-4 border-t flex justify-end gap-3">
|
||||
<button type="button" @click="deleteLocalUserModal.open = false"
|
||||
class="px-4 py-2 text-sm font-medium border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
Cancel
|
||||
{{ _("common.cancel") }}
|
||||
</button>
|
||||
<button type="button" @click="executeDeleteLocalUser()" :disabled="deleteLocalUserModal.deleting"
|
||||
class="px-4 py-2 text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 disabled:opacity-50">
|
||||
<span x-show="!deleteLocalUserModal.deleting">Delete Account</span>
|
||||
<span x-show="deleteLocalUserModal.deleting" x-cloak><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> Deleting…</span>
|
||||
<span x-show="!deleteLocalUserModal.deleting">{{ _("admin_users.delete_account_btn") }}</span>
|
||||
<span x-show="deleteLocalUserModal.deleting" x-cloak><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> {{ _("admin_users.deleting") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -780,15 +780,15 @@
|
||||
>
|
||||
<div class="bg-white rounded-lg shadow-xl w-full max-w-md" @click.outside="deleteModal.open = false">
|
||||
<div class="px-6 py-4 border-b">
|
||||
<h2 id="delete-modal-title" class="text-lg font-semibold text-gray-900">Delete User Profile</h2>
|
||||
<h2 id="delete-modal-title" class="text-lg font-semibold text-gray-900">{{ _("admin_users.delete_profile_title") }}</h2>
|
||||
</div>
|
||||
<div class="px-6 py-5">
|
||||
<p class="text-sm text-gray-700">
|
||||
Are you sure you want to delete the profile for
|
||||
{{ _("admin_users.delete_profile_confirm") }}
|
||||
<strong class="font-mono" x-text="deleteModal.user_id"></strong>?
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 mt-2">
|
||||
This only removes the admin-managed profile record. Documents owned by this user are <strong>not</strong> deleted.
|
||||
{{ _("admin_users.delete_profile_warning") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-6 py-4 border-t flex justify-end gap-3">
|
||||
@@ -797,7 +797,7 @@
|
||||
@click="deleteModal.open = false"
|
||||
class="px-4 py-2 text-sm font-medium border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
{{ _("common.cancel") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -805,8 +805,8 @@
|
||||
:disabled="deleteModal.deleting"
|
||||
class="px-4 py-2 text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 disabled:opacity-50"
|
||||
>
|
||||
<span x-show="!deleteModal.deleting">Delete Profile</span>
|
||||
<span x-show="deleteModal.deleting"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> Deleting…</span>
|
||||
<span x-show="!deleteModal.deleting">{{ _("admin_users.delete_profile_btn") }}</span>
|
||||
<span x-show="deleteModal.deleting"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i> {{ _("admin_users.deleting") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -814,8 +814,43 @@
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__i18nAdminUsers = {
|
||||
noUsers: {{ _("admin_users.total_no_users") | tojson }},
|
||||
oneUser: {{ _("admin_users.total_one_user") | tojson }},
|
||||
countUsers: {{ _("admin_users.total_count_users") | tojson }},
|
||||
modalAddTitle: {{ _("admin_users.modal_add_title") | tojson }},
|
||||
modalEditTitle: {{ _("admin_users.modal_edit_title") | tojson }},
|
||||
failedLoadUsers: {{ _("admin_users.js_failed_load_users") | tojson }},
|
||||
networkError: {{ _("admin_users.js_network_error") | tojson }},
|
||||
saveFailed: {{ _("admin_users.js_save_failed") | tojson }},
|
||||
saved: {{ _("admin_users.js_saved") | tojson }},
|
||||
profileSaved: {{ _("admin_users.js_profile_saved") | tojson }},
|
||||
deleteFailed: {{ _("admin_users.js_delete_failed") | tojson }},
|
||||
deleted: {{ _("admin_users.js_deleted") | tojson }},
|
||||
profileDeleted: {{ _("admin_users.js_profile_deleted") | tojson }},
|
||||
failedLoadLocal: {{ _("admin_users.js_failed_load_local") | tojson }},
|
||||
accountCreated: {{ _("admin_users.js_account_created") | tojson }},
|
||||
accountCreatedMsg: {{ _("admin_users.js_account_created_msg") | tojson }},
|
||||
failedCreate: {{ _("admin_users.js_failed_create") | tojson }},
|
||||
accountDeletedMsg: {{ _("admin_users.js_account_deleted_msg") | tojson }},
|
||||
updated: {{ _("admin_users.js_updated") | tojson }},
|
||||
accountUpdated: {{ _("admin_users.js_account_updated") | tojson }},
|
||||
failedUpdate: {{ _("admin_users.js_failed_update") | tojson }},
|
||||
passwordSet: {{ _("admin_users.js_password_set") | tojson }},
|
||||
passwordSetMsg: {{ _("admin_users.js_password_set_msg") | tojson }},
|
||||
failedSetPassword: {{ _("admin_users.js_failed_set_password") | tojson }},
|
||||
emailSent: {{ _("admin_users.js_email_sent") | tojson }},
|
||||
emailSentMsg: {{ _("admin_users.js_email_sent_msg") | tojson }},
|
||||
emailNotSent: {{ _("admin_users.js_email_not_sent") | tojson }},
|
||||
smtpNotConfigured: {{ _("admin_users.js_smtp_not_configured") | tojson }},
|
||||
failed: {{ _("admin_users.js_failed") | tojson }},
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function adminUsersApp() {
|
||||
const i18n = window.__i18nAdminUsers;
|
||||
return {
|
||||
// State
|
||||
users: [],
|
||||
@@ -887,8 +922,9 @@ function adminUsersApp() {
|
||||
|
||||
get totalLabel() {
|
||||
if (this.loading) return '';
|
||||
if (this.total === 0) return 'No users';
|
||||
return `${this.total} user${this.total !== 1 ? 's' : ''}`;
|
||||
if (this.total === 0) return i18n.noUsers;
|
||||
if (this.total === 1) return i18n.oneUser;
|
||||
return i18n.countUsers.replace('{count}', this.total);
|
||||
},
|
||||
|
||||
async init() {
|
||||
@@ -908,7 +944,7 @@ function adminUsersApp() {
|
||||
const resp = await fetch(`/api/admin/users/?${params}`);
|
||||
if (!resp.ok) {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
this.showAlert('error', 'Failed to load users', err.detail || resp.statusText);
|
||||
this.showAlert('error', i18n.failedLoadUsers, err.detail || resp.statusText);
|
||||
return;
|
||||
}
|
||||
const data = await resp.json();
|
||||
@@ -916,7 +952,7 @@ function adminUsersApp() {
|
||||
this.total = data.total;
|
||||
this.pages = data.pages;
|
||||
} catch (e) {
|
||||
this.showAlert('error', 'Network error', e.message);
|
||||
this.showAlert('error', i18n.networkError, e.message);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
@@ -924,14 +960,14 @@ function adminUsersApp() {
|
||||
|
||||
openCreateModal() {
|
||||
this.isCreate = true;
|
||||
this.modalTitle = 'Add User Profile';
|
||||
this.modalTitle = i18n.modalAddTitle;
|
||||
this.form = { user_id: '', display_name: '', daily_upload_limit: null, notes: '', is_blocked: false, subscription_tier: 'free', subscription_billing_cycle: 'monthly', subscription_period_start: null, is_complimentary: false };
|
||||
this.modalOpen = true;
|
||||
},
|
||||
|
||||
openEditModal(user) {
|
||||
this.isCreate = false;
|
||||
this.modalTitle = 'Edit User Profile';
|
||||
this.modalTitle = i18n.modalEditTitle;
|
||||
this.form = {
|
||||
user_id: user.user_id,
|
||||
display_name: user.display_name || '',
|
||||
@@ -970,14 +1006,14 @@ function adminUsersApp() {
|
||||
});
|
||||
if (!resp.ok) {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
this.showAlert('error', 'Save failed', err.detail || resp.statusText);
|
||||
this.showAlert('error', i18n.saveFailed, err.detail || resp.statusText);
|
||||
return;
|
||||
}
|
||||
this.modalOpen = false;
|
||||
this.showAlert('success', 'Saved', `Profile for "${this.form.user_id}" has been saved.`);
|
||||
this.showAlert('success', i18n.saved, i18n.profileSaved.replace('{id}', this.form.user_id));
|
||||
await this.fetchUsers(this.currentPage);
|
||||
} catch (e) {
|
||||
this.showAlert('error', 'Network error', e.message);
|
||||
this.showAlert('error', i18n.networkError, e.message);
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
@@ -1001,15 +1037,15 @@ function adminUsersApp() {
|
||||
});
|
||||
if (resp.status === 204) {
|
||||
this.deleteModal.open = false;
|
||||
this.showAlert('success', 'Deleted', `Profile for "${this.deleteModal.user_id}" has been removed.`);
|
||||
this.showAlert('success', i18n.deleted, i18n.profileDeleted.replace('{id}', this.deleteModal.user_id));
|
||||
await this.fetchUsers(this.currentPage);
|
||||
} else {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
this.showAlert('error', 'Delete failed', err.detail || resp.statusText);
|
||||
this.showAlert('error', i18n.deleteFailed, err.detail || resp.statusText);
|
||||
this.deleteModal.open = false;
|
||||
}
|
||||
} catch (e) {
|
||||
this.showAlert('error', 'Network error', e.message);
|
||||
this.showAlert('error', i18n.networkError, e.message);
|
||||
this.deleteModal.open = false;
|
||||
} finally {
|
||||
this.deleteModal.deleting = false;
|
||||
@@ -1044,12 +1080,12 @@ function adminUsersApp() {
|
||||
headers: { 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || '' },
|
||||
});
|
||||
if (!resp.ok) {
|
||||
this.showAlert('error', 'Failed to load local users', resp.statusText);
|
||||
this.showAlert('error', i18n.failedLoadLocal, resp.statusText);
|
||||
return;
|
||||
}
|
||||
this.localUsers = await resp.json();
|
||||
} catch (e) {
|
||||
this.showAlert('error', 'Network error', e.message);
|
||||
this.showAlert('error', i18n.networkError, e.message);
|
||||
} finally {
|
||||
this.localUsersLoading = false;
|
||||
}
|
||||
@@ -1076,14 +1112,14 @@ function adminUsersApp() {
|
||||
});
|
||||
if (resp.ok) {
|
||||
this.localUserModal.open = false;
|
||||
this.showAlert('success', 'Account created', `Local account for "${this.localUserModal.form.username}" was created successfully.`);
|
||||
this.showAlert('success', i18n.accountCreated, i18n.accountCreatedMsg.replace('{username}', this.localUserModal.form.username));
|
||||
await this.fetchLocalUsers();
|
||||
} else {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
this.localUserModal.error = err.detail || 'Failed to create account.';
|
||||
this.localUserModal.error = err.detail || i18n.failedCreate;
|
||||
}
|
||||
} catch (e) {
|
||||
this.localUserModal.error = 'Network error: ' + e.message;
|
||||
this.localUserModal.error = i18n.networkError + ': ' + e.message;
|
||||
} finally {
|
||||
this.localUserModal.saving = false;
|
||||
}
|
||||
@@ -1129,14 +1165,14 @@ function adminUsersApp() {
|
||||
});
|
||||
if (resp.ok) {
|
||||
this.editLocalUserModal.open = false;
|
||||
this.showAlert('success', 'Updated', `Account has been updated.`);
|
||||
this.showAlert('success', i18n.updated, i18n.accountUpdated);
|
||||
await this.fetchLocalUsers();
|
||||
} else {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
this.editLocalUserModal.error = err.detail || 'Failed to update account.';
|
||||
this.editLocalUserModal.error = err.detail || i18n.failedUpdate;
|
||||
}
|
||||
} catch (e) {
|
||||
this.editLocalUserModal.error = 'Network error: ' + e.message;
|
||||
this.editLocalUserModal.error = i18n.networkError + ': ' + e.message;
|
||||
} finally {
|
||||
this.editLocalUserModal.saving = false;
|
||||
}
|
||||
@@ -1165,13 +1201,13 @@ function adminUsersApp() {
|
||||
});
|
||||
if (resp.ok) {
|
||||
this.setPasswordModal.open = false;
|
||||
this.showAlert('success', 'Password set', `Password for "${this.setPasswordModal.username}" has been updated.`);
|
||||
this.showAlert('success', i18n.passwordSet, i18n.passwordSetMsg.replace('{username}', this.setPasswordModal.username));
|
||||
} else {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
this.setPasswordModal.error = err.detail || 'Failed to set password.';
|
||||
this.setPasswordModal.error = err.detail || i18n.failedSetPassword;
|
||||
}
|
||||
} catch (e) {
|
||||
this.setPasswordModal.error = 'Network error: ' + e.message;
|
||||
this.setPasswordModal.error = i18n.networkError + ': ' + e.message;
|
||||
} finally {
|
||||
this.setPasswordModal.saving = false;
|
||||
}
|
||||
@@ -1187,14 +1223,14 @@ function adminUsersApp() {
|
||||
});
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
if (resp.ok && data.sent) {
|
||||
this.showAlert('success', 'Email sent', `Password reset email sent to "${lu.email}".`);
|
||||
this.showAlert('success', i18n.emailSent, i18n.emailSentMsg.replace('{email}', lu.email));
|
||||
} else if (resp.ok && !data.sent) {
|
||||
this.showAlert('error', 'Email not sent', data.reason || 'SMTP is not configured.');
|
||||
this.showAlert('error', i18n.emailNotSent, data.reason || i18n.smtpNotConfigured);
|
||||
} else {
|
||||
this.showAlert('error', 'Failed', data.detail || resp.statusText);
|
||||
this.showAlert('error', i18n.failed, data.detail || resp.statusText);
|
||||
}
|
||||
} catch (e) {
|
||||
this.showAlert('error', 'Network error', e.message);
|
||||
this.showAlert('error', i18n.networkError, e.message);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1207,15 +1243,15 @@ function adminUsersApp() {
|
||||
});
|
||||
if (resp.status === 204) {
|
||||
this.deleteLocalUserModal.open = false;
|
||||
this.showAlert('success', 'Deleted', `Account for "${this.deleteLocalUserModal.username}" has been removed.`);
|
||||
this.showAlert('success', i18n.deleted, i18n.accountDeletedMsg.replace('{username}', this.deleteLocalUserModal.username));
|
||||
await this.fetchLocalUsers();
|
||||
} else {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
this.showAlert('error', 'Delete failed', err.detail || resp.statusText);
|
||||
this.showAlert('error', i18n.deleteFailed, err.detail || resp.statusText);
|
||||
this.deleteLocalUserModal.open = false;
|
||||
}
|
||||
} catch (e) {
|
||||
this.showAlert('error', 'Network error', e.message);
|
||||
this.showAlert('error', i18n.networkError, e.message);
|
||||
this.deleteLocalUserModal.open = false;
|
||||
} finally {
|
||||
this.deleteLocalUserModal.deleting = false;
|
||||
|
||||
@@ -1,32 +1,30 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}API Tokens – DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("api_tokens.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div x-data="apiTokens()" x-init="loadTokens()" class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<header class="mb-8">
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<i class="fas fa-key text-yellow-500" aria-hidden="true"></i>
|
||||
API Tokens
|
||||
{{ _("api_tokens.heading") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-400 text-sm leading-relaxed max-w-2xl">
|
||||
Create personal API tokens to interact with the DocuElevate API programmatically.
|
||||
Use tokens for webhook uploads, CI/CD pipelines, or any script that needs to upload
|
||||
or retrieve documents.
|
||||
{{ _("api_tokens.intro") }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Create token section -->
|
||||
<section class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6" aria-labelledby="create-token-heading">
|
||||
<h2 id="create-token-heading" class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Create New Token</h2>
|
||||
<h2 id="create-token-heading" class="text-lg font-semibold text-gray-900 dark:text-white mb-4">{{ _("api_tokens.create_heading") }}</h2>
|
||||
<form @submit.prevent="createToken()" class="flex flex-col sm:flex-row gap-3">
|
||||
<div class="flex-1">
|
||||
<label for="token-name" class="sr-only">Token name</label>
|
||||
<label for="token-name" class="sr-only">{{ _("api_tokens.token_name_label") }}</label>
|
||||
<input
|
||||
id="token-name"
|
||||
type="text"
|
||||
x-model="newTokenName"
|
||||
placeholder="e.g. CI Pipeline, Webhook Upload, My Script"
|
||||
placeholder="{{ _('api_tokens.token_name_placeholder') }}"
|
||||
required
|
||||
minlength="1"
|
||||
maxlength="255"
|
||||
@@ -44,7 +42,7 @@
|
||||
style="min-height:40px; min-width:44px;"
|
||||
>
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i>
|
||||
<span x-text="creating ? 'Creating…' : 'Create Token'"></span>
|
||||
<span x-text="creating ? '{{ _('api_tokens.creating') }}' : '{{ _('api_tokens.create_token') }}'"></span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -54,9 +52,9 @@
|
||||
<div class="flex items-start gap-3">
|
||||
<i class="fas fa-check-circle text-green-600 dark:text-green-400 mt-0.5 text-lg" aria-hidden="true"></i>
|
||||
<div class="flex-1">
|
||||
<p class="font-semibold text-green-800 dark:text-green-200 text-sm">Token created successfully!</p>
|
||||
<p class="font-semibold text-green-800 dark:text-green-200 text-sm">{{ _("api_tokens.token_created") }}</p>
|
||||
<p class="text-green-700 dark:text-green-300 text-xs mt-1">
|
||||
Copy this token now — it will <strong>not be shown again</strong>.
|
||||
{{ _("api_tokens.copy_warning_1") }} <strong>{{ _("api_tokens.copy_warning_2") }}</strong>.
|
||||
</p>
|
||||
<div class="mt-3 flex items-center gap-2">
|
||||
<code
|
||||
@@ -72,10 +70,10 @@
|
||||
hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500
|
||||
transition-colors"
|
||||
style="min-height:40px; min-width:44px;"
|
||||
:aria-label="copied ? 'Copied!' : 'Copy token to clipboard'"
|
||||
:aria-label="copied ? '{{ _('common.copied') }}' : '{{ _('api_tokens.copy_to_clipboard') }}'"
|
||||
>
|
||||
<i :class="copied ? 'fas fa-check text-green-600' : 'fas fa-copy'" aria-hidden="true"></i>
|
||||
<span class="ml-1 hidden sm:inline" x-text="copied ? 'Copied!' : 'Copy'"></span>
|
||||
<span class="ml-1 hidden sm:inline" x-text="copied ? '{{ _('common.copied') }}' : '{{ _('common.copy') }}'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,11 +86,11 @@
|
||||
<section class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6" aria-labelledby="usage-heading">
|
||||
<h2 id="usage-heading" class="text-lg font-semibold text-gray-900 dark:text-white mb-3">
|
||||
<i class="fas fa-code text-blue-500 mr-2" aria-hidden="true"></i>
|
||||
Usage Example
|
||||
{{ _("api_tokens.usage_heading") }}
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">
|
||||
Use your API token in the <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded text-xs">Authorization</code>
|
||||
header with any API request:
|
||||
{{ _("api_tokens.usage_intro_pre") }} <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded text-xs">Authorization</code>
|
||||
{{ _("api_tokens.usage_intro_post") }}
|
||||
</p>
|
||||
<div class="relative">
|
||||
<pre class="bg-gray-900 text-green-400 rounded-lg p-4 text-sm overflow-x-auto font-mono leading-relaxed"><code>curl -X POST "<span x-text="baseUrl"></span>/api/files/ui-upload" \
|
||||
@@ -104,7 +102,7 @@
|
||||
class="absolute top-2 right-2 px-2 py-1 bg-gray-700 text-gray-300 rounded text-xs hover:bg-gray-600
|
||||
focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors"
|
||||
style="min-height:30px; min-width:30px;"
|
||||
aria-label="Copy upload example to clipboard"
|
||||
aria-label="{{ _('api_tokens.copy_upload_example') }}"
|
||||
>
|
||||
<i class="fas fa-copy" aria-hidden="true"></i>
|
||||
</button>
|
||||
@@ -114,14 +112,14 @@
|
||||
<!-- Tokens list -->
|
||||
<section class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden" aria-labelledby="tokens-heading">
|
||||
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 id="tokens-heading" class="text-lg font-semibold text-gray-900 dark:text-white">Your Tokens</h2>
|
||||
<h2 id="tokens-heading" class="text-lg font-semibold text-gray-900 dark:text-white">{{ _("api_tokens.your_tokens") }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<template x-if="loading">
|
||||
<div class="p-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-spinner fa-spin text-2xl mb-2" aria-hidden="true"></i>
|
||||
<p class="text-sm">Loading tokens…</p>
|
||||
<p class="text-sm">{{ _("api_tokens.loading_tokens") }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -129,24 +127,24 @@
|
||||
<template x-if="!loading && tokens.length === 0">
|
||||
<div class="p-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-key text-4xl mb-3 text-gray-300 dark:text-gray-600" aria-hidden="true"></i>
|
||||
<p class="font-medium">No API tokens yet</p>
|
||||
<p class="text-sm mt-1">Create your first token above to get started.</p>
|
||||
<p class="font-medium">{{ _("api_tokens.no_tokens_heading") }}</p>
|
||||
<p class="text-sm mt-1">{{ _("api_tokens.no_tokens_help") }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Tokens table -->
|
||||
<template x-if="!loading && tokens.length > 0">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm" aria-label="API Tokens">
|
||||
<table class="w-full text-sm" aria-label="{{ _('api_tokens.table_aria') }}">
|
||||
<thead>
|
||||
<tr class="bg-gray-50 dark:bg-gray-750 text-left">
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">Name</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">Token Prefix</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">Created</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">Last Used</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">Last IP</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">Status</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider sr-only">Actions</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("api_tokens.col_name") }}</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("api_tokens.col_prefix") }}</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("api_tokens.col_created") }}</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("api_tokens.col_last_used") }}</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("api_tokens.col_last_ip") }}</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider">{{ _("common.status") }}</th>
|
||||
<th scope="col" class="px-6 py-3 font-medium text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider sr-only">{{ _("common.actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
@@ -159,7 +157,7 @@
|
||||
<code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs font-mono" x-text="token.token_prefix + '…'"></code>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-gray-500 dark:text-gray-400" x-text="formatDate(token.created_at)"></td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-gray-500 dark:text-gray-400" x-text="token.last_used_at ? formatDate(token.last_used_at) : 'Never'"></td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-gray-500 dark:text-gray-400" x-text="token.last_used_at ? formatDate(token.last_used_at) : '{{ _('api_tokens.never') }}'"></td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-gray-500 dark:text-gray-400">
|
||||
<code x-show="token.last_used_ip" class="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded text-xs font-mono" x-text="token.last_used_ip"></code>
|
||||
<span x-show="!token.last_used_ip" class="text-gray-400">—</span>
|
||||
@@ -168,7 +166,7 @@
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
||||
:class="token.is_active ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'"
|
||||
x-text="token.is_active ? 'Active' : 'Revoked'"
|
||||
x-text="token.is_active ? '{{ _('api_tokens.status_active') }}' : '{{ _('api_tokens.status_revoked') }}'"
|
||||
></span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right">
|
||||
@@ -181,10 +179,10 @@
|
||||
dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md
|
||||
focus:outline-none focus:ring-2 focus:ring-red-500 disabled:opacity-50 transition-colors"
|
||||
style="min-height:36px; min-width:44px;"
|
||||
:aria-label="'Revoke token ' + token.name"
|
||||
:aria-label="'{{ _('api_tokens.revoke_prefix') }} ' + token.name"
|
||||
>
|
||||
<i :class="revoking === token.id ? 'fas fa-spinner fa-spin' : 'fas fa-trash-alt'" class="mr-1" aria-hidden="true"></i>
|
||||
Revoke
|
||||
{{ _("api_tokens.revoke") }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}DocuElevate - Third-Party Attributions{% endblock %}
|
||||
{% block title %}{{ _("attribution.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-2xl font-bold mb-4">Third-Party Software Attributions</h1>
|
||||
<h1 class="text-2xl font-bold mb-4">{{ _("attribution.heading") }}</h1>
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg p-6 mb-6">
|
||||
<p class="mb-4">
|
||||
DocuElevate uses several open source libraries and tools. We are grateful to the
|
||||
developers of these projects for their contributions to open source software.
|
||||
{{ _("attribution.intro") }}
|
||||
</p>
|
||||
|
||||
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm text-yellow-700">
|
||||
<strong>Special Attribution:</strong> This software includes Paramiko, which is licensed under LGPL. The source code for Paramiko is available at
|
||||
<strong>{{ _("attribution.special_title") }}</strong>
|
||||
{{ _("attribution.special_source_pre") }}
|
||||
<a href="https://github.com/paramiko/paramiko" class="font-medium underline text-yellow-700 hover:text-yellow-600">
|
||||
https://github.com/paramiko/paramiko
|
||||
</a>.
|
||||
A copy of the LGPL license can be found
|
||||
</a>{{ _("attribution.special_source_post") }}
|
||||
{{ _("attribution.special_lgpl_pre") }}
|
||||
<a href="/static/licenses/lgpl.txt" class="font-medium underline text-yellow-700 hover:text-yellow-600">
|
||||
here
|
||||
</a>.
|
||||
{{ _("attribution.special_lgpl_link") }}
|
||||
</a>{{ _("attribution.special_lgpl_post") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl font-semibold mb-2">Python Dependencies</h2>
|
||||
<h2 class="text-xl font-semibold mb-2">{{ _("attribution.section_python") }}</h2>
|
||||
<ul class="list-disc pl-5 mb-4">
|
||||
<li class="mb-2">
|
||||
<span class="font-semibold">FastAPI</span> (MIT License)<br>
|
||||
@@ -130,7 +130,7 @@
|
||||
<span class="font-semibold">Paramiko</span> (LGPL-2.1 License)<br>
|
||||
Copyright (c) 2003-2009 Robey Pointer<br>
|
||||
<a href="https://github.com/paramiko/paramiko" class="text-blue-600 hover:underline">https://github.com/paramiko/paramiko</a><br>
|
||||
<span class="text-sm text-gray-600">Note: This library is licensed under the GNU Lesser General Public License v2.1 (LGPL-2.1)</span>
|
||||
<span class="text-sm text-gray-600">{{ _("attribution.paramiko_lgpl_note") }}</span>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<span class="font-semibold">Apprise</span> (MIT License)<br>
|
||||
@@ -139,7 +139,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-xl font-semibold mb-2">Docker Images</h2>
|
||||
<h2 class="text-xl font-semibold mb-2">{{ _("attribution.section_docker") }}</h2>
|
||||
<ul class="list-disc pl-5 mb-4">
|
||||
<li class="mb-2">
|
||||
<span class="font-semibold">Redis</span> (BSD License)<br>
|
||||
@@ -153,7 +153,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-xl font-semibold mb-2">Frontend Dependencies</h2>
|
||||
<h2 class="text-xl font-semibold mb-2">{{ _("attribution.section_frontend") }}</h2>
|
||||
<ul class="list-disc pl-5 mb-4">
|
||||
<li class="mb-2">
|
||||
<span class="font-semibold">Tailwind CSS</span> (MIT License)<br>
|
||||
|
||||
@@ -0,0 +1,222 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ _("audit.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div x-data="auditLogs()" x-init="fetchLogs()" class="container mx-auto px-4 py-8 max-w-7xl">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
<i class="fas fa-shield-halved mr-2 text-indigo-600" aria-hidden="true"></i>{{ _("audit.title") }}
|
||||
</h1>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
{{ _("audit.subtitle") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-3 md:mt-0 flex items-center gap-3">
|
||||
{% if siem_enabled %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100"
|
||||
title="{{ _('audit.siem_enabled_title') ~ (siem_transport|upper) }}">
|
||||
<i class="fas fa-tower-broadcast mr-1" aria-hidden="true"></i>SIEM: {{ siem_transport|upper }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
|
||||
title="{{ _('audit.siem_disabled_title') }}">
|
||||
<i class="fas fa-tower-broadcast mr-1" aria-hidden="true"></i>{{ _("audit.siem_off") }}
|
||||
</span>
|
||||
{% endif %}
|
||||
<button @click="fetchLogs()" class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 min-h-[44px] min-w-[44px]"
|
||||
aria-label="{{ _('audit.refresh_label') }}">
|
||||
<i class="fas fa-arrows-rotate mr-1" aria-hidden="true"></i>{{ _("common.refresh") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<section class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 mb-6" aria-label="{{ _('audit.filters_section_label') }}">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label for="filter-action" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("audit.filter_action") }}</label>
|
||||
<select id="filter-action" x-model="filters.action" @change="fetchLogs()"
|
||||
class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
|
||||
<option value="">{{ _("audit.filter_all_actions") }}</option>
|
||||
<template x-for="a in distinctActions" :key="a">
|
||||
<option :value="a" x-text="a"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="filter-user" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("audit.filter_user") }}</label>
|
||||
<select id="filter-user" x-model="filters.user" @change="fetchLogs()"
|
||||
class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
|
||||
<option value="">{{ _("audit.filter_all_users") }}</option>
|
||||
<template x-for="u in distinctUsers" :key="u">
|
||||
<option :value="u" x-text="u"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="filter-severity" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("audit.filter_severity") }}</label>
|
||||
<select id="filter-severity" x-model="filters.severity" @change="fetchLogs()"
|
||||
class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
|
||||
<option value="">{{ _("common.all") }}</option>
|
||||
<option value="info">{{ _("common.info") }}</option>
|
||||
<option value="warning">{{ _("common.warning") }}</option>
|
||||
<option value="error">{{ _("common.error") }}</option>
|
||||
<option value="critical">{{ _("audit.critical") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="filter-resource" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("audit.filter_resource_type") }}</label>
|
||||
<input id="filter-resource" type="text" x-model.debounce.300ms="filters.resource_type" @input="fetchLogs()"
|
||||
placeholder="{{ _('audit.filter_resource_placeholder') }}"
|
||||
class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm min-h-[44px]">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Results summary -->
|
||||
<div class="flex items-center justify-between mb-3 text-sm text-gray-500 dark:text-gray-400" aria-live="polite">
|
||||
<span x-show="!loading" x-text="total + ' event' + (total !== 1 ? 's' : '') + ' found'"></span>
|
||||
<span x-show="loading"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i>{{ _("common.loading") }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700" aria-label="{{ _('audit.table_label') }}">
|
||||
<thead class="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.col_timestamp") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.filter_severity") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.filter_user") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.filter_action") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.col_resource") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.col_ip") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("common.details") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<template x-for="e in entries" :key="e.id">
|
||||
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
|
||||
<td class="px-4 py-2 whitespace-nowrap text-xs text-gray-600 dark:text-gray-300" x-text="formatTs(e.timestamp)"></td>
|
||||
<td class="px-4 py-2 whitespace-nowrap text-xs">
|
||||
<span :class="severityClass(e.severity)" class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium" x-text="e.severity"></span>
|
||||
</td>
|
||||
<td class="px-4 py-2 whitespace-nowrap text-xs text-gray-700 dark:text-gray-200" x-text="e.user"></td>
|
||||
<td class="px-4 py-2 whitespace-nowrap text-xs font-mono text-indigo-700 dark:text-indigo-300" x-text="e.action"></td>
|
||||
<td class="px-4 py-2 whitespace-nowrap text-xs text-gray-600 dark:text-gray-300">
|
||||
<span x-text="e.resource_type || '—'"></span>
|
||||
<span x-show="e.resource_id" class="text-gray-400" x-text="' #' + e.resource_id"></span>
|
||||
</td>
|
||||
<td class="px-4 py-2 whitespace-nowrap text-xs text-gray-500 dark:text-gray-400" x-text="e.ip_address || '—'"></td>
|
||||
<td class="px-4 py-2 text-xs text-gray-500 dark:text-gray-400 max-w-xs truncate" :title="e.details ? JSON.stringify(e.details) : ''" x-text="e.details ? JSON.stringify(e.details) : '—'"></td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr x-show="!loading && entries.length === 0">
|
||||
<td colspan="7" class="px-4 py-8 text-center text-gray-400 dark:text-gray-500">
|
||||
<i class="fas fa-inbox text-3xl mb-2" aria-hidden="true"></i>
|
||||
<p class="text-lg">{{ _("audit.no_events") }}</p>
|
||||
<p class="text-sm mt-1">{{ _("audit.no_events_hint") }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav class="flex items-center justify-between mt-4" aria-label="{{ _('audit.pagination_label') }}" x-show="total > filters.limit">
|
||||
<button @click="prevPage()" :disabled="filters.offset === 0"
|
||||
class="px-3 py-1.5 rounded-md text-sm border border-gray-300 dark:border-gray-600 disabled:opacity-50 min-h-[44px] min-w-[44px]"
|
||||
aria-label="{{ _('audit.prev_label') }}">
|
||||
<i class="fas fa-chevron-left mr-1" aria-hidden="true"></i>{{ _("audit.prev") }}
|
||||
</button>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400" x-text="'Page ' + currentPage + ' of ' + totalPages"></span>
|
||||
<button @click="nextPage()" :disabled="filters.offset + filters.limit >= total"
|
||||
class="px-3 py-1.5 rounded-md text-sm border border-gray-300 dark:border-gray-600 disabled:opacity-50 min-h-[44px] min-w-[44px]"
|
||||
aria-label="{{ _('audit.next_label') }}">
|
||||
{{ _("audit.next") }}<i class="fas fa-chevron-right ml-1" aria-hidden="true"></i>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function auditLogs() {
|
||||
return {
|
||||
entries: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
distinctActions: [],
|
||||
distinctUsers: [],
|
||||
filters: {
|
||||
action: '',
|
||||
user: '',
|
||||
severity: '',
|
||||
resource_type: '',
|
||||
limit: 50,
|
||||
offset: 0,
|
||||
},
|
||||
get currentPage() { return Math.floor(this.filters.offset / this.filters.limit) + 1; },
|
||||
get totalPages() { return Math.max(1, Math.ceil(this.total / this.filters.limit)); },
|
||||
|
||||
async fetchLogs() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (this.filters.action) params.set('action', this.filters.action);
|
||||
if (this.filters.user) params.set('user', this.filters.user);
|
||||
if (this.filters.severity) params.set('severity', this.filters.severity);
|
||||
if (this.filters.resource_type) params.set('resource_type', this.filters.resource_type);
|
||||
params.set('limit', this.filters.limit);
|
||||
params.set('offset', this.filters.offset);
|
||||
|
||||
const [logsResp, actionsResp, usersResp] = await Promise.all([
|
||||
fetch('/api/audit-logs?' + params.toString()),
|
||||
fetch('/api/audit-logs/actions'),
|
||||
fetch('/api/audit-logs/users'),
|
||||
]);
|
||||
if (logsResp.ok) {
|
||||
const data = await logsResp.json();
|
||||
this.entries = data.items;
|
||||
this.total = data.total;
|
||||
}
|
||||
if (actionsResp.ok) this.distinctActions = await actionsResp.json();
|
||||
if (usersResp.ok) this.distinctUsers = await usersResp.json();
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
prevPage() {
|
||||
if (this.filters.offset > 0) {
|
||||
this.filters.offset = Math.max(0, this.filters.offset - this.filters.limit);
|
||||
this.fetchLogs();
|
||||
}
|
||||
},
|
||||
nextPage() {
|
||||
if (this.filters.offset + this.filters.limit < this.total) {
|
||||
this.filters.offset += this.filters.limit;
|
||||
this.fetchLogs();
|
||||
}
|
||||
},
|
||||
formatTs(iso) {
|
||||
if (!iso) return '—';
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleString();
|
||||
},
|
||||
severityClass(sev) {
|
||||
const map = {
|
||||
info: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
|
||||
warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
|
||||
error: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
|
||||
critical: 'bg-red-200 text-red-900 dark:bg-red-800 dark:text-red-100',
|
||||
};
|
||||
return map[sev] || 'bg-gray-100 text-gray-800';
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Backup Management{% endblock %}
|
||||
{% block title %}{{ _("backup.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8" x-data="backupDashboard()">
|
||||
@@ -9,10 +9,10 @@
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">
|
||||
<i class="fas fa-database mr-2 text-blue-600" aria-hidden="true"></i>
|
||||
Backup Management
|
||||
{{ _("backup.heading") }}
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Database backups are created automatically: hourly (4 days), daily (3 weeks), weekly (13 weeks).
|
||||
{{ _("backup.subtitle") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
@@ -21,26 +21,26 @@
|
||||
:disabled="triggering"
|
||||
type="button"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 min-h-[44px]">
|
||||
<i class="fas fa-clock mr-1 text-blue-500" aria-hidden="true"></i> Backup Now (Hourly)
|
||||
<i class="fas fa-clock mr-1 text-blue-500" aria-hidden="true"></i> {{ _("backup.trigger_hourly") }}
|
||||
</button>
|
||||
<button @click="triggerBackup('daily')"
|
||||
:disabled="triggering"
|
||||
type="button"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 min-h-[44px]">
|
||||
<i class="fas fa-calendar-day mr-1 text-green-500" aria-hidden="true"></i> Backup Now (Daily)
|
||||
<i class="fas fa-calendar-day mr-1 text-green-500" aria-hidden="true"></i> {{ _("backup.trigger_daily") }}
|
||||
</button>
|
||||
<button @click="triggerBackup('weekly')"
|
||||
:disabled="triggering"
|
||||
type="button"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 min-h-[44px]">
|
||||
<i class="fas fa-calendar-week mr-1 text-purple-500" aria-hidden="true"></i> Backup Now (Weekly)
|
||||
<i class="fas fa-calendar-week mr-1 text-purple-500" aria-hidden="true"></i> {{ _("backup.trigger_weekly") }}
|
||||
</button>
|
||||
<button @click="runCleanup()"
|
||||
:disabled="triggering"
|
||||
type="button"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 min-h-[44px]"
|
||||
title="Run retention cleanup now">
|
||||
<i class="fas fa-broom mr-1 text-orange-400" aria-hidden="true"></i> Clean Up
|
||||
title="{{ _('backup.cleanup_title') }}">
|
||||
<i class="fas fa-broom mr-1 text-orange-400" aria-hidden="true"></i> {{ _("backup.clean_up") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,18 +60,18 @@
|
||||
role="dialog" aria-modal="true" :aria-labelledby="'confirmTitle'">
|
||||
<div class="bg-white rounded-lg shadow-xl max-w-sm w-full p-6"
|
||||
@keydown.escape.window="confirmOpen = false">
|
||||
<h2 id="confirmTitle" class="text-lg font-semibold text-gray-900 mb-2">Confirm action</h2>
|
||||
<h2 id="confirmTitle" class="text-lg font-semibold text-gray-900 mb-2">{{ _("backup.confirm_title") }}</h2>
|
||||
<p class="text-sm text-gray-600 mb-4" x-text="confirmMsg"></p>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="confirmOpen = false; confirmResolve(false)"
|
||||
type="button"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 min-h-[44px]">
|
||||
Cancel
|
||||
{{ _("common.cancel") }}
|
||||
</button>
|
||||
<button @click="confirmOpen = false; confirmResolve(true)"
|
||||
type="button"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 min-h-[44px]">
|
||||
Confirm
|
||||
{{ _("backup.confirm_btn") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,36 +81,36 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||
<!-- Backup enabled -->
|
||||
<div class="bg-white shadow rounded-lg p-4">
|
||||
<p class="text-xs text-gray-500 uppercase tracking-wider">Auto-backup</p>
|
||||
<p class="text-xs text-gray-500 uppercase tracking-wider">{{ _("backup.config_auto_backup") }}</p>
|
||||
<p class="mt-1 text-lg font-semibold {% if backup_enabled %}text-green-600{% else %}text-red-600{% endif %}">
|
||||
{% if backup_enabled %}<i class="fas fa-check-circle mr-1" aria-hidden="true"></i> Enabled
|
||||
{% else %}<i class="fas fa-times-circle mr-1" aria-hidden="true"></i> Disabled{% endif %}
|
||||
{% if backup_enabled %}<i class="fas fa-check-circle mr-1" aria-hidden="true"></i> {{ _("common.enabled") }}
|
||||
{% else %}<i class="fas fa-times-circle mr-1" aria-hidden="true"></i> {{ _("common.disabled") }}{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
<!-- Remote destination -->
|
||||
<div class="bg-white shadow rounded-lg p-4">
|
||||
<p class="text-xs text-gray-500 uppercase tracking-wider">Remote destination</p>
|
||||
<p class="text-xs text-gray-500 uppercase tracking-wider">{{ _("backup.config_remote_dest") }}</p>
|
||||
<p class="mt-1 text-lg font-semibold text-gray-800">
|
||||
{% if backup_remote_destination %}
|
||||
<i class="fas fa-cloud-upload-alt mr-1 text-blue-500" aria-hidden="true"></i>
|
||||
{{ backup_remote_destination }}
|
||||
{% else %}
|
||||
<span class="text-gray-400"><i class="fas fa-hdd mr-1" aria-hidden="true"></i> Local only</span>
|
||||
<span class="text-gray-400"><i class="fas fa-hdd mr-1" aria-hidden="true"></i> {{ _("backup.local_only") }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
<!-- Retention hourly -->
|
||||
<div class="bg-white shadow rounded-lg p-4">
|
||||
<p class="text-xs text-gray-500 uppercase tracking-wider">Retention</p>
|
||||
<p class="text-xs text-gray-500 uppercase tracking-wider">{{ _("backup.config_retention") }}</p>
|
||||
<p class="mt-1 text-sm text-gray-700">
|
||||
<span class="font-semibold">{{ backup_retain_hourly }}</span> hourly ·
|
||||
<span class="font-semibold">{{ backup_retain_daily }}</span> daily ·
|
||||
<span class="font-semibold">{{ backup_retain_weekly }}</span> weekly
|
||||
<span class="font-semibold">{{ backup_retain_hourly }}</span> {{ _("backup.type_hourly") }} ·
|
||||
<span class="font-semibold">{{ backup_retain_daily }}</span> {{ _("backup.type_daily") }} ·
|
||||
<span class="font-semibold">{{ backup_retain_weekly }}</span> {{ _("backup.type_weekly") }}
|
||||
</p>
|
||||
</div>
|
||||
<!-- Total backup size -->
|
||||
<div class="bg-white shadow rounded-lg p-4">
|
||||
<p class="text-xs text-gray-500 uppercase tracking-wider">Total local size</p>
|
||||
<p class="text-xs text-gray-500 uppercase tracking-wider">{{ _("backup.config_total_size") }}</p>
|
||||
<p class="mt-1 text-lg font-semibold text-gray-800" id="totalSize">
|
||||
{{ (total_size / 1048576) | round(2) }} MB
|
||||
</p>
|
||||
@@ -120,17 +120,17 @@
|
||||
<!-- Upload restore section -->
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-8">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-1">
|
||||
<i class="fas fa-upload mr-2 text-yellow-500" aria-hidden="true"></i>Restore from File
|
||||
<i class="fas fa-upload mr-2 text-yellow-500" aria-hidden="true"></i>{{ _("backup.restore_heading") }}
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 mb-4">
|
||||
Upload a <code>.db.gz</code> backup archive to restore the database.
|
||||
<strong class="text-red-600">This will overwrite all current data.</strong>
|
||||
{{ _("backup.restore_desc_pre") }} <code>.db.gz</code> {{ _("backup.restore_desc_mid") }}
|
||||
<strong class="text-red-600">{{ _("backup.restore_desc_warning") }}</strong>
|
||||
</p>
|
||||
<form id="restoreForm" @submit.prevent="submitRestore" enctype="multipart/form-data">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||
<div class="flex flex-col sm:flex-row gap-3 items-start sm:items-end">
|
||||
<div>
|
||||
<label for="restoreFile" class="block text-sm font-medium text-gray-700 mb-1">Backup archive (.db.gz)</label>
|
||||
<label for="restoreFile" class="block text-sm font-medium text-gray-700 mb-1">{{ _("backup.restore_file_label") }}</label>
|
||||
<input type="file" id="restoreFile" name="file" accept=".gz"
|
||||
required
|
||||
class="block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
|
||||
@@ -139,7 +139,7 @@
|
||||
:disabled="restoring"
|
||||
class="inline-flex items-center px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white text-sm font-medium rounded-md disabled:opacity-50 min-h-[44px]">
|
||||
<i class="fas fa-undo mr-2" aria-hidden="true"></i>
|
||||
<span x-text="restoring ? 'Restoring…' : 'Restore'"></span>
|
||||
<span x-text="restoring ? '{{ _('backup.restoring') }}' : '{{ _('backup.restore_btn') }}'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -149,30 +149,30 @@
|
||||
<div class="bg-white shadow rounded-lg overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold text-gray-900">
|
||||
<i class="fas fa-list mr-2 text-gray-500" aria-hidden="true"></i>Backup Archives
|
||||
<span class="ml-2 text-sm font-normal text-gray-400">({{ records | length }} records)</span>
|
||||
<i class="fas fa-list mr-2 text-gray-500" aria-hidden="true"></i>{{ _("backup.archives_heading") }}
|
||||
<span class="ml-2 text-sm font-normal text-gray-400">({{ records | length }} {{ _("backup.records_label") }})</span>
|
||||
</h2>
|
||||
<!-- Tier filter -->
|
||||
<div class="flex gap-2 text-sm">
|
||||
<button @click="filterType = ''" :class="filterType === '' ? 'bg-gray-200 font-semibold' : 'hover:bg-gray-100'" class="px-2 py-1 rounded">All</button>
|
||||
<button @click="filterType = 'hourly'" :class="filterType === 'hourly' ? 'bg-blue-200 font-semibold' : 'hover:bg-gray-100'" class="px-2 py-1 rounded">Hourly</button>
|
||||
<button @click="filterType = 'daily'" :class="filterType === 'daily' ? 'bg-green-200 font-semibold' : 'hover:bg-gray-100'" class="px-2 py-1 rounded">Daily</button>
|
||||
<button @click="filterType = 'weekly'" :class="filterType === 'weekly' ? 'bg-purple-200 font-semibold' : 'hover:bg-gray-100'" class="px-2 py-1 rounded">Weekly</button>
|
||||
<button @click="filterType = ''" :class="filterType === '' ? 'bg-gray-200 font-semibold' : 'hover:bg-gray-100'" class="px-2 py-1 rounded">{{ _("common.all") }}</button>
|
||||
<button @click="filterType = 'hourly'" :class="filterType === 'hourly' ? 'bg-blue-200 font-semibold' : 'hover:bg-gray-100'" class="px-2 py-1 rounded">{{ _("backup.type_hourly") }}</button>
|
||||
<button @click="filterType = 'daily'" :class="filterType === 'daily' ? 'bg-green-200 font-semibold' : 'hover:bg-gray-100'" class="px-2 py-1 rounded">{{ _("backup.type_daily") }}</button>
|
||||
<button @click="filterType = 'weekly'" :class="filterType === 'weekly' ? 'bg-purple-200 font-semibold' : 'hover:bg-gray-100'" class="px-2 py-1 rounded">{{ _("backup.type_weekly") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if records %}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200" aria-label="Backup archives">
|
||||
<table class="min-w-full divide-y divide-gray-200" aria-label="{{ _('backup.table_aria') }}">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Filename</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Storage</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("backup.col_filename") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("backup.col_type") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("backup.col_created") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("backup.col_size") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("common.status") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("backup.col_storage") }}</th>
|
||||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{{ _("common.actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@@ -186,15 +186,15 @@
|
||||
<td class="px-4 py-3 text-sm">
|
||||
{% if r.backup_type == 'hourly' %}
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
|
||||
<i class="fas fa-clock mr-1" aria-hidden="true"></i> hourly
|
||||
<i class="fas fa-clock mr-1" aria-hidden="true"></i> {{ _("backup.type_hourly") }}
|
||||
</span>
|
||||
{% elif r.backup_type == 'daily' %}
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
|
||||
<i class="fas fa-calendar-day mr-1" aria-hidden="true"></i> daily
|
||||
<i class="fas fa-calendar-day mr-1" aria-hidden="true"></i> {{ _("backup.type_daily") }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
|
||||
<i class="fas fa-calendar-week mr-1" aria-hidden="true"></i> weekly
|
||||
<i class="fas fa-calendar-week mr-1" aria-hidden="true"></i> {{ _("backup.type_weekly") }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
@@ -209,7 +209,7 @@
|
||||
<td class="px-4 py-3 text-sm">
|
||||
{% if r.status == 'ok' %}
|
||||
<span class="inline-flex items-center text-green-700">
|
||||
<i class="fas fa-check-circle mr-1" aria-hidden="true"></i> ok
|
||||
<i class="fas fa-check-circle mr-1" aria-hidden="true"></i> {{ _("backup.status_ok") }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center text-red-600">
|
||||
@@ -220,7 +220,7 @@
|
||||
<td class="px-4 py-3 text-sm text-gray-600">
|
||||
{% if r.local_path %}
|
||||
<span class="inline-flex items-center" title="{{ r.local_path }}">
|
||||
<i class="fas fa-hdd mr-1 text-gray-400" aria-hidden="true"></i> local
|
||||
<i class="fas fa-hdd mr-1 text-gray-400" aria-hidden="true"></i> {{ _("backup.storage_local") }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if r.remote_destination %}
|
||||
@@ -236,15 +236,15 @@
|
||||
{% if r.local_path %}
|
||||
<a href="/api/admin/backup/{{ r.id }}/download"
|
||||
class="inline-flex items-center px-2 py-1 text-xs border border-gray-300 rounded hover:bg-gray-50 text-gray-700 min-h-[32px]"
|
||||
aria-label="Download backup {{ r.filename }}">
|
||||
<i class="fas fa-download mr-1" aria-hidden="true"></i> Download
|
||||
aria-label="{{ _('common.download') }} {{ r.filename }}">
|
||||
<i class="fas fa-download mr-1" aria-hidden="true"></i> {{ _("common.download") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
<button @click="deleteBackup({{ r.id }}, '{{ r.filename }}')"
|
||||
type="button"
|
||||
class="inline-flex items-center px-2 py-1 text-xs border border-red-300 rounded hover:bg-red-50 text-red-600 ml-1 min-h-[32px]"
|
||||
aria-label="Delete backup {{ r.filename }}">
|
||||
<i class="fas fa-trash-alt mr-1" aria-hidden="true"></i> Delete
|
||||
aria-label="{{ _('common.delete') }} {{ r.filename }}">
|
||||
<i class="fas fa-trash-alt mr-1" aria-hidden="true"></i> {{ _("common.delete") }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -255,8 +255,8 @@
|
||||
{% else %}
|
||||
<div class="px-6 py-12 text-center text-gray-400">
|
||||
<i class="fas fa-database text-4xl mb-3" aria-hidden="true"></i>
|
||||
<p class="text-lg font-medium">No backups yet.</p>
|
||||
<p class="text-sm">Click <em>Backup Now</em> to create your first backup.</p>
|
||||
<p class="text-lg font-medium">{{ _("backup.no_backups") }}</p>
|
||||
<p class="text-sm">{{ _("backup.no_backups_hint_pre") }}<em>{{ _("backup.backup_now") }}</em>{{ _("backup.no_backups_hint_post") }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -264,16 +264,15 @@
|
||||
<!-- Retention explanation -->
|
||||
<div class="mt-8 bg-gray-50 border border-gray-200 rounded-lg p-5">
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-2">
|
||||
<i class="fas fa-info-circle mr-1 text-blue-400" aria-hidden="true"></i> Retention policy
|
||||
<i class="fas fa-info-circle mr-1 text-blue-400" aria-hidden="true"></i> {{ _("backup.retention_heading") }}
|
||||
</h3>
|
||||
<ul class="text-sm text-gray-600 space-y-1 list-disc list-inside">
|
||||
<li><strong>Hourly</strong> – kept for 4 days ({{ backup_retain_hourly }} snapshots)</li>
|
||||
<li><strong>Daily</strong> – kept for 3 weeks ({{ backup_retain_daily }} snapshots)</li>
|
||||
<li><strong>Weekly</strong> – kept for ~3 months ({{ backup_retain_weekly }} snapshots)</li>
|
||||
<li><strong>{{ _("backup.type_hourly") }}</strong> {{ _("backup.retention_hourly_detail") }} ({{ backup_retain_hourly }} {{ _("backup.snapshots") }})</li>
|
||||
<li><strong>{{ _("backup.type_daily") }}</strong> {{ _("backup.retention_daily_detail") }} ({{ backup_retain_daily }} {{ _("backup.snapshots") }})</li>
|
||||
<li><strong>{{ _("backup.type_weekly") }}</strong> {{ _("backup.retention_weekly_detail") }} ({{ backup_retain_weekly }} {{ _("backup.snapshots") }})</li>
|
||||
</ul>
|
||||
<p class="text-xs text-gray-400 mt-2">
|
||||
Backups beyond these limits are automatically pruned after each new backup is created.
|
||||
Use the <em>Clean Up</em> button to apply retention manually.
|
||||
{{ _("backup.retention_note_pre") }}<em>{{ _("backup.clean_up") }}</em>{{ _("backup.retention_note_post") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
+216
-76
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-color-scheme-default="{{ ui_default_color_scheme | default('system') }}">
|
||||
<html lang="{{ current_locale | default('en') }}" data-color-scheme-default="{{ ui_default_color_scheme | default('system') }}">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>{% block title %}DocuElevate{% endblock %}</title>
|
||||
@@ -27,6 +27,9 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<!-- flag-icons: SVG/CSS flag sprites that render correctly on all platforms including Windows -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flag-icons@7.3.2/css/flag-icons.min.css"
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
{% endblock %}
|
||||
{% block head_extra %}{% endblock %}
|
||||
<!-- CSRF token for AJAX/fetch requests -->
|
||||
@@ -37,10 +40,10 @@
|
||||
data-multi-user="{{ 'true' if multi_user_enabled else 'false' }}"
|
||||
data-allow-signup="{{ 'true' if allow_signup else 'false' }}">
|
||||
<!-- Skip to main content link for keyboard/screen reader users -->
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
<a href="#main-content" class="skip-link">{{ _("nav.skip_to_content") }}</a>
|
||||
|
||||
<!-- Global Nav -->
|
||||
<nav class="bg-white shadow relative" aria-label="Main navigation">
|
||||
<nav class="bg-white shadow relative" aria-label="{{ _('nav.main_navigation') }}">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between h-16 items-center">
|
||||
|
||||
<!-- Brand + Icon -->
|
||||
@@ -70,12 +73,12 @@
|
||||
<a href="/pricing"
|
||||
class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
|
||||
{% if request and request.url.path == '/pricing' %}aria-current="page"{% endif %}>
|
||||
Pricing
|
||||
{{ _("nav.pricing") }}
|
||||
</a>
|
||||
<a href="/about"
|
||||
class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
|
||||
{% if request and request.url.path == '/about' %}aria-current="page"{% endif %}>
|
||||
About
|
||||
{{ _("nav.about") }}
|
||||
</a>
|
||||
|
||||
{% else %}
|
||||
@@ -84,32 +87,32 @@
|
||||
<a href="/"
|
||||
class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
|
||||
{% if request and request.url.path == '/' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-home mr-1 text-gray-400" aria-hidden="true"></i>Dashboard
|
||||
<i class="fas fa-home mr-1 text-gray-400" aria-hidden="true"></i>{{ _("nav.dashboard") }}
|
||||
</a>
|
||||
<a href="/upload"
|
||||
class="px-3 py-2 rounded-md text-sm font-medium text-blue-600 hover:text-blue-800 hover:bg-blue-50"
|
||||
{% if request and request.url.path == '/upload' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-upload mr-1" aria-hidden="true"></i>Upload
|
||||
<i class="fas fa-upload mr-1" aria-hidden="true"></i>{{ _("nav.upload") }}
|
||||
</a>
|
||||
<a href="/files"
|
||||
class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
|
||||
{% if request and request.url.path == '/files' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-folder-open mr-1 text-gray-400" aria-hidden="true"></i>Files
|
||||
<i class="fas fa-folder-open mr-1 text-gray-400" aria-hidden="true"></i>{{ _("nav.files") }}
|
||||
</a>
|
||||
<a href="/search"
|
||||
class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
|
||||
{% if request and request.url.path == '/search' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-search mr-1 text-gray-400" aria-hidden="true"></i>Search
|
||||
<i class="fas fa-search mr-1 text-gray-400" aria-hidden="true"></i>{{ _("nav.search") }}
|
||||
</a>
|
||||
<a href="/pipelines"
|
||||
class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
|
||||
{% if request and request.url.path == '/pipelines' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-project-diagram mr-1 text-gray-400" aria-hidden="true"></i>Pipelines
|
||||
<i class="fas fa-project-diagram mr-1 text-gray-400" aria-hidden="true"></i>{{ _("nav.pipelines") }}
|
||||
</a>
|
||||
<a href="/integrations"
|
||||
class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
|
||||
{% if request and request.url.path == '/integrations' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-plug mr-1 text-gray-400" aria-hidden="true"></i>Integrations
|
||||
<i class="fas fa-plug mr-1 text-gray-400" aria-hidden="true"></i>{{ _("nav.integrations") }}
|
||||
</a>
|
||||
|
||||
<!-- Admin dropdown – shown only for admin users via JS -->
|
||||
@@ -124,7 +127,7 @@
|
||||
:aria-expanded="adminMenuOpen"
|
||||
>
|
||||
<i class="fas fa-shield-alt mr-1 text-red-500" aria-hidden="true"></i>
|
||||
Admin
|
||||
{{ _("nav.admin") }}
|
||||
<i class="fas fa-chevron-down ml-1 text-xs" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div
|
||||
@@ -141,46 +144,52 @@
|
||||
>
|
||||
<div class="py-1">
|
||||
<a href="/settings" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-cog w-4 mr-2 text-gray-500" aria-hidden="true"></i> Settings
|
||||
<i class="fas fa-cog w-4 mr-2 text-gray-500" aria-hidden="true"></i> {{ _("nav.settings") }}
|
||||
</a>
|
||||
<a href="/admin/users" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-users w-4 mr-2 text-blue-500" aria-hidden="true"></i> Users
|
||||
<i class="fas fa-users w-4 mr-2 text-blue-500" aria-hidden="true"></i> {{ _("nav.users") }}
|
||||
</a>
|
||||
<a href="/admin/plans" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-layer-group w-4 mr-2 text-indigo-500" aria-hidden="true"></i> Plan Designer
|
||||
<i class="fas fa-layer-group w-4 mr-2 text-indigo-500" aria-hidden="true"></i> {{ _("nav.plan_designer") }}
|
||||
</a>
|
||||
<a href="/admin/credentials" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-key w-4 mr-2 text-yellow-500" aria-hidden="true"></i> Credentials
|
||||
<i class="fas fa-key w-4 mr-2 text-yellow-500" aria-hidden="true"></i> {{ _("nav.credentials") }}
|
||||
</a>
|
||||
<a href="/admin/files" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-folder-open w-4 mr-2 text-gray-500" aria-hidden="true"></i> File Manager
|
||||
<i class="fas fa-folder-open w-4 mr-2 text-gray-500" aria-hidden="true"></i> {{ _("nav.file_manager") }}
|
||||
</a>
|
||||
<div class="border-t border-gray-100 my-1"></div>
|
||||
<a href="/duplicates" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-clone w-4 mr-2 text-orange-500" aria-hidden="true"></i> Duplicates
|
||||
<i class="fas fa-clone w-4 mr-2 text-orange-500" aria-hidden="true"></i> {{ _("nav.duplicates") }}
|
||||
</a>
|
||||
<a href="/similarity" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-sitemap w-4 mr-2 text-purple-500" aria-hidden="true"></i> Similarity
|
||||
<i class="fas fa-sitemap w-4 mr-2 text-purple-500" aria-hidden="true"></i> {{ _("nav.similarity") }}
|
||||
</a>
|
||||
<a href="/admin/queue" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-stream w-4 mr-2 text-blue-500" aria-hidden="true"></i> Queue Monitor
|
||||
<i class="fas fa-stream w-4 mr-2 text-blue-500" aria-hidden="true"></i> {{ _("nav.queue_monitor") }}
|
||||
</a>
|
||||
<a href="/admin/scheduled-jobs" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-clock w-4 mr-2 text-indigo-500" aria-hidden="true"></i> Scheduled Jobs
|
||||
<i class="fas fa-clock w-4 mr-2 text-indigo-500" aria-hidden="true"></i> {{ _("nav.scheduled_jobs") }}
|
||||
</a>
|
||||
<a href="/admin/compliance" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-check-double w-4 mr-2 text-green-500" aria-hidden="true"></i> Compliance
|
||||
</a>
|
||||
<a href="/admin/backup" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-database w-4 mr-2 text-green-600" aria-hidden="true"></i> Backup & Restore
|
||||
<i class="fas fa-database w-4 mr-2 text-green-600" aria-hidden="true"></i> {{ _("nav.backup_restore") }}
|
||||
</a>
|
||||
<a href="/admin/audit-logs" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-shield-halved w-4 mr-2 text-indigo-500" aria-hidden="true"></i> Audit Logs
|
||||
</a>
|
||||
<a href="/status" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
{% if request and request.url.path == '/status' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-circle-dot w-4 mr-2 text-gray-500" aria-hidden="true"></i> Status
|
||||
<i class="fas fa-circle-dot w-4 mr-2 text-gray-500" aria-hidden="true"></i> {{ _("nav.status") }}
|
||||
</a>
|
||||
<div class="border-t border-gray-100 my-1"></div>
|
||||
<a href="/admin/api-docs" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-code w-4 mr-2 text-teal-500" aria-hidden="true"></i> API Docs
|
||||
<i class="fas fa-code w-4 mr-2 text-teal-500" aria-hidden="true"></i> {{ _("nav.api_docs") }}
|
||||
</a>
|
||||
<a href="/developer-docs/" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-book w-4 mr-2 text-teal-500" aria-hidden="true"></i> Developer Docs
|
||||
<i class="fas fa-book w-4 mr-2 text-teal-500" aria-hidden="true"></i> {{ _("nav.developer_docs") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -191,18 +200,18 @@
|
||||
<!-- Help – always visible, for every visitor regardless of auth state -->
|
||||
<a href="/help"
|
||||
class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
|
||||
aria-label="Help Center"
|
||||
title="Help Center"
|
||||
aria-label="{{ _('nav.help_center') }}"
|
||||
title="{{ _('nav.help_center') }}"
|
||||
{% if request and request.url.path == '/help' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-circle-question mr-1 text-gray-400" aria-hidden="true"></i>Help
|
||||
<i class="fas fa-circle-question mr-1 text-gray-400" aria-hidden="true"></i>{{ _("nav.help") }}
|
||||
</a>
|
||||
|
||||
<!-- Bell notification icon -->
|
||||
<a href="/notifications"
|
||||
id="notificationBell"
|
||||
class="relative p-1.5 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
|
||||
aria-label="Notifications"
|
||||
title="Notifications"
|
||||
aria-label="{{ _('nav.notifications') }}"
|
||||
title="{{ _('nav.notifications') }}"
|
||||
{% if request and request.url.path == '/notifications' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-bell" aria-hidden="true"></i>
|
||||
<span id="notificationBadge"
|
||||
@@ -210,14 +219,106 @@
|
||||
aria-live="polite"></span>
|
||||
</a>
|
||||
|
||||
<!-- Language selector data (kept outside the HTML attribute to avoid quote conflicts with tojson) -->
|
||||
<script>
|
||||
window.__langSuggested = {{ suggested_languages | tojson }};
|
||||
window.__langAll = {{ supported_languages | tojson }};
|
||||
</script>
|
||||
|
||||
<!-- Language selector dropdown -->
|
||||
<div x-data="{
|
||||
langOpen: false,
|
||||
search: '',
|
||||
suggested: window.__langSuggested,
|
||||
all: window.__langAll,
|
||||
get filtered() {
|
||||
if (!this.search.trim()) return this.suggested;
|
||||
const q = this.search.trim().toLowerCase();
|
||||
return this.all.filter(l =>
|
||||
l.native.toLowerCase().includes(q) ||
|
||||
l.name.toLowerCase().includes(q) ||
|
||||
l.code.toLowerCase().startsWith(q)
|
||||
);
|
||||
}
|
||||
}" class="relative" @keydown.escape="langOpen = false; search = ''">
|
||||
<button
|
||||
@click="langOpen = !langOpen; if (langOpen) $nextTick(() => { if ($refs.langSearch) $refs.langSearch.focus(); })"
|
||||
@click.outside="langOpen = false; search = ''"
|
||||
type="button"
|
||||
class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
|
||||
aria-label="{{ _('language.selector') }}"
|
||||
title="{{ _('language.selector') }}"
|
||||
:aria-expanded="langOpen"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="text-base leading-none" aria-hidden="true">
|
||||
{% set cur_lang = suggested_languages | selectattr("code", "equalto", current_locale) | list %}
|
||||
{% if cur_lang %}<span class="fi fi-{{ cur_lang[0].flag }}"></span>{% else %}<i class="fas fa-globe"></i>{% endif %}
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
x-show="langOpen"
|
||||
x-transition:enter="transition ease-out duration-100 transform"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75 transform"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
class="absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 z-50"
|
||||
role="menu"
|
||||
aria-label="{{ _('language.selector') }}"
|
||||
>
|
||||
<!-- Search input -->
|
||||
<div class="px-3 pt-2 pb-1">
|
||||
<div class="relative">
|
||||
<i class="fas fa-magnifying-glass absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none" aria-hidden="true"></i>
|
||||
<input
|
||||
x-ref="langSearch"
|
||||
x-model="search"
|
||||
type="search"
|
||||
placeholder="{{ _('language.search_placeholder') }}"
|
||||
class="w-full pl-6 pr-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-1 focus:ring-blue-400 dark:bg-gray-700 dark:text-white"
|
||||
aria-label="{{ _('language.search_placeholder') }}"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Language list -->
|
||||
<div class="py-1 max-h-56 overflow-y-auto" role="none">
|
||||
<template x-for="lang in filtered" :key="lang.code">
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
:class="lang.code === '{{ current_locale }}' ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium' : 'text-gray-700 dark:text-gray-200'"
|
||||
class="flex items-center w-full px-4 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
:onclick="`setLanguage('${lang.code}')`"
|
||||
>
|
||||
<span class="fi mr-2" :class="`fi-${lang.flag}`" aria-hidden="true"></span>
|
||||
<span x-text="lang.native"></span>
|
||||
<i x-show="lang.code === '{{ current_locale }}'" class="fas fa-check ml-auto text-blue-500" aria-hidden="true"></i>
|
||||
</button>
|
||||
</template>
|
||||
<p
|
||||
x-show="filtered.length === 0"
|
||||
class="px-4 py-2 text-sm text-gray-400 dark:text-gray-500"
|
||||
>{{ _('language.no_results') }}</p>
|
||||
</div>
|
||||
<!-- Footer hint -->
|
||||
<div x-show="!search.trim()" class="px-3 py-1.5 text-xs text-gray-400 dark:text-gray-500 border-t border-gray-100 dark:border-gray-700 flex items-center justify-between">
|
||||
<span x-text="`${suggested.length} / {{ supported_languages | length }}`"></span>
|
||||
<button type="button" @click="$refs.langSearch.focus(); $refs.langSearch.select()" class="text-blue-500 hover:underline">{{ _('common.search') }}…</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dark mode toggle -->
|
||||
<button
|
||||
id="darkModeToggle"
|
||||
onclick="toggleDarkMode()"
|
||||
type="button"
|
||||
class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
|
||||
aria-label="Toggle dark mode"
|
||||
title="Toggle dark mode"
|
||||
aria-label="{{ _('nav.toggle_dark_mode') }}"
|
||||
title="{{ _('nav.toggle_dark_mode') }}"
|
||||
>
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
@@ -232,10 +333,10 @@
|
||||
type="button"
|
||||
class="md:hidden inline-flex items-center justify-center p-3 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
|
||||
style="min-height:44px;min-width:44px;"
|
||||
aria-label="Toggle navigation menu"
|
||||
aria-label="{{ _('nav.toggle_nav') }}"
|
||||
:aria-expanded="mobileMenuOpen"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<span class="sr-only">{{ _("nav.open_main_menu") }}</span>
|
||||
<svg class="block 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="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
@@ -259,12 +360,12 @@
|
||||
<a href="/pricing"
|
||||
class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
{% if request and request.url.path == '/pricing' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-tag mr-2 text-gray-400" aria-hidden="true"></i>Pricing
|
||||
<i class="fas fa-tag mr-2 text-gray-400" aria-hidden="true"></i>{{ _("nav.pricing") }}
|
||||
</a>
|
||||
<a href="/about"
|
||||
class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
{% if request and request.url.path == '/about' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-info-circle mr-2 text-gray-400" aria-hidden="true"></i>About
|
||||
<i class="fas fa-info-circle mr-2 text-gray-400" aria-hidden="true"></i>{{ _("nav.about") }}
|
||||
</a>
|
||||
|
||||
{% else %}
|
||||
@@ -272,84 +373,87 @@
|
||||
<a href="/"
|
||||
class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
{% if request and request.url.path == '/' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-home mr-2 text-gray-400" aria-hidden="true"></i>Dashboard
|
||||
<i class="fas fa-home mr-2 text-gray-400" aria-hidden="true"></i>{{ _("nav.dashboard") }}
|
||||
</a>
|
||||
<a href="/upload"
|
||||
class="block px-3 py-3 rounded-md text-base font-medium text-blue-600 hover:text-blue-800 hover:bg-blue-50"
|
||||
{% if request and request.url.path == '/upload' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-upload mr-2" aria-hidden="true"></i>Upload
|
||||
<i class="fas fa-upload mr-2" aria-hidden="true"></i>{{ _("nav.upload") }}
|
||||
</a>
|
||||
<a href="/files"
|
||||
class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
{% if request and request.url.path == '/files' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-folder-open mr-2 text-gray-400" aria-hidden="true"></i>Files
|
||||
<i class="fas fa-folder-open mr-2 text-gray-400" aria-hidden="true"></i>{{ _("nav.files") }}
|
||||
</a>
|
||||
<a href="/search"
|
||||
class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
{% if request and request.url.path == '/search' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-search mr-2 text-gray-400" aria-hidden="true"></i>Search
|
||||
<i class="fas fa-search mr-2 text-gray-400" aria-hidden="true"></i>{{ _("nav.search") }}
|
||||
</a>
|
||||
<a href="/pipelines"
|
||||
class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
{% if request and request.url.path == '/pipelines' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-project-diagram mr-2 text-gray-400" aria-hidden="true"></i>Pipelines
|
||||
<i class="fas fa-project-diagram mr-2 text-gray-400" aria-hidden="true"></i>{{ _("nav.pipelines") }}
|
||||
</a>
|
||||
<a href="/integrations"
|
||||
class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
{% if request and request.url.path == '/integrations' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-plug mr-2 text-gray-400" aria-hidden="true"></i>Integrations
|
||||
<i class="fas fa-plug mr-2 text-gray-400" aria-hidden="true"></i>{{ _("nav.integrations") }}
|
||||
</a>
|
||||
<a href="/notifications"
|
||||
class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
{% if request and request.url.path == '/notifications' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-bell mr-2 text-gray-400" aria-hidden="true"></i>Notifications
|
||||
<i class="fas fa-bell mr-2 text-gray-400" aria-hidden="true"></i>{{ _("nav.notifications") }}
|
||||
</a>
|
||||
|
||||
<!-- Admin section in mobile menu – shown only for admin users via JS -->
|
||||
<div id="mobileAdminSection" class="hidden">
|
||||
<div class="border-t border-gray-200 mt-1 pt-1">
|
||||
<p class="px-3 py-1 text-xs font-semibold text-red-600 uppercase tracking-wider flex items-center">
|
||||
<i class="fas fa-shield-alt mr-1" aria-hidden="true"></i> Admin
|
||||
<i class="fas fa-shield-alt mr-1" aria-hidden="true"></i> {{ _("nav.admin") }}
|
||||
</p>
|
||||
<a href="/settings" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-cog mr-2 text-gray-400" aria-hidden="true"></i> Settings
|
||||
<i class="fas fa-cog mr-2 text-gray-400" aria-hidden="true"></i> {{ _("nav.settings") }}
|
||||
</a>
|
||||
<a href="/admin/users" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-users mr-2 text-blue-400" aria-hidden="true"></i> Users
|
||||
<i class="fas fa-users mr-2 text-blue-400" aria-hidden="true"></i> {{ _("nav.users") }}
|
||||
</a>
|
||||
<a href="/admin/plans" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-layer-group mr-2 text-indigo-400" aria-hidden="true"></i> Plan Designer
|
||||
<i class="fas fa-layer-group mr-2 text-indigo-400" aria-hidden="true"></i> {{ _("nav.plan_designer") }}
|
||||
</a>
|
||||
<a href="/admin/credentials" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-key mr-2 text-yellow-400" aria-hidden="true"></i> Credentials
|
||||
<i class="fas fa-key mr-2 text-yellow-400" aria-hidden="true"></i> {{ _("nav.credentials") }}
|
||||
</a>
|
||||
<a href="/admin/files" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-folder-open mr-2 text-gray-400" aria-hidden="true"></i> File Manager
|
||||
<i class="fas fa-folder-open mr-2 text-gray-400" aria-hidden="true"></i> {{ _("nav.file_manager") }}
|
||||
</a>
|
||||
<a href="/duplicates" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-clone mr-2 text-orange-400" aria-hidden="true"></i> Duplicates
|
||||
<i class="fas fa-clone mr-2 text-orange-400" aria-hidden="true"></i> {{ _("nav.duplicates") }}
|
||||
</a>
|
||||
<a href="/similarity" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-sitemap mr-2 text-purple-400" aria-hidden="true"></i> Similarity
|
||||
<i class="fas fa-sitemap mr-2 text-purple-400" aria-hidden="true"></i> {{ _("nav.similarity") }}
|
||||
</a>
|
||||
<a href="/admin/queue" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-stream mr-2 text-blue-400" aria-hidden="true"></i> Queue Monitor
|
||||
<i class="fas fa-stream mr-2 text-blue-400" aria-hidden="true"></i> {{ _("nav.queue_monitor") }}
|
||||
</a>
|
||||
<a href="/admin/scheduled-jobs" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-clock mr-2 text-indigo-500" aria-hidden="true"></i> Scheduled Jobs
|
||||
<i class="fas fa-clock mr-2 text-indigo-500" aria-hidden="true"></i> {{ _("nav.scheduled_jobs") }}
|
||||
</a>
|
||||
<a href="/admin/compliance" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-check-double mr-2 text-green-500" aria-hidden="true"></i> Compliance
|
||||
</a>
|
||||
<a href="/admin/backup" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-database mr-2 text-green-500" aria-hidden="true"></i> Backup & Restore
|
||||
<i class="fas fa-database mr-2 text-green-500" aria-hidden="true"></i> {{ _("nav.backup_restore") }}
|
||||
</a>
|
||||
<a href="/status" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
{% if request and request.url.path == '/status' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-circle-dot mr-2 text-gray-400" aria-hidden="true"></i> Status
|
||||
<i class="fas fa-circle-dot mr-2 text-gray-400" aria-hidden="true"></i> {{ _("nav.status") }}
|
||||
</a>
|
||||
<a href="/admin/api-docs" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-code mr-2 text-teal-400" aria-hidden="true"></i> API Docs
|
||||
<i class="fas fa-code mr-2 text-teal-400" aria-hidden="true"></i> {{ _("nav.api_docs") }}
|
||||
</a>
|
||||
<a href="/developer-docs/" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-book mr-2 text-teal-400" aria-hidden="true"></i> Developer Docs
|
||||
<i class="fas fa-book mr-2 text-teal-400" aria-hidden="true"></i> {{ _("nav.developer_docs") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -359,9 +463,9 @@
|
||||
<!-- Help – always visible, for every visitor regardless of auth state -->
|
||||
<a href="/help"
|
||||
class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
aria-label="Help Center"
|
||||
aria-label="{{ _('nav.help_center') }}"
|
||||
{% if request and request.url.path == '/help' %}aria-current="page"{% endif %}>
|
||||
<i class="fas fa-circle-question mr-2 text-gray-400" aria-hidden="true"></i>Help
|
||||
<i class="fas fa-circle-question mr-2 text-gray-400" aria-hidden="true"></i>{{ _("nav.help") }}
|
||||
</a>
|
||||
|
||||
<!-- Dark mode toggle (mobile) -->
|
||||
@@ -370,10 +474,10 @@
|
||||
type="button"
|
||||
class="flex items-center w-full px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
id="darkModeToggleMobile"
|
||||
aria-label="Toggle dark mode"
|
||||
aria-label="{{ _('nav.toggle_dark_mode') }}"
|
||||
>
|
||||
<i class="fas fa-moon mr-2" id="darkModeIconMobile" aria-hidden="true"></i>
|
||||
<span id="darkModeTextMobile">Dark Mode</span>
|
||||
<span id="darkModeTextMobile">{{ _("nav.dark_mode") }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Mobile Auth / Account section (populated by common.js) -->
|
||||
@@ -394,14 +498,14 @@
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white shadow" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 py-4 text-center text-gray-600">
|
||||
DocuElevate 2025 -
|
||||
<nav aria-label="Footer navigation" class="inline">
|
||||
<a href="/privacy" class="text-blue-500 hover:underline">Privacy</a> -
|
||||
<a href="/imprint" class="text-blue-500 hover:underline">Imprint</a> -
|
||||
<a href="/terms" class="text-blue-500 hover:underline">Terms</a> -
|
||||
<a href="/cookies" class="text-blue-500 hover:underline">Cookies</a> -
|
||||
<a href="/license" class="text-blue-500 hover:underline">License</a> -
|
||||
<a href="/attribution" class="text-blue-500 hover:underline">Attributions</a>
|
||||
{{ _("footer.copyright", year="2025") }} -
|
||||
<nav aria-label="{{ _('footer.navigation') }}" class="inline">
|
||||
<a href="/privacy" class="text-blue-500 hover:underline">{{ _("footer.privacy") }}</a> -
|
||||
<a href="/imprint" class="text-blue-500 hover:underline">{{ _("footer.imprint") }}</a> -
|
||||
<a href="/terms" class="text-blue-500 hover:underline">{{ _("footer.terms") }}</a> -
|
||||
<a href="/cookies" class="text-blue-500 hover:underline">{{ _("footer.cookies") }}</a> -
|
||||
<a href="/license" class="text-blue-500 hover:underline">{{ _("footer.license") }}</a> -
|
||||
<a href="/attribution" class="text-blue-500 hover:underline">{{ _("footer.attributions") }}</a>
|
||||
</nav> -
|
||||
<span class="text-xs">Version {{ app_version|default(version, true) }}{% if release_name %} "{{ release_name }}"{% endif %}</span>
|
||||
</div>
|
||||
@@ -416,19 +520,18 @@
|
||||
style="display:none!important"
|
||||
aria-live="polite"
|
||||
role="region"
|
||||
aria-label="Cookie notice">
|
||||
aria-label="{{ _('cookie.notice_label') }}">
|
||||
<p class="text-center sm:text-left">
|
||||
DocuElevate uses only essential session cookies required for authentication and service operation.
|
||||
No tracking or analytics cookies are used.
|
||||
<a href="/cookies" class="underline hover:text-blue-300 ml-1">Cookie Policy</a> ·
|
||||
<a href="/privacy" class="underline hover:text-blue-300 ml-1">Privacy Notice</a>
|
||||
{{ _("cookie.notice") }}
|
||||
<a href="/cookies" class="underline hover:text-blue-300 ml-1">{{ _("cookie.policy_link") }}</a> ·
|
||||
<a href="/privacy" class="underline hover:text-blue-300 ml-1">{{ _("cookie.privacy_link") }}</a>
|
||||
</p>
|
||||
<button
|
||||
id="cookieNoticeAccept"
|
||||
type="button"
|
||||
class="flex-shrink-0 bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-1.5 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
aria-label="Acknowledge cookie notice">
|
||||
Got it
|
||||
aria-label="{{ _('cookie.accept') }}">
|
||||
{{ _("cookie.accept") }}
|
||||
</button>
|
||||
</div>
|
||||
<script>
|
||||
@@ -448,9 +551,46 @@
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- i18n strings for common.js (user menu) -->
|
||||
<script>
|
||||
window.__i18n = {
|
||||
accountMenu: {{ _("nav.account_menu") | tojson }},
|
||||
accountMenuFor: {{ _("nav.account_menu_for") | tojson }},
|
||||
avatar: {{ _("common.avatar") | tojson }},
|
||||
profileSettings: {{ _("nav.profile_settings") | tojson }},
|
||||
mySubscription: {{ _("nav.my_subscription") | tojson }},
|
||||
apiTokens: {{ _("nav.api_tokens") | tojson }},
|
||||
sharedLinks: {{ _("nav.shared_links") | tojson }},
|
||||
signOut: {{ _("nav.sign_out") | tojson }},
|
||||
logIn: {{ _("nav.login") | tojson }},
|
||||
signUp: {{ _("nav.signup") | tojson }},
|
||||
getStarted: {{ _("nav.get_started") | tojson }},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Common JS (shared) -->
|
||||
<script src="/static/js/common.js"></script>
|
||||
|
||||
<!-- Language selector -->
|
||||
<script>
|
||||
function setLanguage(langCode) {
|
||||
var csrfToken = document.querySelector('meta[name="csrf-token"]');
|
||||
var headers = { 'Content-Type': 'application/json' };
|
||||
if (csrfToken && csrfToken.content) {
|
||||
headers['X-CSRF-Token'] = csrfToken.content;
|
||||
}
|
||||
fetch('/api/i18n/language', {
|
||||
method: 'POST',
|
||||
headers: headers,
|
||||
body: JSON.stringify({ language: langCode })
|
||||
}).then(function() {
|
||||
window.location.reload();
|
||||
}).catch(function() {
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Notification badge updater -->
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DocuElevate - Subscription Activated</title>
|
||||
<title>{{ _("billing.success_page_title") }}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
@@ -12,7 +12,7 @@
|
||||
<body class="bg-gray-100 min-h-screen flex items-center justify-center py-8">
|
||||
<main class="bg-white rounded-lg shadow-lg p-8 max-w-md w-full text-center" role="main">
|
||||
<div class="flex justify-center mb-6">
|
||||
<img src="/static/images/logo_writing.svg" alt="DocuElevate Logo" class="h-16">
|
||||
<img src="/static/images/logo_writing.svg" alt="{{ _('auth.logo_alt') }}" class="h-16">
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mb-4">
|
||||
@@ -21,9 +21,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-2">You're all set!</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-2">{{ _("billing.success_heading") }}</h1>
|
||||
<p class="text-gray-600 mb-8">
|
||||
Your subscription has been activated. Thank you for choosing DocuElevate!
|
||||
{{ _("billing.success_message") }}
|
||||
</p>
|
||||
|
||||
<div class="space-y-3">
|
||||
@@ -31,13 +31,13 @@
|
||||
class="block w-full py-3 px-4 rounded-lg border-2 border-indigo-600 text-indigo-600 font-semibold hover:bg-indigo-50 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
style="min-height:44px;display:flex;align-items:center;justify-content:center;"
|
||||
>
|
||||
<i class="fas fa-credit-card mr-2" aria-hidden="true"></i>Manage subscription
|
||||
<i class="fas fa-credit-card mr-2" aria-hidden="true"></i>{{ _("billing.manage_subscription") }}
|
||||
</a>
|
||||
<a href="/upload"
|
||||
class="block w-full py-3 px-4 rounded-lg bg-indigo-600 text-white font-semibold hover:bg-indigo-700 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
style="min-height:44px;display:flex;align-items:center;justify-content:center;"
|
||||
>
|
||||
<i class="fas fa-arrow-right mr-2" aria-hidden="true"></i>Go to dashboard
|
||||
<i class="fas fa-arrow-right mr-2" aria-hidden="true"></i>{{ _("billing.go_to_dashboard") }}
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,302 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Compliance Templates - DocuElevate{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-6" x-data="complianceApp()">
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start gap-4 mb-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold mb-1">Compliance Templates</h1>
|
||||
<p class="text-gray-500 text-sm">
|
||||
Pre-built compliance configurations for GDPR, HIPAA, and SOC 2.
|
||||
Apply templates with one click to align your instance with regulatory requirements.
|
||||
</p>
|
||||
</div>
|
||||
<button @click="refreshAll()"
|
||||
class="inline-flex items-center 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-blue-500"
|
||||
:disabled="loading"
|
||||
aria-label="Refresh compliance status">
|
||||
<i class="fas fa-sync-alt mr-2" :class="loading ? 'animate-spin' : ''" aria-hidden="true"></i> Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overall Status Banner -->
|
||||
<div class="mb-6 rounded-lg p-5 shadow"
|
||||
:class="{
|
||||
'bg-green-50 border border-green-200': summary.overall_status === 'compliant',
|
||||
'bg-yellow-50 border border-yellow-200': summary.overall_status === 'partial',
|
||||
'bg-red-50 border border-red-200': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
|
||||
}">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="inline-flex items-center justify-center h-12 w-12 rounded-full text-xl"
|
||||
:class="{
|
||||
'bg-green-100 text-green-600': summary.overall_status === 'compliant',
|
||||
'bg-yellow-100 text-yellow-600': summary.overall_status === 'partial',
|
||||
'bg-red-100 text-red-600': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
|
||||
}">
|
||||
<i :class="{
|
||||
'fas fa-check-circle': summary.overall_status === 'compliant',
|
||||
'fas fa-exclamation-triangle': summary.overall_status === 'partial',
|
||||
'fas fa-times-circle': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
|
||||
}" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold"
|
||||
:class="{
|
||||
'text-green-800': summary.overall_status === 'compliant',
|
||||
'text-yellow-800': summary.overall_status === 'partial',
|
||||
'text-red-800': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
|
||||
}">
|
||||
<span x-text="summary.overall_status === 'compliant' ? 'All Checks Passing' :
|
||||
summary.overall_status === 'partial' ? 'Partially Compliant' :
|
||||
'Non-Compliant'"></span>
|
||||
</h2>
|
||||
<p class="text-sm text-gray-600">
|
||||
<span x-text="summary.total_passed"></span> of <span x-text="summary.total_checks"></span> checks passing across all templates
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4 text-center">
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-green-700" x-text="summary.total_passed"></div>
|
||||
<div class="text-xs text-gray-500">Passed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-red-700" x-text="summary.total_failed"></div>
|
||||
<div class="text-xs text-gray-500">Failed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-700" x-text="summary.total_checks"></div>
|
||||
<div class="text-xs text-gray-500">Total</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert Messages -->
|
||||
<div x-show="alertMessage" x-cloak
|
||||
class="mb-4 rounded-lg p-4 flex items-center gap-3"
|
||||
:class="alertType === 'success' ? 'bg-green-50 border border-green-200 text-green-800' :
|
||||
'bg-red-50 border border-red-200 text-red-800'"
|
||||
role="alert">
|
||||
<i :class="alertType === 'success' ? 'fas fa-check-circle text-green-500' : 'fas fa-exclamation-circle text-red-500'" aria-hidden="true"></i>
|
||||
<span x-text="alertMessage"></span>
|
||||
<button @click="alertMessage = ''" class="ml-auto text-gray-400 hover:text-gray-600" aria-label="Dismiss alert">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Template Cards -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
||||
<template x-for="tmpl in templates" :key="tmpl.name">
|
||||
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
||||
<!-- Card Header -->
|
||||
<div class="p-5 border-b"
|
||||
:class="{
|
||||
'border-green-200 bg-green-50': tmpl._status === 'compliant',
|
||||
'border-yellow-200 bg-yellow-50': tmpl._status === 'partial',
|
||||
'border-gray-200': tmpl._status === 'not_applied' || tmpl._status === 'non_compliant'
|
||||
}">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-lg font-bold text-gray-800" x-text="tmpl.display_name"></h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold"
|
||||
:class="{
|
||||
'bg-green-100 text-green-800': tmpl._status === 'compliant',
|
||||
'bg-yellow-100 text-yellow-800': tmpl._status === 'partial',
|
||||
'bg-red-100 text-red-800': tmpl._status === 'non_compliant',
|
||||
'bg-gray-100 text-gray-600': tmpl._status === 'not_applied'
|
||||
}">
|
||||
<span x-text="tmpl._status === 'compliant' ? 'Compliant' :
|
||||
tmpl._status === 'partial' ? 'Partial' :
|
||||
tmpl._status === 'non_compliant' ? 'Non-Compliant' :
|
||||
'Not Applied'"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600" x-text="tmpl.description"></p>
|
||||
</div>
|
||||
|
||||
<!-- Check Results (when expanded) -->
|
||||
<div class="p-5" x-show="tmpl._expanded" x-collapse>
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-3">
|
||||
<i class="fas fa-clipboard-check mr-1" aria-hidden="true"></i>
|
||||
Compliance Checks (<span x-text="tmpl._statusData ? tmpl._statusData.passed : '?'"></span>/<span x-text="tmpl._statusData ? tmpl._statusData.total : '?'"></span>)
|
||||
</h4>
|
||||
<ul class="space-y-2">
|
||||
<template x-for="check in (tmpl._statusData ? tmpl._statusData.check_results : [])" :key="check.key">
|
||||
<li class="flex items-start gap-2 text-sm">
|
||||
<span class="mt-0.5 flex-shrink-0">
|
||||
<i :class="check.passing ? 'fas fa-check-circle text-green-500' : 'fas fa-times-circle text-red-500'" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<span class="font-medium" x-text="check.label"></span>
|
||||
<p class="text-xs text-gray-500" x-text="check.description"></p>
|
||||
<p class="text-xs mt-0.5" x-show="!check.passing">
|
||||
<span class="text-red-600">Current: <code x-text="check.actual"></code></span>
|
||||
<span class="text-gray-400 mx-1">→</span>
|
||||
<span class="text-green-600">Expected: <code x-text="check.expected"></code></span>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Card Footer -->
|
||||
<div class="px-5 py-4 bg-gray-50 border-t flex items-center justify-between gap-2">
|
||||
<button @click="toggleExpand(tmpl)"
|
||||
class="inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
:aria-expanded="tmpl._expanded"
|
||||
:aria-label="'Toggle details for ' + tmpl.display_name">
|
||||
<i class="fas mr-1" :class="tmpl._expanded ? 'fa-chevron-up' : 'fa-chevron-down'" aria-hidden="true"></i>
|
||||
<span x-text="tmpl._expanded ? 'Hide Details' : 'Show Details'"></span>
|
||||
</button>
|
||||
<button @click="applyTemplate(tmpl.name)"
|
||||
:disabled="tmpl._applying"
|
||||
:aria-busy="tmpl._applying"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 min-h-[44px] min-w-[44px]"
|
||||
:class="tmpl._applying ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'"
|
||||
:aria-label="'Apply ' + tmpl.display_name + ' template'"
|
||||
aria-live="polite">>
|
||||
<i class="fas mr-1.5" :class="tmpl._applying ? 'fa-spinner animate-spin' : 'fa-bolt'" aria-hidden="true"></i>
|
||||
<span x-text="tmpl._applying ? 'Applying…' : 'Apply Template'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Applied info -->
|
||||
<div x-show="tmpl.applied_at" class="px-5 py-2 bg-gray-50 border-t text-xs text-gray-500">
|
||||
<i class="fas fa-clock mr-1" aria-hidden="true"></i>
|
||||
Last applied: <span x-text="tmpl.applied_at ? new Date(tmpl.applied_at).toLocaleString() : 'Never'"></span>
|
||||
<span x-show="tmpl.applied_by"> by <span x-text="tmpl.applied_by"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div x-show="!loading && templates.length === 0" class="text-center py-12 text-gray-500">
|
||||
<i class="fas fa-shield-alt text-4xl mb-4" aria-hidden="true"></i>
|
||||
<p class="text-lg font-medium">No compliance templates available</p>
|
||||
<p class="text-sm">Templates will appear here after seeding.</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading Spinner -->
|
||||
<div x-show="loading && templates.length === 0" class="text-center py-12">
|
||||
<i class="fas fa-spinner animate-spin text-3xl text-blue-500" aria-hidden="true"></i>
|
||||
<p class="text-gray-500 mt-2">Loading compliance templates…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function complianceApp() {
|
||||
return {
|
||||
templates: [],
|
||||
summary: { overall_status: 'unknown', total_checks: 0, total_passed: 0, total_failed: 0 },
|
||||
loading: true,
|
||||
alertMessage: '',
|
||||
alertType: 'success',
|
||||
|
||||
async init() {
|
||||
await this.refreshAll();
|
||||
},
|
||||
|
||||
async refreshAll() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const [templatesRes, summaryRes] = await Promise.all([
|
||||
fetch('/api/compliance/templates'),
|
||||
fetch('/api/compliance/summary')
|
||||
]);
|
||||
|
||||
if (templatesRes.ok) {
|
||||
const data = await templatesRes.json();
|
||||
this.templates = data.map(t => ({
|
||||
...t,
|
||||
_expanded: false,
|
||||
_applying: false,
|
||||
_status: t.status || 'not_applied',
|
||||
_statusData: null
|
||||
}));
|
||||
|
||||
// Fetch status for each template
|
||||
for (const tmpl of this.templates) {
|
||||
this.fetchTemplateStatus(tmpl);
|
||||
}
|
||||
}
|
||||
|
||||
if (summaryRes.ok) {
|
||||
this.summary = await summaryRes.json();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load compliance data:', err);
|
||||
this.showAlert('error', 'Failed to load compliance data. Please try again.');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async fetchTemplateStatus(tmpl) {
|
||||
try {
|
||||
const res = await fetch(`/api/compliance/templates/${tmpl.name}/status`);
|
||||
if (res.ok) {
|
||||
tmpl._statusData = await res.json();
|
||||
tmpl._status = tmpl._statusData.status;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`Failed to fetch status for ${tmpl.name}:`, err);
|
||||
}
|
||||
},
|
||||
|
||||
async toggleExpand(tmpl) {
|
||||
tmpl._expanded = !tmpl._expanded;
|
||||
if (tmpl._expanded && !tmpl._statusData) {
|
||||
await this.fetchTemplateStatus(tmpl);
|
||||
}
|
||||
},
|
||||
|
||||
async applyTemplate(name) {
|
||||
const tmpl = this.templates.find(t => t.name === name);
|
||||
if (!tmpl) return;
|
||||
|
||||
if (!confirm(`Apply the ${tmpl.display_name} compliance template?\n\nThis will update your application settings to meet ${name.toUpperCase()} requirements.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
tmpl._applying = true;
|
||||
this.alertMessage = '';
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/compliance/templates/${name}/apply`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok && data.success) {
|
||||
this.showAlert('success', `${tmpl.display_name} template applied successfully.`);
|
||||
await this.refreshAll();
|
||||
} else {
|
||||
this.showAlert('error', data.detail || data.error || 'Failed to apply template.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`Failed to apply ${name}:`, err);
|
||||
this.showAlert('error', 'Network error. Please try again.');
|
||||
} finally {
|
||||
tmpl._applying = false;
|
||||
}
|
||||
},
|
||||
|
||||
showAlert(type, message) {
|
||||
this.alertType = type;
|
||||
this.alertMessage = message;
|
||||
if (type === 'success') {
|
||||
setTimeout(() => { this.alertMessage = ''; }, 5000);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -1,58 +1,58 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Cookie Policy - DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("cookie_policy.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<h1 class="text-4xl font-bold mb-6">Cookie Policy</h1>
|
||||
<p class="text-sm text-gray-500 mb-8">Last Updated: {{ build_date|default(current_date|default('May 14, 2024')) }}</p>
|
||||
<h1 class="text-4xl font-bold mb-6">{{ _("cookie_policy.heading") }}</h1>
|
||||
<p class="text-sm text-gray-500 mb-8">{{ _("cookie_policy.last_updated") }} {{ build_date|default(current_date|default('May 14, 2024')) }}</p>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">What Are Cookies</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("cookie_policy.s1_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
Cookies are small text files that are stored on your computer or mobile device when you visit a website. They are widely used to make websites work more efficiently and provide information to the website owners.
|
||||
{{ _("cookie_policy.s1_p1") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">How We Use Cookies</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("cookie_policy.s2_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
DocuElevate uses <strong>only strictly necessary session cookies</strong> for the following purpose:
|
||||
{{ _("cookie_policy.s2_p1_pre") }} <strong>{{ _("cookie_policy.s2_p1_strong") }}</strong> {{ _("cookie_policy.s2_p1_post") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
|
||||
<li><strong>Authentication & Session Management:</strong> To identify you when you sign in and maintain your session while you use the application.</li>
|
||||
<li><strong>{{ _("cookie_policy.s2_li1_label") }}</strong> {{ _("cookie_policy.s2_li1_body") }}</li>
|
||||
</ul>
|
||||
<p class="text-gray-700 mb-3">
|
||||
These cookies are mandatory for the proper functioning of our service. Without these cookies, you would be required to log in repeatedly during your browsing session.
|
||||
{{ _("cookie_policy.s2_p2") }}
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
Because these cookies are strictly necessary for the service to function, they are exempt from prior-consent requirements under the EU ePrivacy Directive (Art. 5(3)) and equivalent national implementations. We do not set any optional, analytics, advertising, or tracking cookies.
|
||||
{{ _("cookie_policy.s2_p3") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">Cookie Details</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("cookie_policy.s3_heading") }}</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm text-gray-700 border border-gray-200 rounded">
|
||||
<table class="min-w-full text-sm text-gray-700 border border-gray-200 rounded" aria-label="{{ _('cookie_policy.s3_heading') }}">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left font-semibold border-b">Name</th>
|
||||
<th class="px-4 py-2 text-left font-semibold border-b">Type</th>
|
||||
<th class="px-4 py-2 text-left font-semibold border-b">Purpose</th>
|
||||
<th class="px-4 py-2 text-left font-semibold border-b">Duration</th>
|
||||
<th class="px-4 py-2 text-left font-semibold border-b" scope="col">{{ _("cookie_policy.s3_col_name") }}</th>
|
||||
<th class="px-4 py-2 text-left font-semibold border-b" scope="col">{{ _("cookie_policy.s3_col_type") }}</th>
|
||||
<th class="px-4 py-2 text-left font-semibold border-b" scope="col">{{ _("cookie_policy.s3_col_purpose") }}</th>
|
||||
<th class="px-4 py-2 text-left font-semibold border-b" scope="col">{{ _("cookie_policy.s3_col_duration") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b">
|
||||
<td class="px-4 py-2 font-mono">session</td>
|
||||
<td class="px-4 py-2">Strictly Necessary</td>
|
||||
<td class="px-4 py-2">Maintains your authenticated session; required for login to function.</td>
|
||||
<td class="px-4 py-2">Session (deleted on browser close or logout)</td>
|
||||
<td class="px-4 py-2">{{ _("cookie_policy.s3_row1_type") }}</td>
|
||||
<td class="px-4 py-2">{{ _("cookie_policy.s3_row1_purpose") }}</td>
|
||||
<td class="px-4 py-2">{{ _("cookie_policy.s3_row1_duration") }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2 font-mono">cookieNoticeDismissed</td>
|
||||
<td class="px-4 py-2">Strictly Necessary</td>
|
||||
<td class="px-4 py-2">Stores your acknowledgement of the cookie notice so it is not shown repeatedly (stored in localStorage, not a cookie).</td>
|
||||
<td class="px-4 py-2">Persistent (browser localStorage)</td>
|
||||
<td class="px-4 py-2">{{ _("cookie_policy.s3_row2_type") }}</td>
|
||||
<td class="px-4 py-2">{{ _("cookie_policy.s3_row2_purpose") }}</td>
|
||||
<td class="px-4 py-2">{{ _("cookie_policy.s3_row2_duration") }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -60,25 +60,26 @@
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">No Third-Party Cookies</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("cookie_policy.s4_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
DocuElevate does not use any third-party cookies, tracking cookies, advertising cookies, or analytics cookies. We respect your privacy and only implement the minimum cookies required for our service to function.
|
||||
{{ _("cookie_policy.s4_p1") }}
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
For more information about how we handle your data, please see our <a href="/privacy" class="text-blue-600 hover:underline">Privacy Notice</a>.
|
||||
{{ _("cookie_policy.s4_p2_pre") }} <a href="/privacy" class="text-blue-600 hover:underline">{{ _("cookie_policy.s4_privacy_link") }}</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">Managing Cookies</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("cookie_policy.s5_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
Most web browsers allow you to control cookies through their settings. However, blocking or deleting our session cookies will prevent DocuElevate from functioning, as user authentication relies on these cookies.
|
||||
{{ _("cookie_policy.s5_p1") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
You may also clear the cookie notice acknowledgement stored in your browser's localStorage at any time via your browser's developer tools (Application → Local Storage).
|
||||
{{ _("cookie_policy.s5_p2") }}
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
This Cookie Policy is part of and incorporated into our <a href="/terms" class="text-blue-600 hover:underline">Terms of Service</a> and <a href="/privacy" class="text-blue-600 hover:underline">Privacy Notice</a>.
|
||||
{{ _("cookie_policy.s5_p3_pre") }} <a href="/terms" class="text-blue-600 hover:underline">{{ _("cookie_policy.s5_terms_link") }}</a>
|
||||
{{ _("cookie_policy.s5_p3_and") }} <a href="/privacy" class="text-blue-600 hover:underline">{{ _("cookie_policy.s5_privacy_link") }}</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Credential Audit - DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("credentials.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
@@ -8,11 +8,10 @@
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<i class="fas fa-key text-yellow-500 text-2xl" aria-hidden="true"></i>
|
||||
<h1 class="text-3xl font-bold">Credential Audit</h1>
|
||||
<h1 class="text-3xl font-bold">{{ _("credentials.title") }}</h1>
|
||||
</div>
|
||||
<p class="text-gray-600">
|
||||
Overview of all sensitive credentials used by DocuElevate. No secret values are shown here — only
|
||||
whether each credential is configured and where it comes from.
|
||||
{{ _("credentials.subtitle") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +23,7 @@
|
||||
</span>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-800">{{ total }}</div>
|
||||
<div class="text-sm text-gray-500">Total Credentials</div>
|
||||
<div class="text-sm text-gray-500">{{ _("credentials.total_credentials") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg shadow p-5 flex items-center gap-4">
|
||||
@@ -33,7 +32,7 @@
|
||||
</span>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-green-700">{{ configured_count }}</div>
|
||||
<div class="text-sm text-gray-500">Configured</div>
|
||||
<div class="text-sm text-gray-500">{{ _("credentials.configured") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg shadow p-5 flex items-center gap-4">
|
||||
@@ -42,32 +41,32 @@
|
||||
</span>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-600">{{ unconfigured_count }}</div>
|
||||
<div class="text-sm text-gray-500">Not Configured</div>
|
||||
<div class="text-sm text-gray-500">{{ _("credentials.not_configured") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="bg-blue-50 border-l-4 border-blue-500 text-blue-800 p-4 mb-6 rounded-r-md">
|
||||
<p class="font-semibold mb-2"><i class="fas fa-circle-info mr-1" aria-hidden="true"></i> Legend</p>
|
||||
<p class="font-semibold mb-2"><i class="fas fa-circle-info mr-1" aria-hidden="true"></i> {{ _("credentials.legend_title") }}</p>
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 mr-1">DB</span>
|
||||
Value stored in the database (encrypted at rest; overrides environment variable)
|
||||
{{ _("credentials.legend_db") }}
|
||||
</span>
|
||||
<span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-1">ENV</span>
|
||||
Value from environment variable or <code>.env</code> file
|
||||
{{ _("credentials.legend_env_before") }}<code>.env</code>{{ _("credentials.legend_env_after") }}
|
||||
</span>
|
||||
<span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700 mr-1">
|
||||
<i class="fas fa-circle-exclamation mr-0.5 text-xs"></i> Missing
|
||||
<i class="fas fa-circle-exclamation mr-0.5 text-xs"></i> {{ _("credentials.status_missing") }}
|
||||
</span>
|
||||
Credential not set — integration will not work
|
||||
{{ _("credentials.legend_missing") }}
|
||||
</span>
|
||||
<span>
|
||||
<span class="text-orange-500 mr-1"><i class="fas fa-rotate"></i></span>
|
||||
Restart required when this credential is rotated
|
||||
{{ _("credentials.legend_restart") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,29 +78,29 @@
|
||||
<div class="bg-gray-100 px-6 py-3 border-b border-gray-200 flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold text-gray-800">{{ category }}</h2>
|
||||
<span class="text-sm text-gray-500">
|
||||
{{ creds | selectattr('configured') | list | length }} / {{ creds | length }} configured
|
||||
{{ creds | selectattr('configured') | list | length }} / {{ creds | length }} {{ _("credentials.configured") }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Credentials Table -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200" aria-label="Credentials for {{ category }}">
|
||||
<table class="min-w-full divide-y divide-gray-200" aria-label="{{ _('credentials.table_for') ~ ' ' ~ category }}">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-56">
|
||||
Credential
|
||||
{{ _("credentials.col_credential") }}
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Description
|
||||
{{ _("common.description") }}
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32">
|
||||
Status
|
||||
{{ _("common.status") }}
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-24">
|
||||
Source
|
||||
{{ _("credentials.col_source") }}
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider w-20">
|
||||
Action
|
||||
{{ _("credentials.col_action") }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -114,7 +113,7 @@
|
||||
<div class="flex items-center gap-1">
|
||||
<code class="text-sm font-mono text-gray-800">{{ cred.key }}</code>
|
||||
{% if cred.restart_required %}
|
||||
<span title="Restart required after rotating this credential">
|
||||
<span title="{{ _('credentials.restart_title') }}">
|
||||
<i class="fas fa-rotate text-orange-400 text-xs"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
@@ -130,11 +129,11 @@
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{% if cred.configured %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800">
|
||||
<i class="fas fa-check mr-1" aria-hidden="true"></i> Configured
|
||||
<i class="fas fa-check mr-1" aria-hidden="true"></i> {{ _("credentials.configured") }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700">
|
||||
<i class="fas fa-circle-exclamation mr-1" aria-hidden="true"></i> Missing
|
||||
<i class="fas fa-circle-exclamation mr-1" aria-hidden="true"></i> {{ _("credentials.status_missing") }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
@@ -142,11 +141,11 @@
|
||||
<!-- Source badge -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{% if cred.source == 'db' %}
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800" title="Stored in database (encrypted)">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800" title="{{ _('credentials.source_db_title') }}">
|
||||
<i class="fas fa-database mr-1 text-xs" aria-hidden="true"></i> DB
|
||||
</span>
|
||||
{% elif cred.source == 'env' %}
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800" title="From environment variable">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800" title="{{ _('credentials.source_env_title') }}">
|
||||
<i class="fas fa-terminal mr-1 text-xs" aria-hidden="true"></i> ENV
|
||||
</span>
|
||||
{% else %}
|
||||
@@ -157,8 +156,8 @@
|
||||
<!-- Quick-edit link -->
|
||||
<td class="px-6 py-4 whitespace-nowrap text-center">
|
||||
<a href="/settings#{{ cred.key }}"
|
||||
title="Edit in Settings"
|
||||
aria-label="Edit {{ cred.key }}"
|
||||
title="{{ _('credentials.edit_in_settings') }}"
|
||||
aria-label="{{ _('common.edit') ~ ' ' ~ cred.key }}"
|
||||
class="inline-flex items-center justify-center w-7 h-7 rounded text-gray-400 hover:text-blue-600 hover:bg-blue-50 transition-colors"
|
||||
>
|
||||
<i class="fas fa-pen-to-square text-sm" aria-hidden="true"></i>
|
||||
@@ -178,13 +177,13 @@
|
||||
<a href="/settings"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm font-medium"
|
||||
>
|
||||
<i class="fas fa-cog" aria-hidden="true"></i> Manage Settings
|
||||
<i class="fas fa-cog" aria-hidden="true"></i> {{ _("credentials.manage_settings") }}
|
||||
</a>
|
||||
<a href="/api/settings/credentials"
|
||||
target="_blank"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 text-sm font-medium"
|
||||
>
|
||||
<i class="fas fa-code" aria-hidden="true"></i> Raw JSON (API)
|
||||
<i class="fas fa-code" aria-hidden="true"></i> {{ _("credentials.raw_json") }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Duplicate Documents - DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("duplicates.page_title") }}{% endblock %}
|
||||
|
||||
{% block head_extra %}
|
||||
<style>
|
||||
@@ -88,22 +88,20 @@
|
||||
|
||||
{% block content %}
|
||||
<main id="main-content" class="dup-container px-4 py-8">
|
||||
<h1 class="text-2xl font-bold mb-2">Duplicate Documents</h1>
|
||||
<h1 class="text-2xl font-bold mb-2">{{ _("duplicates.heading") }}</h1>
|
||||
<p class="text-gray-500 mb-6 text-sm">
|
||||
Documents with identical content (same SHA-256 hash) are shown as
|
||||
<span class="dup-badge dup-badge-exact">exact duplicates</span>.
|
||||
Use the <strong>Near-Duplicate Finder</strong> tab to detect documents with the
|
||||
same scanned content but different hashes — for example, a document scanned
|
||||
twice.
|
||||
{{ _("duplicates.subtitle_1") }}
|
||||
<span class="dup-badge dup-badge-exact">{{ _("duplicates.exact_duplicates_badge") }}</span>.
|
||||
{{ _("duplicates.subtitle_2_pre") }} <strong>{{ _("duplicates.tab_near") }}</strong> {{ _("duplicates.subtitle_2_post") }}
|
||||
</p>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs" role="tablist" aria-label="Duplicate detection tabs">
|
||||
<div class="tabs" role="tablist" aria-label="{{ _('duplicates.tabs_aria') }}">
|
||||
<button class="tab-btn active" role="tab" aria-selected="true"
|
||||
aria-controls="tab-exact" id="btn-exact"
|
||||
onclick="switchTab('exact')">
|
||||
<i class="fas fa-clone mr-1" aria-hidden="true"></i>
|
||||
Exact Duplicates
|
||||
{{ _("duplicates.tab_exact") }}
|
||||
{% if total_groups is defined %}
|
||||
<span class="ml-1 text-xs bg-red-100 text-red-700 font-bold px-1.5 rounded-full">
|
||||
{{ total_groups }}
|
||||
@@ -114,7 +112,7 @@
|
||||
aria-controls="tab-near" id="btn-near"
|
||||
onclick="switchTab('near')">
|
||||
<i class="fas fa-layer-group mr-1" aria-hidden="true"></i>
|
||||
Near-Duplicate Finder
|
||||
{{ _("duplicates.tab_near") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -123,12 +121,12 @@
|
||||
|
||||
{% if groups %}
|
||||
<p class="text-sm text-gray-500 mb-4">
|
||||
Found <strong>{{ total_groups }}</strong> duplicate group(s) with
|
||||
<strong>{{ total_duplicate_files }}</strong> duplicate file(s) total.
|
||||
{{ _("duplicates.found_prefix") }} <strong>{{ total_groups }}</strong> {{ _("duplicates.found_groups") }}
|
||||
<strong>{{ total_duplicate_files }}</strong> {{ _("duplicates.found_files") }}
|
||||
</p>
|
||||
|
||||
{% for group in groups %}
|
||||
<section class="dup-group" aria-label="Duplicate group {{ loop.index }}">
|
||||
<section class="dup-group" aria-label="{{ _('duplicates.group_aria') }} {{ loop.index }}">
|
||||
<div class="dup-group-header">
|
||||
<i class="fas fa-fingerprint text-gray-400" aria-hidden="true"></i>
|
||||
<span class="text-xs font-mono text-gray-500" title="SHA-256 hash">
|
||||
@@ -136,14 +134,14 @@
|
||||
</span>
|
||||
<span class="dup-badge dup-badge-exact">
|
||||
<i class="fas fa-copy" aria-hidden="true"></i>
|
||||
{{ group.duplicate_count }} duplicate{{ 's' if group.duplicate_count != 1 else '' }}
|
||||
{{ group.duplicate_count }} {{ _("duplicates.dup_singular") if group.duplicate_count == 1 else _("duplicates.dup_plural") }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Original file -->
|
||||
{% if group.original %}
|
||||
<div class="dup-file-row original">
|
||||
<span class="dup-role-tag tag-original">Original</span>
|
||||
<span class="dup-role-tag tag-original">{{ _("duplicates.role_original") }}</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="dup-filename">
|
||||
<a href="/files/{{ group.original.id }}"
|
||||
@@ -164,8 +162,8 @@
|
||||
<div class="dup-actions">
|
||||
<a href="/files/{{ group.original.id }}"
|
||||
class="text-sm text-blue-600 hover:underline"
|
||||
aria-label="View original file {{ group.original.original_filename }}">
|
||||
<i class="fas fa-external-link-alt" aria-hidden="true"></i> View
|
||||
aria-label="{{ _('duplicates.view_original_aria') }} {{ group.original.original_filename }}">
|
||||
<i class="fas fa-external-link-alt" aria-hidden="true"></i> {{ _("common.view") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -174,7 +172,7 @@
|
||||
<!-- Duplicate files -->
|
||||
{% for dup in group.duplicates %}
|
||||
<div class="dup-file-row duplicate">
|
||||
<span class="dup-role-tag tag-duplicate">Duplicate</span>
|
||||
<span class="dup-role-tag tag-duplicate">{{ _("duplicates.role_duplicate") }}</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="dup-filename">
|
||||
<a href="/files/{{ dup.id }}" class="hover:text-blue-600">
|
||||
@@ -194,8 +192,8 @@
|
||||
<div class="dup-actions">
|
||||
<a href="/files/{{ dup.id }}"
|
||||
class="text-sm text-blue-600 hover:underline"
|
||||
aria-label="View duplicate file {{ dup.original_filename }}">
|
||||
<i class="fas fa-external-link-alt" aria-hidden="true"></i> View
|
||||
aria-label="{{ _('duplicates.view_dup_aria') }} {{ dup.original_filename }}">
|
||||
<i class="fas fa-external-link-alt" aria-hidden="true"></i> {{ _("common.view") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -205,23 +203,23 @@
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if pagination.pages > 1 %}
|
||||
<nav class="pagination" aria-label="Pagination">
|
||||
<nav class="pagination" aria-label="{{ _('duplicates.pagination_aria') }}">
|
||||
<button class="page-btn" onclick="changePage({{ pagination.page - 1 }})"
|
||||
{% if pagination.page <= 1 %}disabled{% endif %}
|
||||
aria-label="Previous page">
|
||||
aria-label="{{ _('common.prev_page') }}">
|
||||
<i class="fas fa-chevron-left" aria-hidden="true"></i>
|
||||
</button>
|
||||
{% for p in range(1, pagination.pages + 1) %}
|
||||
<button class="page-btn {% if p == pagination.page %}current{% endif %}"
|
||||
onclick="changePage({{ p }})"
|
||||
aria-label="Page {{ p }}"
|
||||
aria-label="{{ _('common.page') }} {{ p }}"
|
||||
{% if p == pagination.page %}aria-current="page"{% endif %}>
|
||||
{{ p }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
<button class="page-btn" onclick="changePage({{ pagination.page + 1 }})"
|
||||
{% if pagination.page >= pagination.pages %}disabled{% endif %}
|
||||
aria-label="Next page">
|
||||
aria-label="{{ _('common.next_page') }}">
|
||||
<i class="fas fa-chevron-right" aria-hidden="true"></i>
|
||||
</button>
|
||||
</nav>
|
||||
@@ -230,11 +228,9 @@
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-check-circle text-green-400" aria-hidden="true"></i>
|
||||
<p class="font-semibold text-lg text-gray-700">No exact duplicates found</p>
|
||||
<p class="font-semibold text-lg text-gray-700">{{ _("duplicates.no_exact_heading") }}</p>
|
||||
<p class="text-sm mt-1">
|
||||
Every file in the system has a unique SHA-256 hash.
|
||||
Use the <strong>Near-Duplicate Finder</strong> tab to check for
|
||||
re-scanned documents.
|
||||
{{ _("duplicates.no_exact_detail_pre") }} <strong>{{ _("duplicates.tab_near") }}</strong> {{ _("duplicates.no_exact_detail_post") }}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -246,32 +242,29 @@
|
||||
<div class="near-dup-search">
|
||||
<h3>
|
||||
<i class="fas fa-search mr-1 text-yellow-500" aria-hidden="true"></i>
|
||||
Find Near-Duplicates for a Document
|
||||
{{ _("duplicates.near_dup_heading") }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 mb-4">
|
||||
Select a document to check whether any other files contain the same (or very
|
||||
similar) content — even if they were scanned at different times and have
|
||||
different SHA-256 hashes. Similarity is computed from OCR text embeddings;
|
||||
documents without extracted text cannot be compared.
|
||||
{{ _("duplicates.near_dup_desc") }}
|
||||
</p>
|
||||
|
||||
<form id="nearDupForm" onsubmit="findNearDups(event)">
|
||||
<div class="nd-form">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="ndFileId">File ID</label>
|
||||
<label for="ndFileId">{{ _("duplicates.file_id_label") }}</label>
|
||||
<input type="number" id="ndFileId" name="file_id" min="1"
|
||||
placeholder="e.g. 42" required
|
||||
placeholder="{{ _('duplicates.file_id_placeholder') }}" required
|
||||
style="min-height:44px;">
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="ndThreshold">Similarity threshold</label>
|
||||
<label for="ndThreshold">{{ _("duplicates.threshold_label") }}</label>
|
||||
<input type="number" id="ndThreshold" name="threshold"
|
||||
min="0" max="1" step="0.05"
|
||||
value="{{ near_duplicate_threshold }}"
|
||||
style="min-height:44px;">
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="ndLimit">Max results</label>
|
||||
<label for="ndLimit">{{ _("duplicates.max_results_label") }}</label>
|
||||
<select id="ndLimit" name="limit" style="min-height:44px;">
|
||||
<option value="5" selected>5</option>
|
||||
<option value="10">10</option>
|
||||
@@ -282,7 +275,7 @@
|
||||
class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold
|
||||
px-5 rounded-lg transition-colors"
|
||||
style="min-height:44px;">
|
||||
<i class="fas fa-search mr-1" aria-hidden="true"></i> Find
|
||||
<i class="fas fa-search mr-1" aria-hidden="true"></i> {{ _("duplicates.find_btn") }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -296,20 +289,14 @@
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
|
||||
<p class="font-semibold mb-1">
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i>
|
||||
How near-duplicate detection works
|
||||
{{ _("duplicates.how_it_works_heading") }}
|
||||
</p>
|
||||
<ul class="list-disc ml-5 space-y-1">
|
||||
<li>After OCR processes a document, its text is converted to a numeric
|
||||
<em>embedding vector</em> using an AI language model.</li>
|
||||
<li>Near-duplicate detection compares these vectors using <em>cosine
|
||||
similarity</em>: a score of 1.0 means identical content, 0.0 means
|
||||
completely different.</li>
|
||||
<li>A threshold of <strong>{{ near_duplicate_threshold }}</strong> means
|
||||
documents must share at least
|
||||
{{ (near_duplicate_threshold * 100)|round|int }}% semantic similarity
|
||||
to be flagged.</li>
|
||||
<li>Documents scanned twice (even with slight differences) will typically
|
||||
score <strong>> 0.90</strong>.</li>
|
||||
<li>{{ _("duplicates.how_step1_pre") }} <em>{{ _("duplicates.embedding_vector") }}</em> {{ _("duplicates.how_step1_post") }}</li>
|
||||
<li>{{ _("duplicates.how_step2_pre") }} <em>{{ _("duplicates.cosine_similarity") }}</em>{{ _("duplicates.how_step2_post") }}</li>
|
||||
<li>{{ _("duplicates.how_step3_pre") }} <strong>{{ near_duplicate_threshold }}</strong> {{ _("duplicates.how_step3_mid") }}
|
||||
{{ (near_duplicate_threshold * 100)|round|int }}% {{ _("duplicates.how_step3_post") }}</li>
|
||||
<li>{{ _("duplicates.how_step4") }} <strong>> 0.90</strong>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /tab-near -->
|
||||
|
||||
@@ -1095,10 +1095,18 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="detail-container">
|
||||
<a href="/files" class="back-button" aria-label="Back to File List">
|
||||
<i class="fas fa-arrow-left" aria-hidden="true"></i>
|
||||
Back to File List
|
||||
</a>
|
||||
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;">
|
||||
<a href="/files" class="back-button" style="margin-bottom:0;" aria-label="Back to File List">
|
||||
<i class="fas fa-arrow-left" aria-hidden="true"></i>
|
||||
Back to File List
|
||||
</a>
|
||||
{% if file %}
|
||||
<a href="/files/{{ file.id }}" class="back-button" style="margin-bottom:0;" aria-label="View document for {{ file.original_filename }}">
|
||||
<i class="fas fa-eye" aria-hidden="true"></i>
|
||||
View Document
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if error %}
|
||||
<div class="error-message">
|
||||
|
||||
@@ -439,10 +439,105 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% if file.detected_language %}
|
||||
<div style="font-size:0.75rem;color:#6b7280;margin-bottom:0.5rem;">
|
||||
<i class="fas fa-globe" aria-hidden="true" style="margin-right:0.25rem;"></i>
|
||||
Detected language: <strong>{{ file.detected_language }}</strong>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div id="ocr-text-block" style="display:none;">
|
||||
<pre class="ocr-text" id="ocr-text-content">{{ file.ocr_text }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Default-language translation ── -->
|
||||
{% if file.default_language_text %}
|
||||
<div class="doc-card">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;">
|
||||
<div class="doc-card-title" style="margin:0;">
|
||||
<i class="fas fa-language" aria-hidden="true" style="color:#3b82f6;margin-right:0.4rem;"></i>
|
||||
Default Language Version
|
||||
{% if file.default_language_code %}
|
||||
<span style="font-size:0.75rem;color:#6b7280;font-weight:normal;margin-left:0.5rem;">({{ file.default_language_code }})</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="display:flex;gap:0.5rem;">
|
||||
<button class="text-toggle" onclick="toggleDefaultLangText()" aria-expanded="false" aria-controls="default-lang-text-block">
|
||||
<i id="default-lang-toggle-icon" class="fas fa-chevron-down" aria-hidden="true"></i>
|
||||
<span id="default-lang-toggle-label">Show text</span>
|
||||
</button>
|
||||
<button class="text-toggle" onclick="copyDefaultLangText()" id="default-lang-copy-btn" style="color:#10b981;" aria-label="Copy default language text">
|
||||
<i class="fas fa-copy" aria-hidden="true"></i> Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="default-lang-text-block" style="display:none;">
|
||||
<pre class="ocr-text" id="default-lang-text-content">{{ file.default_language_text }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
{% elif file.detected_language %}
|
||||
<!-- Translation pending or document already in default language -->
|
||||
<div class="doc-card">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<div class="doc-card-title" style="margin:0;">
|
||||
<i class="fas fa-language" aria-hidden="true" style="color:#3b82f6;margin-right:0.4rem;"></i>
|
||||
Default Language Version
|
||||
</div>
|
||||
<button class="action-btn btn-secondary" onclick="loadDefaultLangText({{ file.id }})">
|
||||
<i class="fas fa-language" aria-hidden="true"></i> Load translation
|
||||
</button>
|
||||
</div>
|
||||
<div id="default-lang-load-area" style="margin-top:0.75rem;"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- ── On-the-fly translation ── -->
|
||||
{% if file.ocr_text %}
|
||||
<div class="doc-card">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;">
|
||||
<div class="doc-card-title" style="margin:0;">
|
||||
<i class="fas fa-exchange-alt" aria-hidden="true" style="color:#f59e0b;margin-right:0.4rem;"></i>
|
||||
Translate to Another Language
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;">
|
||||
<label for="translate-lang-select" class="sr-only">Target language</label>
|
||||
<select id="translate-lang-select" style="padding:0.4rem 0.6rem;border:1px solid #d1d5db;border-radius:0.375rem;font-size:0.85rem;min-width:160px;" aria-label="Select target language for translation">
|
||||
<option value="">Select language…</option>
|
||||
<option value="en">English</option>
|
||||
<option value="de">Deutsch</option>
|
||||
<option value="fr">Français</option>
|
||||
<option value="es">Español</option>
|
||||
<option value="it">Italiano</option>
|
||||
<option value="pt">Português</option>
|
||||
<option value="nl">Nederlands</option>
|
||||
<option value="pl">Polski</option>
|
||||
<option value="ru">Русский</option>
|
||||
<option value="zh">中文</option>
|
||||
<option value="ja">日本語</option>
|
||||
<option value="ko">한국어</option>
|
||||
<option value="ar">العربية</option>
|
||||
<option value="hi">हिन्दी</option>
|
||||
<option value="tr">Türkçe</option>
|
||||
<option value="sv">Svenska</option>
|
||||
<option value="da">Dansk</option>
|
||||
<option value="no">Norsk</option>
|
||||
<option value="fi">Suomi</option>
|
||||
<option value="cs">Čeština</option>
|
||||
<option value="ro">Română</option>
|
||||
<option value="uk">Українська</option>
|
||||
</select>
|
||||
<button class="action-btn btn-secondary" onclick="translateOnTheFly({{ file.id }})" id="translate-btn" style="min-height:44px;min-width:44px;">
|
||||
<i class="fas fa-language" aria-hidden="true"></i> Translate
|
||||
</button>
|
||||
<button class="text-toggle" onclick="copyTranslatedText()" id="translate-copy-btn" style="color:#10b981;display:none;" aria-label="Copy translated text">
|
||||
<i class="fas fa-copy" aria-hidden="true"></i> Copy
|
||||
</button>
|
||||
</div>
|
||||
<div id="translate-result-area" style="margin-top:0.75rem;"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% elif processed_file_exists or original_file_exists %}
|
||||
<div class="doc-card">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
@@ -688,6 +783,149 @@
|
||||
});
|
||||
}
|
||||
|
||||
// ── Default-language text toggle ──
|
||||
function toggleDefaultLangText() {
|
||||
var block = document.getElementById('default-lang-text-block');
|
||||
var icon = document.getElementById('default-lang-toggle-icon');
|
||||
var label = document.getElementById('default-lang-toggle-label');
|
||||
var btn = icon ? icon.closest('button') : null;
|
||||
if (!block) return;
|
||||
if (block.style.display === 'none') {
|
||||
block.style.display = 'block';
|
||||
if (icon) icon.className = 'fas fa-chevron-up';
|
||||
if (label) label.textContent = 'Hide text';
|
||||
if (btn) btn.setAttribute('aria-expanded', 'true');
|
||||
} else {
|
||||
block.style.display = 'none';
|
||||
if (icon) icon.className = 'fas fa-chevron-down';
|
||||
if (label) label.textContent = 'Show text';
|
||||
if (btn) btn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
// ── Copy default-language text ──
|
||||
function copyDefaultLangText() {
|
||||
var content = document.getElementById('default-lang-text-content');
|
||||
if (!content) return;
|
||||
var text = content.textContent;
|
||||
var btn = document.getElementById('default-lang-copy-btn');
|
||||
if (!btn) return;
|
||||
var orig = btn.innerHTML;
|
||||
navigator.clipboard.writeText(text).then(function() {
|
||||
btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
|
||||
setTimeout(function() { btn.innerHTML = orig; }, 2000);
|
||||
}).catch(function() {
|
||||
try {
|
||||
var ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
ta.style.cssText = 'position:fixed;opacity:0;';
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(ta);
|
||||
btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
|
||||
setTimeout(function() { btn.innerHTML = orig; }, 2000);
|
||||
} catch(e) {}
|
||||
});
|
||||
}
|
||||
|
||||
// ── Load default-language text on demand ──
|
||||
function loadDefaultLangText(fileId) {
|
||||
var area = document.getElementById('default-lang-load-area');
|
||||
if (!area) return;
|
||||
area.innerHTML = '<div style="text-align:center;padding:1.5rem;color:#6b7280;"><i class="fas fa-spinner fa-spin fa-2x" aria-hidden="true"></i><p style="margin-top:0.5rem;">Loading translation…</p></div>';
|
||||
fetch('/files/' + fileId + '/text/default-language')
|
||||
.then(function(r) {
|
||||
if (r.status === 404) throw new Error('No translation available yet — it may still be processing');
|
||||
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||||
return r.json();
|
||||
})
|
||||
.then(function(data) {
|
||||
area.innerHTML = '';
|
||||
var info = document.createElement('div');
|
||||
info.style.cssText = 'font-size:0.75rem;color:#6b7280;margin-bottom:0.5rem;';
|
||||
info.textContent = 'Translated to: ' + data.language_code + (data.detected_language ? ' (from ' + data.detected_language + ')' : '');
|
||||
area.appendChild(info);
|
||||
var pre = document.createElement('pre');
|
||||
pre.className = 'ocr-text';
|
||||
pre.textContent = data.text;
|
||||
area.appendChild(pre);
|
||||
})
|
||||
.catch(function(err) {
|
||||
area.innerHTML = '<div style="color:#92400e;padding:0.75rem;background:#fef3c7;border-radius:0.375rem;font-size:0.875rem;"><i class="fas fa-info-circle" aria-hidden="true"></i> ' + err.message + '</div>';
|
||||
});
|
||||
}
|
||||
|
||||
// ── On-the-fly translation ──
|
||||
var _translateCache = {};
|
||||
function translateOnTheFly(fileId) {
|
||||
var select = document.getElementById('translate-lang-select');
|
||||
var area = document.getElementById('translate-result-area');
|
||||
var copyBtn = document.getElementById('translate-copy-btn');
|
||||
if (!select || !area) return;
|
||||
var lang = select.value;
|
||||
if (!lang) { area.innerHTML = '<div style="color:#92400e;padding:0.75rem;background:#fef3c7;border-radius:0.375rem;font-size:0.875rem;">Please select a target language.</div>'; return; }
|
||||
|
||||
// Check cache
|
||||
if (_translateCache[lang]) {
|
||||
renderTranslation(area, _translateCache[lang], lang);
|
||||
if (copyBtn) copyBtn.style.display = '';
|
||||
return;
|
||||
}
|
||||
|
||||
area.innerHTML = '<div style="text-align:center;padding:1.5rem;color:#6b7280;" aria-live="polite"><i class="fas fa-spinner fa-spin fa-2x" aria-hidden="true"></i><p style="margin-top:0.5rem;">Translating…</p></div>';
|
||||
if (copyBtn) copyBtn.style.display = 'none';
|
||||
|
||||
fetch('/api/files/' + fileId + '/translate?lang=' + encodeURIComponent(lang))
|
||||
.then(function(r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
|
||||
.then(function(data) {
|
||||
_translateCache[lang] = data.text;
|
||||
renderTranslation(area, data.text, lang);
|
||||
if (copyBtn) copyBtn.style.display = '';
|
||||
})
|
||||
.catch(function(err) {
|
||||
area.innerHTML = '<div style="color:#dc2626;padding:0.75rem;background:#fee2e2;border-radius:0.375rem;font-size:0.875rem;"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i> Translation failed: ' + err.message + '</div>';
|
||||
});
|
||||
}
|
||||
|
||||
function renderTranslation(container, text, lang) {
|
||||
container.innerHTML = '';
|
||||
var info = document.createElement('div');
|
||||
info.style.cssText = 'font-size:0.75rem;color:#6b7280;margin-bottom:0.5rem;';
|
||||
info.textContent = 'Translated to: ' + lang;
|
||||
container.appendChild(info);
|
||||
var pre = document.createElement('pre');
|
||||
pre.className = 'ocr-text';
|
||||
pre.id = 'translated-text-content';
|
||||
pre.textContent = text;
|
||||
container.appendChild(pre);
|
||||
}
|
||||
|
||||
function copyTranslatedText() {
|
||||
var content = document.getElementById('translated-text-content');
|
||||
if (!content) return;
|
||||
var text = content.textContent;
|
||||
var btn = document.getElementById('translate-copy-btn');
|
||||
if (!btn) return;
|
||||
var orig = btn.innerHTML;
|
||||
navigator.clipboard.writeText(text).then(function() {
|
||||
btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
|
||||
setTimeout(function() { btn.innerHTML = orig; }, 2000);
|
||||
}).catch(function() {
|
||||
try {
|
||||
var ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
ta.style.cssText = 'position:fixed;opacity:0;';
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(ta);
|
||||
btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
|
||||
setTimeout(function() { btn.innerHTML = orig; }, 2000);
|
||||
} catch(e) {}
|
||||
});
|
||||
}
|
||||
|
||||
// ── Initialise on load ──
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
{% if (processed_file_exists or original_file_exists) and file %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}File Manager – Admin{% endblock %}
|
||||
{% block title %}{{ _("admin_files.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
@@ -8,9 +8,9 @@
|
||||
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900 flex items-center gap-2">
|
||||
<i class="fas fa-folder-open text-blue-500"></i>
|
||||
File Manager
|
||||
<span class="text-xs font-semibold text-red-600 bg-red-50 border border-red-200 rounded px-2 py-0.5 ml-1">Admin Only</span>
|
||||
<i class="fas fa-folder-open text-blue-500" aria-hidden="true"></i>
|
||||
{{ _("admin_files.heading") }}
|
||||
<span class="text-xs font-semibold text-red-600 bg-red-50 border border-red-200 rounded px-2 py-0.5 ml-1">{{ _("admin_files.admin_only_badge") }}</span>
|
||||
</h1>
|
||||
<p class="text-gray-400 text-sm mt-1">
|
||||
<code class="bg-gray-100 rounded px-1 text-xs">{{ workdir }}</code>
|
||||
@@ -19,15 +19,15 @@
|
||||
<!-- Summary badges -->
|
||||
<div class="flex gap-3 text-sm flex-wrap">
|
||||
<span class="inline-flex items-center gap-1.5 bg-blue-50 border border-blue-200 text-blue-700 rounded-full px-3 py-1">
|
||||
<i class="fas fa-hdd text-xs"></i>
|
||||
{% if total_disk is none %}…{% else %}{{ total_disk }}{% endif %} on disk
|
||||
<i class="fas fa-hdd text-xs" aria-hidden="true"></i>
|
||||
{% if total_disk is none %}…{% else %}{{ total_disk }}{% endif %} {{ _("admin_files.badge_on_disk") }}
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1.5 bg-green-50 border border-green-200 text-green-700 rounded-full px-3 py-1">
|
||||
<i class="fas fa-database text-xs"></i> {{ total_db }} in DB
|
||||
<i class="fas fa-database text-xs" aria-hidden="true"></i> {{ total_db }} {{ _("admin_files.badge_in_db") }}
|
||||
</span>
|
||||
{% if total_disk is not none and total_disk != total_db %}
|
||||
<span class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-300 text-amber-700 rounded-full px-3 py-1 font-medium">
|
||||
<i class="fas fa-triangle-exclamation text-xs"></i> Delta detected
|
||||
<i class="fas fa-triangle-exclamation text-xs" aria-hidden="true"></i> {{ _("admin_files.badge_delta_detected") }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -38,17 +38,17 @@
|
||||
<a href="?view=filesystem"
|
||||
class="tab-link px-5 py-2.5 text-sm font-medium rounded-t border-b-2 transition
|
||||
{% if view == 'filesystem' %}border-blue-600 text-blue-600 bg-blue-50{% else %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{% endif %}">
|
||||
<i class="fas fa-folder-tree mr-1.5"></i>Filesystem
|
||||
<i class="fas fa-folder-tree mr-1.5" aria-hidden="true"></i>{{ _("admin_files.tab_filesystem") }}
|
||||
</a>
|
||||
<a href="?view=database"
|
||||
class="tab-link px-5 py-2.5 text-sm font-medium rounded-t border-b-2 transition
|
||||
{% if view == 'database' %}border-green-600 text-green-600 bg-green-50{% else %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{% endif %}">
|
||||
<i class="fas fa-database mr-1.5"></i>Database Records
|
||||
<i class="fas fa-database mr-1.5" aria-hidden="true"></i>{{ _("admin_files.tab_database") }}
|
||||
</a>
|
||||
<a href="?view=reconcile"
|
||||
class="tab-link px-5 py-2.5 text-sm font-medium rounded-t border-b-2 transition
|
||||
{% if view == 'reconcile' %}border-amber-500 text-amber-600 bg-amber-50{% else %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{% endif %}">
|
||||
<i class="fas fa-code-compare mr-1.5"></i>Reconcile
|
||||
<i class="fas fa-code-compare mr-1.5" aria-hidden="true"></i>{{ _("admin_files.tab_reconcile") }}
|
||||
{% if total_disk != total_db %}
|
||||
<span class="ml-1 bg-amber-500 text-white rounded-full text-xs px-1.5 py-0.5">!</span>
|
||||
{% endif %}
|
||||
@@ -62,21 +62,21 @@
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="flex flex-wrap gap-4 text-xs text-gray-500 mb-4">
|
||||
<span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-full bg-green-400 inline-block"></span> Found in DB</span>
|
||||
<span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-full bg-amber-400 inline-block"></span> Not in DB (orphan)</span>
|
||||
<span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-full bg-green-400 inline-block"></span> {{ _("admin_files.legend_found_in_db") }}</span>
|
||||
<span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-full bg-amber-400 inline-block"></span> {{ _("admin_files.legend_not_in_db") }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<nav class="flex mb-4 text-sm" aria-label="Breadcrumb">
|
||||
<nav class="flex mb-4 text-sm" aria-label="{{ _("admin_files.aria_breadcrumb") }}">
|
||||
<ol class="inline-flex items-center space-x-1 flex-wrap">
|
||||
<li>
|
||||
<a href="?view=filesystem" class="text-blue-600 hover:underline flex items-center gap-1">
|
||||
<i class="fas fa-home"></i> workdir
|
||||
<i class="fas fa-home" aria-hidden="true"></i> {{ _("admin_files.breadcrumb_workdir") }}
|
||||
</a>
|
||||
</li>
|
||||
{% for crumb in breadcrumbs %}
|
||||
<li class="flex items-center">
|
||||
<i class="fas fa-chevron-right text-gray-300 mx-1 text-xs"></i>
|
||||
<i class="fas fa-chevron-right text-gray-300 mx-1 text-xs" aria-hidden="true"></i>
|
||||
{% if loop.last %}
|
||||
<span class="text-gray-700 font-medium">{{ crumb.name }}</span>
|
||||
{% else %}
|
||||
@@ -93,22 +93,22 @@
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left w-8"></th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase tracking-wider text-xs">Name</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase tracking-wider text-xs hidden sm:table-cell">Size</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase tracking-wider text-xs hidden md:table-cell">Modified</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase tracking-wider text-xs">DB</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase tracking-wider text-xs">Actions</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase tracking-wider text-xs">{{ _("admin_files.col_name") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase tracking-wider text-xs hidden sm:table-cell">{{ _("admin_files.col_size") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase tracking-wider text-xs hidden md:table-cell">{{ _("admin_files.col_modified") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase tracking-wider text-xs">{{ _("admin_files.col_db") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-600 uppercase tracking-wider text-xs">{{ _("admin_files.col_actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
|
||||
{% if current_path %}
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-4 py-3 text-yellow-400"><i class="fas fa-folder"></i></td>
|
||||
<td class="px-4 py-3 text-yellow-400"><i class="fas fa-folder" aria-hidden="true"></i></td>
|
||||
<td class="px-4 py-3 font-medium text-gray-900" colspan="4">
|
||||
<a href="?view=filesystem{% if parent_path %}&path={{ parent_path | urlencode }}{% endif %}"
|
||||
class="text-blue-600 hover:underline flex items-center gap-1">
|
||||
<i class="fas fa-level-up-alt text-xs"></i> ..
|
||||
<i class="fas fa-level-up-alt text-xs" aria-hidden="true"></i> ..
|
||||
</a>
|
||||
</td>
|
||||
<td></td>
|
||||
@@ -118,7 +118,7 @@
|
||||
{% if fs_entries %}
|
||||
{% for entry in fs_entries %}
|
||||
<tr class="hover:bg-gray-50 {% if entry.db_status == 'orphan' %}bg-amber-50{% endif %}">
|
||||
<td class="px-4 py-3"><i class="{{ entry.icon }}"></i></td>
|
||||
<td class="px-4 py-3"><i class="{{ entry.icon }}" aria-hidden="true"></i></td>
|
||||
<td class="px-4 py-3 font-medium text-gray-900 max-w-xs truncate">
|
||||
{% if entry.is_dir %}
|
||||
<a href="?view=filesystem&path={{ entry.rel_path | urlencode }}" class="text-blue-600 hover:underline">
|
||||
@@ -133,11 +133,11 @@
|
||||
<td class="px-4 py-3">
|
||||
{% if entry.db_status == 'in_db' %}
|
||||
<span class="inline-flex items-center gap-1 text-xs text-green-700 bg-green-50 border border-green-200 rounded-full px-2 py-0.5">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-green-500"></span> In DB
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-green-500"></span> {{ _("admin_files.status_in_db") }}
|
||||
</span>
|
||||
{% elif entry.db_status == 'orphan' %}
|
||||
<span class="inline-flex items-center gap-1 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-full px-2 py-0.5">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span> Orphan
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span> {{ _("admin_files.status_orphan") }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
@@ -145,7 +145,7 @@
|
||||
{% if not entry.is_dir %}
|
||||
<a href="/admin/files/download?path={{ entry.rel_path | urlencode }}"
|
||||
class="inline-flex items-center gap-1 px-2.5 py-1 border border-gray-200 text-xs font-medium rounded text-gray-600 bg-white hover:bg-gray-50">
|
||||
<i class="fas fa-download text-xs"></i> Download
|
||||
<i class="fas fa-download text-xs" aria-hidden="true"></i> {{ _("admin_files.btn_download") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
@@ -154,8 +154,8 @@
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-10 text-center text-sm text-gray-400">
|
||||
<i class="fas fa-folder-open text-gray-200 text-3xl mb-2 block"></i>
|
||||
This directory is empty.
|
||||
<i class="fas fa-folder-open text-gray-200 text-3xl mb-2 block" aria-hidden="true"></i>
|
||||
{{ _("admin_files.empty_directory") }}
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
@@ -171,9 +171,9 @@
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="flex flex-wrap gap-4 text-xs text-gray-500 mb-4">
|
||||
<span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-full bg-green-400 inline-block"></span> File exists on disk</span>
|
||||
<span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-full bg-red-400 inline-block"></span> File missing from disk</span>
|
||||
<span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-full bg-gray-300 inline-block"></span> Path not set</span>
|
||||
<span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-full bg-green-400 inline-block"></span> {{ _("admin_files.legend_file_exists") }}</span>
|
||||
<span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-full bg-red-400 inline-block"></span> {{ _("admin_files.legend_file_missing") }}</span>
|
||||
<span class="flex items-center gap-1"><span class="h-2.5 w-2.5 rounded-full bg-gray-300 inline-block"></span> {{ _("admin_files.legend_path_not_set") }}</span>
|
||||
</div>
|
||||
|
||||
{% if db_records %}
|
||||
@@ -181,14 +181,14 @@
|
||||
<table class="min-w-full divide-y divide-gray-200 text-sm">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">ID</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">Original Filename</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs hidden md:table-cell">Size</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs hidden lg:table-cell">Ingested</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">local_filename</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">original_file_path</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">processed_file_path</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">Health</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">{{ _("admin_files.col_id") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">{{ _("admin_files.col_original_filename") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs hidden md:table-cell">{{ _("admin_files.col_size") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs hidden lg:table-cell">{{ _("admin_files.col_ingested") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">{{ _("admin_files.col_local_filename") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">{{ _("admin_files.col_original_file_path") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">{{ _("admin_files.col_processed_file_path") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">{{ _("admin_files.col_health") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
@@ -197,7 +197,7 @@
|
||||
<td class="px-4 py-3 text-gray-400 font-mono text-xs">{{ rec.id }}</td>
|
||||
<td class="px-4 py-3 font-medium text-gray-800 max-w-xs truncate" title="{{ rec.original_filename }}">
|
||||
{% if rec.is_duplicate %}
|
||||
<span class="text-xs text-purple-600 bg-purple-50 border border-purple-200 rounded px-1 mr-1">dup</span>
|
||||
<span class="text-xs text-purple-600 bg-purple-50 border border-purple-200 rounded px-1 mr-1">{{ _("admin_files.badge_duplicate") }}</span>
|
||||
{% endif %}
|
||||
{{ rec.original_filename }}
|
||||
</td>
|
||||
@@ -226,11 +226,11 @@
|
||||
<td class="px-4 py-3">
|
||||
{% if rec.health == 'ok' %}
|
||||
<span class="inline-flex items-center gap-1 text-xs text-green-700 bg-green-50 border border-green-200 rounded-full px-2 py-0.5">
|
||||
<i class="fas fa-check text-xs"></i> OK
|
||||
<i class="fas fa-check text-xs" aria-hidden="true"></i> {{ _("admin_files.health_ok") }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center gap-1 text-xs text-red-700 bg-red-50 border border-red-200 rounded-full px-2 py-0.5">
|
||||
<i class="fas fa-triangle-exclamation text-xs"></i> Missing
|
||||
<i class="fas fa-triangle-exclamation text-xs" aria-hidden="true"></i> {{ _("admin_files.health_missing") }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
@@ -241,8 +241,8 @@
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="bg-white rounded-lg shadow p-10 text-center text-gray-400">
|
||||
<i class="fas fa-database text-4xl mb-3 block text-gray-200"></i>
|
||||
No file records found in the database.
|
||||
<i class="fas fa-database text-4xl mb-3 block text-gray-200" aria-hidden="true"></i>
|
||||
{{ _("admin_files.empty_database") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@@ -254,17 +254,16 @@
|
||||
|
||||
{% if orphan_files or ghost_records %}
|
||||
<div class="bg-amber-50 border border-amber-300 rounded-lg px-5 py-4 mb-6 flex items-start gap-3">
|
||||
<i class="fas fa-triangle-exclamation text-amber-500 mt-0.5"></i>
|
||||
<i class="fas fa-triangle-exclamation text-amber-500 mt-0.5" aria-hidden="true"></i>
|
||||
<div class="text-sm text-amber-800">
|
||||
<strong>Delta detected.</strong>
|
||||
Found <strong>{{ orphan_files | length }}</strong> orphan file(s) on disk with no DB record,
|
||||
and <strong>{{ ghost_records | length }}</strong> DB record(s) with missing files on disk.
|
||||
<strong>{{ _("admin_files.delta_detected_title") }}</strong>
|
||||
{{ _("admin_files.delta_detected_detail", orphan_count=(orphan_files | length), ghost_count=(ghost_records | length)) }}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="bg-green-50 border border-green-300 rounded-lg px-5 py-4 mb-6 flex items-center gap-3">
|
||||
<i class="fas fa-circle-check text-green-500"></i>
|
||||
<span class="text-sm text-green-800 font-medium">No delta found — filesystem and database are in sync.</span>
|
||||
<i class="fas fa-circle-check text-green-500" aria-hidden="true"></i>
|
||||
<span class="text-sm text-green-800 font-medium">{{ _("admin_files.no_delta") }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -272,7 +271,7 @@
|
||||
<div class="mb-8">
|
||||
<h2 class="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="h-3 w-3 rounded-full bg-amber-400 inline-block"></span>
|
||||
Orphan files <span class="text-gray-400 font-normal text-sm ml-1">(on disk, no DB record)</span>
|
||||
{{ _("admin_files.orphan_files_heading") }} <span class="text-gray-400 font-normal text-sm ml-1">{{ _("admin_files.orphan_files_desc") }}</span>
|
||||
<span class="text-xs bg-amber-100 text-amber-700 border border-amber-200 rounded-full px-2 py-0.5 ml-auto">{{ orphan_files | length }}</span>
|
||||
</h2>
|
||||
{% if orphan_files %}
|
||||
@@ -281,23 +280,23 @@
|
||||
<thead class="bg-amber-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left w-8"></th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">Path (relative to workdir)</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs hidden sm:table-cell">Size</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs hidden md:table-cell">Modified</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">Actions</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">{{ _("admin_files.col_path_relative") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs hidden sm:table-cell">{{ _("admin_files.col_size") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs hidden md:table-cell">{{ _("admin_files.col_modified") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">{{ _("admin_files.col_actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
{% for f in orphan_files %}
|
||||
<tr class="hover:bg-amber-50">
|
||||
<td class="px-4 py-3"><i class="{{ f.icon }}"></i></td>
|
||||
<td class="px-4 py-3"><i class="{{ f.icon }}" aria-hidden="true"></i></td>
|
||||
<td class="px-4 py-3 font-mono text-xs text-amber-800 max-w-xs truncate" title="{{ f.rel_path }}">{{ f.rel_path }}</td>
|
||||
<td class="px-4 py-3 text-gray-500 hidden sm:table-cell">{{ f.size }}</td>
|
||||
<td class="px-4 py-3 text-gray-400 text-xs hidden md:table-cell">{{ f.modified }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<a href="/admin/files/download?path={{ f.rel_path | urlencode }}"
|
||||
class="inline-flex items-center gap-1 px-2.5 py-1 border border-gray-200 text-xs font-medium rounded text-gray-600 bg-white hover:bg-gray-50">
|
||||
<i class="fas fa-download text-xs"></i> Download
|
||||
<i class="fas fa-download text-xs" aria-hidden="true"></i> {{ _("admin_files.btn_download") }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -306,7 +305,7 @@
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-sm text-gray-400 italic">No orphan files found.</p>
|
||||
<p class="text-sm text-gray-400 italic">{{ _("admin_files.no_orphan_files") }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -314,7 +313,7 @@
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<span class="h-3 w-3 rounded-full bg-red-400 inline-block"></span>
|
||||
Ghost records <span class="text-gray-400 font-normal text-sm ml-1">(in DB, file(s) missing on disk)</span>
|
||||
{{ _("admin_files.ghost_records_heading") }} <span class="text-gray-400 font-normal text-sm ml-1">{{ _("admin_files.ghost_records_desc") }}</span>
|
||||
<span class="text-xs bg-red-100 text-red-700 border border-red-200 rounded-full px-2 py-0.5 ml-auto">{{ ghost_records | length }}</span>
|
||||
</h2>
|
||||
{% if ghost_records %}
|
||||
@@ -322,10 +321,10 @@
|
||||
<table class="min-w-full divide-y divide-gray-200 text-sm">
|
||||
<thead class="bg-red-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">ID</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">Original Filename</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs hidden md:table-cell">Ingested</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">Missing paths</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">{{ _("admin_files.col_id") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">{{ _("admin_files.col_original_filename") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs hidden md:table-cell">{{ _("admin_files.col_ingested") }}</th>
|
||||
<th class="px-4 py-3 text-left font-semibold text-gray-500 uppercase tracking-wider text-xs">{{ _("admin_files.col_missing_paths") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
@@ -352,7 +351,7 @@
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-sm text-gray-400 italic">No ghost records found.</p>
|
||||
<p class="text-sm text-gray-400 italic">{{ _("admin_files.no_ghost_records") }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
+183
-135
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}File Records{% endblock %}
|
||||
{% block title %}{{ _("files.page_title") }}{% endblock %}
|
||||
|
||||
{% block head_extra %}
|
||||
<script src="/static/js/common.js"></script>
|
||||
@@ -427,16 +427,16 @@
|
||||
<div id="dropOverlay" class="drop-overlay" aria-hidden="true">
|
||||
<div class="drop-message">
|
||||
<i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
|
||||
<p>Drop files or folders anywhere to upload</p>
|
||||
<div class="drop-hint">Supports PDF, Office docs, images, HTML, Markdown, and more – folders are processed recursively</div>
|
||||
<p>{{ _("files.drop_overlay_title") }}</p>
|
||||
<div class="drop-hint">{{ _("files.drop_overlay_hint") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload progress modal -->
|
||||
<div id="uploadModal" class="upload-modal" role="dialog" aria-modal="true" aria-label="Upload progress">
|
||||
<div id="uploadModal" class="upload-modal" role="dialog" aria-modal="true" aria-label="{{ _('files.upload_modal_aria') }}">
|
||||
<div class="upload-modal-header">
|
||||
<span><i class="fas fa-upload" aria-hidden="true"></i> Uploading Files</span>
|
||||
<button class="close-modal-btn" onclick="closeUploadModal()" aria-label="Close upload progress">
|
||||
<span><i class="fas fa-upload" aria-hidden="true"></i> {{ _("files.upload_modal_header") }}</span>
|
||||
<button class="close-modal-btn" onclick="closeUploadModal()" aria-label="{{ _('files.upload_modal_close') }}">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -447,7 +447,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h2 class="text-3xl font-bold mb-6">File Records</h2>
|
||||
<h2 class="text-3xl font-bold mb-6">{{ _("files.page_title") }}</h2>
|
||||
|
||||
<!-- Queue pending banner (populated via JS) -->
|
||||
<div id="queueBanner" class="hidden bg-blue-50 border-l-4 border-blue-400 text-blue-800 p-4 mb-6 rounded-r-lg" role="status">
|
||||
@@ -455,36 +455,35 @@
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-spinner fa-spin mr-3 text-blue-500" aria-hidden="true"></i>
|
||||
<span>
|
||||
<strong id="queueBannerCount">0</strong> item(s) are currently queued or being processed.
|
||||
Files will appear here once processing completes.
|
||||
<strong id="queueBannerCount">0</strong> {{ _("files.queue_banner_items") }}
|
||||
</span>
|
||||
</div>
|
||||
<a href="/admin/queue" class="text-blue-600 hover:text-blue-800 text-sm font-medium whitespace-nowrap ml-4"
|
||||
id="queueBannerLink" style="display:none;">
|
||||
<i class="fas fa-external-link-alt mr-1" aria-hidden="true"></i>View Queue
|
||||
<i class="fas fa-external-link-alt mr-1" aria-hidden="true"></i>{{ _("files.queue_banner_link") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if error %}
|
||||
<div class="error-message">
|
||||
<p><strong>Error:</strong> {{ error }}</p>
|
||||
<p class="mt-2">This might be due to a configuration or import issue. Please check the server logs.</p>
|
||||
<p><strong>{{ _("common.error") }}:</strong> {{ error }}</p>
|
||||
<p class="mt-2">{{ _("files.error_hint") }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Filters Section -->
|
||||
<div class="filters-section">
|
||||
<form method="get" action="/files" class="filter-group" role="search" aria-label="Filter files">
|
||||
<form method="get" action="/files" class="filter-group" role="search" aria-label="{{ _('files.filter_form_aria') }}">
|
||||
<div class="filter-item">
|
||||
<label for="search">Search Filename</label>
|
||||
<input type="text" id="search" name="search" value="{{ search }}" placeholder="Enter filename...">
|
||||
<label for="search">{{ _("files.filter_search_label") }}</label>
|
||||
<input type="text" id="search" name="search" value="{{ search }}" placeholder="{{ _('files.filter_search_placeholder') }}">
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label for="mime_type">MIME Type</label>
|
||||
<label for="mime_type">{{ _("files.filter_mime_type") }}</label>
|
||||
<select id="mime_type" name="mime_type">
|
||||
<option value="">All Types</option>
|
||||
<option value="">{{ _("files.filter_all_types") }}</option>
|
||||
{% for mt in mime_types %}
|
||||
<option value="{{ mt }}" {% if mt == mime_type %}selected{% endif %}>{{ mt }}</option>
|
||||
{% endfor %}
|
||||
@@ -492,31 +491,31 @@
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label for="status">Status</label>
|
||||
<label for="status">{{ _("common.status") }}</label>
|
||||
<select id="status" name="status">
|
||||
<option value="">All Statuses</option>
|
||||
<option value="pending" {% if status == "pending" %}selected{% endif %}>Pending</option>
|
||||
<option value="processing" {% if status == "processing" %}selected{% endif %}>Processing</option>
|
||||
<option value="completed" {% if status == "completed" %}selected{% endif %}>Completed</option>
|
||||
<option value="failed" {% if status == "failed" %}selected{% endif %}>Failed</option>
|
||||
<option value="duplicate" {% if status == "duplicate" %}selected{% endif %}>Duplicate</option>
|
||||
<option value="">{{ _("files.filter_all_statuses") }}</option>
|
||||
<option value="pending" {% if status == "pending" %}selected{% endif %}>{{ _("common.pending") }}</option>
|
||||
<option value="processing" {% if status == "processing" %}selected{% endif %}>{{ _("common.processing") }}</option>
|
||||
<option value="completed" {% if status == "completed" %}selected{% endif %}>{{ _("common.completed") }}</option>
|
||||
<option value="failed" {% if status == "failed" %}selected{% endif %}>{{ _("common.failed") }}</option>
|
||||
<option value="duplicate" {% if status == "duplicate" %}selected{% endif %}>{{ _("files.status_duplicate") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label for="date_from">Date From</label>
|
||||
<input type="date" id="date_from" name="date_from" value="{{ date_from }}" aria-label="Filter from date">
|
||||
<label for="date_from">{{ _("files.filter_date_from") }}</label>
|
||||
<input type="date" id="date_from" name="date_from" value="{{ date_from }}" aria-label="{{ _('files.filter_date_from_aria') }}">
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label for="date_to">Date To</label>
|
||||
<input type="date" id="date_to" name="date_to" value="{{ date_to }}" aria-label="Filter to date">
|
||||
<label for="date_to">{{ _("files.filter_date_to") }}</label>
|
||||
<input type="date" id="date_to" name="date_to" value="{{ date_to }}" aria-label="{{ _('files.filter_date_to_aria') }}">
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label for="storage_provider">Storage Provider</label>
|
||||
<label for="storage_provider">{{ _("files.filter_storage_provider") }}</label>
|
||||
<select id="storage_provider" name="storage_provider">
|
||||
<option value="">All Providers</option>
|
||||
<option value="">{{ _("files.filter_all_providers") }}</option>
|
||||
<option value="dropbox" {% if storage_provider == "dropbox" %}selected{% endif %}>Dropbox</option>
|
||||
<option value="google_drive" {% if storage_provider == "google_drive" %}selected{% endif %}>Google Drive</option>
|
||||
<option value="onedrive" {% if storage_provider == "onedrive" %}selected{% endif %}>OneDrive</option>
|
||||
@@ -526,32 +525,33 @@
|
||||
<option value="ftp" {% if storage_provider == "ftp" %}selected{% endif %}>FTP</option>
|
||||
<option value="sftp" {% if storage_provider == "sftp" %}selected{% endif %}>SFTP</option>
|
||||
<option value="sharepoint" {% if storage_provider == "sharepoint" %}selected{% endif %}>SharePoint</option>
|
||||
<option value="icloud" {% if storage_provider == "icloud" %}selected{% endif %}>iCloud Drive</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label for="tags">Tags</label>
|
||||
<input type="text" id="tags" name="tags" value="{{ tags }}" placeholder="e.g. invoice,amazon" aria-label="Filter by tags (comma-separated)">
|
||||
<label for="tags">{{ _("files.tags") }}</label>
|
||||
<input type="text" id="tags" name="tags" value="{{ tags }}" placeholder="{{ _('files.filter_tags_placeholder') }}" aria-label="{{ _('files.filter_tags_aria') }}">
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label for="ocr_quality">OCR Quality</label>
|
||||
<select id="ocr_quality" name="ocr_quality" aria-label="Filter by OCR quality score">
|
||||
<option value="">All Files</option>
|
||||
<option value="poor" {% if ocr_quality == "poor" %}selected{% endif %} aria-label="Poor quality, score less than {{ ocr_quality_threshold }}">Poor (score < {{ ocr_quality_threshold }})</option>
|
||||
<option value="good" {% if ocr_quality == "good" %}selected{% endif %} aria-label="Good quality, score at least {{ ocr_quality_threshold }}">Good (score ≥ {{ ocr_quality_threshold }})</option>
|
||||
<option value="unchecked" {% if ocr_quality == "unchecked" %}selected{% endif %} aria-label="Not yet assessed">Not yet assessed</option>
|
||||
<label for="ocr_quality">{{ _("files.filter_ocr_quality") }}</label>
|
||||
<select id="ocr_quality" name="ocr_quality" aria-label="{{ _('files.filter_ocr_quality_aria') }}">
|
||||
<option value="">{{ _("files.filter_ocr_all") }}</option>
|
||||
<option value="poor" {% if ocr_quality == "poor" %}selected{% endif %} aria-label="Poor quality, score less than {{ ocr_quality_threshold }}">{{ _("files.filter_ocr_poor") }} (score < {{ ocr_quality_threshold }})</option>
|
||||
<option value="good" {% if ocr_quality == "good" %}selected{% endif %} aria-label="Good quality, score at least {{ ocr_quality_threshold }}">{{ _("files.filter_ocr_good") }} (score ≥ {{ ocr_quality_threshold }})</option>
|
||||
<option value="unchecked" {% if ocr_quality == "unchecked" %}selected{% endif %} aria-label="Not yet assessed">{{ _("files.filter_ocr_unchecked") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label> </label>
|
||||
<button type="submit">Apply Filters</button>
|
||||
<button type="submit">{{ _("files.filter_apply") }}</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<label> </label>
|
||||
<button type="button" class="clear" onclick="clearFilters()">Clear</button>
|
||||
<button type="button" class="clear" onclick="clearFilters()">{{ _("files.filter_clear") }}</button>
|
||||
</div>
|
||||
|
||||
<!-- Hidden fields to preserve sort order -->
|
||||
@@ -565,13 +565,13 @@
|
||||
<div class="filters-section" style="margin-top: 0.5rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; width: 100%;">
|
||||
<label style="font-weight: 600; font-size: 0.85rem; white-space: nowrap;">
|
||||
<i class="fas fa-bookmark" aria-hidden="true"></i> Saved Searches:
|
||||
<i class="fas fa-bookmark" aria-hidden="true"></i> {{ _("files.saved_searches_label") }}
|
||||
</label>
|
||||
<div id="saved-searches-list" style="display: flex; gap: 0.25rem; flex-wrap: wrap;" aria-live="polite">
|
||||
<span style="color: var(--text-muted); font-size: 0.85rem;">Loading...</span>
|
||||
<span style="color: var(--text-muted); font-size: 0.85rem;">{{ _("common.loading") }}</span>
|
||||
</div>
|
||||
<button type="button" onclick="saveCurrentFilters()" class="btn-save-search" style="margin-left: auto; font-size: 0.8rem; padding: 0.25rem 0.5rem; cursor: pointer;" aria-label="Save current filters as a saved search">
|
||||
<i class="fas fa-plus" aria-hidden="true"></i> Save Current
|
||||
<button type="button" onclick="saveCurrentFilters()" class="btn-save-search" style="margin-left: auto; font-size: 0.8rem; padding: 0.25rem 0.5rem; cursor: pointer;" aria-label="{{ _('files.saved_searches_save_aria') }}">
|
||||
<i class="fas fa-plus" aria-hidden="true"></i> {{ _("files.saved_searches_save") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -580,13 +580,13 @@
|
||||
<div class="filters-section" style="margin-top: 0.75rem;">
|
||||
<div style="width: 100%;">
|
||||
<label for="fulltext-search" style="font-weight: 600; display: block; margin-bottom: 0.4rem;">
|
||||
<i class="fas fa-search" aria-hidden="true"></i> Full-Text Search (OCR text, metadata, tags)
|
||||
<i class="fas fa-search" aria-hidden="true"></i> {{ _("files.fulltext_search_label") }}
|
||||
</label>
|
||||
<div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
|
||||
<input
|
||||
type="text"
|
||||
id="fulltext-search"
|
||||
placeholder="Search document content, sender, tags, type..."
|
||||
placeholder="{{ _('files.fulltext_search_placeholder') }}"
|
||||
style="flex: 1; min-width: 220px; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem;"
|
||||
oninput="debounceSearch(this.value)"
|
||||
>
|
||||
@@ -595,14 +595,14 @@
|
||||
onclick="runFullTextSearch()"
|
||||
style="padding: 0.5rem 1rem; background-color: #3182ce; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem; white-space: nowrap;"
|
||||
>
|
||||
Search
|
||||
{{ _("common.search") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick="clearFullTextSearch()"
|
||||
style="padding: 0.5rem 1rem; background-color: #6b7280; color: white; border: none; border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem; white-space: nowrap;"
|
||||
>
|
||||
Clear
|
||||
{{ _("files.filter_clear") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -621,23 +621,23 @@
|
||||
<div id="bulkActionsBar" class="filters-section" style="display: none; background-color: #e6f3ff;">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3">
|
||||
<div>
|
||||
<strong id="selectedCount">0</strong> files selected
|
||||
<strong id="selectedCount">0</strong> {{ _("files.files_selected") }}
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button type="button" onclick="bulkReprocess()" style="padding: 0.5rem 1rem; background-color: #3182ce; color: white; border: none; border-radius: 0.25rem; cursor: pointer; font-weight: 600; min-height: 44px;">
|
||||
<i class="fas fa-sync" aria-hidden="true"></i> Reprocess Selected
|
||||
<i class="fas fa-sync" aria-hidden="true"></i> {{ _("files.bulk_reprocess") }}
|
||||
</button>
|
||||
<button type="button" onclick="bulkReprocessCloudOcr()" style="padding: 0.5rem 1rem; background-color: #805ad5; color: white; border: none; border-radius: 0.25rem; cursor: pointer; font-weight: 600; min-height: 44px;">
|
||||
<i class="fas fa-cloud" aria-hidden="true"></i> Re-run Cloud OCR
|
||||
<i class="fas fa-cloud" aria-hidden="true"></i> {{ _("files.bulk_cloud_ocr") }}
|
||||
</button>
|
||||
<button type="button" onclick="bulkDownload()" style="padding: 0.5rem 1rem; background-color: #38a169; color: white; border: none; border-radius: 0.25rem; cursor: pointer; font-weight: 600; min-height: 44px;">
|
||||
<i class="fas fa-file-archive" aria-hidden="true"></i> Download as ZIP
|
||||
<i class="fas fa-file-archive" aria-hidden="true"></i> {{ _("files.bulk_download") }}
|
||||
</button>
|
||||
<button type="button" onclick="bulkDelete()" style="padding: 0.5rem 1rem; background-color: #e53e3e; color: white; border: none; border-radius: 0.25rem; cursor: pointer; font-weight: 600; min-height: 44px;">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i> Delete Selected
|
||||
<i class="fas fa-trash" aria-hidden="true"></i> {{ _("files.bulk_delete") }}
|
||||
</button>
|
||||
<button type="button" onclick="clearSelection()" style="padding: 0.5rem 1rem; background-color: #718096; color: white; border: none; border-radius: 0.25rem; cursor: pointer; font-weight: 600; min-height: 44px;">
|
||||
Clear Selection
|
||||
{{ _("files.bulk_clear_selection") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -645,14 +645,14 @@
|
||||
|
||||
<!-- File table (desktop) -->
|
||||
<div class="hidden md:block overflow-x-auto">
|
||||
<table class="file-table" id="fileTable" aria-label="File records">
|
||||
<table class="file-table" id="fileTable" aria-label="{{ _('files.table_aria') }}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="width: 40px;">
|
||||
<input type="checkbox" id="selectAll" onclick="toggleSelectAll()" title="Select all files on this page" aria-label="Select all files on this page">
|
||||
<input type="checkbox" id="selectAll" onclick="toggleSelectAll()" title="{{ _('files.table_select_all') }}" aria-label="{{ _('files.table_select_all') }}">
|
||||
</th>
|
||||
<th scope="col" class="sortable" onclick="sortTable('id')" role="columnheader" aria-sort="{% if sort_by == 'id' %}{% if sort_order == 'asc' %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}">
|
||||
ID
|
||||
{{ _("files.table_id") }}
|
||||
<span class="sort-indicator {% if sort_by == 'id' %}active{% endif %}">
|
||||
{% if sort_by == 'id' %}
|
||||
{% if sort_order == 'asc' %}▲{% else %}▼{% endif %}
|
||||
@@ -662,7 +662,7 @@
|
||||
</span>
|
||||
</th>
|
||||
<th scope="col" class="sortable" onclick="sortTable('original_filename')">
|
||||
Original Filename
|
||||
{{ _("files.table_original_filename") }}
|
||||
<span class="sort-indicator {% if sort_by == 'original_filename' %}active{% endif %}">
|
||||
{% if sort_by == 'original_filename' %}
|
||||
{% if sort_order == 'asc' %}▲{% else %}▼{% endif %}
|
||||
@@ -672,7 +672,7 @@
|
||||
</span>
|
||||
</th>
|
||||
<th scope="col" class="sortable" onclick="sortTable('file_size')">
|
||||
File Size
|
||||
{{ _("files.file_size") }}
|
||||
<span class="sort-indicator {% if sort_by == 'file_size' %}active{% endif %}">
|
||||
{% if sort_by == 'file_size' %}
|
||||
{% if sort_order == 'asc' %}▲{% else %}▼{% endif %}
|
||||
@@ -682,7 +682,7 @@
|
||||
</span>
|
||||
</th>
|
||||
<th scope="col" class="sortable" onclick="sortTable('mime_type')">
|
||||
MIME Type
|
||||
{{ _("files.table_mime_type") }}
|
||||
<span class="sort-indicator {% if sort_by == 'mime_type' %}active{% endif %}">
|
||||
{% if sort_by == 'mime_type' %}
|
||||
{% if sort_order == 'asc' %}▲{% else %}▼{% endif %}
|
||||
@@ -691,9 +691,9 @@
|
||||
{% endif %}
|
||||
</span>
|
||||
</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">{{ _("common.status") }}</th>
|
||||
<th scope="col" class="sortable" onclick="sortTable('created_at')">
|
||||
Created At
|
||||
{{ _("files.table_created_at") }}
|
||||
<span class="sort-indicator {% if sort_by == 'created_at' %}active{% endif %}">
|
||||
{% if sort_by == 'created_at' %}
|
||||
{% if sort_order == 'asc' %}▲{% else %}▼{% endif %}
|
||||
@@ -702,7 +702,7 @@
|
||||
{% endif %}
|
||||
</span>
|
||||
</th>
|
||||
<th scope="col">Actions</th>
|
||||
<th scope="col">{{ _("files.table_actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -717,19 +717,19 @@
|
||||
<td>{{ file.mime_type }}</td>
|
||||
<td>
|
||||
<span class="status-badge status-{{ file.processing_status }}">
|
||||
{{ file.processing_status | title }}
|
||||
{% if file.processing_status == 'pending' %}{{ _("common.pending") }}{% elif file.processing_status == 'processing' %}{{ _("common.processing") }}{% elif file.processing_status == 'completed' %}{{ _("common.completed") }}{% elif file.processing_status == 'failed' %}{{ _("common.failed") }}{% elif file.processing_status == 'duplicate' %}{{ _("files.status_duplicate") }}{% else %}{{ file.processing_status | title }}{% endif %}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ file.created_at.strftime('%Y-%m-%d %H:%M:%S') if file.created_at else 'N/A' }}</td>
|
||||
<td>{{ file.created_at.strftime('%Y-%m-%d %H:%M:%S') if file.created_at else _('common.not_available') }}</td>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<button onclick="openPreviewModal({{ file.id }}, '{{ file.mime_type or '' }}', '{{ file.original_filename | e }}', event)" class="action-btn" title="Quick preview" aria-label="Preview {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<button onclick="openPreviewModal({{ file.id }}, '{{ file.mime_type or '' }}', '{{ file.original_filename | e }}', event)" class="action-btn" title="{{ _('files.action_preview') }}" aria-label="{{ _('files.action_preview') }} {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<i class="fas fa-eye" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button onclick="viewFileDetail({{ file.id }}, event)" class="action-btn" title="View details" aria-label="View details for {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<button onclick="viewFileDetail({{ file.id }}, event)" class="action-btn" title="{{ _('files.action_details') }}" aria-label="{{ _('files.action_details') }} {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button onclick="showDeleteModal({{ file.id }}, event)" class="action-btn delete" title="Delete file" aria-label="Delete {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<button onclick="showDeleteModal({{ file.id }}, event)" class="action-btn delete" title="{{ _('files.action_delete') }}" aria-label="{{ _('files.action_delete') }} {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -737,7 +737,7 @@
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="8" class="text-center py-4">No files found</td>
|
||||
<td colspan="8" class="text-center py-4">{{ _("files.table_empty") }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
@@ -753,25 +753,25 @@
|
||||
tabindex="0"
|
||||
onclick="viewFileDetail({{ file.id }}, event)"
|
||||
onkeydown="if(event.key==='Enter'||event.key===' '){viewFileDetail({{ file.id }}, event);}"
|
||||
aria-label="View details for {{ file.original_filename }}"
|
||||
aria-label="{{ _('files.action_details') }} {{ file.original_filename }}"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="font-semibold text-gray-800 truncate">{{ file.original_filename }}</p>
|
||||
<p class="text-xs text-gray-500 mt-1">ID: {{ file.id }} · {{ (file.file_size / 1024) | round(2) }} KB</p>
|
||||
<p class="text-xs text-gray-500 mt-0.5">{{ file.mime_type }}</p>
|
||||
<p class="text-xs text-gray-400 mt-0.5">{{ file.created_at.strftime('%Y-%m-%d %H:%M') if file.created_at else 'N/A' }}</p>
|
||||
<p class="text-xs text-gray-400 mt-0.5">{{ file.created_at.strftime('%Y-%m-%d %H:%M') if file.created_at else _('common.not_available') }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-2 flex-shrink-0">
|
||||
<span class="status-badge status-{{ file.processing_status }}">{{ file.processing_status | title }}</span>
|
||||
<div class="flex gap-1" role="group" aria-label="File actions" onclick="event.stopPropagation();" onkeydown="event.stopPropagation();">
|
||||
<button onclick="openPreviewModal({{ file.id }}, '{{ file.mime_type or '' }}', '{{ file.original_filename | e }}', event)" class="action-btn" title="Quick preview" aria-label="Preview {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<span class="status-badge status-{{ file.processing_status }}">{% if file.processing_status == 'pending' %}{{ _("common.pending") }}{% elif file.processing_status == 'processing' %}{{ _("common.processing") }}{% elif file.processing_status == 'completed' %}{{ _("common.completed") }}{% elif file.processing_status == 'failed' %}{{ _("common.failed") }}{% elif file.processing_status == 'duplicate' %}{{ _("files.status_duplicate") }}{% else %}{{ file.processing_status | title }}{% endif %}</span>
|
||||
<div class="flex gap-1" role="group" aria-label="{{ _('files.file_actions_aria') }}" onclick="event.stopPropagation();" onkeydown="event.stopPropagation();">
|
||||
<button onclick="openPreviewModal({{ file.id }}, '{{ file.mime_type or '' }}', '{{ file.original_filename | e }}', event)" class="action-btn" title="{{ _('files.action_preview') }}" aria-label="{{ _('files.action_preview') }} {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<i class="fas fa-eye" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button onclick="viewFileDetail({{ file.id }}, event)" class="action-btn" title="View details" aria-label="View details for {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<button onclick="viewFileDetail({{ file.id }}, event)" class="action-btn" title="{{ _('files.action_details') }}" aria-label="{{ _('files.action_details') }} {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button onclick="showDeleteModal({{ file.id }}, event)" class="action-btn delete" title="Delete file" aria-label="Delete {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<button onclick="showDeleteModal({{ file.id }}, event)" class="action-btn delete" title="{{ _('files.action_delete') }}" aria-label="{{ _('files.action_delete') }} {{ file.original_filename }}" style="min-height:44px;min-width:44px;">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -779,33 +779,33 @@
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-center py-4 text-gray-500">No files found</p>
|
||||
<p class="text-center py-4 text-gray-500">{{ _("files.table_empty") }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if pagination.pages > 1 %}
|
||||
<nav class="pagination flex-wrap gap-2" aria-label="File list pagination">
|
||||
<nav class="pagination flex-wrap gap-2" aria-label="{{ _('files.pagination_nav_aria') }}">
|
||||
<div class="pagination-info" aria-live="polite">
|
||||
Showing {{ ((pagination.page - 1) * pagination.per_page + 1) }} -
|
||||
{{ _("files.pagination_showing") }} {{ ((pagination.page - 1) * pagination.per_page + 1) }} -
|
||||
{{ min(pagination.page * pagination.per_page, pagination.total) }}
|
||||
of {{ pagination.total }} files
|
||||
{{ _("files.pagination_of") }} {{ pagination.total }} {{ _("files.pagination_files") }}
|
||||
</div>
|
||||
<div class="pagination-buttons flex-wrap">
|
||||
{% if pagination.page > 1 %}
|
||||
<button class="pagination-button" onclick="goToPage(1)" aria-label="Go to first page" style="min-height:44px;">First</button>
|
||||
<button class="pagination-button" onclick="goToPage({{ pagination.page - 1 }})" aria-label="Go to previous page" style="min-height:44px;">Previous</button>
|
||||
<button class="pagination-button" onclick="goToPage(1)" aria-label="{{ _('files.pagination_first') }}" style="min-height:44px;">{{ _("files.pagination_first") }}</button>
|
||||
<button class="pagination-button" onclick="goToPage({{ pagination.page - 1 }})" aria-label="{{ _('files.pagination_previous') }}" style="min-height:44px;">{{ _("files.pagination_previous") }}</button>
|
||||
{% endif %}
|
||||
|
||||
{% for p in range(max(1, pagination.page - 2), min(pagination.pages + 1, pagination.page + 3)) %}
|
||||
<button class="pagination-button {% if p == pagination.page %}active{% endif %}" onclick="goToPage({{ p }})" aria-label="Page {{ p }}" {% if p == pagination.page %}aria-current="page"{% endif %} style="min-height:44px;">
|
||||
<button class="pagination-button {% if p == pagination.page %}active{% endif %}" onclick="goToPage({{ p }})" aria-label="{{ _('common.page') }} {{ p }}" {% if p == pagination.page %}aria-current="page"{% endif %} style="min-height:44px;">
|
||||
{{ p }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
|
||||
{% if pagination.page < pagination.pages %}
|
||||
<button class="pagination-button" onclick="goToPage({{ pagination.page + 1 }})" aria-label="Go to next page" style="min-height:44px;">Next</button>
|
||||
<button class="pagination-button" onclick="goToPage({{ pagination.pages }})" aria-label="Go to last page" style="min-height:44px;">Last</button>
|
||||
<button class="pagination-button" onclick="goToPage({{ pagination.page + 1 }})" aria-label="{{ _('files.pagination_next') }}" style="min-height:44px;">{{ _("files.pagination_next") }}</button>
|
||||
<button class="pagination-button" onclick="goToPage({{ pagination.pages }})" aria-label="{{ _('files.pagination_last') }}" style="min-height:44px;">{{ _("files.pagination_last") }}</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
@@ -814,11 +814,11 @@
|
||||
<!-- Delete confirmation modal -->
|
||||
<div id="deleteModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="deleteModalTitle">
|
||||
<div class="modal-content">
|
||||
<div class="modal-title" id="deleteModalTitle">Confirm Deletion</div>
|
||||
<p>Are you sure you want to delete this file?</p>
|
||||
<div class="modal-title" id="deleteModalTitle">{{ _("files.delete_modal_title") }}</div>
|
||||
<p>{{ _("files.delete_modal_message") }}</p>
|
||||
<div class="modal-buttons">
|
||||
<button id="cancelDelete" class="modal-btn modal-btn-cancel" style="min-height:44px;min-width:80px;">Cancel</button>
|
||||
<button id="confirmDelete" class="modal-btn modal-btn-delete" style="min-height:44px;min-width:80px;">Delete</button>
|
||||
<button id="cancelDelete" class="modal-btn modal-btn-cancel" style="min-height:44px;min-width:80px;">{{ _("files.delete_modal_cancel") }}</button>
|
||||
<button id="confirmDelete" class="modal-btn modal-btn-delete" style="min-height:44px;min-width:80px;">{{ _("files.delete_modal_confirm") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -827,8 +827,8 @@
|
||||
<div id="previewOverlay" class="preview-overlay" role="dialog" aria-modal="true" aria-labelledby="previewTitle">
|
||||
<div class="preview-panel">
|
||||
<div class="preview-panel-header">
|
||||
<h3 id="previewTitle">Preview</h3>
|
||||
<button class="preview-panel-close" onclick="closePreviewModal()" aria-label="Close preview">
|
||||
<h3 id="previewTitle">{{ _("files.preview_modal_title") }}</h3>
|
||||
<button class="preview-panel-close" onclick="closePreviewModal()" aria-label="{{ _('files.preview_modal_close') }}">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -842,6 +842,54 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ── Translations for JavaScript ──
|
||||
const __i18n = {
|
||||
previewFallback: {{ _("files.js_preview_fallback") | tojson }},
|
||||
fullView: {{ _("files.js_full_view") | tojson }},
|
||||
download: {{ _("files.js_download") | tojson }},
|
||||
loading: {{ _("files.js_loading") | tojson }},
|
||||
failedLoadPdf: {{ _("files.js_failed_load_pdf") | tojson }},
|
||||
pdfPageInfo: {{ _("files.js_pdf_page_info") | tojson }},
|
||||
failedLoadFile: {{ _("files.js_failed_load_file") | tojson }},
|
||||
openFullViewAria: {{ _("files.js_open_full_view_aria") | tojson }},
|
||||
downloadFileAria: {{ _("files.js_download_file_aria") | tojson }},
|
||||
failedDeleteFile: {{ _("files.js_failed_delete_file") | tojson }},
|
||||
errorDeletingFile: {{ _("files.js_error_deleting_file") | tojson }},
|
||||
noSavedSearches: {{ _("files.js_no_saved_searches") | tojson }},
|
||||
loadSavedSearchesError: {{ _("files.js_load_saved_searches_error") | tojson }},
|
||||
noFiltersToSave: {{ _("files.js_no_filters_to_save") | tojson }},
|
||||
enterSearchName: {{ _("files.js_enter_search_name") | tojson }},
|
||||
deleteSavedSearchConfirm: {{ _("files.js_delete_saved_search_confirm") | tojson }},
|
||||
deleteSavedSearchAria: {{ _("files.js_delete_saved_search_aria") | tojson }},
|
||||
selectFilesDelete: {{ _("files.js_select_files_delete") | tojson }},
|
||||
confirmDeleteFiles: {{ _("files.js_confirm_delete_files") | tojson }},
|
||||
failedDeleteFiles: {{ _("files.js_failed_delete_files") | tojson }},
|
||||
errorDeletingFiles: {{ _("files.js_error_deleting_files") | tojson }},
|
||||
selectFilesReprocess: {{ _("files.js_select_files_reprocess") | tojson }},
|
||||
confirmReprocessFiles: {{ _("files.js_confirm_reprocess_files") | tojson }},
|
||||
failedReprocessFiles: {{ _("files.js_failed_reprocess_files") | tojson }},
|
||||
errorReprocessingFiles: {{ _("files.js_error_reprocessing_files") | tojson }},
|
||||
selectFilesCloudOcr: {{ _("files.js_select_files_cloud_ocr") | tojson }},
|
||||
confirmCloudOcr: {{ _("files.js_confirm_cloud_ocr") | tojson }},
|
||||
failedQueueCloudOcr: {{ _("files.js_failed_queue_cloud_ocr") | tojson }},
|
||||
errorQueuingCloudOcr: {{ _("files.js_error_queuing_cloud_ocr") | tojson }},
|
||||
selectFilesDownload: {{ _("files.js_select_files_download") | tojson }},
|
||||
failedCreateZip: {{ _("files.js_failed_create_zip") | tojson }},
|
||||
errorDownloadingFiles: {{ _("files.js_error_downloading_files") | tojson }},
|
||||
searching: {{ _("files.js_searching") | tojson }},
|
||||
searchUnavailable: {{ _("files.js_search_unavailable") | tojson }},
|
||||
searchResultsCount: {{ _("files.js_search_results_count") | tojson }},
|
||||
noResults: {{ _("files.js_no_results") | tojson }},
|
||||
untitled: {{ _("files.js_untitled") | tojson }},
|
||||
viewFile: {{ _("files.js_view_file") | tojson }},
|
||||
prevPage: {{ _("files.js_prev_page") | tojson }},
|
||||
pageInfo: {{ _("files.js_page_info") | tojson }},
|
||||
nextPage: {{ _("files.js_next_page") | tojson }},
|
||||
zoomIn: {{ _("files.js_zoom_in") | tojson }},
|
||||
zoomOut: {{ _("files.js_zoom_out") | tojson }},
|
||||
resetZoom: {{ _("files.js_reset_zoom") | tojson }},
|
||||
};
|
||||
|
||||
// Modal functionality
|
||||
const deleteModal = document.getElementById('deleteModal');
|
||||
const cancelDelete = document.getElementById('cancelDelete');
|
||||
@@ -869,7 +917,7 @@
|
||||
const title = document.getElementById('previewTitle');
|
||||
const body = document.getElementById('previewBody');
|
||||
const footer = document.getElementById('previewFooter');
|
||||
title.textContent = filename || 'Preview';
|
||||
title.textContent = filename || __i18n.previewFallback;
|
||||
body.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:300px;color:#9ca3af;"><i class="fas fa-spinner fa-spin" style="font-size:2rem;"></i></div>';
|
||||
footer.innerHTML = '';
|
||||
_pmPdf = { doc: null, page: 1, total: 0 };
|
||||
@@ -878,8 +926,8 @@
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
footer.innerHTML =
|
||||
`<a href="/files/${fileId}" aria-label="Open full view"><i class="fas fa-expand" aria-hidden="true"></i> Full view</a>` +
|
||||
`<a href="/api/files/${fileId}/download?version=processed" aria-label="Download file"><i class="fas fa-download" aria-hidden="true"></i> Download</a>`;
|
||||
`<a href="/files/${fileId}" aria-label="${__i18n.openFullViewAria}"><i class="fas fa-expand" aria-hidden="true"></i> ${__i18n.fullView}</a>` +
|
||||
`<a href="/api/files/${fileId}/download?version=processed" aria-label="${__i18n.downloadFileAria}"><i class="fas fa-download" aria-hidden="true"></i> ${__i18n.download}</a>`;
|
||||
|
||||
// Try "processed" first; fall back to "original" on 404
|
||||
_pmLoadPreview(body, fileId, mime, filename, 'processed');
|
||||
@@ -912,7 +960,7 @@
|
||||
body.innerHTML =
|
||||
'<div class="pm-pdf-controls">' +
|
||||
'<button onclick="_pmPdfPage(-1)" id="pm-prev" aria-label="Previous page"><i class="fas fa-chevron-left" aria-hidden="true"></i></button>' +
|
||||
'<span id="pm-page-info" style="font-size:0.8rem;min-width:100px;text-align:center;">Loading…</span>' +
|
||||
'<span id="pm-page-info" style="font-size:0.8rem;min-width:100px;text-align:center;">' + __i18n.loading + '</span>' +
|
||||
'<button onclick="_pmPdfPage(1)" id="pm-next" aria-label="Next page"><i class="fas fa-chevron-right" aria-hidden="true"></i></button>' +
|
||||
'</div>' +
|
||||
'<div class="pm-canvas-wrap" id="pm-canvas-wrap"><div style="text-align:center;padding:3rem;color:#94a3b8;"><i class="fas fa-spinner fa-spin" style="font-size:2rem;"></i></div></div>';
|
||||
@@ -924,7 +972,7 @@
|
||||
_pmPdfRender();
|
||||
}).catch(function() {
|
||||
if (onError) { onError(); return; }
|
||||
document.getElementById('pm-canvas-wrap').innerHTML = '<div style="text-align:center;padding:2rem;color:#f87171;"><i class="fas fa-exclamation-triangle" style="font-size:2rem;margin-bottom:0.5rem;"></i><p>Failed to load PDF</p></div>';
|
||||
document.getElementById('pm-canvas-wrap').innerHTML = '<div style="text-align:center;padding:2rem;color:#f87171;"><i class="fas fa-exclamation-triangle" style="font-size:2rem;margin-bottom:0.5rem;"></i><p>' + __i18n.failedLoadPdf + '</p></div>';
|
||||
});
|
||||
}
|
||||
|
||||
@@ -954,7 +1002,7 @@
|
||||
|
||||
function _pmPdfUpdateInfo() {
|
||||
var info = document.getElementById('pm-page-info');
|
||||
if (info) info.textContent = 'Page ' + _pmPdf.page + ' of ' + _pmPdf.total;
|
||||
if (info) info.textContent = __i18n.pdfPageInfo.replace('{page}', _pmPdf.page).replace('{total}', _pmPdf.total);
|
||||
var prev = document.getElementById('pm-prev');
|
||||
var next = document.getElementById('pm-next');
|
||||
if (prev) prev.disabled = _pmPdf.page <= 1;
|
||||
@@ -965,12 +1013,12 @@
|
||||
function _pmRenderImage(body, url, alt) {
|
||||
body.innerHTML =
|
||||
'<div class="pm-img-controls">' +
|
||||
'<button onclick="_pmImgZoom(1.25)" title="Zoom in" aria-label="Zoom in"><i class="fas fa-search-plus" aria-hidden="true"></i></button>' +
|
||||
'<button onclick="_pmImgZoom(0.8)" title="Zoom out" aria-label="Zoom out"><i class="fas fa-search-minus" aria-hidden="true"></i></button>' +
|
||||
'<button onclick="_pmImgReset()" title="Reset" aria-label="Reset zoom"><i class="fas fa-expand" aria-hidden="true"></i></button>' +
|
||||
'<button onclick="_pmImgZoom(1.25)" title="' + __i18n.zoomIn + '" aria-label="' + __i18n.zoomIn + '"><i class="fas fa-search-plus" aria-hidden="true"></i></button>' +
|
||||
'<button onclick="_pmImgZoom(0.8)" title="' + __i18n.zoomOut + '" aria-label="' + __i18n.zoomOut + '"><i class="fas fa-search-minus" aria-hidden="true"></i></button>' +
|
||||
'<button onclick="_pmImgReset()" title="' + __i18n.resetZoom + '" aria-label="' + __i18n.resetZoom + '"><i class="fas fa-expand" aria-hidden="true"></i></button>' +
|
||||
'<span id="pm-zoom-level" style="font-size:0.8rem;color:#6b7280;">100%</span>' +
|
||||
'</div>' +
|
||||
'<div class="pm-img-wrap" id="pm-img-wrap"><img id="pm-preview-img" src="' + url + '" alt="' + (alt || 'Preview') + '" draggable="false" style="max-width:100%;height:auto;"></div>';
|
||||
'<div class="pm-img-wrap" id="pm-img-wrap"><img id="pm-preview-img" src="' + url + '" alt="' + (alt || __i18n.previewFallback) + '" draggable="false" style="max-width:100%;height:auto;"></div>';
|
||||
// Drag-pan
|
||||
var wrap = document.getElementById('pm-img-wrap');
|
||||
if (wrap) {
|
||||
@@ -1001,7 +1049,7 @@
|
||||
|
||||
// Text rendering inside preview modal
|
||||
function _pmRenderText(body, url, onError) {
|
||||
body.innerHTML = '<div class="pm-text-content" id="pm-text-content"><div style="text-align:center;padding:2rem;color:#94a3b8;"><i class="fas fa-spinner fa-spin"></i> Loading…</div></div>';
|
||||
body.innerHTML = '<div class="pm-text-content" id="pm-text-content"><div style="text-align:center;padding:2rem;color:#94a3b8;"><i class="fas fa-spinner fa-spin"></i> ' + __i18n.loading + '</div></div>';
|
||||
fetch(url)
|
||||
.then(function(r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.text(); })
|
||||
.then(function(text) {
|
||||
@@ -1022,7 +1070,7 @@
|
||||
.catch(function() {
|
||||
if (onError) { onError(); return; }
|
||||
var c = document.getElementById('pm-text-content');
|
||||
if (c) c.innerHTML = '<div style="color:#f87171;padding:1rem;">Failed to load file</div>';
|
||||
if (c) c.innerHTML = '<div style="color:#f87171;padding:1rem;">' + __i18n.failedLoadFile + '</div>';
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1066,7 +1114,7 @@
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (contentType && contentType.includes('application/json')) {
|
||||
return response.json().then(err => {
|
||||
throw new Error(err.detail || 'Failed to delete file');
|
||||
throw new Error(err.detail || __i18n.failedDeleteFile);
|
||||
});
|
||||
} else {
|
||||
// Non-JSON response (likely HTML error page)
|
||||
@@ -1085,7 +1133,7 @@
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert(`Error deleting file: ${error.message}`);
|
||||
alert(__i18n.errorDeletingFile.replace('{error}', error.message));
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1125,14 +1173,14 @@
|
||||
const container = document.getElementById('saved-searches-list');
|
||||
if (!container) return;
|
||||
if (!searches || searches.length === 0) {
|
||||
container.innerHTML = '<span style="color: var(--text-muted); font-size: 0.85rem;">No saved searches yet</span>';
|
||||
container.innerHTML = '<span style="color: var(--text-muted); font-size: 0.85rem;">' + __i18n.noSavedSearches + '</span>';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = searches.map(s => {
|
||||
const params = new URLSearchParams(s.filters);
|
||||
return `<span class="saved-search-tag" style="display: inline-flex; align-items: center; gap: 0.25rem; background: var(--bg-tertiary, #e5e7eb); padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.8rem;">
|
||||
<a href="/files?${params.toString()}" style="text-decoration: none; color: inherit;">${s.name}</a>
|
||||
<button type="button" onclick="deleteSavedSearch(${s.id})" style="border: none; background: none; cursor: pointer; color: var(--text-muted); padding: 0; line-height: 1;" aria-label="Delete saved search ${s.name}">
|
||||
<button type="button" onclick="deleteSavedSearch(${s.id})" style="border: none; background: none; cursor: pointer; color: var(--text-muted); padding: 0; line-height: 1;" aria-label="${__i18n.deleteSavedSearchAria.replace('{name}', s.name)}">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</span>`;
|
||||
@@ -1140,7 +1188,7 @@
|
||||
})
|
||||
.catch(() => {
|
||||
const container = document.getElementById('saved-searches-list');
|
||||
if (container) container.innerHTML = '<span style="color: var(--text-muted); font-size: 0.85rem;">Could not load saved searches</span>';
|
||||
if (container) container.innerHTML = '<span style="color: var(--text-muted); font-size: 0.85rem;">' + __i18n.loadSavedSearchesError + '</span>';
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1153,10 +1201,10 @@
|
||||
if (val) filters[key] = val;
|
||||
});
|
||||
if (Object.keys(filters).length === 0) {
|
||||
alert('No filters to save. Please apply at least one filter (search, date, status, tags, etc.) before saving.');
|
||||
alert(__i18n.noFiltersToSave);
|
||||
return;
|
||||
}
|
||||
const name = prompt('Enter a name for this saved search:');
|
||||
const name = prompt(__i18n.enterSearchName);
|
||||
if (!name || !name.trim()) return;
|
||||
fetch('/api/saved-searches', {
|
||||
method: 'POST',
|
||||
@@ -1172,7 +1220,7 @@
|
||||
}
|
||||
|
||||
function deleteSavedSearch(id) {
|
||||
if (!confirm('Delete this saved search?')) return;
|
||||
if (!confirm(__i18n.deleteSavedSearchConfirm)) return;
|
||||
fetch(`/api/saved-searches/${id}`, { method: 'DELETE' })
|
||||
.then(response => {
|
||||
if (!response.ok) throw new Error('Failed to delete');
|
||||
@@ -1227,11 +1275,11 @@
|
||||
function bulkDelete() {
|
||||
const fileIds = getSelectedFileIds();
|
||||
if (fileIds.length === 0) {
|
||||
alert('Please select files to delete');
|
||||
alert(__i18n.selectFilesDelete);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`Are you sure you want to delete ${fileIds.length} file(s)?`)) {
|
||||
if (!confirm(__i18n.confirmDeleteFiles.replace('{count}', fileIds.length))) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1245,7 +1293,7 @@
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => {
|
||||
throw new Error(err.detail || 'Failed to delete files');
|
||||
throw new Error(err.detail || __i18n.failedDeleteFiles);
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
@@ -1256,18 +1304,18 @@
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert(`Error deleting files: ${error.message}`);
|
||||
alert(__i18n.errorDeletingFiles.replace('{error}', error.message));
|
||||
});
|
||||
}
|
||||
|
||||
function bulkReprocess() {
|
||||
const fileIds = getSelectedFileIds();
|
||||
if (fileIds.length === 0) {
|
||||
alert('Please select files to reprocess');
|
||||
alert(__i18n.selectFilesReprocess);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`Are you sure you want to reprocess ${fileIds.length} file(s)?`)) {
|
||||
if (!confirm(__i18n.confirmReprocessFiles.replace('{count}', fileIds.length))) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1281,7 +1329,7 @@
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => {
|
||||
throw new Error(err.detail || 'Failed to reprocess files');
|
||||
throw new Error(err.detail || __i18n.failedReprocessFiles);
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
@@ -1298,18 +1346,18 @@
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert(`Error reprocessing files: ${error.message}`);
|
||||
alert(__i18n.errorReprocessingFiles.replace('{error}', error.message));
|
||||
});
|
||||
}
|
||||
|
||||
function bulkReprocessCloudOcr() {
|
||||
const fileIds = getSelectedFileIds();
|
||||
if (fileIds.length === 0) {
|
||||
alert('Please select files to re-run Cloud OCR on');
|
||||
alert(__i18n.selectFilesCloudOcr);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`Are you sure you want to re-run Cloud OCR on ${fileIds.length} file(s)?`)) {
|
||||
if (!confirm(__i18n.confirmCloudOcr.replace('{count}', fileIds.length))) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1323,7 +1371,7 @@
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => {
|
||||
throw new Error(err.detail || 'Failed to queue Cloud OCR');
|
||||
throw new Error(err.detail || __i18n.failedQueueCloudOcr);
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
@@ -1340,14 +1388,14 @@
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert(`Error queuing Cloud OCR: ${error.message}`);
|
||||
alert(__i18n.errorQueuingCloudOcr.replace('{error}', error.message));
|
||||
});
|
||||
}
|
||||
|
||||
function bulkDownload() {
|
||||
const fileIds = getSelectedFileIds();
|
||||
if (fileIds.length === 0) {
|
||||
alert('Please select files to download');
|
||||
alert(__i18n.selectFilesDownload);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1361,7 +1409,7 @@
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => {
|
||||
throw new Error(err.detail || 'Failed to create ZIP download');
|
||||
throw new Error(err.detail || __i18n.failedCreateZip);
|
||||
});
|
||||
}
|
||||
return response.blob();
|
||||
@@ -1378,7 +1426,7 @@
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert(`Error downloading files: ${error.message}`);
|
||||
alert(__i18n.errorDownloadingFiles.replace('{error}', error.message));
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1472,7 +1520,7 @@
|
||||
const summary = document.getElementById('search-results-summary');
|
||||
const pagination = document.getElementById('search-results-pagination');
|
||||
|
||||
list.innerHTML = '<div style="padding: 1rem; color: #6b7280; font-size: 0.875rem;"><i class="fas fa-spinner fa-spin"></i> Searching…</div>';
|
||||
list.innerHTML = '<div style="padding: 1rem; color: #6b7280; font-size: 0.875rem;"><i class="fas fa-spinner fa-spin"></i> ' + __i18n.searching + '</div>';
|
||||
summary.textContent = '';
|
||||
pagination.innerHTML = '';
|
||||
panel.style.display = 'block';
|
||||
@@ -1485,7 +1533,7 @@
|
||||
})
|
||||
.then(data => renderSearchResults(data, q))
|
||||
.catch(err => {
|
||||
list.innerHTML = `<div style="padding: 1rem; color: #dc2626; font-size: 0.875rem;"><i class="fas fa-exclamation-triangle"></i> Search unavailable: ${err.message}</div>`;
|
||||
list.innerHTML = '<div style="padding: 1rem; color: #dc2626; font-size: 0.875rem;"><i class="fas fa-exclamation-triangle"></i> ' + __i18n.searchUnavailable.replace('{error}', err.message) + '</div>';
|
||||
summary.textContent = '';
|
||||
});
|
||||
}
|
||||
@@ -1497,17 +1545,17 @@
|
||||
const pagination = document.getElementById('search-results-pagination');
|
||||
|
||||
const { results, total, page, pages } = data;
|
||||
summary.textContent = `${total} result${total !== 1 ? 's' : ''} for "${q}"`;
|
||||
summary.textContent = __i18n.searchResultsCount.replace('{total}', total).replace('{query}', q);
|
||||
|
||||
if (!results || results.length === 0) {
|
||||
list.innerHTML = '<div style="padding: 1rem; color: #6b7280; font-size: 0.875rem;">No results found.</div>';
|
||||
list.innerHTML = '<div style="padding: 1rem; color: #6b7280; font-size: 0.875rem;">' + __i18n.noResults + '</div>';
|
||||
pagination.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = results.map(hit => {
|
||||
const fmt = hit._formatted || {};
|
||||
const title = fmt.document_title || hit.document_title || hit.original_filename || '(untitled)';
|
||||
const title = fmt.document_title || hit.document_title || hit.original_filename || __i18n.untitled;
|
||||
const filename = fmt.original_filename || hit.original_filename || '';
|
||||
const snippet = fmt.ocr_text || '';
|
||||
const tags = Array.isArray(hit.tags) ? hit.tags.join(', ') : (hit.tags || '');
|
||||
@@ -1525,7 +1573,7 @@
|
||||
${snippet ? `<div style="margin-top: 0.4rem; font-size: 0.8rem; color: #374151; white-space: pre-wrap; word-break: break-word;">…${snippet}…</div>` : ''}
|
||||
</div>
|
||||
<div style="flex-shrink: 0;">
|
||||
<a href="/files/${hit.file_id}" style="padding: 0.25rem 0.6rem; background: #f3f4f6; color: #374151; border-radius: 0.25rem; font-size: 0.8rem; text-decoration: none; white-space: nowrap;" title="View file">
|
||||
<a href="/files/${hit.file_id}" style="padding: 0.25rem 0.6rem; background: #f3f4f6; color: #374151; border-radius: 0.25rem; font-size: 0.8rem; text-decoration: none; white-space: nowrap;" title="${__i18n.viewFile}">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1536,11 +1584,11 @@
|
||||
if (pages > 1) {
|
||||
const btns = [];
|
||||
if (page > 1) {
|
||||
btns.push(`<button onclick="runFullTextSearch(${page - 1})" style="padding: 0.25rem 0.6rem; border: 1px solid #d1d5db; border-radius: 0.25rem; font-size: 0.8rem; cursor: pointer; background: white;">« Prev</button>`);
|
||||
btns.push(`<button onclick="runFullTextSearch(${page - 1})" style="padding: 0.25rem 0.6rem; border: 1px solid #d1d5db; border-radius: 0.25rem; font-size: 0.8rem; cursor: pointer; background: white;">${__i18n.prevPage}</button>`);
|
||||
}
|
||||
btns.push(`<span style="padding: 0.25rem 0.6rem; font-size: 0.8rem; color: #6b7280;">Page ${page} / ${pages}</span>`);
|
||||
btns.push(`<span style="padding: 0.25rem 0.6rem; font-size: 0.8rem; color: #6b7280;">${__i18n.pageInfo.replace('{page}', page).replace('{pages}', pages)}</span>`);
|
||||
if (page < pages) {
|
||||
btns.push(`<button onclick="runFullTextSearch(${page + 1})" style="padding: 0.25rem 0.6rem; border: 1px solid #d1d5db; border-radius: 0.25rem; font-size: 0.8rem; cursor: pointer; background: white;">Next »</button>`);
|
||||
btns.push(`<button onclick="runFullTextSearch(${page + 1})" style="padding: 0.25rem 0.6rem; border: 1px solid #d1d5db; border-radius: 0.25rem; font-size: 0.8rem; cursor: pointer; background: white;">${__i18n.nextPage}</button>`);
|
||||
}
|
||||
pagination.innerHTML = btns.join('');
|
||||
} else {
|
||||
|
||||
+84
-102
@@ -1,16 +1,16 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Help Center – DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("help.page_title") }} – DocuElevate{% endblock %}
|
||||
|
||||
{% block head_extra %}
|
||||
<!-- SEO meta tags -->
|
||||
<meta name="description" content="DocuElevate Help Center – learn how to upload, process, and route your documents automatically. Get started with sources, destinations, workflows, and integrations.">
|
||||
<meta name="description" content="{{ _('help.meta_description') }}">
|
||||
<meta name="keywords" content="DocuElevate, help, support, document processing, OCR, cloud storage, workflow automation, SaaS">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://{{ external_hostname }}/help">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="Help Center – DocuElevate">
|
||||
<meta property="og:description" content="Everything you need to get started with DocuElevate: upload documents, automate workflows, and connect your favourite cloud storage.">
|
||||
<meta property="og:title" content="{{ _('help.page_title') }} – DocuElevate">
|
||||
<meta property="og:description" content="{{ _('help.og_description') }}">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://{{ external_hostname }}/help">
|
||||
|
||||
@@ -63,18 +63,17 @@
|
||||
<!-- ═══════════════════════ Hero Section ═══════════════════════ -->
|
||||
<header class="text-center mb-14">
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 mb-4">
|
||||
<i class="fas fa-life-ring text-blue-500 mr-2" aria-hidden="true"></i>Help Center
|
||||
<i class="fas fa-life-ring text-blue-500 mr-2" aria-hidden="true"></i>{{ _("help.heading") }}
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
|
||||
Everything you need to get the most out of DocuElevate.
|
||||
Browse topics below or search for what you need.
|
||||
{{ _("help.subheading") }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- ═══════════════════════ Quick-start Cards ═══════════════════════ -->
|
||||
<section aria-labelledby="quickstart-heading" class="mb-16">
|
||||
<h2 id="quickstart-heading" class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-rocket text-blue-500 mr-2" aria-hidden="true"></i>Quick Start
|
||||
<i class="fas fa-rocket text-blue-500 mr-2" aria-hidden="true"></i>{{ _("help.quickstart_heading") }}
|
||||
</h2>
|
||||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
|
||||
@@ -84,11 +83,10 @@
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 text-blue-600 mr-3" aria-hidden="true">
|
||||
<i class="fas fa-cloud-arrow-up"></i>
|
||||
</span>
|
||||
<h3 class="text-lg font-semibold text-gray-800">Upload Documents</h3>
|
||||
<h3 class="text-lg font-semibold text-gray-800">{{ _("help.quickstart_upload") }}</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
Drag & drop files onto the <strong>Upload</strong> page or click <em>Choose File</em>.
|
||||
DocuElevate converts images and office documents to PDF, runs OCR, and extracts metadata automatically.
|
||||
{{ _("help.quickstart_upload_desc") }}
|
||||
</p>
|
||||
</article>
|
||||
|
||||
@@ -98,11 +96,10 @@
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-full bg-green-100 text-green-600 mr-3" aria-hidden="true">
|
||||
<i class="fas fa-plug"></i>
|
||||
</span>
|
||||
<h3 class="text-lg font-semibold text-gray-800">Connect Storage</h3>
|
||||
<h3 class="text-lg font-semibold text-gray-800">{{ _("help.quickstart_storage") }}</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
Head to <strong>Settings → Integrations</strong> and link your cloud accounts.
|
||||
Processed documents are automatically routed to every destination you configure.
|
||||
{{ _("help.quickstart_storage_desc_full") }}
|
||||
</p>
|
||||
</article>
|
||||
|
||||
@@ -112,11 +109,10 @@
|
||||
<span class="flex items-center justify-center w-10 h-10 rounded-full bg-purple-100 text-purple-600 mr-3" aria-hidden="true">
|
||||
<i class="fas fa-wand-magic-sparkles"></i>
|
||||
</span>
|
||||
<h3 class="text-lg font-semibold text-gray-800">Automate Workflows</h3>
|
||||
<h3 class="text-lg font-semibold text-gray-800">{{ _("help.quickstart_workflows") }}</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
Create <strong>Pipelines</strong> to define multi-step processing and routing rules.
|
||||
Combine OCR, AI extraction, format conversion, and delivery in a single flow.
|
||||
{{ _("help.quickstart_workflows_desc") }}
|
||||
</p>
|
||||
</article>
|
||||
|
||||
@@ -126,39 +122,35 @@
|
||||
<!-- ═══════════════════════ Sources ═══════════════════════ -->
|
||||
<section aria-labelledby="sources-heading" class="mb-16">
|
||||
<h2 id="sources-heading" class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-arrow-right-to-bracket text-blue-500 mr-2" aria-hidden="true"></i>Sources – Getting Documents In
|
||||
<i class="fas fa-arrow-right-to-bracket text-blue-500 mr-2" aria-hidden="true"></i>{{ _("help.sources_heading") }}
|
||||
</h2>
|
||||
<div class="grid gap-6 sm:grid-cols-2">
|
||||
|
||||
<article class="bg-white shadow rounded-lg p-6">
|
||||
<h3 class="font-semibold text-gray-800 mb-2"><i class="fas fa-upload mr-2 text-gray-400" aria-hidden="true"></i>Web Upload</h3>
|
||||
<h3 class="font-semibold text-gray-800 mb-2"><i class="fas fa-upload mr-2 text-gray-400" aria-hidden="true"></i>{{ _("help.sources_web_upload") }}</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
The fastest way to get started. Open the <strong>Upload</strong> page, drop one or more files, and DocuElevate takes care of the rest.
|
||||
Supported formats include PDF, JPEG, PNG, TIFF, DOCX, XLSX, and more.
|
||||
{{ _("help.sources_web_upload_desc") }}
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="bg-white shadow rounded-lg p-6">
|
||||
<h3 class="font-semibold text-gray-800 mb-2"><i class="fas fa-envelope-open-text mr-2 text-gray-400" aria-hidden="true"></i>Email Ingestion (IMAP)</h3>
|
||||
<h3 class="font-semibold text-gray-800 mb-2"><i class="fas fa-envelope-open-text mr-2 text-gray-400" aria-hidden="true"></i>{{ _("help.sources_email_ingestion") }}</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
Forward documents to a dedicated mailbox. Under <strong>Email Ingestion</strong>, add one or more IMAP accounts.
|
||||
DocuElevate polls for new messages and processes attachments automatically.
|
||||
{{ _("help.sources_email_ingestion_desc") }}
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="bg-white shadow rounded-lg p-6">
|
||||
<h3 class="font-semibold text-gray-800 mb-2"><i class="fas fa-code mr-2 text-gray-400" aria-hidden="true"></i>REST API</h3>
|
||||
<h3 class="font-semibold text-gray-800 mb-2"><i class="fas fa-code mr-2 text-gray-400" aria-hidden="true"></i>{{ _("help.sources_rest_api") }}</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
Integrate programmatically by <code class="bg-gray-100 px-1 rounded text-xs">POST</code>-ing files to <code class="bg-gray-100 px-1 rounded text-xs">/api/upload</code>.
|
||||
Ideal for scripts, watched folders, scanners, or third-party tools like Zapier and n8n.
|
||||
{{ _("help.sources_rest_api_desc") }}
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="bg-white shadow rounded-lg p-6">
|
||||
<h3 class="font-semibold text-gray-800 mb-2"><i class="fas fa-print mr-2 text-gray-400" aria-hidden="true"></i>Scanner & Mobile</h3>
|
||||
<h3 class="font-semibold text-gray-800 mb-2"><i class="fas fa-print mr-2 text-gray-400" aria-hidden="true"></i>{{ _("help.sources_scanner") }}</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
Point network scanners (HP, Fujitsu ScanSnap, Brother) at DocuElevate's upload endpoint or
|
||||
use any mobile scanning app that supports custom HTTP destinations.
|
||||
{{ _("help.sources_scanner_desc_full") }}
|
||||
</p>
|
||||
</article>
|
||||
|
||||
@@ -168,31 +160,31 @@
|
||||
<!-- ═══════════════════════ Destinations ═══════════════════════ -->
|
||||
<section aria-labelledby="destinations-heading" class="mb-16">
|
||||
<h2 id="destinations-heading" class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-arrow-right-from-bracket text-blue-500 mr-2" aria-hidden="true"></i>Destinations – Where Documents Go
|
||||
<i class="fas fa-arrow-right-from-bracket text-blue-500 mr-2" aria-hidden="true"></i>{{ _("help.destinations_heading") }}
|
||||
</h2>
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
|
||||
<div class="flex items-start bg-white shadow rounded-lg p-5">
|
||||
<i class="fab fa-dropbox text-blue-500 text-xl mr-3 mt-0.5" aria-hidden="true"></i>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">Dropbox</h3>
|
||||
<p class="text-gray-500 text-xs">OAuth-linked. Files land in your chosen folder.</p>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">{{ _("help.destinations_dropbox") }}</h3>
|
||||
<p class="text-gray-500 text-xs">{{ _("help.destinations_dropbox_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start bg-white shadow rounded-lg p-5">
|
||||
<i class="fab fa-google-drive text-green-500 text-xl mr-3 mt-0.5" aria-hidden="true"></i>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">Google Drive</h3>
|
||||
<p class="text-gray-500 text-xs">Service account or OAuth. Supports shared drives.</p>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">{{ _("help.destinations_google_drive") }}</h3>
|
||||
<p class="text-gray-500 text-xs">{{ _("help.destinations_google_drive_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start bg-white shadow rounded-lg p-5">
|
||||
<i class="fab fa-microsoft text-blue-600 text-xl mr-3 mt-0.5" aria-hidden="true"></i>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">OneDrive</h3>
|
||||
<p class="text-gray-500 text-xs">Microsoft Graph API integration.</p>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">{{ _("help.destinations_onedrive") }}</h3>
|
||||
<p class="text-gray-500 text-xs">{{ _("help.destinations_onedrive_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -207,48 +199,48 @@
|
||||
<div class="flex items-start bg-white shadow rounded-lg p-5">
|
||||
<i class="fab fa-aws text-yellow-600 text-xl mr-3 mt-0.5" aria-hidden="true"></i>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">Amazon S3</h3>
|
||||
<p class="text-gray-500 text-xs">Any S3-compatible bucket (AWS, MinIO, Wasabi).</p>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">{{ _("help.destinations_s3") }}</h3>
|
||||
<p class="text-gray-500 text-xs">{{ _("help.destinations_s3_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start bg-white shadow rounded-lg p-5">
|
||||
<i class="fas fa-cloud text-blue-400 text-xl mr-3 mt-0.5" aria-hidden="true"></i>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">Nextcloud / WebDAV</h3>
|
||||
<p class="text-gray-500 text-xs">Self-hosted cloud storage via WebDAV.</p>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">{{ _("help.destinations_nextcloud") }}</h3>
|
||||
<p class="text-gray-500 text-xs">{{ _("help.destinations_nextcloud_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start bg-white shadow rounded-lg p-5">
|
||||
<i class="fas fa-leaf text-green-600 text-xl mr-3 mt-0.5" aria-hidden="true"></i>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">Paperless-ngx</h3>
|
||||
<p class="text-gray-500 text-xs">Push documents straight into Paperless for archival.</p>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">{{ _("help.destinations_paperless") }}</h3>
|
||||
<p class="text-gray-500 text-xs">{{ _("help.destinations_paperless_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start bg-white shadow rounded-lg p-5">
|
||||
<i class="fas fa-server text-gray-500 text-xl mr-3 mt-0.5" aria-hidden="true"></i>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">SFTP / FTP</h3>
|
||||
<p class="text-gray-500 text-xs">Secure file transfer to any server.</p>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">{{ _("help.destinations_sftp") }}</h3>
|
||||
<p class="text-gray-500 text-xs">{{ _("help.destinations_sftp_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start bg-white shadow rounded-lg p-5">
|
||||
<i class="fas fa-envelope text-red-400 text-xl mr-3 mt-0.5" aria-hidden="true"></i>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">Email Forwarding</h3>
|
||||
<p class="text-gray-500 text-xs">Processed files sent as SMTP attachments.</p>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">{{ _("help.destinations_email") }}</h3>
|
||||
<p class="text-gray-500 text-xs">{{ _("help.destinations_email_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start bg-white shadow rounded-lg p-5">
|
||||
<i class="fas fa-link text-indigo-500 text-xl mr-3 mt-0.5" aria-hidden="true"></i>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">Webhook</h3>
|
||||
<p class="text-gray-500 text-xs">POST metadata to any external endpoint.</p>
|
||||
<h3 class="font-semibold text-gray-800 text-sm">{{ _("help.destinations_webhook") }}</h3>
|
||||
<p class="text-gray-500 text-xs">{{ _("help.destinations_webhook_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -258,32 +250,31 @@
|
||||
<!-- ═══════════════════════ Workflows / Pipelines ═══════════════════════ -->
|
||||
<section aria-labelledby="workflows-heading" class="mb-16">
|
||||
<h2 id="workflows-heading" class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-diagram-project text-blue-500 mr-2" aria-hidden="true"></i>Workflows & Pipelines
|
||||
<i class="fas fa-diagram-project text-blue-500 mr-2" aria-hidden="true"></i>{{ _("help.workflows_heading") }}
|
||||
</h2>
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<div class="grid gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 mb-2">What is a Pipeline?</h3>
|
||||
<h3 class="font-semibold text-gray-800 mb-2">{{ _("help.workflows_what_is") }}</h3>
|
||||
<p class="text-gray-600 text-sm leading-relaxed mb-4">
|
||||
A <strong>Pipeline</strong> is a series of processing steps that run automatically whenever a document is ingested.
|
||||
Each step can transform, enrich, or route the document.
|
||||
{{ _("help.workflows_definition") }}
|
||||
</p>
|
||||
<h3 class="font-semibold text-gray-800 mb-2">Typical Steps</h3>
|
||||
<h3 class="font-semibold text-gray-800 mb-2">{{ _("help.workflows_typical_steps") }}</h3>
|
||||
<ol class="list-decimal list-inside text-gray-600 text-sm space-y-1">
|
||||
<li>Convert to PDF (Gotenberg)</li>
|
||||
<li>OCR – extract text (Azure, Tesseract, Mistral …)</li>
|
||||
<li>AI metadata extraction (OpenAI, Claude, Gemini …)</li>
|
||||
<li>Deliver to one or more destinations</li>
|
||||
<li>{{ _("help.workflows_step_1_full") }}</li>
|
||||
<li>{{ _("help.workflows_step_2_full") }}</li>
|
||||
<li>{{ _("help.workflows_step_3_full") }}</li>
|
||||
<li>{{ _("help.workflows_step_4") }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 mb-2">Creating a Pipeline</h3>
|
||||
<h3 class="font-semibold text-gray-800 mb-2">{{ _("help.workflows_creating") }}</h3>
|
||||
<ol class="list-decimal list-inside text-gray-600 text-sm space-y-2 leading-relaxed">
|
||||
<li>Go to <strong>Pipelines</strong> in the main menu.</li>
|
||||
<li>Click <em>New Pipeline</em> and give it a name.</li>
|
||||
<li>Add the processing steps you need.</li>
|
||||
<li>Choose one or more delivery destinations.</li>
|
||||
<li>Save – new documents will be processed through this pipeline automatically.</li>
|
||||
<li>{{ _("help.workflows_step_1_create") }}</li>
|
||||
<li>{{ _("help.workflows_step_2_create") }}</li>
|
||||
<li>{{ _("help.workflows_step_3_create") }}</li>
|
||||
<li>{{ _("help.workflows_step_4_create") }}</li>
|
||||
<li>{{ _("help.workflows_step_5_create") }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@@ -293,47 +284,43 @@
|
||||
<!-- ═══════════════════════ Data Ingestion Tools ═══════════════════════ -->
|
||||
<section aria-labelledby="ingestion-heading" class="mb-16">
|
||||
<h2 id="ingestion-heading" class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-toolbox text-blue-500 mr-2" aria-hidden="true"></i>Ingesting Data with Standard Tools
|
||||
<i class="fas fa-toolbox text-blue-500 mr-2" aria-hidden="true"></i>{{ _("help.ingestion_heading") }}
|
||||
</h2>
|
||||
<div class="bg-white shadow rounded-lg p-6 space-y-6">
|
||||
|
||||
<article>
|
||||
<h3 class="font-semibold text-gray-800 mb-1"><i class="fas fa-terminal mr-2 text-gray-400" aria-hidden="true"></i>cURL</h3>
|
||||
<p class="text-gray-600 text-sm mb-2">Upload a file from any terminal:</p>
|
||||
<h3 class="font-semibold text-gray-800 mb-1"><i class="fas fa-terminal mr-2 text-gray-400" aria-hidden="true"></i>{{ _("help.ingestion_curl") }}</h3>
|
||||
<p class="text-gray-600 text-sm mb-2">{{ _("help.ingestion_curl_desc") }}</p>
|
||||
<pre class="bg-gray-50 text-sm rounded p-3 overflow-x-auto"><code>curl -X POST https://your-instance/api/upload \
|
||||
-H "Authorization: Bearer YOUR_TOKEN" \
|
||||
-F "file=@/path/to/document.pdf"</code></pre>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h3 class="font-semibold text-gray-800 mb-1"><i class="fas fa-folder-open mr-2 text-gray-400" aria-hidden="true"></i>Watched Folders</h3>
|
||||
<h3 class="font-semibold text-gray-800 mb-1"><i class="fas fa-folder-open mr-2 text-gray-400" aria-hidden="true"></i>{{ _("help.ingestion_watched_folders") }}</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
Use <strong>inotifywait</strong> (Linux), <strong>fswatch</strong> (macOS), or any file-watcher script to
|
||||
<code class="bg-gray-100 px-1 rounded text-xs">POST</code> new files as soon as they appear in a local directory.
|
||||
{{ _("help.ingestion_watched_folders_desc") }}
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h3 class="font-semibold text-gray-800 mb-1"><i class="fas fa-print mr-2 text-gray-400" aria-hidden="true"></i>Network Scanners</h3>
|
||||
<h3 class="font-semibold text-gray-800 mb-1"><i class="fas fa-print mr-2 text-gray-400" aria-hidden="true"></i>{{ _("help.ingestion_scanners") }}</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
Configure your HP, Fujitsu ScanSnap, or Brother scanner to use DocuElevate's upload URL as a
|
||||
<em>Scan-to-Network</em> destination. Scans are processed the moment they arrive.
|
||||
{{ _("help.ingestion_scanners_desc") }}
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h3 class="font-semibold text-gray-800 mb-1"><i class="fas fa-mobile-screen-button mr-2 text-gray-400" aria-hidden="true"></i>Mobile Scanning Apps</h3>
|
||||
<h3 class="font-semibold text-gray-800 mb-1"><i class="fas fa-mobile-screen-button mr-2 text-gray-400" aria-hidden="true"></i>{{ _("help.ingestion_mobile") }}</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
Apps like <strong>Adobe Scan</strong>, <strong>Microsoft Lens</strong>, or <strong>Genius Scan</strong>
|
||||
can export to a custom HTTP endpoint. Point them at <code class="bg-gray-100 px-1 rounded text-xs">/api/upload</code>.
|
||||
{{ _("help.ingestion_mobile_desc") }}
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h3 class="font-semibold text-gray-800 mb-1"><i class="fas fa-shuffle mr-2 text-gray-400" aria-hidden="true"></i>Zapier / n8n / Make</h3>
|
||||
<h3 class="font-semibold text-gray-800 mb-1"><i class="fas fa-shuffle mr-2 text-gray-400" aria-hidden="true"></i>{{ _("help.ingestion_zapier") }}</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
Connect DocuElevate to thousands of other apps via integration platforms.
|
||||
Use the HTTP/Webhook module to <code class="bg-gray-100 px-1 rounded text-xs">POST</code> files to the upload API.
|
||||
{{ _("help.ingestion_zapier_desc") }}
|
||||
</p>
|
||||
</article>
|
||||
|
||||
@@ -343,7 +330,7 @@
|
||||
<!-- ═══════════════════════ FAQ ═══════════════════════ -->
|
||||
<section aria-labelledby="faq-heading" class="mb-16">
|
||||
<h2 id="faq-heading" class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-circle-question text-blue-500 mr-2" aria-hidden="true"></i>Frequently Asked Questions
|
||||
<i class="fas fa-circle-question text-blue-500 mr-2" aria-hidden="true"></i>{{ _("help.faq_heading") }}
|
||||
</h2>
|
||||
<div class="space-y-4" x-data="{ open: null }">
|
||||
|
||||
@@ -353,12 +340,11 @@
|
||||
@click="open = open === 1 ? null : 1"
|
||||
:aria-expanded="open === 1 ? 'true' : 'false'"
|
||||
aria-controls="faq-1">
|
||||
<span>How do I upload documents?</span>
|
||||
<span>{{ _("help.faq_1_q") }}</span>
|
||||
<i class="fas fa-chevron-down text-gray-400 transition-transform" :class="{ 'rotate-180': open === 1 }" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div id="faq-1" x-show="open === 1" x-collapse class="px-6 pb-4 text-gray-600 text-sm leading-relaxed">
|
||||
Navigate to the <strong>Upload</strong> page, drag-and-drop your files or click <em>Choose File</em>.
|
||||
DocuElevate converts images and office documents to PDF, runs OCR, and extracts metadata automatically.
|
||||
{{ _("help.faq_1_a") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -368,12 +354,11 @@
|
||||
@click="open = open === 2 ? null : 2"
|
||||
:aria-expanded="open === 2 ? 'true' : 'false'"
|
||||
aria-controls="faq-2">
|
||||
<span>Which file formats are supported?</span>
|
||||
<span>{{ _("help.faq_2_q") }}</span>
|
||||
<i class="fas fa-chevron-down text-gray-400 transition-transform" :class="{ 'rotate-180': open === 2 }" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div id="faq-2" x-show="open === 2" x-collapse class="px-6 pb-4 text-gray-600 text-sm leading-relaxed">
|
||||
PDF, JPEG, PNG, TIFF, BMP, GIF, DOCX, XLSX, PPTX, ODT, ODS, TXT, RTF, and HTML.
|
||||
Non-PDF files are automatically converted to PDF before processing.
|
||||
{{ _("help.faq_2_a") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -383,12 +368,11 @@
|
||||
@click="open = open === 3 ? null : 3"
|
||||
:aria-expanded="open === 3 ? 'true' : 'false'"
|
||||
aria-controls="faq-3">
|
||||
<span>Can I ingest documents from email?</span>
|
||||
<span>{{ _("help.faq_3_q") }}</span>
|
||||
<i class="fas fa-chevron-down text-gray-400 transition-transform" :class="{ 'rotate-180': open === 3 }" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div id="faq-3" x-show="open === 3" x-collapse class="px-6 pb-4 text-gray-600 text-sm leading-relaxed">
|
||||
Yes. Go to <strong>Email Ingestion</strong>, add an IMAP account, and DocuElevate will poll for new
|
||||
messages and process attachments automatically.
|
||||
{{ _("help.faq_3_a") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -398,12 +382,11 @@
|
||||
@click="open = open === 4 ? null : 4"
|
||||
:aria-expanded="open === 4 ? 'true' : 'false'"
|
||||
aria-controls="faq-4">
|
||||
<span>How do processing pipelines work?</span>
|
||||
<span>{{ _("help.faq_4_q") }}</span>
|
||||
<i class="fas fa-chevron-down text-gray-400 transition-transform" :class="{ 'rotate-180': open === 4 }" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div id="faq-4" x-show="open === 4" x-collapse class="px-6 pb-4 text-gray-600 text-sm leading-relaxed">
|
||||
Pipelines let you chain processing steps – OCR, AI extraction, format conversion – and route the
|
||||
result to one or more destinations. Create and manage them from the <strong>Pipelines</strong> page.
|
||||
{{ _("help.faq_4_a") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -413,12 +396,11 @@
|
||||
@click="open = open === 5 ? null : 5"
|
||||
:aria-expanded="open === 5 ? 'true' : 'false'"
|
||||
aria-controls="faq-5">
|
||||
<span>Is my data secure?</span>
|
||||
<span>{{ _("help.faq_5_q") }}</span>
|
||||
<i class="fas fa-chevron-down text-gray-400 transition-transform" :class="{ 'rotate-180': open === 5 }" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div id="faq-5" x-show="open === 5" x-collapse class="px-6 pb-4 text-gray-600 text-sm leading-relaxed">
|
||||
DocuElevate encrypts credentials at rest, communicates over TLS, and never stores your documents
|
||||
longer than necessary. See the <a href="/privacy" class="text-blue-600 hover:underline">Privacy Notice</a> for full details.
|
||||
{{ _("help.faq_5_a_pre") }}<a href="/privacy" class="text-blue-600 hover:underline">{{ _("help.privacy_notice") }}</a>{{ _("help.faq_5_a_post") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -428,7 +410,7 @@
|
||||
<!-- ═══════════════════════ Contact / Support ═══════════════════════ -->
|
||||
<section aria-labelledby="support-heading" class="mb-10">
|
||||
<h2 id="support-heading" class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-headset text-blue-500 mr-2" aria-hidden="true"></i>Contact Support
|
||||
<i class="fas fa-headset text-blue-500 mr-2" aria-hidden="true"></i>{{ _("help.support_heading") }}
|
||||
</h2>
|
||||
|
||||
<div class="grid gap-6 md:grid-cols-2">
|
||||
@@ -436,7 +418,7 @@
|
||||
<!-- Left column: info -->
|
||||
<div class="bg-white shadow rounded-lg p-6 space-y-4">
|
||||
<p class="text-gray-600 text-sm leading-relaxed">
|
||||
Can't find what you're looking for? Our support team is here to help.
|
||||
{{ _("help.support_description") }}
|
||||
</p>
|
||||
|
||||
{% if support_email %}
|
||||
@@ -449,7 +431,7 @@
|
||||
{% if zammad_chat_enabled and zammad_url %}
|
||||
<div class="flex items-center text-sm text-gray-700">
|
||||
<i class="fas fa-comments text-blue-500 mr-2" aria-hidden="true"></i>
|
||||
<span>Live chat available – look for the chat bubble in the bottom-right corner.</span>
|
||||
<span>{{ _("help.support_live_chat") }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -458,22 +440,22 @@
|
||||
{% if zammad_form_enabled and zammad_url %}
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<h3 class="font-semibold text-gray-800 mb-3">
|
||||
<i class="fas fa-ticket mr-2 text-gray-400" aria-hidden="true"></i>Open a Support Ticket
|
||||
<i class="fas fa-ticket mr-2 text-gray-400" aria-hidden="true"></i>{{ _("help.support_ticket_heading") }}
|
||||
</h3>
|
||||
<p class="text-gray-600 text-sm mb-4">
|
||||
Describe your issue below and we'll get back to you as soon as possible.
|
||||
{{ _("help.support_ticket_desc") }}
|
||||
</p>
|
||||
<button id="zammad-feedback-form"
|
||||
type="button"
|
||||
class="inline-flex items-center bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-5 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400 min-h-[44px]">
|
||||
<i class="fas fa-paper-plane mr-2" aria-hidden="true"></i>Submit a Ticket
|
||||
<i class="fas fa-paper-plane mr-2" aria-hidden="true"></i>{{ _("help.support_ticket_button") }}
|
||||
</button>
|
||||
</div>
|
||||
{% elif not zammad_form_enabled and not support_email and not zammad_chat_enabled %}
|
||||
<div class="bg-white shadow rounded-lg p-6 flex flex-col items-center justify-center text-center">
|
||||
<i class="fas fa-info-circle text-blue-400 text-2xl mb-2" aria-hidden="true"></i>
|
||||
<p class="text-gray-500 text-sm">
|
||||
Contact your administrator for support information.
|
||||
{{ _("help.support_admin_message") }}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -172,6 +172,11 @@
|
||||
<i class="fas fa-trash-alt mr-1" aria-hidden="true"></i>Delete after process
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="acct.profile_id">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded bg-blue-50 text-blue-700">
|
||||
<i class="fas fa-filter mr-1" aria-hidden="true"></i><span x-text="profileName(acct.profile_id)"></span>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="acct.last_checked_at">
|
||||
<span class="text-gray-400" :title="acct.last_checked_at">
|
||||
<i class="fas fa-clock mr-1" aria-hidden="true"></i>Last polled: <span x-text="formatDate(acct.last_checked_at)"></span>
|
||||
@@ -386,6 +391,49 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Attachment filter -->
|
||||
<div>
|
||||
<label for="acct-profile" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
|
||||
Ingestion Profile
|
||||
</label>
|
||||
<div class="flex gap-2 items-center">
|
||||
<select
|
||||
id="acct-profile"
|
||||
x-model.number="form.profile_id"
|
||||
class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white text-sm"
|
||||
aria-describedby="acct-profile-hint"
|
||||
>
|
||||
<option :value="null">Use global default</option>
|
||||
<template x-for="profile in profiles" :key="profile.id">
|
||||
<option :value="profile.id" x-text="profile.name + (profile.is_builtin ? '' : ' (custom)')"></option>
|
||||
</template>
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
@click="openProfileModal(null)"
|
||||
class="inline-flex items-center px-3 py-2 text-sm font-medium rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
style="min-height:40px;"
|
||||
title="Create new profile"
|
||||
aria-label="Create new ingestion profile"
|
||||
>
|
||||
<i class="fas fa-plus" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p id="acct-profile-hint" class="mt-1 text-xs text-gray-400 dark:text-gray-500">
|
||||
Controls which attachment types are ingested. Leave blank to use the global default (documents only).
|
||||
<button type="button" @click="showProfilesSection = !showProfilesSection" class="underline hover:text-blue-600 focus:outline-none">
|
||||
Manage profiles
|
||||
</button>
|
||||
</p>
|
||||
<!-- Inline selected profile summary -->
|
||||
<template x-if="form.profile_id">
|
||||
<div class="mt-2 text-xs bg-blue-50 dark:bg-blue-900/20 rounded px-2 py-1.5 text-blue-800 dark:text-blue-200">
|
||||
<strong x-text="profileName(form.profile_id)"></strong>:
|
||||
<span x-text="profileCategorySummary(form.profile_id)"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Test connection result -->
|
||||
<template x-if="testResult">
|
||||
<div
|
||||
@@ -494,10 +542,277 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ── Ingestion Profiles panel ─────────────────────────────────────────────── -->
|
||||
<div
|
||||
x-show="showProfilesSection"
|
||||
x-transition
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="profiles-panel-title"
|
||||
@keydown.escape.window="showProfilesSection = false"
|
||||
style="display:none;"
|
||||
>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl overflow-y-auto max-h-[90vh]" @click.stop>
|
||||
<div class="px-6 pt-6 pb-2 flex items-center justify-between">
|
||||
<h2 id="profiles-panel-title" class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<i class="fas fa-filter text-blue-500" aria-hidden="true"></i>
|
||||
Ingestion Profiles
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
@click="showProfilesSection = false"
|
||||
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
|
||||
aria-label="Close profiles panel"
|
||||
>
|
||||
<i class="fas fa-times text-xl" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-6 pb-6 pt-2">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
Profiles define which attachment types are ingested from emails. Assign a profile to each IMAP account for fine-grained control.
|
||||
</p>
|
||||
|
||||
<!-- Profile list -->
|
||||
<div class="space-y-3 mb-4">
|
||||
<template x-for="profile in profiles" :key="profile.id">
|
||||
<div class="border border-gray-100 dark:border-gray-700 rounded-lg p-4 flex items-start gap-3">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span class="font-medium text-sm text-gray-900 dark:text-white" x-text="profile.name"></span>
|
||||
<template x-if="profile.is_builtin">
|
||||
<span class="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500">built-in</span>
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5" x-text="profile.description || ''"></p>
|
||||
<!-- Category badges -->
|
||||
<div class="flex flex-wrap gap-1 mt-2">
|
||||
<template x-for="cat in profile.allowed_categories" :key="cat">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
|
||||
<span x-text="categoryLabel(cat)"></span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
@click="openProfileModal(profile)"
|
||||
:disabled="profile.is_builtin"
|
||||
:class="profile.is_builtin ? 'opacity-40 cursor-not-allowed' : ''"
|
||||
class="p-1.5 text-gray-400 hover:text-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
|
||||
:aria-label="`Edit profile ${profile.name}`"
|
||||
:title="profile.is_builtin ? 'Built-in profiles cannot be edited' : 'Edit profile'"
|
||||
>
|
||||
<i class="fas fa-edit text-sm" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="confirmDeleteProfile(profile)"
|
||||
:disabled="profile.is_builtin"
|
||||
:class="profile.is_builtin ? 'opacity-40 cursor-not-allowed' : ''"
|
||||
class="p-1.5 text-gray-400 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 rounded"
|
||||
:aria-label="`Delete profile ${profile.name}`"
|
||||
:title="profile.is_builtin ? 'Built-in profiles cannot be deleted' : 'Delete profile'"
|
||||
>
|
||||
<i class="fas fa-trash-alt text-sm" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="openProfileModal(null)"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded bg-blue-600 hover:bg-blue-700 text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
style="min-height:40px;"
|
||||
>
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i> New Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Profile create / edit modal ────────────────────────────────────────────── -->
|
||||
<div
|
||||
x-show="profileModalOpen"
|
||||
x-transition:enter="ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 px-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-labelledby="editingProfile ? 'profile-modal-title-edit' : 'profile-modal-title-create'"
|
||||
@keydown.escape.window="closeProfileModal()"
|
||||
style="display:none;"
|
||||
>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-lg overflow-y-auto max-h-[90vh]" @click.stop>
|
||||
<div class="px-6 pt-6 pb-2 flex items-center justify-between">
|
||||
<h2
|
||||
:id="editingProfile ? 'profile-modal-title-edit' : 'profile-modal-title-create'"
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white"
|
||||
x-text="editingProfile ? 'Edit Profile' : 'New Ingestion Profile'"
|
||||
></h2>
|
||||
<button
|
||||
type="button"
|
||||
@click="closeProfileModal()"
|
||||
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<i class="fas fa-times text-xl" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="saveProfile()" class="px-6 pb-6 pt-4 space-y-4">
|
||||
|
||||
<!-- Profile name -->
|
||||
<div>
|
||||
<label for="profile-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
|
||||
Profile Name <span class="text-red-500" aria-hidden="true">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="profile-name"
|
||||
type="text"
|
||||
x-model="profileForm.name"
|
||||
placeholder="e.g. Scanner Inbox, Finance Documents"
|
||||
required
|
||||
maxlength="255"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white text-sm"
|
||||
aria-required="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<label for="profile-description" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<input
|
||||
id="profile-description"
|
||||
type="text"
|
||||
x-model="profileForm.description"
|
||||
placeholder="Optional description"
|
||||
maxlength="500"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Category checkboxes -->
|
||||
<div>
|
||||
<fieldset>
|
||||
<legend class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
|
||||
File Type Categories <span class="text-red-500" aria-hidden="true">*</span>
|
||||
</legend>
|
||||
<div class="space-y-2">
|
||||
<template x-for="cat in categories" :key="cat.key">
|
||||
<label class="flex items-start gap-3 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="cat.key"
|
||||
:checked="profileForm.allowed_categories.includes(cat.key)"
|
||||
@change="toggleCategory(cat.key)"
|
||||
class="mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span class="flex-1">
|
||||
<span class="text-sm font-medium text-gray-800 dark:text-gray-100" x-text="cat.label"></span>
|
||||
<span class="block text-xs text-gray-500 dark:text-gray-400" x-text="cat.description"></span>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<p x-show="profileForm.allowed_categories.length === 0" class="mt-2 text-xs text-red-600" role="alert">
|
||||
Select at least one category.
|
||||
</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Form error -->
|
||||
<template x-if="profileFormError">
|
||||
<p class="text-sm text-red-600" role="alert" x-text="profileFormError"></p>
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end gap-2 pt-2 border-t border-gray-100 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
@click="closeProfileModal()"
|
||||
class="px-4 py-2 text-sm font-medium rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
style="min-height:40px;"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="savingProfile || profileForm.allowed_categories.length === 0"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded bg-blue-600 hover:bg-blue-700 text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
|
||||
style="min-height:40px;"
|
||||
>
|
||||
<template x-if="savingProfile">
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i>
|
||||
</template>
|
||||
<span x-text="editingProfile ? 'Save Changes' : 'Create Profile'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Delete profile confirmation modal ────────────────────────────────────── -->
|
||||
<div
|
||||
x-show="deleteProfileModalOpen"
|
||||
x-transition
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 px-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="delete-profile-modal-title"
|
||||
@keydown.escape.window="deleteProfileModalOpen = false"
|
||||
style="display:none;"
|
||||
>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-sm p-6" @click.stop>
|
||||
<h2 id="delete-profile-modal-title" class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Delete Profile?
|
||||
</h2>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
||||
Are you sure you want to delete the profile
|
||||
<strong x-text="profileToDelete ? profileToDelete.name : ''"></strong>?
|
||||
IMAP accounts using this profile will fall back to the global default.
|
||||
</p>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="deleteProfileModalOpen = false; profileToDelete = null"
|
||||
class="px-4 py-2 text-sm font-medium rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
|
||||
style="min-height:40px;"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="deleteProfile()"
|
||||
:disabled="deletingProfile"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded bg-red-600 hover:bg-red-700 text-white focus:outline-none focus:ring-2 focus:ring-red-500 disabled:opacity-50"
|
||||
style="min-height:40px;"
|
||||
>
|
||||
<template x-if="deletingProfile">
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i>
|
||||
</template>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function imapAccountsApp() {
|
||||
return {
|
||||
accounts: {{ accounts | tojson }},
|
||||
profiles: {{ profiles | tojson }},
|
||||
categories: {{ categories | tojson }},
|
||||
defaultCategories: {{ default_categories | tojson }},
|
||||
quota: {
|
||||
current_count: {{ current_count }},
|
||||
max_mailboxes: {{ max_mailboxes | tojson }},
|
||||
@@ -508,17 +823,17 @@ function imapAccountsApp() {
|
||||
loading: false,
|
||||
alert: { show: false, type: '', title: '', message: '' },
|
||||
|
||||
// Modal state
|
||||
// Account modal state
|
||||
modalOpen: false,
|
||||
editingAccount: null,
|
||||
form: { name: '', host: '', port: 993, username: '', password: '', use_ssl: true, delete_after_process: false, is_active: true },
|
||||
form: { name: '', host: '', port: 993, username: '', password: '', use_ssl: true, delete_after_process: false, is_active: true, profile_id: null },
|
||||
showPassword: false,
|
||||
saving: false,
|
||||
testing: false,
|
||||
testResult: null,
|
||||
formError: null,
|
||||
|
||||
// Delete state
|
||||
// Account delete state
|
||||
deleteModalOpen: false,
|
||||
accountToDelete: null,
|
||||
deleting: false,
|
||||
@@ -526,6 +841,17 @@ function imapAccountsApp() {
|
||||
// Test (saved account) state
|
||||
testingId: null,
|
||||
|
||||
// Profiles panel & modal state
|
||||
showProfilesSection: false,
|
||||
profileModalOpen: false,
|
||||
editingProfile: null,
|
||||
profileForm: { name: '', description: '', allowed_categories: [] },
|
||||
savingProfile: false,
|
||||
profileFormError: null,
|
||||
deleteProfileModalOpen: false,
|
||||
profileToDelete: null,
|
||||
deletingProfile: false,
|
||||
|
||||
get canAdd() {
|
||||
return this.quota.can_add;
|
||||
},
|
||||
@@ -549,9 +875,33 @@ function imapAccountsApp() {
|
||||
setTimeout(() => { this.alert.show = false; }, 5000);
|
||||
},
|
||||
|
||||
// ── Profile helpers ──────────────────────────────────────────────────────
|
||||
|
||||
profileById(id) {
|
||||
return this.profiles.find(p => p.id === id) || null;
|
||||
},
|
||||
|
||||
profileName(id) {
|
||||
const p = this.profileById(id);
|
||||
return p ? p.name : 'Unknown profile';
|
||||
},
|
||||
|
||||
profileCategorySummary(id) {
|
||||
const p = this.profileById(id);
|
||||
if (!p) return '';
|
||||
return p.allowed_categories.map(k => this.categoryLabel(k)).join(', ');
|
||||
},
|
||||
|
||||
categoryLabel(key) {
|
||||
const cat = this.categories.find(c => c.key === key);
|
||||
return cat ? cat.label : key;
|
||||
},
|
||||
|
||||
// ── Account modal ────────────────────────────────────────────────────────
|
||||
|
||||
openCreateModal() {
|
||||
this.editingAccount = null;
|
||||
this.form = { name: '', host: '', port: 993, username: '', password: '', use_ssl: true, delete_after_process: false, is_active: true };
|
||||
this.form = { name: '', host: '', port: 993, username: '', password: '', use_ssl: true, delete_after_process: false, is_active: true, profile_id: null };
|
||||
this.showPassword = false;
|
||||
this.testResult = null;
|
||||
this.formError = null;
|
||||
@@ -569,6 +919,7 @@ function imapAccountsApp() {
|
||||
use_ssl: acct.use_ssl,
|
||||
delete_after_process: acct.delete_after_process,
|
||||
is_active: acct.is_active,
|
||||
profile_id: acct.profile_id || null,
|
||||
};
|
||||
this.showPassword = false;
|
||||
this.testResult = null;
|
||||
@@ -592,6 +943,8 @@ function imapAccountsApp() {
|
||||
if (this.editingAccount && payload.password === '') {
|
||||
delete payload.password;
|
||||
}
|
||||
// Normalise profile_id: empty string → null
|
||||
if (payload.profile_id === '' || payload.profile_id === 0) payload.profile_id = null;
|
||||
let resp;
|
||||
if (this.editingAccount) {
|
||||
resp = await fetch(`/api/imap-accounts/${this.editingAccount.id}`, {
|
||||
@@ -719,6 +1072,126 @@ function imapAccountsApp() {
|
||||
this.deleting = false;
|
||||
}
|
||||
},
|
||||
|
||||
// ── Profile CRUD ─────────────────────────────────────────────────────────
|
||||
|
||||
openProfileModal(profile) {
|
||||
this.editingProfile = profile;
|
||||
if (profile) {
|
||||
this.profileForm = {
|
||||
name: profile.name,
|
||||
description: profile.description || '',
|
||||
allowed_categories: [...profile.allowed_categories],
|
||||
};
|
||||
} else {
|
||||
this.profileForm = { name: '', description: '', allowed_categories: [...this.defaultCategories] };
|
||||
}
|
||||
this.profileFormError = null;
|
||||
this.profileModalOpen = true;
|
||||
},
|
||||
|
||||
closeProfileModal() {
|
||||
this.profileModalOpen = false;
|
||||
this.editingProfile = null;
|
||||
this.profileFormError = null;
|
||||
},
|
||||
|
||||
toggleCategory(key) {
|
||||
const idx = this.profileForm.allowed_categories.indexOf(key);
|
||||
if (idx === -1) {
|
||||
this.profileForm.allowed_categories.push(key);
|
||||
} else {
|
||||
this.profileForm.allowed_categories.splice(idx, 1);
|
||||
}
|
||||
},
|
||||
|
||||
async saveProfile() {
|
||||
if (this.profileForm.allowed_categories.length === 0) {
|
||||
this.profileFormError = 'Select at least one category.';
|
||||
return;
|
||||
}
|
||||
this.profileFormError = null;
|
||||
this.savingProfile = true;
|
||||
try {
|
||||
const payload = {
|
||||
name: this.profileForm.name,
|
||||
description: this.profileForm.description || null,
|
||||
allowed_categories: this.profileForm.allowed_categories,
|
||||
};
|
||||
let resp;
|
||||
if (this.editingProfile) {
|
||||
resp = await fetch(`/api/imap-profiles/${this.editingProfile.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getCsrfToken() },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
} else {
|
||||
resp = await fetch('/api/imap-profiles/', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getCsrfToken() },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
}
|
||||
const data = await resp.json();
|
||||
if (!resp.ok) {
|
||||
this.profileFormError = data.detail || 'Failed to save profile.';
|
||||
return;
|
||||
}
|
||||
// Flatten response into the same shape used locally
|
||||
const normalized = {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
owner_id: data.owner_id,
|
||||
allowed_categories: data.allowed_categories,
|
||||
is_builtin: data.is_builtin,
|
||||
};
|
||||
if (this.editingProfile) {
|
||||
const idx = this.profiles.findIndex(p => p.id === normalized.id);
|
||||
if (idx !== -1) this.profiles.splice(idx, 1, normalized);
|
||||
} else {
|
||||
this.profiles.push(normalized);
|
||||
}
|
||||
this.closeProfileModal();
|
||||
this.showAlert('success', 'Saved', this.editingProfile ? 'Profile updated.' : 'Profile created.');
|
||||
} catch (err) {
|
||||
this.profileFormError = `Network error: ${err.message || 'Unknown error'}. Please try again.`;
|
||||
} finally {
|
||||
this.savingProfile = false;
|
||||
}
|
||||
},
|
||||
|
||||
confirmDeleteProfile(profile) {
|
||||
this.profileToDelete = profile;
|
||||
this.deleteProfileModalOpen = true;
|
||||
},
|
||||
|
||||
async deleteProfile() {
|
||||
if (!this.profileToDelete) return;
|
||||
this.deletingProfile = true;
|
||||
try {
|
||||
const resp = await fetch(`/api/imap-profiles/${this.profileToDelete.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'X-CSRF-Token': getCsrfToken() },
|
||||
});
|
||||
if (resp.ok || resp.status === 204) {
|
||||
const deletedId = this.profileToDelete.id;
|
||||
this.profiles = this.profiles.filter(p => p.id !== deletedId);
|
||||
// Clear profile_id on accounts that referenced this profile
|
||||
this.accounts.forEach(a => { if (a.profile_id === deletedId) a.profile_id = null; });
|
||||
this.showAlert('success', 'Deleted', `Profile "${this.profileToDelete.name}" removed.`);
|
||||
this.deleteProfileModalOpen = false;
|
||||
this.profileToDelete = null;
|
||||
} else {
|
||||
const data = await resp.json();
|
||||
this.showAlert('error', 'Delete Failed', data.detail || 'Could not delete profile.');
|
||||
}
|
||||
} catch (err) {
|
||||
this.showAlert('error', 'Delete Failed', `Network error: ${err.message || 'Unknown error'}`);
|
||||
} finally {
|
||||
this.deletingProfile = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Imprint - DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("imprint.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<h1 class="text-4xl font-bold mb-6">Imprint</h1>
|
||||
<p class="text-sm text-gray-500 mb-8">Information according to § 5 TMG (German Telemedia Act)</p>
|
||||
<h1 class="text-4xl font-bold mb-6">{{ _("imprint.heading") }}</h1>
|
||||
<p class="text-sm text-gray-500 mb-8">{{ _("imprint.subtitle") }}</p>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">Service Provider</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("imprint.provider_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>Christian Louis IT Beratung</strong><br>
|
||||
Alter Steinweg 3<br>
|
||||
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">Contact Information</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("imprint.contact_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
Fax: +49 40 97074609<br>
|
||||
Email: christianlouis@gmail.com<br>
|
||||
@@ -26,16 +26,16 @@
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">Business Registration</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("imprint.business_registration_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
VAT Identification Number according to §27a Value Added Tax Act: DE202899017
|
||||
{{ _("imprint.business_registration_vat") }} DE202899017
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">Responsible for Content</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("imprint.responsible_content_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
According to § 55 Abs. 2 RStV:<br>
|
||||
{{ _("imprint.responsible_content_rstv") }}<br>
|
||||
Christian Krakau-Louis<br>
|
||||
Alter Steinweg 3<br>
|
||||
20459 Hamburg<br>
|
||||
@@ -44,36 +44,36 @@
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">Legal Notices</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("imprint.legal_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
Despite careful content control, we assume no liability for the content of external links. The operators of the linked pages are solely responsible for their content.
|
||||
{{ _("imprint.legal_liability") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
All content on this website is protected by copyright. Any use outside the limits of copyright law requires the written consent of the respective author or creator.
|
||||
{{ _("imprint.legal_copyright") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">Online Dispute Resolution</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("imprint.dispute_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
The European Commission provides a platform for online dispute resolution (OS):
|
||||
{{ _("imprint.dispute_p1") }}
|
||||
<a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline">https://ec.europa.eu/consumers/odr/</a>
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
We are not willing or obligated to participate in dispute resolution proceedings before a consumer arbitration board.
|
||||
{{ _("imprint.dispute_p2") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">Related Policies</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("imprint.policies_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
Our service is governed by the following policies:
|
||||
{{ _("imprint.policies_intro") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
|
||||
<li><a href="/terms" class="text-blue-600 hover:underline">Terms of Service</a> - Rules for using DocuElevate</li>
|
||||
<li><a href="/privacy" class="text-blue-600 hover:underline">Privacy Policy</a> - How we handle your data</li>
|
||||
<li><a href="/cookies" class="text-blue-600 hover:underline">Cookie Policy</a> - Information about cookies we use</li>
|
||||
<li><a href="/license" class="text-blue-600 hover:underline">License Information</a> - How our software is licensed</li>
|
||||
<li><a href="/terms" class="text-blue-600 hover:underline">{{ _("imprint.policies_terms_label") }}</a> - {{ _("imprint.policies_terms_desc") }}</li>
|
||||
<li><a href="/privacy" class="text-blue-600 hover:underline">{{ _("imprint.policies_privacy_label") }}</a> - {{ _("imprint.policies_privacy_desc") }}</li>
|
||||
<li><a href="/cookies" class="text-blue-600 hover:underline">{{ _("imprint.policies_cookie_label") }}</a> - {{ _("imprint.policies_cookie_desc") }}</li>
|
||||
<li><a href="/license" class="text-blue-600 hover:underline">{{ _("imprint.policies_license_label") }}</a> - {{ _("imprint.policies_license_desc") }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{% if multi_user_enabled and not is_logged_in %}DocuElevate – Intelligent Document Processing{% else %}Dashboard – DocuElevate{% endif %}{% endblock %}
|
||||
{% block title %}{% if multi_user_enabled and not is_logged_in %}{{ _("index.page_title_public") }}{% else %}{{ _("index.page_title_dashboard") }}{% endif %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="{% if multi_user_enabled and not is_logged_in %}bg-gray-50 min-h-screen{% else %}container mx-auto px-4 py-8{% endif %}">
|
||||
@@ -13,30 +13,29 @@
|
||||
<div class="bg-gradient-to-br from-blue-700 via-indigo-700 to-purple-700 text-white py-20 px-4">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<span class="inline-block bg-white/20 text-white text-xs font-semibold uppercase tracking-widest px-3 py-1 rounded-full mb-4">
|
||||
Intelligent Document Processing
|
||||
{{ _("index.badge_intelligent") }}
|
||||
</span>
|
||||
<h1 class="text-4xl sm:text-5xl font-extrabold mb-4 leading-tight">
|
||||
From upload to insight — automatically.
|
||||
{{ _("index.hero_heading") }}
|
||||
</h1>
|
||||
<p class="text-indigo-100 text-lg max-w-2xl mx-auto mb-8">
|
||||
DocuElevate ingests your documents, runs OCR, extracts metadata with AI, and routes files to
|
||||
Dropbox, Google Drive, OneDrive, S3, Nextcloud, and more — all in one seamless pipeline.
|
||||
{{ _("index.hero_description") }}
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
{% if allow_signup %}
|
||||
<a href="/signup"
|
||||
class="bg-white text-indigo-700 hover:bg-indigo-50 font-bold py-3 px-8 rounded-xl shadow-lg transition duration-200 flex items-center min-h-[44px]">
|
||||
<i class="fas fa-user-plus mr-2" aria-hidden="true"></i> Get Started — it's free
|
||||
<i class="fas fa-user-plus mr-2" aria-hidden="true"></i> {{ _("index.hero_signup") }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="/login"
|
||||
class="bg-white text-indigo-700 hover:bg-indigo-50 font-bold py-3 px-8 rounded-xl shadow-lg transition duration-200 flex items-center min-h-[44px]">
|
||||
<i class="fas fa-sign-in-alt mr-2" aria-hidden="true"></i> Log In
|
||||
<i class="fas fa-sign-in-alt mr-2" aria-hidden="true"></i> {{ _("index.hero_login") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/pricing"
|
||||
class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-700 font-bold py-3 px-8 rounded-xl transition duration-200 flex items-center min-h-[44px]">
|
||||
<i class="fas fa-tags mr-2" aria-hidden="true"></i> View Plans & Pricing
|
||||
<i class="fas fa-tags mr-2" aria-hidden="true"></i> {{ _("index.hero_pricing") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,7 +43,7 @@
|
||||
|
||||
<!-- Feature grid -->
|
||||
<div class="max-w-6xl mx-auto px-4 py-16">
|
||||
<h2 class="text-2xl font-bold text-center text-gray-800 mb-10">Everything you need for smart document workflows</h2>
|
||||
<h2 class="text-2xl font-bold text-center text-gray-800 mb-10">{{ _("index.feature_section_title") }}</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
<div class="bg-white rounded-2xl shadow p-6 flex gap-4">
|
||||
@@ -52,8 +51,8 @@
|
||||
<i class="fas fa-file-alt text-blue-600 text-xl" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">OCR & Text Extraction</h3>
|
||||
<p class="text-gray-500 text-sm">Azure Document Intelligence converts scanned PDFs and images into fully searchable text automatically.</p>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_ocr") }}</h3>
|
||||
<p class="text-gray-500 text-sm">{{ _("index.feature_ocr_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -62,8 +61,8 @@
|
||||
<i class="fas fa-brain text-indigo-600 text-xl" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">AI Metadata Extraction</h3>
|
||||
<p class="text-gray-500 text-sm">OpenAI, Claude, Gemini, and other pluggable AI providers classify documents and pull out key fields like dates, amounts, and subjects.</p>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_ai") }}</h3>
|
||||
<p class="text-gray-500 text-sm">{{ _("index.feature_ai_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,8 +71,8 @@
|
||||
<i class="fas fa-cloud-upload-alt text-green-600 text-xl" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">Multi-Cloud Storage</h3>
|
||||
<p class="text-gray-500 text-sm">Route processed files to Dropbox, Google Drive, OneDrive, Amazon S3, Nextcloud, Paperless NGX, WebDAV, FTP/SFTP, and more.</p>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_cloud") }}</h3>
|
||||
<p class="text-gray-500 text-sm">{{ _("index.feature_cloud_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -82,8 +81,8 @@
|
||||
<i class="fas fa-mail-bulk text-yellow-600 text-xl" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">Email & IMAP Ingestion</h3>
|
||||
<p class="text-gray-500 text-sm">Automatically pull documents from Gmail or any IMAP mailbox — no manual uploads needed.</p>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_email") }}</h3>
|
||||
<p class="text-gray-500 text-sm">{{ _("index.feature_email_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -92,8 +91,8 @@
|
||||
<i class="fas fa-search text-purple-600 text-xl" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">Full-Text Search</h3>
|
||||
<p class="text-gray-500 text-sm">Instantly find any document by content, metadata, or tags across your entire archive.</p>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_search") }}</h3>
|
||||
<p class="text-gray-500 text-sm">{{ _("index.feature_search_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -102,8 +101,8 @@
|
||||
<i class="fas fa-project-diagram text-pink-600 text-xl" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">Custom Pipelines</h3>
|
||||
<p class="text-gray-500 text-sm">Build processing pipelines with configurable steps — OCR, AI extraction, format conversion, and storage routing in any order.</p>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_pipelines") }}</h3>
|
||||
<p class="text-gray-500 text-sm">{{ _("index.feature_pipelines_desc") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -113,23 +112,23 @@
|
||||
<!-- CTA banner -->
|
||||
<div class="bg-indigo-700 text-white py-14 px-4">
|
||||
<div class="max-w-2xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-extrabold mb-4">Ready to elevate your document workflow?</h2>
|
||||
<p class="text-indigo-200 mb-8">Join teams already automating their document processing with DocuElevate.</p>
|
||||
<h2 class="text-3xl font-extrabold mb-4">{{ _("index.cta_heading") }}</h2>
|
||||
<p class="text-indigo-200 mb-8">{{ _("index.cta_description") }}</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
{% if allow_signup %}
|
||||
<a href="/signup"
|
||||
class="bg-white text-indigo-700 hover:bg-indigo-50 font-bold py-3 px-8 rounded-xl shadow-lg transition duration-200 flex items-center min-h-[44px]">
|
||||
<i class="fas fa-rocket mr-2" aria-hidden="true"></i> Create a free account
|
||||
<i class="fas fa-rocket mr-2" aria-hidden="true"></i> {{ _("index.cta_signup") }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="/login"
|
||||
class="bg-white text-indigo-700 hover:bg-indigo-50 font-bold py-3 px-8 rounded-xl shadow-lg transition duration-200 flex items-center min-h-[44px]">
|
||||
<i class="fas fa-sign-in-alt mr-2" aria-hidden="true"></i> Log In
|
||||
<i class="fas fa-sign-in-alt mr-2" aria-hidden="true"></i> {{ _("index.hero_login") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/pricing"
|
||||
class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-700 font-bold py-3 px-8 rounded-xl transition duration-200 flex items-center min-h-[44px]">
|
||||
<i class="fas fa-tags mr-2" aria-hidden="true"></i> See pricing
|
||||
<i class="fas fa-tags mr-2" aria-hidden="true"></i> {{ _("index.cta_pricing") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -145,16 +144,16 @@
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold mb-1">DocuElevate</h1>
|
||||
<p class="text-blue-100 text-sm">Intelligent document processing & management — built for teams</p>
|
||||
<p class="text-blue-100 text-sm">{{ _("index.dashboard_subtitle_teams") }}</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<a href="/upload"
|
||||
class="bg-white text-blue-700 hover:bg-blue-50 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center shadow-sm">
|
||||
<i class="fas fa-upload mr-2" aria-hidden="true"></i> Upload
|
||||
<i class="fas fa-upload mr-2" aria-hidden="true"></i> {{ _("index.button_upload") }}
|
||||
</a>
|
||||
<a href="/files"
|
||||
class="bg-transparent border border-white text-white hover:bg-white hover:text-blue-700 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center">
|
||||
<i class="fas fa-list mr-2" aria-hidden="true"></i> Browse Files
|
||||
<i class="fas fa-list mr-2" aria-hidden="true"></i> {{ _("index.button_browse_files") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -162,7 +161,7 @@
|
||||
|
||||
<!-- Platform stats row (admin only) -->
|
||||
{% if is_admin %}
|
||||
<h2 class="text-sm font-semibold text-gray-400 uppercase tracking-widest mb-3">Platform overview</h2>
|
||||
<h2 class="text-sm font-semibold text-gray-400 uppercase tracking-widest mb-3">{{ _("index.platform_overview") }}</h2>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
|
||||
<div class="bg-white rounded-xl shadow p-5 flex items-center gap-3">
|
||||
<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
@@ -170,7 +169,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-extrabold text-blue-600">{{ stats.processed_files | default(0) }}</p>
|
||||
<p class="text-gray-500 text-xs">Total files</p>
|
||||
<p class="text-gray-500 text-xs">{{ _("index.stat_total_files") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow p-5 flex items-center gap-3">
|
||||
@@ -179,7 +178,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-extrabold text-green-600">{{ stats.files_today | default(0) }}</p>
|
||||
<p class="text-gray-500 text-xs">Files today</p>
|
||||
<p class="text-gray-500 text-xs">{{ _("index.stat_files_today") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow p-5 flex items-center gap-3">
|
||||
@@ -188,7 +187,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-extrabold text-indigo-600">{{ stats.files_month | default(0) }}</p>
|
||||
<p class="text-gray-500 text-xs">Files this month</p>
|
||||
<p class="text-gray-500 text-xs">{{ _("index.stat_files_month") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow p-5 flex items-center gap-3">
|
||||
@@ -197,7 +196,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-extrabold text-purple-600">{{ stats.unique_users | default(0) }}</p>
|
||||
<p class="text-gray-500 text-xs">Active users</p>
|
||||
<p class="text-gray-500 text-xs">{{ _("index.stat_active_users") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -205,7 +204,7 @@
|
||||
|
||||
<!-- My usage / subscription widget -->
|
||||
{% if user_tier and user_usage %}
|
||||
<h2 class="text-sm font-semibold text-gray-400 uppercase tracking-widest mb-3">My usage</h2>
|
||||
<h2 class="text-sm font-semibold text-gray-400 uppercase tracking-widest mb-3">{{ _("index.usage_my_usage") }}</h2>
|
||||
<div class="bg-white rounded-xl shadow p-6 mb-8">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -220,16 +219,16 @@
|
||||
{% elif user_tier.id == 'professional' %}fa-star
|
||||
{% else %}fa-building{% endif %}
|
||||
mr-1" aria-hidden="true"></i>
|
||||
{{ user_tier.name }} Plan
|
||||
{{ user_tier.name }} {{ _("index.tier_plan") }}
|
||||
</span>
|
||||
{% if user_tier.id != 'business' %}
|
||||
<a href="/pricing" class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
|
||||
Upgrade <i class="fas fa-arrow-up-right-from-square ml-0.5 text-xs" aria-hidden="true"></i>
|
||||
{{ _("index.tier_upgrade") }} <i class="fas fa-arrow-up-right-from-square ml-0.5 text-xs" aria-hidden="true"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<a href="/subscription" class="text-xs text-gray-500 hover:text-gray-700">
|
||||
View full details →
|
||||
{{ _("index.tier_view_details") }} →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -237,7 +236,7 @@
|
||||
<!-- Lifetime -->
|
||||
<div>
|
||||
<div class="flex justify-between text-xs mb-1">
|
||||
<span class="text-gray-500">Lifetime files</span>
|
||||
<span class="text-gray-500">{{ _("index.usage_lifetime") }}</span>
|
||||
<span class="font-semibold text-gray-700">
|
||||
{{ user_usage.lifetime }}{% if user_tier.lifetime_file_limit > 0 %} / {{ user_tier.lifetime_file_limit }}{% endif %}
|
||||
</span>
|
||||
@@ -250,13 +249,13 @@
|
||||
style="width: {{ pct }}%"></div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-xs text-green-600">Unlimited</div>
|
||||
<div class="text-xs text-green-600">{{ _("index.usage_unlimited") }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<!-- Today -->
|
||||
<div>
|
||||
<div class="flex justify-between text-xs mb-1">
|
||||
<span class="text-gray-500">Files today</span>
|
||||
<span class="text-gray-500">{{ _("index.usage_today") }}</span>
|
||||
<span class="font-semibold text-gray-700">
|
||||
{{ user_usage.today }}{% if user_tier.daily_upload_limit > 0 %} / {{ user_tier.daily_upload_limit }}{% endif %}
|
||||
</span>
|
||||
@@ -269,13 +268,13 @@
|
||||
style="width: {{ pct }}%"></div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-xs text-green-600">Unlimited</div>
|
||||
<div class="text-xs text-green-600">{{ _("index.usage_unlimited") }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<!-- This month -->
|
||||
<div>
|
||||
<div class="flex justify-between text-xs mb-1">
|
||||
<span class="text-gray-500">Files this month</span>
|
||||
<span class="text-gray-500">{{ _("index.usage_month") }}</span>
|
||||
<span class="font-semibold text-gray-700">
|
||||
{{ user_usage.month }}{% if user_tier.monthly_upload_limit > 0 %} / {{ user_tier.monthly_upload_limit }}{% endif %}
|
||||
</span>
|
||||
@@ -288,7 +287,7 @@
|
||||
style="width: {{ pct }}%"></div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-xs text-green-600">Unlimited</div>
|
||||
<div class="text-xs text-green-600">{{ _("index.usage_unlimited") }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -300,7 +299,7 @@
|
||||
<!-- Quick Actions -->
|
||||
<div class="bg-white rounded-xl shadow p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<i class="fas fa-bolt text-yellow-500" aria-hidden="true"></i> Quick Actions
|
||||
<i class="fas fa-bolt text-yellow-500" aria-hidden="true"></i> {{ _("index.quick_actions") }}
|
||||
</h2>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
@@ -309,8 +308,8 @@
|
||||
<i class="fas fa-upload text-blue-600 text-sm" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">Upload Document</p>
|
||||
<p class="text-xs text-gray-400">Process a new file</p>
|
||||
<p class="text-sm font-medium text-gray-800">{{ _("index.quick_upload") }}</p>
|
||||
<p class="text-xs text-gray-400">{{ _("index.quick_upload_desc") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@@ -320,8 +319,8 @@
|
||||
<i class="fas fa-list text-indigo-600 text-sm" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">My Documents</p>
|
||||
<p class="text-xs text-gray-400">Browse your processed files</p>
|
||||
<p class="text-sm font-medium text-gray-800">{{ _("index.quick_documents") }}</p>
|
||||
<p class="text-xs text-gray-400">{{ _("index.quick_documents_desc") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@@ -331,8 +330,8 @@
|
||||
<i class="fas fa-layer-group text-purple-600 text-sm" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">My Subscription</p>
|
||||
<p class="text-xs text-gray-400">View plan & usage details</p>
|
||||
<p class="text-sm font-medium text-gray-800">{{ _("index.quick_subscription") }}</p>
|
||||
<p class="text-xs text-gray-400">{{ _("index.quick_subscription_desc") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@@ -342,8 +341,8 @@
|
||||
<i class="fas fa-search text-green-600 text-sm" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">Search</p>
|
||||
<p class="text-xs text-gray-400">Full-text search across documents</p>
|
||||
<p class="text-sm font-medium text-gray-800">{{ _("index.quick_search") }}</p>
|
||||
<p class="text-xs text-gray-400">{{ _("index.quick_search_desc") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@@ -353,30 +352,30 @@
|
||||
<!-- Processing stats -->
|
||||
<div class="bg-white rounded-xl shadow p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<i class="fas fa-chart-bar text-blue-500" aria-hidden="true"></i> Processing Stats
|
||||
<i class="fas fa-chart-bar text-blue-500" aria-hidden="true"></i> {{ _("index.processing_stats") }}
|
||||
</h2>
|
||||
<ul class="space-y-3 text-sm">
|
||||
<li class="flex items-center justify-between py-2 border-b border-gray-100">
|
||||
<span class="text-gray-600 flex items-center gap-2">
|
||||
<i class="fas fa-file-alt text-blue-400 w-4" aria-hidden="true"></i> Total processed
|
||||
<i class="fas fa-file-alt text-blue-400 w-4" aria-hidden="true"></i> {{ _("index.stat_total_processed") }}
|
||||
</span>
|
||||
<span class="font-bold text-gray-900">{{ stats.processed_files | default(0) }}</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between py-2 border-b border-gray-100">
|
||||
<span class="text-gray-600 flex items-center gap-2">
|
||||
<i class="fas fa-eye text-indigo-400 w-4" aria-hidden="true"></i> Files with OCR
|
||||
<i class="fas fa-eye text-indigo-400 w-4" aria-hidden="true"></i> {{ _("index.stat_files_ocr") }}
|
||||
</span>
|
||||
<span class="font-bold text-gray-900">{{ stats.files_with_ocr | default(0) }}</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between py-2 border-b border-gray-100">
|
||||
<span class="text-gray-600 flex items-center gap-2">
|
||||
<i class="fas fa-calendar-day text-green-400 w-4" aria-hidden="true"></i> Today
|
||||
<i class="fas fa-calendar-day text-green-400 w-4" aria-hidden="true"></i> {{ _("index.stat_today") }}
|
||||
</span>
|
||||
<span class="font-bold text-gray-900">{{ stats.files_today | default(0) }}</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between py-2">
|
||||
<span class="text-gray-600 flex items-center gap-2">
|
||||
<i class="fas fa-calendar-alt text-orange-400 w-4" aria-hidden="true"></i> This month
|
||||
<i class="fas fa-calendar-alt text-orange-400 w-4" aria-hidden="true"></i> {{ _("index.stat_this_month") }}
|
||||
</span>
|
||||
<span class="font-bold text-gray-900">{{ stats.files_month | default(0) }}</span>
|
||||
</li>
|
||||
@@ -388,39 +387,39 @@
|
||||
<div class="bg-gradient-to-br from-indigo-600 to-purple-700 rounded-xl shadow p-6 text-white flex flex-col justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold mb-2 flex items-center gap-2">
|
||||
<i class="fas fa-arrow-up-right-dots" aria-hidden="true"></i> Upgrade your plan
|
||||
<i class="fas fa-arrow-up-right-dots" aria-hidden="true"></i> {{ _("index.upgrade_plan") }}
|
||||
</h2>
|
||||
<p class="text-indigo-100 text-sm mb-4">
|
||||
Unlock more documents, more destinations and priority support.
|
||||
{{ _("index.upgrade_description") }}
|
||||
</p>
|
||||
<ul class="space-y-1.5 text-sm text-indigo-100">
|
||||
<li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-300" aria-hidden="true"></i> Higher daily & monthly limits</li>
|
||||
<li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-300" aria-hidden="true"></i> More storage destinations</li>
|
||||
<li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-300" aria-hidden="true"></i> More OCR pages</li>
|
||||
<li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-300" aria-hidden="true"></i> {{ _("index.upgrade_daily_limits") }}</li>
|
||||
<li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-300" aria-hidden="true"></i> {{ _("index.upgrade_destinations") }}</li>
|
||||
<li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-300" aria-hidden="true"></i> {{ _("index.upgrade_ocr_pages") }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="/pricing"
|
||||
class="mt-6 inline-flex items-center justify-center bg-white text-indigo-700 font-semibold px-5 py-2.5 rounded-lg hover:bg-indigo-50 transition shadow">
|
||||
View plans & pricing <i class="fas fa-arrow-right ml-2 text-xs" aria-hidden="true"></i>
|
||||
{{ _("index.upgrade_view_pricing") }} <i class="fas fa-arrow-right ml-2 text-xs" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="bg-white rounded-xl shadow p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<i class="fas fa-plug text-green-500" aria-hidden="true"></i> Integrations
|
||||
<i class="fas fa-plug text-green-500" aria-hidden="true"></i> {{ _("index.integrations_title") }}
|
||||
</h2>
|
||||
<div class="space-y-3 text-sm text-gray-600">
|
||||
<div class="flex items-center justify-between">
|
||||
<span>Active integrations</span>
|
||||
<span>{{ _("index.integrations_active") }}</span>
|
||||
<span class="font-bold text-green-600">{{ stats.active_integrations | default(0) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>Storage targets</span>
|
||||
<span>{{ _("index.integrations_storage") }}</span>
|
||||
<span class="font-bold text-indigo-600">{{ stats.storage_targets | default(0) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/status" class="mt-4 inline-flex items-center text-xs text-indigo-600 hover:text-indigo-800">
|
||||
View system status <i class="fas fa-arrow-right ml-1" aria-hidden="true"></i>
|
||||
{{ _("index.integrations_view_status") }} <i class="fas fa-arrow-right ml-1" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -435,15 +434,15 @@
|
||||
<div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl shadow-lg text-white p-8 mb-8">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold mb-1">DocuElevate Dashboard</h1>
|
||||
<p class="text-blue-100 text-sm">Intelligent document processing & management</p>
|
||||
<h1 class="text-3xl font-bold mb-1">{{ _("index.single_user_heading") }}</h1>
|
||||
<p class="text-blue-100 text-sm">{{ _("index.dashboard_subtitle") }}</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<a href="/upload" class="bg-white text-blue-700 hover:bg-blue-50 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center shadow-sm">
|
||||
<i class="fas fa-upload mr-2" aria-hidden="true"></i> Upload
|
||||
<i class="fas fa-upload mr-2" aria-hidden="true"></i> {{ _("index.button_upload") }}
|
||||
</a>
|
||||
<a href="/files" class="bg-transparent border border-white text-white hover:bg-white hover:text-blue-700 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center">
|
||||
<i class="fas fa-list mr-2" aria-hidden="true"></i> Browse Files
|
||||
<i class="fas fa-list mr-2" aria-hidden="true"></i> {{ _("index.button_browse_files") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -457,7 +456,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-bold text-blue-600">{{ stats.processed_files | default(0) }}</p>
|
||||
<p class="text-gray-500 text-sm">Documents Processed</p>
|
||||
<p class="text-gray-500 text-sm">{{ _("index.stat_documents_processed") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow p-6 flex items-center gap-4">
|
||||
@@ -466,7 +465,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-bold text-green-600">{{ stats.active_integrations | default(0) }}</p>
|
||||
<p class="text-gray-500 text-sm">Active Integrations</p>
|
||||
<p class="text-gray-500 text-sm">{{ _("index.stat_active_integrations") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow p-6 flex items-center gap-4">
|
||||
@@ -475,7 +474,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-bold text-indigo-600">{{ stats.storage_targets | default(0) }}</p>
|
||||
<p class="text-gray-500 text-sm">Storage Targets</p>
|
||||
<p class="text-gray-500 text-sm">{{ _("index.stat_storage_targets") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -486,7 +485,7 @@
|
||||
<!-- Quick Actions Widget -->
|
||||
<div class="bg-white rounded-xl shadow p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<i class="fas fa-bolt text-yellow-500" aria-hidden="true"></i> Quick Actions
|
||||
<i class="fas fa-bolt text-yellow-500" aria-hidden="true"></i> {{ _("index.quick_actions") }}
|
||||
</h2>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
@@ -495,8 +494,8 @@
|
||||
<i class="fas fa-upload text-blue-600 text-sm" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">Upload Document</p>
|
||||
<p class="text-xs text-gray-400">Process a new file</p>
|
||||
<p class="text-sm font-medium text-gray-800">{{ _("index.quick_upload") }}</p>
|
||||
<p class="text-xs text-gray-400">{{ _("index.quick_upload_desc") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@@ -506,8 +505,8 @@
|
||||
<i class="fas fa-list text-indigo-600 text-sm" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">View All Files</p>
|
||||
<p class="text-xs text-gray-400">Browse processed documents</p>
|
||||
<p class="text-sm font-medium text-gray-800">{{ _("index.quick_view_files") }}</p>
|
||||
<p class="text-xs text-gray-400">{{ _("index.quick_view_files_desc") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@@ -517,8 +516,8 @@
|
||||
<i class="fas fa-heartbeat text-green-600 text-sm" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">System Status</p>
|
||||
<p class="text-xs text-gray-400">Check integration health</p>
|
||||
<p class="text-sm font-medium text-gray-800">{{ _("index.quick_system_status") }}</p>
|
||||
<p class="text-xs text-gray-400">{{ _("index.quick_system_status_desc") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@@ -528,28 +527,28 @@
|
||||
<!-- Capabilities Widget -->
|
||||
<div class="bg-white rounded-xl shadow p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<i class="fas fa-cubes text-blue-500" aria-hidden="true"></i> Capabilities
|
||||
<i class="fas fa-cubes text-blue-500" aria-hidden="true"></i> {{ _("index.capabilities_title") }}
|
||||
</h2>
|
||||
<ul class="space-y-3 text-sm text-gray-600">
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
|
||||
<span>OCR & metadata extraction with AI</span>
|
||||
<span>{{ _("index.capabilities_ocr") }}</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
|
||||
<span>Cloud storage: Dropbox, OneDrive, Google Drive, NextCloud</span>
|
||||
<span>{{ _("index.capabilities_cloud") }}</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
|
||||
<span>Paperless-ngx integration for document management</span>
|
||||
<span>{{ _("index.capabilities_paperless") }}</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
|
||||
<span>Email & URL-based document ingestion</span>
|
||||
<span>{{ _("index.capabilities_ingestion") }}</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
|
||||
<span>Automated classification & routing workflows</span>
|
||||
<span>{{ _("index.capabilities_workflows") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -558,25 +557,25 @@
|
||||
<div class="bg-white rounded-xl shadow p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<i class="fas fa-compass text-indigo-500" aria-hidden="true"></i> Getting Started
|
||||
<i class="fas fa-compass text-indigo-500" aria-hidden="true"></i> {{ _("index.getting_started") }}
|
||||
</h2>
|
||||
<ol class="space-y-3 text-sm text-gray-600 list-none">
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">1</span>
|
||||
Configure integrations via <a href="/status" class="text-blue-600 hover:underline">System Status</a>
|
||||
{{ _("index.getting_started_1_pre") }}<a href="/status" class="text-blue-600 hover:underline">{{ _("index.quick_system_status") }}</a>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">2</span>
|
||||
<a href="/upload" class="text-blue-600 hover:underline">Upload</a> your first document
|
||||
<a href="/upload" class="text-blue-600 hover:underline">{{ _("index.button_upload") }}</a>{{ _("index.getting_started_2_post") }}
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">3</span>
|
||||
Review results in <a href="/files" class="text-blue-600 hover:underline">Files</a>
|
||||
{{ _("index.getting_started_3_pre") }}<a href="/files" class="text-blue-600 hover:underline">{{ _("index.link_files") }}</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<a href="/about" class="mt-6 inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800 font-medium">
|
||||
Learn more about DocuElevate <i class="fas fa-arrow-right ml-1 text-xs" aria-hidden="true"></i>
|
||||
{{ _("index.getting_started_learn") }} <i class="fas fa-arrow-right ml-1 text-xs" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Integrations – DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("integrations.page_title") }} – DocuElevate{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div
|
||||
@@ -13,10 +13,10 @@
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<i class="fas fa-plug text-indigo-500" aria-hidden="true"></i>
|
||||
Integrations
|
||||
{{ _("integrations.page_title") }}
|
||||
</h1>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">
|
||||
Manage your ingestion sources and storage destinations in one place.
|
||||
{{ _("integrations.subtitle") }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@@ -27,7 +27,7 @@
|
||||
style="min-height:44px;"
|
||||
:aria-disabled="!canAddAny"
|
||||
>
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i> Add Integration
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i> {{ _("integrations.add_button") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -41,20 +41,20 @@
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-gray-200">
|
||||
Mailbox Sources:
|
||||
{{ _("integrations.sources_quota_label") }}
|
||||
<strong x-text="quota.src_count"></strong>
|
||||
<template x-if="quota.max_sources !== null && quota.max_sources > 0">
|
||||
<span> / <strong x-text="quota.max_sources"></strong></span>
|
||||
</template>
|
||||
<template x-if="quota.max_sources === null">
|
||||
<span class="text-gray-400"> / unlimited</span>
|
||||
<span class="text-gray-400"> {{ _("integrations.quota_unlimited") }}</span>
|
||||
</template>
|
||||
<template x-if="quota.max_sources === 0">
|
||||
<span class="text-gray-400 ml-1">(not available)</span>
|
||||
<span class="text-gray-400 ml-1">{{ _("integrations.quota_not_available") }}</span>
|
||||
</template>
|
||||
</p>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
|
||||
Plan: <span x-text="quota.tier_name"></span>
|
||||
{{ _("integrations.plan_label") }} <span x-text="quota.tier_name"></span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Mini usage bar -->
|
||||
@@ -77,7 +77,7 @@
|
||||
</div>
|
||||
<template x-if="quota.max_sources !== null && quota.src_count >= quota.max_sources && quota.max_sources >= 0">
|
||||
<a href="/subscription" class="inline-flex items-center text-xs text-indigo-600 hover:text-indigo-800 mt-2">
|
||||
<i class="fas fa-arrow-up mr-1" aria-hidden="true"></i> Upgrade Plan
|
||||
<i class="fas fa-arrow-up mr-1" aria-hidden="true"></i> {{ _("integrations.upgrade_plan") }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
@@ -90,17 +90,17 @@
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-gray-200">
|
||||
Storage Destinations:
|
||||
{{ _("integrations.destinations_quota_label") }}
|
||||
<strong x-text="quota.dest_count"></strong>
|
||||
<template x-if="quota.max_destinations !== null">
|
||||
<span> / <strong x-text="quota.max_destinations"></strong></span>
|
||||
</template>
|
||||
<template x-if="quota.max_destinations === null">
|
||||
<span class="text-gray-400"> / unlimited</span>
|
||||
<span class="text-gray-400"> {{ _("integrations.quota_unlimited") }}</span>
|
||||
</template>
|
||||
</p>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
|
||||
Plan: <span x-text="quota.tier_name"></span>
|
||||
{{ _("integrations.plan_label") }} <span x-text="quota.tier_name"></span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Mini usage bar -->
|
||||
@@ -123,7 +123,7 @@
|
||||
</div>
|
||||
<template x-if="quota.max_destinations !== null && quota.dest_count >= quota.max_destinations">
|
||||
<a href="/subscription" class="inline-flex items-center text-xs text-indigo-600 hover:text-indigo-800 mt-2">
|
||||
<i class="fas fa-arrow-up mr-1" aria-hidden="true"></i> Upgrade Plan
|
||||
<i class="fas fa-arrow-up mr-1" aria-hidden="true"></i> {{ _("integrations.upgrade_plan") }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
@@ -151,7 +151,7 @@
|
||||
<template x-if="loading">
|
||||
<div class="text-center py-12 text-gray-400">
|
||||
<i class="fas fa-spinner fa-spin text-3xl mb-3" aria-hidden="true"></i>
|
||||
<p>Loading integrations…</p>
|
||||
<p>{{ _("integrations.loading") }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -159,9 +159,9 @@
|
||||
<template x-if="!loading && integrations.length === 0">
|
||||
<div class="text-center py-16 bg-white dark:bg-gray-800 rounded-lg shadow">
|
||||
<i class="fas fa-plug text-5xl text-gray-300 mb-4" aria-hidden="true"></i>
|
||||
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">No integrations configured</h2>
|
||||
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">{{ _("integrations.empty_state") }}</h2>
|
||||
<p class="text-gray-500 dark:text-gray-400 mb-6 max-w-md mx-auto">
|
||||
Add your first integration to connect ingestion sources (like IMAP) and storage destinations (like S3, Dropbox, or Google Drive).
|
||||
{{ _("integrations.no_integrations_body") }}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
@@ -170,7 +170,7 @@
|
||||
class="inline-flex items-center px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white text-sm font-medium rounded-md"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i> Add Your First Integration
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i> {{ _("integrations.add_first_button") }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -179,7 +179,7 @@
|
||||
<template x-if="!loading && sources.length > 0">
|
||||
<section class="mb-8">
|
||||
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center gap-2">
|
||||
<i class="fas fa-inbox text-blue-500" aria-hidden="true"></i> Sources
|
||||
<i class="fas fa-inbox text-blue-500" aria-hidden="true"></i> {{ _("integrations.sources_section") }}
|
||||
</h2>
|
||||
<div class="space-y-3">
|
||||
<template x-for="intg in sources" :key="intg.id">
|
||||
@@ -196,7 +196,7 @@
|
||||
<span
|
||||
class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
|
||||
:class="intg.is_active ? 'bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-300' : 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400'"
|
||||
x-text="intg.is_active ? 'Active' : 'Paused'"
|
||||
x-text="intg.is_active ? '{{ _('common.active') }}' : '{{ _('integrations.paused') }}'"
|
||||
></span>
|
||||
</p>
|
||||
<template x-if="intg.last_error">
|
||||
@@ -216,7 +216,7 @@
|
||||
:aria-label="`${intg.has_credentials ? 'Re-authorize' : 'Authorize'} ${intg.name}`"
|
||||
>
|
||||
<i class="fas fa-key mr-1" aria-hidden="true"></i>
|
||||
<span x-text="intg.has_credentials ? 'Re-Authorize' : 'Authorize'"></span>
|
||||
<span x-text="intg.has_credentials ? '{{ _('integrations.authorize_reauth') }}' : '{{ _('integrations.authorize_btn') }}'"></span>
|
||||
</a>
|
||||
</template>
|
||||
<button
|
||||
@@ -233,7 +233,7 @@
|
||||
<template x-if="testingId !== intg.id">
|
||||
<i class="fas fa-plug mr-1" aria-hidden="true"></i>
|
||||
</template>
|
||||
Test
|
||||
{{ _("common.test") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -242,7 +242,7 @@
|
||||
style="min-height:36px;"
|
||||
:aria-label="`Edit ${intg.name}`"
|
||||
>
|
||||
<i class="fas fa-edit mr-1" aria-hidden="true"></i>Edit
|
||||
<i class="fas fa-edit mr-1" aria-hidden="true"></i>{{ _("common.edit") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -251,7 +251,7 @@
|
||||
style="min-height:36px;"
|
||||
:aria-label="`Delete ${intg.name}`"
|
||||
>
|
||||
<i class="fas fa-trash-alt mr-1" aria-hidden="true"></i>Delete
|
||||
<i class="fas fa-trash-alt mr-1" aria-hidden="true"></i>{{ _("common.delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -265,7 +265,7 @@
|
||||
<template x-if="!loading && destinations.length > 0">
|
||||
<section class="mb-8">
|
||||
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center gap-2">
|
||||
<i class="fas fa-hdd text-green-500" aria-hidden="true"></i> Destinations
|
||||
<i class="fas fa-hdd text-green-500" aria-hidden="true"></i> {{ _("integrations.destinations_section") }}
|
||||
</h2>
|
||||
<div class="space-y-3">
|
||||
<template x-for="intg in destinations" :key="intg.id">
|
||||
@@ -282,7 +282,7 @@
|
||||
<span
|
||||
class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
|
||||
:class="intg.is_active ? 'bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-300' : 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400'"
|
||||
x-text="intg.is_active ? 'Active' : 'Paused'"
|
||||
x-text="intg.is_active ? '{{ _('common.active') }}' : '{{ _('integrations.paused') }}'"
|
||||
></span>
|
||||
</p>
|
||||
<template x-if="intg.last_error">
|
||||
@@ -302,7 +302,7 @@
|
||||
:aria-label="`${intg.has_credentials ? 'Re-authorize' : 'Authorize'} ${intg.name}`"
|
||||
>
|
||||
<i class="fas fa-key mr-1" aria-hidden="true"></i>
|
||||
<span x-text="intg.has_credentials ? 'Re-Authorize' : 'Authorize'"></span>
|
||||
<span x-text="intg.has_credentials ? '{{ _('integrations.authorize_reauth') }}' : '{{ _('integrations.authorize_btn') }}'"></span>
|
||||
</a>
|
||||
</template>
|
||||
<button
|
||||
@@ -319,7 +319,7 @@
|
||||
<template x-if="testingId !== intg.id">
|
||||
<i class="fas fa-plug mr-1" aria-hidden="true"></i>
|
||||
</template>
|
||||
Test
|
||||
{{ _("common.test") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -328,7 +328,7 @@
|
||||
style="min-height:36px;"
|
||||
:aria-label="`Edit ${intg.name}`"
|
||||
>
|
||||
<i class="fas fa-edit mr-1" aria-hidden="true"></i>Edit
|
||||
<i class="fas fa-edit mr-1" aria-hidden="true"></i>{{ _("common.edit") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -337,7 +337,7 @@
|
||||
style="min-height:36px;"
|
||||
:aria-label="`Delete ${intg.name}`"
|
||||
>
|
||||
<i class="fas fa-trash-alt mr-1" aria-hidden="true"></i>Delete
|
||||
<i class="fas fa-trash-alt mr-1" aria-hidden="true"></i>{{ _("common.delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -371,13 +371,13 @@
|
||||
<h2
|
||||
:id="editingIntegration ? 'modal-title-edit' : 'modal-title-create'"
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white"
|
||||
x-text="editingIntegration ? 'Edit Integration' : 'Add Integration'"
|
||||
x-text="editingIntegration ? '{{ _('integrations.modal_title_edit') }}' : '{{ _('integrations.modal_title_add') }}'"
|
||||
></h2>
|
||||
<button
|
||||
type="button"
|
||||
@click="closeModal()"
|
||||
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded"
|
||||
aria-label="Close modal"
|
||||
aria-label="{{ _('integrations.modal_close') }}"
|
||||
>
|
||||
<i class="fas fa-times text-xl" aria-hidden="true"></i>
|
||||
</button>
|
||||
@@ -388,7 +388,7 @@
|
||||
<!-- Direction -->
|
||||
<div>
|
||||
<label for="intg-direction" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
|
||||
Direction <span class="text-red-500" aria-hidden="true">*</span>
|
||||
{{ _("integrations.direction_label") }} <span class="text-red-500" aria-hidden="true">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="intg-direction"
|
||||
@@ -399,16 +399,16 @@
|
||||
aria-required="true"
|
||||
@change="onDirectionChange()"
|
||||
>
|
||||
<option value="">— Select —</option>
|
||||
<option value="SOURCE">Source (ingestion)</option>
|
||||
<option value="DESTINATION">Destination (storage)</option>
|
||||
<option value="">{{ _("integrations.direction_placeholder") }}</option>
|
||||
<option value="SOURCE">{{ _("integrations.direction_source") }}</option>
|
||||
<option value="DESTINATION">{{ _("integrations.direction_destination") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Integration type -->
|
||||
<div>
|
||||
<label for="intg-type" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
|
||||
Integration Type <span class="text-red-500" aria-hidden="true">*</span>
|
||||
{{ _("integrations.type_label") }} <span class="text-red-500" aria-hidden="true">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="intg-type"
|
||||
@@ -419,7 +419,7 @@
|
||||
aria-required="true"
|
||||
@change="onTypeChange()"
|
||||
>
|
||||
<option value="">— Select direction first —</option>
|
||||
<option value="">{{ _("integrations.type_placeholder") }}</option>
|
||||
<template x-for="t in availableTypes" :key="t">
|
||||
<option :value="t" x-text="typeLabel(t)"></option>
|
||||
</template>
|
||||
@@ -429,13 +429,13 @@
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label for="intg-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
|
||||
Label <span class="text-red-500" aria-hidden="true">*</span>
|
||||
{{ _("integrations.name_label") }} <span class="text-red-500" aria-hidden="true">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="intg-name"
|
||||
type="text"
|
||||
x-model="form.name"
|
||||
placeholder="e.g. Work Gmail, S3 Archive"
|
||||
placeholder="{{ _('integrations.name_placeholder') }}"
|
||||
required
|
||||
maxlength="255"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm"
|
||||
@@ -448,46 +448,46 @@
|
||||
<!-- IMAP fields -->
|
||||
<template x-if="form.integration_type === 'IMAP'">
|
||||
<div class="space-y-3 border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">IMAP Settings</p>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">{{ _("integrations.imap_settings") }}</p>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="col-span-2">
|
||||
<label for="imap-host" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Host <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="imap-host" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.host_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="imap-host" type="text" x-model="form.config.host" placeholder="imap.example.com" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="imap-port" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Port</label>
|
||||
<label for="imap-port" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.port_label") }}</label>
|
||||
<input id="imap-port" type="number" x-model.number="form.config.port" min="1" max="65535" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="imap-username" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Username <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="imap-username" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.username_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="imap-username" type="text" x-model="form.config.username" placeholder="user@example.com" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="imap-password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Password <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="imap-password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.password_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="imap-password" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.password" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
|
||||
<input type="checkbox" x-model="form.config.use_ssl" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
Use SSL
|
||||
{{ _("integrations.use_ssl") }}
|
||||
</label>
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
|
||||
<input type="checkbox" x-model="form.config.delete_after_process" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
Delete emails after processing
|
||||
{{ _("integrations.delete_emails_label") }}
|
||||
</label>
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
|
||||
<input type="checkbox" x-model="form.config.gmail_apply_labels" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
Apply Gmail labels & star
|
||||
{{ _("integrations.gmail_labels") }}
|
||||
</label>
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
|
||||
<input type="checkbox" x-model="showPassword" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
Show password
|
||||
{{ _("integrations.show_password") }}
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i>
|
||||
Gmail labels & star: when enabled, processed emails are starred and tagged with an "Ingested" label in Gmail. Only applies to Gmail servers.
|
||||
{{ _("integrations.gmail_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -495,36 +495,36 @@
|
||||
<!-- S3 fields -->
|
||||
<template x-if="form.integration_type === 'S3'">
|
||||
<div class="space-y-3 border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">S3 Settings</p>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">{{ _("integrations.s3_settings") }}</p>
|
||||
<div>
|
||||
<label for="s3-bucket" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Bucket <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="s3-bucket" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.bucket_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="s3-bucket" type="text" x-model="form.config.bucket" placeholder="my-bucket" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label for="s3-region" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Region</label>
|
||||
<label for="s3-region" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.region_label") }}</label>
|
||||
<input id="s3-region" type="text" x-model="form.config.region" placeholder="us-east-1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="s3-prefix" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder Prefix</label>
|
||||
<label for="s3-prefix" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.folder_prefix_label") }}</label>
|
||||
<input id="s3-prefix" type="text" x-model="form.config.folder_prefix" placeholder="documents/" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="s3-endpoint" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Endpoint URL <span class="text-gray-400">(optional, for S3-compatible)</span></label>
|
||||
<label for="s3-endpoint" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.endpoint_label") }} <span class="text-gray-400">{{ _("integrations.endpoint_optional") }}</span></label>
|
||||
<input id="s3-endpoint" type="url" x-model="form.config.endpoint_url" placeholder="https://s3.example.com" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="s3-key" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Access Key ID <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="s3-key" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.access_key_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="s3-key" type="text" x-model="form.credentials.access_key_id" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="s3-secret" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Secret Access Key <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="s3-secret" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.secret_key_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="s3-secret" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.secret_access_key" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
|
||||
<input type="checkbox" x-model="showPassword" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
Show secrets
|
||||
{{ _("integrations.show_secrets") }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
@@ -534,24 +534,24 @@
|
||||
<div class="space-y-3 border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider" x-text="form.integration_type === 'NEXTCLOUD' ? 'Nextcloud Settings' : 'WebDAV Settings'"></p>
|
||||
<div>
|
||||
<label for="webdav-url" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">URL <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="webdav-url" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.webdav_url_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="webdav-url" type="url" x-model="form.config.url" placeholder="https://cloud.example.com/remote.php/dav/files/user/" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="webdav-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder Path</label>
|
||||
<label for="webdav-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.folder_path_label") }}</label>
|
||||
<input id="webdav-folder" type="text" x-model="form.config.folder" placeholder="/Documents" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="webdav-user" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Username <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="webdav-user" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.username_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="webdav-user" type="text" x-model="form.credentials.username" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="webdav-pass" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Password <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="webdav-pass" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.password_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="webdav-pass" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.password" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
|
||||
<input type="checkbox" x-model="showPassword" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
Show password
|
||||
{{ _("integrations.show_password") }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
@@ -562,29 +562,29 @@
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider" x-text="form.integration_type + ' Settings'"></p>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="col-span-2">
|
||||
<label for="ftp-host" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Host <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="ftp-host" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.host_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="ftp-host" type="text" x-model="form.config.host" placeholder="ftp.example.com" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="ftp-port" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Port</label>
|
||||
<label for="ftp-port" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.port_label") }}</label>
|
||||
<input id="ftp-port" type="number" x-model.number="form.config.port" :placeholder="form.integration_type === 'SFTP' ? '22' : '21'" min="1" max="65535" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="ftp-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Remote Path</label>
|
||||
<label for="ftp-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.remote_path_label") }}</label>
|
||||
<input id="ftp-folder" type="text" x-model="form.config.folder" placeholder="/upload" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="ftp-user" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Username <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="ftp-user" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.username_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="ftp-user" type="text" x-model="form.credentials.username" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="ftp-pass" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Password <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="ftp-pass" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.password_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="ftp-pass" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.password" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
|
||||
<input type="checkbox" x-model="showPassword" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
Show password
|
||||
{{ _("integrations.show_password") }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
@@ -594,13 +594,12 @@
|
||||
<div class="space-y-3 border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider" x-text="typeLabel(form.integration_type) + ' Settings'"></p>
|
||||
<div>
|
||||
<label for="oauth-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder <span class="text-gray-400">(optional)</span></label>
|
||||
<label for="oauth-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.oauth_folder_label") }} <span class="text-gray-400">{{ _("integrations.folder_optional") }}</span></label>
|
||||
<input id="oauth-folder" type="text" x-model="form.config.folder" placeholder="/DocuElevate" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<div class="bg-blue-50 dark:bg-blue-900/30 rounded-md p-3 text-sm text-blue-700 dark:text-blue-300">
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i>
|
||||
Save this integration first, then use the <strong>Authorize</strong> button to complete the OAuth flow.
|
||||
Your credentials will be stored securely in your personal integration record.
|
||||
{{ _("integrations.oauth_hint") }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -608,9 +607,9 @@
|
||||
<!-- Email (destination) fields -->
|
||||
<template x-if="form.integration_type === 'EMAIL'">
|
||||
<div class="space-y-3 border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Email Forward Settings</p>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">{{ _("integrations.email_settings") }}</p>
|
||||
<div>
|
||||
<label for="email-to" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Recipient Email <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="email-to" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.recipient_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="email-to" type="email" x-model="form.config.recipient" placeholder="archive@example.com" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -619,11 +618,11 @@
|
||||
<!-- Watch Folder fields -->
|
||||
<template x-if="form.integration_type === 'WATCH_FOLDER'">
|
||||
<div class="space-y-3 border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Watch Folder Settings</p>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">{{ _("integrations.watch_folder_settings") }}</p>
|
||||
<div>
|
||||
<label for="wf-source-type" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Source Type <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-source-type" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.source_type_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<select id="wf-source-type" x-model="form.config.source_type" @change="onWatchFolderSourceTypeChange()" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true">
|
||||
<option value="local">Local Filesystem</option>
|
||||
<option value="local">{{ _("integrations.source_local") }}</option>
|
||||
<option value="s3">Amazon S3</option>
|
||||
<option value="dropbox">Dropbox</option>
|
||||
<option value="google_drive">Google Drive</option>
|
||||
@@ -636,7 +635,7 @@
|
||||
<!-- Local filesystem fields -->
|
||||
<template x-if="form.config.source_type === 'local'">
|
||||
<div>
|
||||
<label for="wf-path" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder Path <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-path" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.folder_path_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-path" type="text" x-model="form.config.folder_path" placeholder="/data/inbox" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -646,29 +645,29 @@
|
||||
<div class="space-y-3">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label for="wf-s3-bucket" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Bucket <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-s3-bucket" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.bucket_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-s3-bucket" type="text" x-model="form.config.bucket" placeholder="my-bucket" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="wf-s3-region" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Region</label>
|
||||
<label for="wf-s3-region" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.region_label") }}</label>
|
||||
<input id="wf-s3-region" type="text" x-model="form.config.region" placeholder="us-east-1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="wf-s3-prefix" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Prefix (folder path)</label>
|
||||
<label for="wf-s3-prefix" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.s3_prefix_label") }}</label>
|
||||
<input id="wf-s3-prefix" type="text" x-model="form.config.prefix" placeholder="inbox/" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="wf-s3-endpoint" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Endpoint URL <span class="text-xs text-gray-400">(optional, for S3-compatible)</span></label>
|
||||
<label for="wf-s3-endpoint" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.endpoint_label") }} <span class="text-xs text-gray-400">{{ _("integrations.endpoint_optional") }}</span></label>
|
||||
<input id="wf-s3-endpoint" type="text" x-model="form.config.endpoint_url" placeholder="https://s3.example.com" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label for="wf-s3-ak" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Access Key ID <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-s3-ak" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.access_key_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-s3-ak" type="text" x-model="form.credentials.access_key_id" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="wf-s3-sk" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Secret Access Key <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-s3-sk" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.secret_key_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-s3-sk" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.secret_access_key" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -679,7 +678,7 @@
|
||||
<template x-if="form.config.source_type === 'dropbox'">
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="wf-dbx-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder Path <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-dbx-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.folder_path_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-dbx-folder" type="text" x-model="form.config.folder_path" placeholder="/Inbox/Scanner" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -717,7 +716,7 @@
|
||||
<template x-if="form.config.source_type === 'onedrive'">
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="wf-od-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder Path <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-od-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.folder_path_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-od-folder" type="text" x-model="form.config.folder_path" placeholder="/Documents/Inbox" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -741,20 +740,20 @@
|
||||
<template x-if="form.config.source_type === 'nextcloud'">
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="wf-nc-url" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Nextcloud URL <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-nc-url" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.nextcloud_url_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-nc-url" type="url" x-model="form.config.url" placeholder="https://cloud.example.com" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="wf-nc-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder Path <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-nc-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.folder_path_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-nc-folder" type="text" x-model="form.config.folder_path" placeholder="/Documents/Inbox" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label for="wf-nc-user" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Username <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-nc-user" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.username_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-nc-user" type="text" x-model="form.credentials.username" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="wf-nc-pass" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Password <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-nc-pass" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.password_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-nc-pass" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.password" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -765,20 +764,20 @@
|
||||
<template x-if="form.config.source_type === 'webdav'">
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="wf-dav-url" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">WebDAV URL <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-dav-url" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.webdav_url_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-dav-url" type="url" x-model="form.config.url" placeholder="https://webdav.example.com/dav/" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="wf-dav-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Folder Path <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-dav-folder" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.folder_path_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-dav-folder" type="text" x-model="form.config.folder_path" placeholder="/remote.php/webdav/Inbox" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label for="wf-dav-user" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Username <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-dav-user" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.username_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-dav-user" type="text" x-model="form.credentials.username" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="wf-dav-pass" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Password <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="wf-dav-pass" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.password_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="wf-dav-pass" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.password" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -789,12 +788,12 @@
|
||||
<div class="flex flex-wrap items-center gap-4 pt-2">
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
|
||||
<input type="checkbox" x-model="form.config.delete_after_process" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
Delete files after processing
|
||||
{{ _("integrations.delete_files_label") }}
|
||||
</label>
|
||||
<template x-if="form.config.source_type !== 'local'">
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
|
||||
<input type="checkbox" x-model="showPassword" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
Show secrets
|
||||
{{ _("integrations.show_secrets") }}
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
@@ -804,18 +803,18 @@
|
||||
<!-- Paperless fields -->
|
||||
<template x-if="form.integration_type === 'PAPERLESS'">
|
||||
<div class="space-y-3 border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Paperless NGX Settings</p>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">{{ _("integrations.paperless_settings") }}</p>
|
||||
<div>
|
||||
<label for="paperless-url" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">URL <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="paperless-url" type="url" x-model="form.config.url" placeholder="https://paperless.example.com" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" aria-required="true" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="paperless-token" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">API Token <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<label for="paperless-token" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ _("integrations.api_token_label") }} <span class="text-red-500" aria-hidden="true">*</span></label>
|
||||
<input id="paperless-token" :type="showPassword ? 'text' : 'password'" x-model="form.credentials.api_token" :placeholder="editingIntegration ? '(unchanged if blank)' : ''" :required="!editingIntegration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-sm" />
|
||||
</div>
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
|
||||
<input type="checkbox" x-model="showPassword" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
Show token
|
||||
{{ _("integrations.show_token") }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
@@ -824,38 +823,33 @@
|
||||
<template x-if="form.integration_type === 'WEBHOOK'">
|
||||
<div class="space-y-4 border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||
<p class="text-xs font-semibold text-purple-500 uppercase tracking-wider">
|
||||
<i class="fas fa-bolt mr-1" aria-hidden="true"></i> Webhook Ingestion
|
||||
<i class="fas fa-bolt mr-1" aria-hidden="true"></i> {{ _("integrations.webhook_heading") }}
|
||||
</p>
|
||||
|
||||
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<h4 class="text-sm font-semibold text-blue-800 dark:text-blue-200 mb-2">
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i>
|
||||
How Webhook Ingestion Works
|
||||
{{ _("integrations.webhook_how_heading") }}
|
||||
</h4>
|
||||
<p class="text-sm text-blue-700 dark:text-blue-300 leading-relaxed">
|
||||
A webhook integration allows external systems to push documents directly into DocuElevate
|
||||
via the REST API. Instead of DocuElevate polling for new files (like IMAP), <strong>your
|
||||
application sends files to DocuElevate</strong> using an HTTP request with an API token for
|
||||
authentication.
|
||||
{{ _("integrations.webhook_how_text") }}
|
||||
</p>
|
||||
<p class="text-sm text-blue-700 dark:text-blue-300 leading-relaxed mt-2">
|
||||
This is ideal for <strong>CI/CD pipelines</strong>, <strong>automation scripts</strong>,
|
||||
<strong>scanner integrations</strong>, or any system that generates documents and needs to
|
||||
send them for processing.
|
||||
{{ _("integrations.webhook_ideal_text") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 dark:bg-gray-750 rounded-lg p-4">
|
||||
<h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">
|
||||
<i class="fas fa-terminal mr-1" aria-hidden="true"></i>
|
||||
Quick Start
|
||||
{{ _("integrations.webhook_quick_start") }}
|
||||
</h4>
|
||||
<ol class="text-sm text-gray-600 dark:text-gray-400 space-y-2 list-decimal list-inside">
|
||||
<li>
|
||||
Go to <a href="/api-tokens" class="text-indigo-600 hover:underline font-medium">API Tokens</a>
|
||||
and create a personal token.
|
||||
{% set api_tokens_link %}<a href="/api-tokens" class="text-indigo-600 hover:underline font-medium">{{ _("nav.api_tokens") }}</a>{% endset %}
|
||||
{{ _("integrations.webhook_step1", api_tokens_link=api_tokens_link) | safe }}
|
||||
</li>
|
||||
<li>Use the token to upload documents via the API:</li>
|
||||
<li>{{ _("integrations.webhook_upload_with_token") }}</li>
|
||||
</ol>
|
||||
|
||||
<div class="mt-3 relative">
|
||||
@@ -901,9 +895,7 @@ print(response.json())</code></pre>
|
||||
<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3">
|
||||
<p class="text-xs text-yellow-800 dark:text-yellow-300">
|
||||
<i class="fas fa-shield-alt mr-1" aria-hidden="true"></i>
|
||||
<strong>Security tip:</strong> Create a dedicated API token for each integration and
|
||||
revoke it immediately if compromised. Tokens can be managed on the
|
||||
<a href="/api-tokens" class="underline font-medium">API Tokens</a> page.
|
||||
{{ _("integrations.webhook_security_tip") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -914,7 +906,7 @@ print(response.json())</code></pre>
|
||||
<div class="space-y-3 border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider" x-text="form.integration_type + ' Settings'"></p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Configuration for this integration type can be provided as JSON after creation via the API.
|
||||
{{ _("integrations.generic_settings_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -923,7 +915,7 @@ print(response.json())</code></pre>
|
||||
<div class="flex items-center gap-2 pt-2">
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
|
||||
<input type="checkbox" x-model="form.is_active" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
|
||||
Active
|
||||
{{ _("integrations.active_label") }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -934,7 +926,7 @@ print(response.json())</code></pre>
|
||||
:class="testResult.success ? 'bg-green-50 border-green-400 text-green-800 dark:bg-opacity-10' : 'bg-red-50 border-red-400 text-red-800 dark:bg-opacity-10'"
|
||||
role="status"
|
||||
>
|
||||
<p class="font-medium" x-text="testResult.success ? 'Connection successful' : 'Connection failed'"></p>
|
||||
<p class="font-medium" x-text="testResult.success ? '{{ _('integrations.connection_success') }}' : '{{ _('integrations.connection_failed') }}'"></p>
|
||||
<p class="text-xs mt-0.5" x-text="testResult.message"></p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -962,7 +954,7 @@ print(response.json())</code></pre>
|
||||
<template x-if="!testing">
|
||||
<i class="fas fa-plug mr-2" aria-hidden="true"></i>
|
||||
</template>
|
||||
Test Connection
|
||||
{{ _("common.test_connection") }}
|
||||
</button>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@@ -971,7 +963,7 @@ print(response.json())</code></pre>
|
||||
class="px-4 py-2 text-sm font-medium rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
|
||||
style="min-height:40px;"
|
||||
>
|
||||
Cancel
|
||||
{{ _("common.cancel") }}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
@@ -982,7 +974,7 @@ print(response.json())</code></pre>
|
||||
<template x-if="saving">
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i>
|
||||
</template>
|
||||
<span x-text="editingIntegration ? 'Update' : 'Save'"></span>
|
||||
<span x-text="editingIntegration ? '{{ _('common.update') }}' : '{{ _('common.save') }}'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1003,12 +995,12 @@ print(response.json())</code></pre>
|
||||
>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-sm p-6" @click.stop>
|
||||
<h2 id="delete-modal-title" class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Delete Integration?
|
||||
{{ _("integrations.delete_confirm_title") }}
|
||||
</h2>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">
|
||||
Are you sure you want to delete
|
||||
{{ _("integrations.delete_confirm_are_you_sure") }}
|
||||
<strong x-text="integrationToDelete ? integrationToDelete.name : ''"></strong>?
|
||||
This action cannot be undone.
|
||||
{{ _("integrations.delete_confirm_undone") }}
|
||||
</p>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
@@ -1017,7 +1009,7 @@ print(response.json())</code></pre>
|
||||
class="px-4 py-2 text-sm font-medium rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
|
||||
style="min-height:40px;"
|
||||
>
|
||||
Cancel
|
||||
{{ _("common.cancel") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -1029,7 +1021,7 @@ print(response.json())</code></pre>
|
||||
<template x-if="deleting">
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i>
|
||||
</template>
|
||||
Delete
|
||||
{{ _("common.delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,36 +1,35 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}DocuElevate - License{% endblock %}
|
||||
{% block title %}{{ _("license.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-2xl font-bold mb-4">License Information</h1>
|
||||
<h1 class="text-2xl font-bold mb-4">{{ _("license.heading") }}</h1>
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg p-6 mb-6">
|
||||
<h2 class="text-xl font-semibold mb-4">Apache License 2.0</h2>
|
||||
<h2 class="text-xl font-semibold mb-4">{{ _("license.apache_heading") }}</h2>
|
||||
|
||||
<div class="prose">
|
||||
<pre class="whitespace-pre-wrap text-sm font-mono bg-gray-50 p-4 rounded border overflow-auto max-h-96 mb-4">{{ license_text }}</pre>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-gray-600">
|
||||
DocuElevate is distributed under the Apache License 2.0, which is a permissive
|
||||
open-source software license that allows you to use, modify, distribute, and
|
||||
contribute to the project.
|
||||
{{ _("license.apache_description") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg p-6">
|
||||
<h2 class="text-xl font-semibold mb-4">Related Information</h2>
|
||||
<h2 class="text-xl font-semibold mb-4">{{ _("license.related_heading") }}</h2>
|
||||
<p class="mb-3 text-gray-600">
|
||||
While this license governs the use of our software, please also review our
|
||||
<a href="/terms" class="text-blue-600 hover:underline">Terms of Service</a> and
|
||||
<a href="/privacy" class="text-blue-600 hover:underline">Privacy Policy</a> for
|
||||
information about using the DocuElevate service.
|
||||
{{ _("license.related_p1_pre") }}
|
||||
<a href="/terms" class="text-blue-600 hover:underline">{{ _("license.related_terms_link") }}</a>
|
||||
{{ _("license.related_and") }}
|
||||
<a href="/privacy" class="text-blue-600 hover:underline">{{ _("license.related_privacy_link") }}</a>
|
||||
{{ _("license.related_p1_post") }}
|
||||
</p>
|
||||
<p class="text-gray-600">
|
||||
For more information about DocuElevate, please visit the
|
||||
<a href="/about" class="text-blue-600 hover:underline">About page</a>.
|
||||
{{ _("license.related_p2_pre") }}
|
||||
<a href="/about" class="text-blue-600 hover:underline">{{ _("license.related_about_link") }}</a>{{ _("license.related_p2_post") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DocuElevate - Login</title>
|
||||
<title>{{ _("app.name") }} - {{ _("auth.login_title") }}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
@@ -12,10 +12,10 @@
|
||||
<body class="bg-gray-100 h-screen flex items-center justify-center">
|
||||
<main class="bg-white rounded-lg shadow-lg p-8 max-w-md w-full" role="main">
|
||||
<div class="flex justify-center mb-6">
|
||||
<img src="/static/images/logo_writing.svg" alt="DocuElevate Logo" class="h-16">
|
||||
<img src="/static/images/logo_writing.svg" alt="{{ _('auth.logo_alt') }}" class="h-16">
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-bold text-center text-gray-800 mb-6">Welcome to DocuElevate</h1>
|
||||
<h1 class="text-2xl font-bold text-center text-gray-800 mb-6">{{ _("dashboard.welcome") }}</h1>
|
||||
|
||||
{% if error %}
|
||||
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6" role="alert">
|
||||
@@ -31,33 +31,33 @@
|
||||
|
||||
<!-- Local authentication form -->
|
||||
<div class="mb-8" id="local-auth">
|
||||
<h2 class="text-lg font-semibold mb-4 text-gray-700">Sign in with username</h2>
|
||||
<h2 class="text-lg font-semibold mb-4 text-gray-700">{{ _("auth.sign_in_with_username") }}</h2>
|
||||
<form method="POST" action="/auth" class="space-y-4">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token | default('', true) }}">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-gray-700">Username or Email</label>
|
||||
<label for="username" class="block text-sm font-medium text-gray-700">{{ _("auth.username_or_email") }}</label>
|
||||
<input type="text" id="username" name="username" required
|
||||
autocomplete="username"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700">{{ _("auth.password_label") }}</label>
|
||||
<input type="password" id="password" name="password" required
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
Sign in
|
||||
{{ _("auth.sign_in") }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="mt-3 text-center space-x-3">
|
||||
<a href="/forgot-password" class="text-sm text-blue-600 hover:text-blue-500">
|
||||
Forgot password?
|
||||
{{ _("auth.forgot_password") }}
|
||||
</a>
|
||||
<span class="text-gray-300" aria-hidden="true">|</span>
|
||||
<a href="/forgot-username" class="text-sm text-blue-600 hover:text-blue-500">
|
||||
Forgot username?
|
||||
{{ _("auth.forgot_username") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,37 +69,64 @@
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm">
|
||||
<span class="px-2 bg-white text-gray-500">Or continue with</span>
|
||||
<span class="px-2 bg-white text-gray-500">{{ _("auth.or_continue_with") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid grid-cols-1 gap-3">
|
||||
<a href="/oauth-login"
|
||||
class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
<span class="sr-only">Sign in with SSO</span>
|
||||
class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
style="min-height:44px; min-width:44px">
|
||||
<span class="sr-only">{{ _("auth.sign_in_sso") }}</span>
|
||||
<i class="fas fa-lock mr-2" aria-hidden="true"></i>
|
||||
{{ oauth_provider_name }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if social_providers %}
|
||||
<!-- Social login options -->
|
||||
{% if not show_oauth %}
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm">
|
||||
<span class="px-2 bg-white text-gray-500">{{ _("auth.or_continue_with") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-6 grid grid-cols-1 gap-3">
|
||||
{% for provider_key, provider in social_providers.items() %}
|
||||
<a href="/social-login/{{ provider_key }}"
|
||||
class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
style="min-height:44px; min-width:44px"
|
||||
aria-label="{{ _('auth.sign_in_with') }} {{ provider.name }}">
|
||||
<i class="{{ provider.icon }} mr-2" aria-hidden="true"></i>
|
||||
{{ _("auth.sign_in_with") }} {{ provider.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-8 text-center">
|
||||
<a href="/" class="text-sm font-medium text-blue-600 hover:text-blue-500">
|
||||
Return to Home
|
||||
{{ _("auth.return_home") }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if allow_signup %}
|
||||
<div class="mt-4 text-center">
|
||||
<span class="text-sm text-gray-600">Don't have an account?</span>
|
||||
<span class="text-sm text-gray-600">{{ _("auth.no_account") }}</span>
|
||||
<a href="/signup" class="ml-1 text-sm font-medium text-indigo-600 hover:text-indigo-500">
|
||||
Create account
|
||||
{{ _("auth.create_account") }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</main>
|
||||
<div class="fixed bottom-4 text-center w-full text-xs text-gray-500">
|
||||
DocuElevate {{ app_version|default('', true) }}
|
||||
{{ _("app.name") }} {{ app_version|default('', true) }}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Processing Pipelines – DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("pipelines.title") }} – DocuElevate{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8" x-data="pipelinesApp()" x-init="init()">
|
||||
@@ -9,13 +9,13 @@
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<i class="fas fa-project-diagram text-blue-500" aria-hidden="true"></i>
|
||||
Processing Pipelines
|
||||
{{ _("pipelines.page_title") }}
|
||||
</h1>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">
|
||||
Define and manage custom document processing workflows.
|
||||
System pipelines (created by admins) are shown with a
|
||||
<span class="text-xs font-semibold text-purple-700 bg-purple-50 border border-purple-200 rounded px-1">System</span>
|
||||
badge and are visible to all users.
|
||||
{{ _("pipelines.subtitle_intro") }}
|
||||
{{ _("pipelines.subtitle_system_pre") }}
|
||||
<span class="text-xs font-semibold text-purple-700 bg-purple-50 border border-purple-200 rounded px-1">{{ _("pipelines.system_label") }}</span>
|
||||
{{ _("pipelines.subtitle_system_post") }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@@ -24,7 +24,7 @@
|
||||
class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i> New Pipeline
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i> {{ _("pipelines.new_pipeline_btn") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<template x-if="loading">
|
||||
<div class="text-center py-12 text-gray-400">
|
||||
<i class="fas fa-spinner fa-spin text-3xl mb-3" aria-hidden="true"></i>
|
||||
<p>Loading pipelines…</p>
|
||||
<p>{{ _("pipelines.loading") }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -59,15 +59,15 @@
|
||||
<template x-if="!loading && pipelines.length === 0">
|
||||
<div class="text-center py-16 bg-white dark:bg-gray-800 rounded-lg shadow">
|
||||
<i class="fas fa-project-diagram text-5xl text-gray-300 mb-4" aria-hidden="true"></i>
|
||||
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">No pipelines yet</h2>
|
||||
<p class="text-gray-500 dark:text-gray-400 mb-6">Create your first pipeline to define custom document processing workflows.</p>
|
||||
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">{{ _("pipelines.empty_state") }}</h2>
|
||||
<p class="text-gray-500 dark:text-gray-400 mb-6">{{ _("pipelines.empty_state_hint") }}</p>
|
||||
<button
|
||||
type="button"
|
||||
@click="openCreatePipelineModal()"
|
||||
class="inline-flex items-center px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i> Create Pipeline
|
||||
<i class="fas fa-plus mr-2" aria-hidden="true"></i> {{ _("pipelines.create") }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -84,13 +84,13 @@
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white" x-text="pipeline.name"></h2>
|
||||
<!-- Badges -->
|
||||
<template x-if="pipeline.owner_id === null">
|
||||
<span class="text-xs font-semibold text-purple-700 bg-purple-50 border border-purple-200 rounded px-1.5 py-0.5">System</span>
|
||||
<span class="text-xs font-semibold text-purple-700 bg-purple-50 border border-purple-200 rounded px-1.5 py-0.5">{{ _("pipelines.system_label") }}</span>
|
||||
</template>
|
||||
<template x-if="pipeline.is_default">
|
||||
<span class="text-xs font-semibold text-green-700 bg-green-50 border border-green-200 rounded px-1.5 py-0.5">Default</span>
|
||||
<span class="text-xs font-semibold text-green-700 bg-green-50 border border-green-200 rounded px-1.5 py-0.5">{{ _("pipelines.default_label") }}</span>
|
||||
</template>
|
||||
<template x-if="!pipeline.is_active">
|
||||
<span class="text-xs font-semibold text-gray-500 bg-gray-100 border border-gray-200 rounded px-1.5 py-0.5">Inactive</span>
|
||||
<span class="text-xs font-semibold text-gray-500 bg-gray-100 border border-gray-200 rounded px-1.5 py-0.5">{{ _("pipelines.inactive_label") }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
style="min-height:36px;"
|
||||
:aria-label="`Edit pipeline ${pipeline.name}`"
|
||||
>
|
||||
<i class="fas fa-pencil-alt mr-1" aria-hidden="true"></i> Edit
|
||||
<i class="fas fa-pencil-alt mr-1" aria-hidden="true"></i> {{ _("common.edit") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -124,7 +124,7 @@
|
||||
style="min-height:36px;"
|
||||
:aria-label="`Delete pipeline ${pipeline.name}`"
|
||||
>
|
||||
<i class="fas fa-trash mr-1" aria-hidden="true"></i> Delete
|
||||
<i class="fas fa-trash mr-1" aria-hidden="true"></i> {{ _("common.delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -139,7 +139,7 @@
|
||||
|
||||
<!-- Step list -->
|
||||
<template x-if="(pipeline.steps || []).length === 0">
|
||||
<p class="text-sm text-gray-400 italic mb-3">No steps defined. Add a step to start building your pipeline.</p>
|
||||
<p class="text-sm text-gray-400 italic mb-3">{{ _("pipelines.no_steps") }}</p>
|
||||
</template>
|
||||
|
||||
<template x-if="(pipeline.steps || []).length > 0">
|
||||
@@ -153,7 +153,7 @@
|
||||
<p class="text-xs text-gray-400 truncate" x-text="step.step_type"></p>
|
||||
</div>
|
||||
<template x-if="!step.enabled">
|
||||
<span class="text-xs text-gray-400 bg-gray-200 rounded px-1.5 py-0.5 flex-shrink-0">Disabled</span>
|
||||
<span class="text-xs text-gray-400 bg-gray-200 rounded px-1.5 py-0.5 flex-shrink-0">{{ _("pipelines.disabled_label") }}</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
@@ -201,7 +201,7 @@
|
||||
style="min-height:36px;"
|
||||
:aria-label="`Add step to ${pipeline.name}`"
|
||||
>
|
||||
<i class="fas fa-plus mr-1" aria-hidden="true"></i> Add Step
|
||||
<i class="fas fa-plus mr-1" aria-hidden="true"></i> {{ _("pipelines.add_step_btn") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -241,7 +241,7 @@
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label for="pipelineName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Name <span aria-hidden="true" class="text-red-500">*</span>
|
||||
{{ _("common.name") }} <span aria-hidden="true" class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="pipelineName"
|
||||
@@ -250,21 +250,21 @@
|
||||
maxlength="255"
|
||||
required
|
||||
class="w-full border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="My pipeline"
|
||||
placeholder="{{ _('pipelines.name_placeholder') }}"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<label for="pipelineDesc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
|
||||
<label for="pipelineDesc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _("common.description") }}</label>
|
||||
<textarea
|
||||
id="pipelineDesc"
|
||||
x-model="pipelineModal.form.description"
|
||||
rows="2"
|
||||
maxlength="4096"
|
||||
class="w-full border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:text-white resize-none"
|
||||
placeholder="Optional description"
|
||||
placeholder="{{ _('pipelines.description_placeholder') }}"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
@@ -276,7 +276,7 @@
|
||||
x-model="pipelineModal.form.is_default"
|
||||
class="rounded border-gray-300 text-blue-600 focus:ring-blue-400"
|
||||
/>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">Set as my default pipeline</span>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">{{ _("pipelines.set_default") }}</span>
|
||||
</label>
|
||||
<label class="inline-flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
@@ -284,7 +284,7 @@
|
||||
x-model="pipelineModal.form.is_active"
|
||||
class="rounded border-gray-300 text-blue-600 focus:ring-blue-400"
|
||||
/>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">Active</span>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">{{ _("pipelines.active_label") }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -296,7 +296,7 @@
|
||||
x-model="pipelineModal.form.system"
|
||||
class="rounded border-gray-300 text-purple-600 focus:ring-purple-400"
|
||||
/>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">System pipeline (visible to all users)</span>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">{{ _("pipelines.system_pipeline_label") }}</span>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
@@ -310,16 +310,16 @@
|
||||
@click="closePipelineModal()"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50"
|
||||
style="min-height:44px;"
|
||||
>Cancel</button>
|
||||
>{{ _("common.cancel") }}</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="pipelineModal.saving"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-60 rounded-md"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
<template x-if="pipelineModal.saving">
|
||||
<i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i>
|
||||
</template>
|
||||
<template x-if="pipelineModal.saving">
|
||||
<i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i>
|
||||
</template>
|
||||
<span x-text="pipelineModal.editMode ? 'Save Changes' : 'Create'"></span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -358,7 +358,7 @@
|
||||
<!-- Step type -->
|
||||
<div>
|
||||
<label for="stepType" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Step Type <span aria-hidden="true" class="text-red-500">*</span>
|
||||
{{ _("pipelines.step_type_label") }} <span aria-hidden="true" class="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="stepType"
|
||||
@@ -366,7 +366,7 @@
|
||||
:disabled="stepModal.editMode"
|
||||
class="w-full border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<option value="">— select —</option>
|
||||
<option value="">{{ _("common.select_placeholder") }}</option>
|
||||
<template x-for="[key, meta] in Object.entries(stepTypes)" :key="key">
|
||||
<option :value="key" x-text="meta.label"></option>
|
||||
</template>
|
||||
@@ -379,7 +379,7 @@
|
||||
<!-- Custom label -->
|
||||
<div>
|
||||
<label for="stepLabel" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Custom Label <span class="text-gray-400 font-normal">(optional)</span>
|
||||
{{ _("pipelines.custom_label_label") }} <span class="text-gray-400 font-normal">{{ _("pipelines.optional_suffix") }}</span>
|
||||
</label>
|
||||
<input
|
||||
id="stepLabel"
|
||||
@@ -387,7 +387,7 @@
|
||||
x-model="stepModal.form.label"
|
||||
maxlength="255"
|
||||
class="w-full border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="Override the default step name"
|
||||
placeholder="{{ _('pipelines.step_label_placeholder') }}"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
@@ -400,7 +400,7 @@
|
||||
x-model="stepModal.form.config.force_cloud_ocr"
|
||||
class="rounded border-gray-300 text-blue-600 focus:ring-blue-400"
|
||||
/>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">Force cloud OCR (skip local text extraction)</span>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">{{ _("pipelines.force_cloud_ocr_label") }}</span>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
@@ -408,14 +408,14 @@
|
||||
<template x-if="stepModal.form.step_type === 'ocr'">
|
||||
<div>
|
||||
<label for="ocrLanguage" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
OCR Language
|
||||
{{ _("pipelines.ocr_language_label") }}
|
||||
</label>
|
||||
<select
|
||||
id="ocrLanguage"
|
||||
x-model="stepModal.form.config.ocr_language"
|
||||
class="w-full border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:text-white"
|
||||
>
|
||||
<option value="auto">Auto (use system default)</option>
|
||||
<option value="auto">{{ _("pipelines.ocr_auto") }}</option>
|
||||
<option value="ara">Arabic</option>
|
||||
<option value="chi_sim">Chinese (Simplified)</option>
|
||||
<option value="chi_tra">Chinese (Traditional)</option>
|
||||
@@ -446,7 +446,7 @@
|
||||
<option value="vie">Vietnamese</option>
|
||||
</select>
|
||||
<p class="mt-1 text-xs text-gray-400">
|
||||
Overrides the global language setting for Tesseract/EasyOCR. Azure and Mistral auto-detect the language.
|
||||
{{ _("pipelines.ocr_language_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -458,7 +458,7 @@
|
||||
x-model="stepModal.form.enabled"
|
||||
class="rounded border-gray-300 text-blue-600 focus:ring-blue-400"
|
||||
/>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">Enabled</span>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">{{ _("pipelines.enabled_label") }}</span>
|
||||
</label>
|
||||
|
||||
<!-- Error -->
|
||||
@@ -471,7 +471,7 @@
|
||||
@click="closeStepModal()"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50"
|
||||
style="min-height:44px;"
|
||||
>Cancel</button>
|
||||
>{{ _("common.cancel") }}</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="stepModal.saving"
|
||||
@@ -515,13 +515,13 @@
|
||||
@click="confirmModal.open = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50"
|
||||
style="min-height:44px;"
|
||||
>Cancel</button>
|
||||
>{{ _("common.cancel") }}</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="confirmModal.action(); confirmModal.open = false"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md"
|
||||
style="min-height:44px;"
|
||||
>Delete</button>
|
||||
>{{ _("common.delete") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+140
-212
@@ -1,388 +1,316 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Privacy Notice - DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("privacy.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<h1 class="text-4xl font-bold mb-6">DocuElevate – Privacy Notice</h1>
|
||||
<p class="text-sm text-gray-500 mb-8">Last Updated: {{ build_date|default(current_date|default('April 7, 2024')) }}</p>
|
||||
<h1 class="text-4xl font-bold mb-6">{{ _("privacy.heading") }}</h1>
|
||||
<p class="text-sm text-gray-500 mb-8">{{ _("privacy.last_updated") }} {{ build_date|default(current_date|default('April 7, 2024')) }}</p>
|
||||
|
||||
<!-- Table of Contents -->
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
||||
<h2 class="text-lg font-semibold mb-2 text-blue-800">Contents</h2>
|
||||
<h2 class="text-lg font-semibold mb-2 text-blue-800">{{ _("privacy.toc_heading") }}</h2>
|
||||
<ol class="list-decimal list-inside text-blue-700 space-y-1 text-sm">
|
||||
<li><a href="#controller" class="hover:underline">Data Controller</a></li>
|
||||
<li><a href="#scope" class="hover:underline">Scope of this Privacy Notice</a></li>
|
||||
<li><a href="#data-collection" class="hover:underline">Data Collection & Purposes</a></li>
|
||||
<li><a href="#data-minimization" class="hover:underline">Data Minimization & Purpose Limitation</a></li>
|
||||
<li><a href="#cookies" class="hover:underline">Use of Cookies & Similar Technologies</a></li>
|
||||
<li><a href="#third-parties" class="hover:underline">Third-Party Services</a></li>
|
||||
<li><a href="#international-transfers" class="hover:underline">International Data Transfers</a></li>
|
||||
<li><a href="#retention" class="hover:underline">Data Retention</a></li>
|
||||
<li><a href="#security" class="hover:underline">Data Security</a></li>
|
||||
<li><a href="#gdpr-rights" class="hover:underline">Your Rights (EU / EEA / UK / Switzerland)</a></li>
|
||||
<li><a href="#us-rights" class="hover:underline">Additional Rights – United States (CCPA/CPRA)</a></li>
|
||||
<li><a href="#canada-rights" class="hover:underline">Additional Rights – Canada (PIPEDA / Law 25)</a></li>
|
||||
<li><a href="#latam-rights" class="hover:underline">Additional Rights – Latin America (LGPD & others)</a></li>
|
||||
<li><a href="#apj-rights" class="hover:underline">Additional Rights – Asia-Pacific & Japan</a></li>
|
||||
<li><a href="#ukraine-rights" class="hover:underline">Additional Rights – Ukraine</a></li>
|
||||
<li><a href="#updates" class="hover:underline">Updates to this Privacy Notice</a></li>
|
||||
<li><a href="#controller" class="hover:underline">{{ _("privacy.toc_1") }}</a></li>
|
||||
<li><a href="#scope" class="hover:underline">{{ _("privacy.toc_2") }}</a></li>
|
||||
<li><a href="#data-collection" class="hover:underline">{{ _("privacy.toc_3") }}</a></li>
|
||||
<li><a href="#data-minimization" class="hover:underline">{{ _("privacy.toc_4") }}</a></li>
|
||||
<li><a href="#cookies" class="hover:underline">{{ _("privacy.toc_5") }}</a></li>
|
||||
<li><a href="#third-parties" class="hover:underline">{{ _("privacy.toc_6") }}</a></li>
|
||||
<li><a href="#international-transfers" class="hover:underline">{{ _("privacy.toc_7") }}</a></li>
|
||||
<li><a href="#retention" class="hover:underline">{{ _("privacy.toc_8") }}</a></li>
|
||||
<li><a href="#security" class="hover:underline">{{ _("privacy.toc_9") }}</a></li>
|
||||
<li><a href="#gdpr-rights" class="hover:underline">{{ _("privacy.toc_10") }}</a></li>
|
||||
<li><a href="#us-rights" class="hover:underline">{{ _("privacy.toc_11") }}</a></li>
|
||||
<li><a href="#canada-rights" class="hover:underline">{{ _("privacy.toc_12") }}</a></li>
|
||||
<li><a href="#latam-rights" class="hover:underline">{{ _("privacy.toc_13") }}</a></li>
|
||||
<li><a href="#apj-rights" class="hover:underline">{{ _("privacy.toc_14") }}</a></li>
|
||||
<li><a href="#ukraine-rights" class="hover:underline">{{ _("privacy.toc_15") }}</a></li>
|
||||
<li><a href="#updates" class="hover:underline">{{ _("privacy.toc_16") }}</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div id="controller" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">1. Data Controller</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s1_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
The controller responsible for processing your personal data under the EU General Data Protection Regulation (GDPR) and equivalent privacy laws worldwide is:
|
||||
{{ _("privacy.s1_p1") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>Christian Louis IT Beratung</strong><br />
|
||||
Alter Steinweg 3, 20459 Hamburg, Germany
|
||||
<strong>{{ _("privacy.s1_company") }}</strong><br />
|
||||
{{ _("privacy.s1_address") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
Contact Email: <a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>
|
||||
{{ _("privacy.s1_contact_label") }} <a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
For all privacy-related requests (access, deletion, rectification, opt-out, or complaints), please contact us at the email address above.
|
||||
We will respond within 30 days (or the period prescribed by applicable law).
|
||||
{{ _("privacy.s1_p3") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="scope" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">2. Scope of this Privacy Notice</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s2_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
This notice applies to the DocuElevate web application, hosted at
|
||||
{{ _("privacy.s2_p1_pre") }}
|
||||
<a href="{{ request.url.scheme }}://{{ request.url.netloc }}/" class="text-blue-600 hover:underline" target="_blank">{{ request.url.scheme }}://{{ request.url.netloc }}/</a>.
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
It covers all users globally, including those in the European Union (EU), European Economic Area (EEA),
|
||||
Germany, United Kingdom (UK), Switzerland, Ukraine, United States (US), Canada, Latin America (Latam),
|
||||
Asia-Pacific, and Japan. Market-specific disclosures are provided in dedicated sections below.
|
||||
{{ _("privacy.s2_p2") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="data-collection" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">3. Data Collection & Purposes</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s3_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>User Authentication:</strong> We use OAuth 2.0 (Google, Dropbox, Microsoft/OneDrive) and optional
|
||||
local authentication. Through OAuth, we may receive your name, email address, and profile picture.
|
||||
<strong>{{ _("privacy.s3_auth_label") }}</strong> {{ _("privacy.s3_auth_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>Document Processing:</strong> Documents you upload are processed for OCR (optical character recognition),
|
||||
metadata extraction, and storage to your chosen cloud provider. Document content is processed only for the
|
||||
purpose you initiate and is not stored beyond what is operationally necessary.
|
||||
<strong>{{ _("privacy.s3_doc_label") }}</strong> {{ _("privacy.s3_doc_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>Audit Logs:</strong> We maintain limited audit logs (action type, timestamp, user identifier) to
|
||||
ensure service integrity and security. These logs do not include document content.
|
||||
<strong>{{ _("privacy.s3_audit_label") }}</strong> {{ _("privacy.s3_audit_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>Legal Basis (GDPR Art. 6):</strong> Our primary legal bases for processing are:
|
||||
<strong>{{ _("privacy.s3_legal_label") }}</strong> {{ _("privacy.s3_legal_body") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
|
||||
<li class="mb-1">(1)(b) Performance of a contract: to provide the DocuElevate service you have requested.</li>
|
||||
<li class="mb-1">(1)(c) Legal obligation: to comply with applicable laws and regulations.</li>
|
||||
<li>(1)(f) Legitimate interests: ensuring the security of the service and preventing fraud.</li>
|
||||
<li class="mb-1">{{ _("privacy.s3_li1") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s3_li2") }}</li>
|
||||
<li>{{ _("privacy.s3_li3") }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="data-minimization" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">4. Data Minimization & Purpose Limitation</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s4_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
DocuElevate is designed with data minimization as a core principle (GDPR Art. 5(1)(c)):
|
||||
{{ _("privacy.s4_p1") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
|
||||
<li class="mb-1">We collect only the minimum personal data required to operate the service.</li>
|
||||
<li class="mb-1">Document content is processed strictly for the purpose you initiate (OCR, storage, metadata extraction).
|
||||
We do not use your documents to train AI models or for any secondary purpose.</li>
|
||||
<li class="mb-1">No advertising, behavioural tracking, or profiling is performed.</li>
|
||||
<li class="mb-1">No tracking cookies or analytics scripts are loaded.</li>
|
||||
<li>Third-party AI services (e.g., OpenAI, Azure Document Intelligence) are invoked only when you initiate
|
||||
document processing, and data is transmitted under data processing agreements.</li>
|
||||
<li class="mb-1">{{ _("privacy.s4_li1") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s4_li2") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s4_li3") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s4_li4") }}</li>
|
||||
<li>{{ _("privacy.s4_li5") }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="cookies" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">5. Use of Cookies & Similar Technologies</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s5_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
DocuElevate uses <strong>only strictly necessary session cookies</strong> to maintain your authenticated
|
||||
session. These cookies are essential for the service to function and are exempt from prior-consent
|
||||
requirements under the EU ePrivacy Directive (Art. 5(3)) and equivalent national laws.
|
||||
{{ _("privacy.s5_p1_pre") }} <strong>{{ _("privacy.s5_p1_strong") }}</strong> {{ _("privacy.s5_p1_post") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>We do not use:</strong> analytics cookies, advertising cookies, tracking pixels, or any
|
||||
third-party cookies that would require your consent.
|
||||
<strong>{{ _("privacy.s5_p2_label") }}</strong> {{ _("privacy.s5_p2_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
For full details on the cookies we set, their names, duration, and purpose, please visit our
|
||||
<a href="/cookies" class="text-blue-600 hover:underline">Cookie Policy</a>.
|
||||
{{ _("privacy.s5_p3_pre") }}
|
||||
<a href="/cookies" class="text-blue-600 hover:underline">{{ _("privacy.s5_cookie_link") }}</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="third-parties" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">6. Third-Party Services</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s6_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>OAuth Providers (Google, Dropbox, Microsoft):</strong> When you choose to authenticate via
|
||||
OAuth, the respective provider processes your credentials and may share limited profile information
|
||||
with us. These providers maintain their own privacy policies.
|
||||
<strong>{{ _("privacy.s6_oauth_label") }}</strong> {{ _("privacy.s6_oauth_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>Cloud Storage Providers (Google Drive, Dropbox, OneDrive, Amazon S3, Nextcloud, WebDAV/SFTP/FTP):</strong>
|
||||
Documents are stored in the cloud provider you configure. Your configured credentials are stored
|
||||
encrypted in the application database and are used solely to perform the storage operations you request.
|
||||
<strong>{{ _("privacy.s6_storage_label") }}</strong>
|
||||
{{ _("privacy.s6_storage_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>AI Processing Services (OpenAI, Azure Document Intelligence, others):</strong> When you initiate
|
||||
OCR or AI-based metadata extraction, document data is transmitted to the AI service you or your
|
||||
administrator has configured. This transmission is governed by a data processing agreement with the
|
||||
respective provider.
|
||||
<strong>{{ _("privacy.s6_ai_label") }}</strong> {{ _("privacy.s6_ai_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
<strong>No Sale or Sharing for Advertising:</strong> We do not sell, rent, or share your personal data
|
||||
with third parties for advertising, marketing, or any purpose unrelated to providing the service.
|
||||
<strong>{{ _("privacy.s6_no_sale_label") }}</strong> {{ _("privacy.s6_no_sale_body") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="international-transfers" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">7. International Data Transfers</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s7_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
DocuElevate is hosted in the European Union / EEA by default. Where personal data is transferred
|
||||
outside the EEA (for example to US-based AI service providers such as OpenAI), we rely on
|
||||
appropriate safeguards including:
|
||||
{{ _("privacy.s7_p1") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
|
||||
<li class="mb-1">
|
||||
<strong>Standard Contractual Clauses (SCCs)</strong> adopted by the European Commission (2021/914/EU)
|
||||
for transfers to processors and controllers in third countries.
|
||||
<strong>{{ _("privacy.s7_scc_label") }}</strong> {{ _("privacy.s7_scc_body") }}
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<strong>Adequacy Decisions</strong> where the European Commission has recognised an equivalent level
|
||||
of protection (e.g., United Kingdom, Switzerland, Canada (commercial organisations), Japan, South Korea).
|
||||
<strong>{{ _("privacy.s7_adequacy_label") }}</strong> {{ _("privacy.s7_adequacy_body") }}
|
||||
</li>
|
||||
<li>
|
||||
<strong>UK International Data Transfer Agreements (IDTAs)</strong> for transfers from the UK after Brexit.
|
||||
<strong>{{ _("privacy.s7_idta_label") }}</strong> {{ _("privacy.s7_idta_body") }}
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-gray-700">
|
||||
You may request a copy of the relevant safeguards by contacting us at
|
||||
{{ _("privacy.s7_contact") }}
|
||||
<a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="retention" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">8. Data Retention</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s8_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
We retain personal data only as long as strictly necessary to provide the DocuElevate service or to
|
||||
comply with legal obligations:
|
||||
{{ _("privacy.s8_p1") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
|
||||
<li class="mb-1"><strong>Session data:</strong> Deleted when you log out or after session timeout.</li>
|
||||
<li class="mb-1"><strong>File records and metadata:</strong> Retained for the duration of your use of the
|
||||
service. You may delete individual files at any time through the application.</li>
|
||||
<li class="mb-1"><strong>Audit logs:</strong> Retained for up to 90 days for security and compliance purposes.</li>
|
||||
<li><strong>OAuth tokens:</strong> Stored in encrypted form and revocable at any time via your OAuth provider.</li>
|
||||
<li class="mb-1"><strong>{{ _("privacy.s8_session_label") }}</strong> {{ _("privacy.s8_session_body") }}</li>
|
||||
<li class="mb-1"><strong>{{ _("privacy.s8_files_label") }}</strong> {{ _("privacy.s8_files_body") }}</li>
|
||||
<li class="mb-1"><strong>{{ _("privacy.s8_audit_label") }}</strong> {{ _("privacy.s8_audit_body") }}</li>
|
||||
<li><strong>{{ _("privacy.s8_oauth_label") }}</strong> {{ _("privacy.s8_oauth_body") }}</li>
|
||||
</ul>
|
||||
<p class="text-gray-700">
|
||||
To request deletion of your account and all associated personal data, please contact us at
|
||||
{{ _("privacy.s8_contact") }}
|
||||
<a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="security" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">9. Data Security</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s9_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
We implement appropriate technical and organisational measures (TOMs) to protect your personal data,
|
||||
including:
|
||||
{{ _("privacy.s9_p1") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4">
|
||||
<li class="mb-1">Encryption of credentials and sensitive configuration at rest.</li>
|
||||
<li class="mb-1">Transport Layer Security (TLS/HTTPS) for all communications.</li>
|
||||
<li class="mb-1">Role-based access controls limiting access to personal data.</li>
|
||||
<li class="mb-1">Regular security audits and dependency vulnerability scanning.</li>
|
||||
<li>CSRF protection on all state-changing requests.</li>
|
||||
<li class="mb-1">{{ _("privacy.s9_li1") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s9_li2") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s9_li3") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s9_li4") }}</li>
|
||||
<li>{{ _("privacy.s9_li5") }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="gdpr-rights" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">10. Your Rights (EU / EEA / UK / Switzerland)</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s10_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
Under GDPR (and the UK GDPR / Swiss nFADP equivalent), you have the following rights:
|
||||
{{ _("privacy.s10_p1") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
|
||||
<li class="mb-2"><strong>Right of Access (Art. 15):</strong> You may request a copy of the personal data
|
||||
we hold about you.</li>
|
||||
<li class="mb-2"><strong>Right to Rectification (Art. 16):</strong> You may request correction of inaccurate
|
||||
or incomplete personal data.</li>
|
||||
<li class="mb-2"><strong>Right to Erasure (Art. 17):</strong> You may request deletion of your personal data
|
||||
where there is no overriding legitimate reason for us to retain it.</li>
|
||||
<li class="mb-2"><strong>Right to Restriction (Art. 18):</strong> You may request that we temporarily halt
|
||||
processing of your data in certain circumstances.</li>
|
||||
<li class="mb-2"><strong>Right to Data Portability (Art. 20):</strong> You may request your data in a
|
||||
structured, commonly used, machine-readable format.</li>
|
||||
<li class="mb-2"><strong>Right to Object (Art. 21):</strong> You may object to processing based on
|
||||
legitimate interests at any time.</li>
|
||||
<li class="mb-2"><strong>Right to Withdraw Consent:</strong> Where processing is based on consent, you
|
||||
may withdraw that consent at any time without affecting the lawfulness of prior processing.</li>
|
||||
<li><strong>Right to Lodge a Complaint:</strong> You have the right to lodge a complaint with your
|
||||
national Data Protection Authority (DPA). In Germany: Bundesbeauftragte für den Datenschutz und
|
||||
die Informationsfreiheit (BfDI). In the UK: Information Commissioner's Office (ICO). In Switzerland:
|
||||
Federal Data Protection and Information Commissioner (FDPIC).</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s10_access_label") }}</strong> {{ _("privacy.s10_access_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s10_rectification_label") }}</strong> {{ _("privacy.s10_rectification_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s10_erasure_label") }}</strong> {{ _("privacy.s10_erasure_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s10_restriction_label") }}</strong> {{ _("privacy.s10_restriction_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s10_portability_label") }}</strong> {{ _("privacy.s10_portability_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s10_object_label") }}</strong> {{ _("privacy.s10_object_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s10_withdraw_label") }}</strong> {{ _("privacy.s10_withdraw_body") }}</li>
|
||||
<li><strong>{{ _("privacy.s10_complaint_label") }}</strong> {{ _("privacy.s10_complaint_body") }}</li>
|
||||
</ul>
|
||||
<p class="text-gray-700">
|
||||
To exercise any of the above rights, contact us at
|
||||
{{ _("privacy.s10_contact") }}
|
||||
<a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>.
|
||||
We will respond within one calendar month (extendable by two further months for complex requests).
|
||||
{{ _("privacy.s10_response") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="us-rights" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">11. Additional Rights – United States (CCPA / CPRA)</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s11_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
If you are a resident of California or another US state with applicable privacy legislation
|
||||
(including Virginia VCDPA, Colorado CPA, Connecticut CTDPA, Utah UCPA), the following additional
|
||||
disclosures apply:
|
||||
{{ _("privacy.s11_p1") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
|
||||
<li class="mb-2"><strong>Categories of personal information collected:</strong> Identifiers (name, email),
|
||||
account authentication tokens, and document metadata that you choose to upload.</li>
|
||||
<li class="mb-2"><strong>Purpose of collection:</strong> Providing, improving, and securing the
|
||||
DocuElevate service. We do not sell or share personal information for cross-context behavioural
|
||||
advertising.</li>
|
||||
<li class="mb-2"><strong>Right to Know:</strong> You may request disclosure of the categories and
|
||||
specific pieces of personal information we have collected about you.</li>
|
||||
<li class="mb-2"><strong>Right to Delete:</strong> You may request deletion of personal information we
|
||||
have collected, subject to certain exceptions.</li>
|
||||
<li class="mb-2"><strong>Right to Correct:</strong> You may request correction of inaccurate personal
|
||||
information.</li>
|
||||
<li class="mb-2"><strong>Right to Opt Out of Sale / Sharing:</strong> We do not sell or share personal
|
||||
information as defined by CCPA/CPRA. No opt-out mechanism is required; however, you may contact
|
||||
us to confirm this.</li>
|
||||
<li class="mb-2"><strong>Right to Limit Use of Sensitive Personal Information:</strong> We do not use
|
||||
sensitive personal information beyond what is necessary to provide the service.</li>
|
||||
<li><strong>Non-Discrimination:</strong> We will not discriminate against you for exercising any of
|
||||
these rights.</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s11_categories_label") }}</strong> {{ _("privacy.s11_categories_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s11_purpose_label") }}</strong> {{ _("privacy.s11_purpose_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s11_know_label") }}</strong> {{ _("privacy.s11_know_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s11_delete_label") }}</strong> {{ _("privacy.s11_delete_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s11_correct_label") }}</strong> {{ _("privacy.s11_correct_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s11_optout_label") }}</strong> {{ _("privacy.s11_optout_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s11_limit_label") }}</strong> {{ _("privacy.s11_limit_body") }}</li>
|
||||
<li><strong>{{ _("privacy.s11_nondiscrim_label") }}</strong> {{ _("privacy.s11_nondiscrim_body") }}</li>
|
||||
</ul>
|
||||
<p class="text-gray-700">
|
||||
To submit a verifiable consumer request, contact us at
|
||||
{{ _("privacy.s11_contact") }}
|
||||
<a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>.
|
||||
We will respond within 45 days (extendable by an additional 45 days when reasonably necessary).
|
||||
{{ _("privacy.s11_response") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="canada-rights" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">12. Additional Rights – Canada (PIPEDA / Québec Law 25)</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s12_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
If you are located in Canada, the following applies under the Personal Information Protection and
|
||||
Electronic Documents Act (PIPEDA) and applicable provincial legislation (including Québec Law 25 /
|
||||
Bill 64):
|
||||
{{ _("privacy.s12_p1") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
|
||||
<li class="mb-2">We collect, use, and disclose personal information only with your knowledge and
|
||||
consent, or as permitted by law.</li>
|
||||
<li class="mb-2"><strong>Right of Access:</strong> You may request access to your personal information
|
||||
and information about how it has been used or disclosed.</li>
|
||||
<li class="mb-2"><strong>Right to Correction:</strong> You may challenge the accuracy or completeness
|
||||
of your personal information and request correction.</li>
|
||||
<li class="mb-2"><strong>Right to Withdraw Consent:</strong> Subject to legal or contractual
|
||||
restrictions, you may withdraw consent to the collection, use, or disclosure of your personal
|
||||
information on reasonable notice.</li>
|
||||
<li class="mb-2"><strong>Québec residents:</strong> Under Law 25, you have additional rights including
|
||||
the right to data portability (effective September 2023) and the right to de-indexation where
|
||||
personal information is disseminated online.</li>
|
||||
<li class="mb-2">{{ _("privacy.s12_li1") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s12_access_label") }}</strong> {{ _("privacy.s12_access_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s12_correction_label") }}</strong> {{ _("privacy.s12_correction_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s12_withdraw_label") }}</strong> {{ _("privacy.s12_withdraw_body") }}</li>
|
||||
<li class="mb-2"><strong>{{ _("privacy.s12_quebec_label") }}</strong> {{ _("privacy.s12_quebec_body") }}</li>
|
||||
</ul>
|
||||
<p class="text-gray-700">
|
||||
Direct privacy complaints to our Privacy Officer at
|
||||
<a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>,
|
||||
or to the Office of the Privacy Commissioner of Canada.
|
||||
{{ _("privacy.s12_contact") }}
|
||||
<a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>{{ _("privacy.s12_contact_post") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="latam-rights" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">13. Additional Rights – Latin America (LGPD & Others)</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s13_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>Brazil (LGPD – Lei Geral de Proteção de Dados, Law 13.709/2018):</strong>
|
||||
If you are located in Brazil, you have the following rights under the LGPD:
|
||||
<strong>{{ _("privacy.s13_brazil_label") }}</strong>
|
||||
{{ _("privacy.s13_brazil_body") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
|
||||
<li class="mb-1">Confirmation of the existence of processing and access to your data.</li>
|
||||
<li class="mb-1">Correction of incomplete, inaccurate, or outdated data.</li>
|
||||
<li class="mb-1">Anonymisation, blocking, or deletion of unnecessary or excessive data.</li>
|
||||
<li class="mb-1">Portability of your data to another service or product provider.</li>
|
||||
<li class="mb-1">Deletion of personal data processed with your consent.</li>
|
||||
<li class="mb-1">Information about entities with which your data has been shared.</li>
|
||||
<li class="mb-1">Information about the possibility of not consenting and the consequences of refusal.</li>
|
||||
<li>Revocation of consent.</li>
|
||||
<li class="mb-1">{{ _("privacy.s13_li1") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s13_li2") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s13_li3") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s13_li4") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s13_li5") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s13_li6") }}</li>
|
||||
<li class="mb-1">{{ _("privacy.s13_li7") }}</li>
|
||||
<li>{{ _("privacy.s13_li8") }}</li>
|
||||
</ul>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>Other Latin American Countries:</strong> We also recognise applicable privacy laws in Argentina
|
||||
(PDPA), Mexico (LFPDPPP), Chile, Colombia (Ley 1581), and others. Users in these jurisdictions may
|
||||
exercise equivalent rights as outlined under their national law by contacting us.
|
||||
<strong>{{ _("privacy.s13_other_label") }}</strong> {{ _("privacy.s13_other_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
Contact:
|
||||
{{ _("privacy.s13_contact") }}
|
||||
<a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="apj-rights" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">14. Additional Rights – Asia-Pacific & Japan</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s14_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>Japan (APPI – Act on the Protection of Personal Information):</strong>
|
||||
Japanese residents may request disclosure, correction, addition or deletion, suspension of use,
|
||||
erasure, or suspension of third-party provision of their personal information held by us.
|
||||
Third-party disclosures require your prior consent except where permitted by law.
|
||||
<strong>{{ _("privacy.s14_japan_label") }}</strong>
|
||||
{{ _("privacy.s14_japan_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>Australia (Privacy Act 1988 and Australian Privacy Principles):</strong>
|
||||
Australian residents may request access to and correction of their personal information.
|
||||
We will respond to access requests within 30 days. Complaints may be lodged with the
|
||||
Office of the Australian Information Commissioner (OAIC).
|
||||
<strong>{{ _("privacy.s14_australia_label") }}</strong>
|
||||
{{ _("privacy.s14_australia_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>South Korea (PIPA – Personal Information Protection Act):</strong>
|
||||
Korean residents may request access, correction, deletion, and suspension of processing.
|
||||
We handle personal information of Korean residents in accordance with the PIPA.
|
||||
<strong>{{ _("privacy.s14_korea_label") }}</strong>
|
||||
{{ _("privacy.s14_korea_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
<strong>Other APJ markets (Singapore PDPA, New Zealand Privacy Act, India DPDP Act):</strong>
|
||||
We recognise the data protection rights afforded to residents of these jurisdictions under their
|
||||
respective national laws. Contact us to exercise your rights.
|
||||
<strong>{{ _("privacy.s14_apj_label") }}</strong>
|
||||
{{ _("privacy.s14_apj_body") }}
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
Contact:
|
||||
{{ _("privacy.s14_contact") }}
|
||||
<a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="ukraine-rights" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">15. Additional Rights – Ukraine</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s15_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
Users located in Ukraine are protected under the Law of Ukraine "On Personal Data Protection"
|
||||
(No. 2297-VI). Your rights include access to, correction, blocking, and deletion of your personal
|
||||
data, as well as the right to object to processing.
|
||||
{{ _("privacy.s15_p1") }}
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
Contact:
|
||||
{{ _("privacy.s15_contact") }}
|
||||
<a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="updates" class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">16. Updates to this Privacy Notice</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("privacy.s16_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
We may update this notice from time to time to reflect changes in our practices or applicable laws.
|
||||
The "Last Updated" date at the top of this page indicates when the notice was last revised.
|
||||
Where changes are material, we will notify users via in-application notification or email where
|
||||
appropriate.
|
||||
{{ _("privacy.s16_p1") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
If you have any questions or concerns about this Privacy Notice or your personal data, please
|
||||
contact us at
|
||||
{{ _("privacy.s16_p2_pre") }}
|
||||
<a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>.
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
Please also review our <a href="/terms" class="text-blue-600 hover:underline">Terms of Service</a>,
|
||||
<a href="/cookies" class="text-blue-600 hover:underline">Cookie Policy</a>, and
|
||||
<a href="/license" class="text-blue-600 hover:underline">License Information</a>.
|
||||
{{ _("privacy.s16_p3_pre") }} <a href="/terms" class="text-blue-600 hover:underline">{{ _("privacy.s16_terms_link") }}</a>,
|
||||
<a href="/cookies" class="text-blue-600 hover:underline">{{ _("privacy.s16_cookies_link") }}</a>,
|
||||
and <a href="/license" class="text-blue-600 hover:underline">{{ _("privacy.s16_license_link") }}</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,546 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ _("profile.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div
|
||||
class="container mx-auto px-4 py-8 max-w-3xl"
|
||||
x-data="profileSettings()"
|
||||
x-init="init()"
|
||||
>
|
||||
|
||||
<!-- ── Header ─────────────────────────────────────────────────────────── -->
|
||||
<header class="mb-8">
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<i class="fas fa-user-circle text-blue-500" aria-hidden="true"></i>
|
||||
{{ _("profile.heading") }}
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ _("profile.subtitle") }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- ── Status banner ──────────────────────────────────────────────────── -->
|
||||
<div
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
x-show="banner.visible"
|
||||
x-transition
|
||||
:class="banner.error
|
||||
? 'bg-red-50 dark:bg-red-900/30 border border-red-300 dark:border-red-700 text-red-800 dark:text-red-200'
|
||||
: 'bg-green-50 dark:bg-green-900/30 border border-green-300 dark:border-green-700 text-green-800 dark:text-green-200'"
|
||||
class="rounded-lg p-4 mb-6 flex items-start gap-3 text-sm"
|
||||
>
|
||||
<i :class="banner.error ? 'fas fa-exclamation-circle' : 'fas fa-check-circle'" aria-hidden="true"></i>
|
||||
<span x-text="banner.message"></span>
|
||||
<button
|
||||
type="button"
|
||||
@click="banner.visible = false"
|
||||
class="ml-auto"
|
||||
aria-label="{{ _('profile.dismiss') }}"
|
||||
style="min-height:44px; min-width:44px;"
|
||||
>
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ── Avatar card ────────────────────────────────────────────────────── -->
|
||||
<section
|
||||
class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6"
|
||||
aria-labelledby="avatar-heading"
|
||||
>
|
||||
<h2 id="avatar-heading" class="text-base font-semibold text-gray-900 dark:text-white mb-4">
|
||||
<i class="fas fa-camera text-gray-400 mr-2" aria-hidden="true"></i>{{ _("profile.avatar_heading") }}
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-center gap-6">
|
||||
<!-- Current avatar -->
|
||||
<div class="relative flex-shrink-0">
|
||||
<img
|
||||
:src="avatarUrl"
|
||||
alt="{{ _('profile.avatar_alt') }}"
|
||||
class="w-24 h-24 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600"
|
||||
/>
|
||||
<template x-if="hasCustomAvatar">
|
||||
<button
|
||||
type="button"
|
||||
@click="removeAvatar()"
|
||||
:disabled="saving"
|
||||
class="absolute -top-1 -right-1 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center shadow focus:outline-none focus:ring-2 focus:ring-red-400"
|
||||
aria-label="{{ _('profile.avatar_remove') }}"
|
||||
title="{{ _('profile.avatar_remove') }}"
|
||||
>
|
||||
<i class="fas fa-times text-xs" aria-hidden="true"></i>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Upload controls -->
|
||||
<div class="flex-1 space-y-3">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{% set gravatar_anchor %}<a href="https://gravatar.com" class="underline" target="_blank" rel="noopener noreferrer" aria-label="{{ _('profile.gravatar_link') }} (opens in new tab)">{{ _("profile.gravatar_link") }}</a>{% endset %}
|
||||
{{ _("profile.avatar_upload_hint", gravatar=gravatar_anchor) | safe }}
|
||||
</p>
|
||||
<label
|
||||
for="avatar-input"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md cursor-pointer focus-within:ring-2 focus-within:ring-blue-500 transition-colors"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
<i class="fas fa-upload" aria-hidden="true"></i>
|
||||
<span>{{ _("profile.choose_image") }}</span>
|
||||
<input
|
||||
id="avatar-input"
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/gif,image/webp"
|
||||
class="sr-only"
|
||||
@change="uploadAvatar($event)"
|
||||
:disabled="saving"
|
||||
/>
|
||||
</label>
|
||||
<p x-show="uploadProgress" class="text-xs text-gray-500 dark:text-gray-400" x-text="uploadProgress" aria-live="polite"></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── General info card ──────────────────────────────────────────────── -->
|
||||
<section
|
||||
class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6"
|
||||
aria-labelledby="general-heading"
|
||||
>
|
||||
<h2 id="general-heading" class="text-base font-semibold text-gray-900 dark:text-white mb-4">
|
||||
<i class="fas fa-id-card text-gray-400 mr-2" aria-hidden="true"></i>{{ _("profile.general_heading") }}
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Display name -->
|
||||
<div>
|
||||
<label for="display-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{{ _("profile.display_name_label") }}
|
||||
</label>
|
||||
<input
|
||||
id="display-name"
|
||||
type="text"
|
||||
x-model="form.display_name"
|
||||
maxlength="255"
|
||||
placeholder="{{ _('profile.display_name_placeholder') }}"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
||||
style="min-height:44px;"
|
||||
aria-describedby="display-name-hint"
|
||||
/>
|
||||
<p id="display-name-hint" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ _("profile.display_name_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Contact email -->
|
||||
<div>
|
||||
<label for="contact-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{{ _("profile.contact_email_label") }}
|
||||
</label>
|
||||
<input
|
||||
id="contact-email"
|
||||
type="email"
|
||||
x-model="form.contact_email"
|
||||
maxlength="255"
|
||||
placeholder="{{ _('profile.contact_email_placeholder') }}"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
||||
style="min-height:44px;"
|
||||
aria-describedby="contact-email-hint"
|
||||
/>
|
||||
<p id="contact-email-hint" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ _("profile.contact_email_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Preferences card ───────────────────────────────────────────────── -->
|
||||
<section
|
||||
class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6"
|
||||
aria-labelledby="prefs-heading"
|
||||
>
|
||||
<h2 id="prefs-heading" class="text-base font-semibold text-gray-900 dark:text-white mb-4">
|
||||
<i class="fas fa-sliders-h text-gray-400 mr-2" aria-hidden="true"></i>{{ _("profile.preferences_heading") }}
|
||||
</h2>
|
||||
|
||||
<div class="space-y-5">
|
||||
<!-- Language -->
|
||||
<div>
|
||||
<label for="lang-select" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
<i class="fas fa-globe text-gray-400 mr-1" aria-hidden="true"></i>{{ _("profile.language_label") }}
|
||||
</label>
|
||||
<select
|
||||
id="lang-select"
|
||||
x-model="form.preferred_language"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
<option value="">{{ _("profile.language_auto_detect") }}</option>
|
||||
{% for lang in supported_languages %}
|
||||
<option value="{{ lang.code }}">{{ lang.native }} ({{ lang.name }})</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ _("profile.language_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Theme -->
|
||||
<fieldset>
|
||||
<legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
<i class="fas fa-palette text-gray-400 mr-1" aria-hidden="true"></i>{{ _("profile.theme_label") }}
|
||||
</legend>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<label
|
||||
class="relative flex items-center gap-2 cursor-pointer rounded-lg border px-4 py-3 text-sm transition-colors
|
||||
focus-within:ring-2 focus-within:ring-blue-500"
|
||||
:class="form.preferred_theme === 'light'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
|
||||
: 'border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-gray-300'"
|
||||
style="min-height:44px; min-width:44px;"
|
||||
>
|
||||
<input type="radio" name="theme" value="light" x-model="form.preferred_theme" class="sr-only" />
|
||||
<i class="fas fa-sun" aria-hidden="true"></i> {{ _("profile.theme_light") }}
|
||||
</label>
|
||||
<label
|
||||
class="relative flex items-center gap-2 cursor-pointer rounded-lg border px-4 py-3 text-sm transition-colors
|
||||
focus-within:ring-2 focus-within:ring-blue-500"
|
||||
:class="form.preferred_theme === 'dark'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
|
||||
: 'border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-gray-300'"
|
||||
style="min-height:44px; min-width:44px;"
|
||||
>
|
||||
<input type="radio" name="theme" value="dark" x-model="form.preferred_theme" class="sr-only" />
|
||||
<i class="fas fa-moon" aria-hidden="true"></i> {{ _("profile.theme_dark") }}
|
||||
</label>
|
||||
<label
|
||||
class="relative flex items-center gap-2 cursor-pointer rounded-lg border px-4 py-3 text-sm transition-colors
|
||||
focus-within:ring-2 focus-within:ring-blue-500"
|
||||
:class="!form.preferred_theme || form.preferred_theme === 'system'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
|
||||
: 'border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-gray-300'"
|
||||
style="min-height:44px; min-width:44px;"
|
||||
>
|
||||
<input type="radio" name="theme" value="system" x-model="form.preferred_theme" class="sr-only" />
|
||||
<i class="fas fa-desktop" aria-hidden="true"></i> {{ _("profile.theme_system") }}
|
||||
</label>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ _("profile.theme_hint") }}
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<!-- Default Document Language -->
|
||||
<div>
|
||||
<label for="doc-lang-select" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
<i class="fas fa-language text-gray-400 mr-1" aria-hidden="true"></i>{{ _("profile.default_document_language_label") }}
|
||||
</label>
|
||||
<select
|
||||
id="doc-lang-select"
|
||||
x-model="form.default_document_language"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
<option value="">{{ _("profile.default_document_language_auto") }}</option>
|
||||
{% for lang in supported_languages %}
|
||||
<option value="{{ lang.code }}">{{ lang.native }} ({{ lang.name }})</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ _("profile.default_document_language_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Save button -->
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
@click="saveProfile()"
|
||||
:disabled="saving"
|
||||
class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium
|
||||
rounded-md shadow focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 transition-colors"
|
||||
style="min-height:44px; min-width:44px;"
|
||||
>
|
||||
<i class="fas fa-save" aria-hidden="true"></i>
|
||||
<span x-text="saving ? '{{ _('profile.saving') }}' : '{{ _('profile.save_button') }}'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ── Password change card (local accounts only) ─────────────────────── -->
|
||||
<template x-if="isLocalUser">
|
||||
<section
|
||||
class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mt-6"
|
||||
aria-labelledby="password-heading"
|
||||
>
|
||||
<h2 id="password-heading" class="text-base font-semibold text-gray-900 dark:text-white mb-4">
|
||||
<i class="fas fa-lock text-gray-400 mr-2" aria-hidden="true"></i>{{ _("profile.password_heading") }}
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 max-w-md">
|
||||
<div>
|
||||
<label for="current-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{{ _("profile.current_password") }}
|
||||
</label>
|
||||
<input
|
||||
id="current-password"
|
||||
type="password"
|
||||
x-model="pwForm.current_password"
|
||||
autocomplete="current-password"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
||||
style="min-height:44px;"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{{ _("profile.new_password") }}
|
||||
</label>
|
||||
<input
|
||||
id="new-password"
|
||||
type="password"
|
||||
x-model="pwForm.new_password"
|
||||
autocomplete="new-password"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
||||
style="min-height:44px;"
|
||||
aria-describedby="new-pw-hint"
|
||||
/>
|
||||
<p id="new-pw-hint" class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ _("profile.new_password_hint") }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{{ _("profile.confirm_password") }}
|
||||
</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
type="password"
|
||||
x-model="pwForm.new_password_confirm"
|
||||
autocomplete="new-password"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
|
||||
style="min-height:44px;"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
@click="changePassword()"
|
||||
:disabled="pwSaving"
|
||||
class="inline-flex items-center gap-2 px-5 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium
|
||||
rounded-md shadow focus:outline-none focus:ring-2 focus:ring-gray-500 disabled:opacity-50 transition-colors"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
<i class="fas fa-key" aria-hidden="true"></i>
|
||||
<span x-text="pwSaving ? '{{ _('profile.updating') }}' : '{{ _('profile.update_password') }}'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
</div><!-- /container -->
|
||||
|
||||
<script>
|
||||
function profileSettings() {
|
||||
return {
|
||||
// ── State ──────────────────────────────────────────────────────────────
|
||||
avatarUrl: '/static/images/default-avatar.svg',
|
||||
hasCustomAvatar: false,
|
||||
isLocalUser: false,
|
||||
saving: false,
|
||||
pwSaving: false,
|
||||
uploadProgress: '',
|
||||
banner: { visible: false, error: false, message: '' },
|
||||
|
||||
form: {
|
||||
display_name: '',
|
||||
contact_email: '',
|
||||
preferred_language: '',
|
||||
preferred_theme: 'system',
|
||||
default_document_language: '',
|
||||
},
|
||||
|
||||
pwForm: {
|
||||
current_password: '',
|
||||
new_password: '',
|
||||
new_password_confirm: '',
|
||||
},
|
||||
|
||||
// ── Init ───────────────────────────────────────────────────────────────
|
||||
_initialLanguage: '',
|
||||
|
||||
async init() {
|
||||
try {
|
||||
const res = await fetch('/api/profile');
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
this.avatarUrl = data.avatar_url || this.avatarUrl;
|
||||
this.hasCustomAvatar = !!(data.avatar_url && data.avatar_url.startsWith('data:'));
|
||||
this.isLocalUser = data.is_local_user || false;
|
||||
this.form.display_name = data.display_name || '';
|
||||
this.form.contact_email = data.contact_email || '';
|
||||
this.form.preferred_language = data.preferred_language || '';
|
||||
this.form.preferred_theme = data.preferred_theme || 'system';
|
||||
this.form.default_document_language = data.default_document_language || '';
|
||||
this._initialLanguage = this.form.preferred_language;
|
||||
} catch (_e) {
|
||||
// Silently ignore — user might not be logged in (rare for this page)
|
||||
}
|
||||
},
|
||||
|
||||
// ── CSRF helper ────────────────────────────────────────────────────────
|
||||
_getCSRFToken() {
|
||||
return document.cookie
|
||||
.split('; ')
|
||||
.find(row => row.startsWith('csrf_token='))
|
||||
?.split('=')[1];
|
||||
},
|
||||
|
||||
// ── Save general settings ──────────────────────────────────────────────
|
||||
async saveProfile() {
|
||||
this.saving = true;
|
||||
this._hideBanner();
|
||||
const previousLang = this._initialLanguage || '';
|
||||
try {
|
||||
const csrfToken = this._getCSRFToken();
|
||||
|
||||
const res = await fetch('/api/profile', {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {}),
|
||||
},
|
||||
body: JSON.stringify(this.form),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
this._showBanner(data.detail || 'Failed to save settings.', true);
|
||||
return;
|
||||
}
|
||||
// If the UI language changed, reload so the page renders in the new locale
|
||||
if (this.form.preferred_language !== previousLang) {
|
||||
window.location.reload();
|
||||
return;
|
||||
}
|
||||
this._showBanner('Profile settings saved successfully.', false);
|
||||
// Update display name across the nav (refresh the avatar/name)
|
||||
if (data.avatar_url) {
|
||||
this.avatarUrl = data.avatar_url;
|
||||
this.hasCustomAvatar = data.avatar_url.startsWith('data:');
|
||||
}
|
||||
} catch (_e) {
|
||||
this._showBanner('Network error — please try again.', true);
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
// ── Avatar upload ──────────────────────────────────────────────────────
|
||||
async uploadAvatar(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
if (file.size > 2 * 1024 * 1024) {
|
||||
this._showBanner('Image is too large. Maximum size is 2 MB.', true);
|
||||
return;
|
||||
}
|
||||
this.uploadProgress = 'Uploading…';
|
||||
this._hideBanner();
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const csrfToken = this._getCSRFToken();
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/profile/avatar', {
|
||||
method: 'POST',
|
||||
headers: csrfToken ? { 'X-CSRF-Token': csrfToken } : {},
|
||||
body: formData,
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
this._showBanner(data.detail || 'Upload failed.', true);
|
||||
return;
|
||||
}
|
||||
this.avatarUrl = data.avatar_url;
|
||||
this.hasCustomAvatar = true;
|
||||
this._showBanner('Profile picture updated.', false);
|
||||
} catch (_e) {
|
||||
this._showBanner('Network error — please try again.', true);
|
||||
} finally {
|
||||
this.uploadProgress = '';
|
||||
// Reset file input so the same file can be re-selected
|
||||
event.target.value = '';
|
||||
}
|
||||
},
|
||||
|
||||
// ── Remove avatar ──────────────────────────────────────────────────────
|
||||
async removeAvatar() {
|
||||
this._hideBanner();
|
||||
const csrfToken = this._getCSRFToken();
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/profile/avatar', {
|
||||
method: 'DELETE',
|
||||
headers: csrfToken ? { 'X-CSRF-Token': csrfToken } : {},
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
this._showBanner(data.detail || 'Failed to remove avatar.', true);
|
||||
return;
|
||||
}
|
||||
this.avatarUrl = data.avatar_url;
|
||||
this.hasCustomAvatar = false;
|
||||
this._showBanner('Custom avatar removed. Gravatar is now shown.', false);
|
||||
} catch (_e) {
|
||||
this._showBanner('Network error — please try again.', true);
|
||||
}
|
||||
},
|
||||
|
||||
// ── Change password ────────────────────────────────────────────────────
|
||||
async changePassword() {
|
||||
this.pwSaving = true;
|
||||
this._hideBanner();
|
||||
const csrfToken = this._getCSRFToken();
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/profile/change-password', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(csrfToken ? { 'X-CSRF-Token': csrfToken } : {}),
|
||||
},
|
||||
body: JSON.stringify(this.pwForm),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
this._showBanner(data.detail || 'Failed to change password.', true);
|
||||
return;
|
||||
}
|
||||
this._showBanner('Password changed successfully.', false);
|
||||
this.pwForm = { current_password: '', new_password: '', new_password_confirm: '' };
|
||||
} catch (_e) {
|
||||
this._showBanner('Network error — please try again.', true);
|
||||
} finally {
|
||||
this.pwSaving = false;
|
||||
}
|
||||
},
|
||||
|
||||
// ── Banner helpers ─────────────────────────────────────────────────────
|
||||
_showBanner(message, error) {
|
||||
this.banner = { visible: true, error, message };
|
||||
if (!error) {
|
||||
setTimeout(() => { this.banner.visible = false; }, 4000);
|
||||
}
|
||||
},
|
||||
_hideBanner() {
|
||||
this.banner.visible = false;
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Queue Monitor — DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("queue.page_title") }}{% endblock %}
|
||||
|
||||
{% block head_extra %}
|
||||
<script src="/static/js/common.js"></script>
|
||||
@@ -11,20 +11,20 @@
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<h1 class="text-3xl font-bold mb-2">
|
||||
<i class="fas fa-stream mr-2 text-blue-500" aria-hidden="true"></i>Queue Monitor
|
||||
<i class="fas fa-stream mr-2 text-blue-500" aria-hidden="true"></i>{{ _("queue.heading") }}
|
||||
</h1>
|
||||
<p class="text-gray-600">Real-time view of the document processing pipeline and Celery task queues.</p>
|
||||
<p class="text-gray-600">{{ _("queue.subtitle") }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div id="queueLoading" class="text-center py-12">
|
||||
<i class="fas fa-spinner fa-spin fa-2x text-blue-400" aria-hidden="true"></i>
|
||||
<p class="mt-2 text-gray-500">Loading queue statistics…</p>
|
||||
<p class="mt-2 text-gray-500">{{ _("queue.loading_stats") }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div id="queueError" class="hidden bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6" role="alert">
|
||||
<p><strong>Error:</strong> <span id="queueErrorMsg"></span></p>
|
||||
<p><strong>{{ _("common.error") }}:</strong> <span id="queueErrorMsg"></span></p>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard content (hidden until loaded) -->
|
||||
@@ -39,7 +39,7 @@
|
||||
<i class="fas fa-inbox text-yellow-600 text-xl" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-500">Queued Tasks</p>
|
||||
<p class="text-sm font-medium text-gray-500">{{ _("queue.queued_tasks") }}</p>
|
||||
<p id="totalQueued" class="text-2xl font-bold text-gray-900">0</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -51,7 +51,7 @@
|
||||
<i class="fas fa-cogs text-blue-600 text-xl" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-500">Active Tasks</p>
|
||||
<p class="text-sm font-medium text-gray-500">{{ _("queue.active_tasks") }}</p>
|
||||
<p id="activeTasks" class="text-2xl font-bold text-gray-900">0</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,7 +63,7 @@
|
||||
<i class="fas fa-file-alt text-indigo-600 text-xl" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-500">Files Processing</p>
|
||||
<p class="text-sm font-medium text-gray-500">{{ _("queue.files_processing") }}</p>
|
||||
<p id="filesProcessing" class="text-2xl font-bold text-gray-900">0</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,7 +75,7 @@
|
||||
<i class="fas fa-server text-green-600 text-xl" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-500">Workers Online</p>
|
||||
<p class="text-sm font-medium text-gray-500">{{ _("queue.workers_online") }}</p>
|
||||
<p id="workersOnline" class="text-2xl font-bold text-gray-900">0</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,19 +89,19 @@
|
||||
<div class="bg-white rounded-lg shadow">
|
||||
<div class="px-5 py-4 border-b border-gray-200">
|
||||
<h2 class="text-lg font-semibold text-gray-900">
|
||||
<i class="fas fa-list-ol mr-2 text-gray-500" aria-hidden="true"></i>Redis Queues
|
||||
<i class="fas fa-list-ol mr-2 text-gray-500" aria-hidden="true"></i>{{ _("queue.redis_queues") }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-left text-gray-500 border-b">
|
||||
<th class="pb-2">Queue</th>
|
||||
<th class="pb-2 text-right">Pending</th>
|
||||
<th class="pb-2">{{ _("queue.col_queue") }}</th>
|
||||
<th class="pb-2 text-right">{{ _("common.pending") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="queueRows">
|
||||
<tr><td colspan="2" class="py-3 text-gray-400 text-center">No data</td></tr>
|
||||
<tr><td colspan="2" class="py-3 text-gray-400 text-center">{{ _("queue.no_data") }}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -111,19 +111,19 @@
|
||||
<div class="bg-white rounded-lg shadow">
|
||||
<div class="px-5 py-4 border-b border-gray-200">
|
||||
<h2 class="text-lg font-semibold text-gray-900">
|
||||
<i class="fas fa-database mr-2 text-gray-500" aria-hidden="true"></i>Processing Pipeline
|
||||
<i class="fas fa-database mr-2 text-gray-500" aria-hidden="true"></i>{{ _("queue.processing_pipeline") }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-left text-gray-500 border-b">
|
||||
<th class="pb-2">State</th>
|
||||
<th class="pb-2 text-right">Files</th>
|
||||
<th class="pb-2">{{ _("queue.col_state") }}</th>
|
||||
<th class="pb-2 text-right">{{ _("queue.col_files") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dbSummaryRows">
|
||||
<tr><td colspan="2" class="py-3 text-gray-400 text-center">No data</td></tr>
|
||||
<tr><td colspan="2" class="py-3 text-gray-400 text-center">{{ _("queue.no_data") }}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -134,7 +134,7 @@
|
||||
<div class="bg-white rounded-lg shadow mb-8">
|
||||
<div class="px-5 py-4 border-b border-gray-200">
|
||||
<h2 class="text-lg font-semibold text-gray-900">
|
||||
<i class="fas fa-play-circle mr-2 text-blue-500" aria-hidden="true"></i>Active Tasks
|
||||
<i class="fas fa-play-circle mr-2 text-blue-500" aria-hidden="true"></i>{{ _("queue.active_tasks") }}
|
||||
<span id="activeCount" class="ml-1 text-sm font-normal text-gray-500">(0)</span>
|
||||
</h2>
|
||||
</div>
|
||||
@@ -142,13 +142,13 @@
|
||||
<table class="w-full text-sm" id="activeTable">
|
||||
<thead>
|
||||
<tr class="text-left text-gray-500 border-b">
|
||||
<th class="pb-2">Task</th>
|
||||
<th class="pb-2">Arguments</th>
|
||||
<th class="pb-2">Task ID</th>
|
||||
<th class="pb-2">{{ _("queue.col_task") }}</th>
|
||||
<th class="pb-2">{{ _("queue.col_arguments") }}</th>
|
||||
<th class="pb-2">{{ _("queue.col_task_id") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="activeRows">
|
||||
<tr><td colspan="3" class="py-3 text-gray-400 text-center">No active tasks</td></tr>
|
||||
<tr><td colspan="3" class="py-3 text-gray-400 text-center">{{ _("queue.no_active_tasks") }}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -158,20 +158,20 @@
|
||||
<div class="bg-white rounded-lg shadow mb-8">
|
||||
<div class="px-5 py-4 border-b border-gray-200">
|
||||
<h2 class="text-lg font-semibold text-gray-900">
|
||||
<i class="fas fa-file-medical-alt mr-2 text-indigo-500" aria-hidden="true"></i>Recently Processing Files
|
||||
<i class="fas fa-file-medical-alt mr-2 text-indigo-500" aria-hidden="true"></i>{{ _("queue.recently_processing") }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-5 overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-left text-gray-500 border-b">
|
||||
<th class="pb-2">File</th>
|
||||
<th class="pb-2">Current Step</th>
|
||||
<th class="pb-2 text-right">Actions</th>
|
||||
<th class="pb-2">{{ _("queue.col_file") }}</th>
|
||||
<th class="pb-2">{{ _("queue.col_current_step") }}</th>
|
||||
<th class="pb-2 text-right">{{ _("common.actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="recentRows">
|
||||
<tr><td colspan="3" class="py-3 text-gray-400 text-center">No files currently processing</td></tr>
|
||||
<tr><td colspan="3" class="py-3 text-gray-400 text-center">{{ _("queue.no_files_processing") }}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -180,8 +180,8 @@
|
||||
<!-- Auto-refresh info -->
|
||||
<div class="text-center text-gray-400 text-xs mb-4">
|
||||
<i class="fas fa-sync-alt mr-1" aria-hidden="true"></i>
|
||||
Auto-refreshes every <span id="refreshInterval">10</span> seconds —
|
||||
Last updated: <span id="lastUpdated">—</span>
|
||||
{{ _("queue.auto_refresh_1") }} <span id="refreshInterval">10</span> {{ _("queue.auto_refresh_2") }} —
|
||||
{{ _("queue.last_updated") }} <span id="lastUpdated">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Search Documents - DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("search.page_title") }} - DocuElevate{% endblock %}
|
||||
|
||||
{% block head_extra %}
|
||||
<script src="/static/js/common.js"></script>
|
||||
@@ -121,74 +121,74 @@
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="search-container">
|
||||
<h1 class="text-3xl font-bold mb-6"><i class="fas fa-search text-blue-500" aria-hidden="true"></i> Document Search</h1>
|
||||
<h1 class="text-3xl font-bold mb-6"><i class="fas fa-search text-blue-500" aria-hidden="true"></i> {{ _("search.heading") }}</h1>
|
||||
|
||||
<!-- Search box -->
|
||||
<div class="search-box" role="search">
|
||||
<label for="search-input" class="sr-only">Search documents</label>
|
||||
<label for="search-input" class="sr-only">{{ _("search.input_aria_label") }}</label>
|
||||
<input
|
||||
type="search"
|
||||
id="search-input"
|
||||
placeholder="Search documents by content, sender, tags, type..."
|
||||
placeholder="{{ _('search.input_placeholder') }}"
|
||||
value="{{ query }}"
|
||||
autofocus
|
||||
>
|
||||
<button type="button" id="search-btn" aria-label="Search documents">
|
||||
<i class="fas fa-search" aria-hidden="true"></i> Search
|
||||
<button type="button" id="search-btn" aria-label="{{ _('search.input_aria_label') }}">
|
||||
<i class="fas fa-search" aria-hidden="true"></i> {{ _("search.button") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Content-finding filters -->
|
||||
<div class="search-filters" id="search-filters">
|
||||
<div class="search-filter-item">
|
||||
<label for="filter-document-type">Document Type</label>
|
||||
<input type="text" id="filter-document-type" placeholder="e.g. Invoice" aria-label="Filter by document type">
|
||||
<label for="filter-document-type">{{ _("search.filter_document_type") }}</label>
|
||||
<input type="text" id="filter-document-type" placeholder="{{ _('search.filter_document_type_placeholder') }}" aria-label="{{ _('search.filter_aria_document_type') }}">
|
||||
</div>
|
||||
<div class="search-filter-item">
|
||||
<label for="filter-tags">Tags</label>
|
||||
<input type="text" id="filter-tags" placeholder="e.g. amazon" aria-label="Filter by tag">
|
||||
<label for="filter-tags">{{ _("search.filter_tags") }}</label>
|
||||
<input type="text" id="filter-tags" placeholder="{{ _('search.filter_tags_placeholder') }}" aria-label="{{ _('search.filter_aria_tag') }}">
|
||||
</div>
|
||||
<div class="search-filter-item">
|
||||
<label for="filter-sender">Sender</label>
|
||||
<input type="text" id="filter-sender" placeholder="e.g. ACME Corp" aria-label="Filter by sender">
|
||||
<label for="filter-sender">{{ _("search.filter_sender") }}</label>
|
||||
<input type="text" id="filter-sender" placeholder="{{ _('search.filter_sender_placeholder') }}" aria-label="{{ _('search.filter_aria_sender') }}">
|
||||
</div>
|
||||
<div class="search-filter-item">
|
||||
<label for="filter-language">Language</label>
|
||||
<input type="text" id="filter-language" placeholder="e.g. de" aria-label="Filter by language code">
|
||||
<label for="filter-language">{{ _("search.filter_language") }}</label>
|
||||
<input type="text" id="filter-language" placeholder="{{ _('search.filter_language_placeholder') }}" aria-label="{{ _('search.filter_aria_language') }}">
|
||||
</div>
|
||||
<div class="search-filter-item">
|
||||
<label for="filter-text-quality">Text Quality</label>
|
||||
<select id="filter-text-quality" aria-label="Filter by OCR text quality">
|
||||
<option value="">All</option>
|
||||
<option value="high">High</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="low">Low</option>
|
||||
<option value="no_text">No text</option>
|
||||
<label for="filter-text-quality">{{ _("search.filter_text_quality") }}</label>
|
||||
<select id="filter-text-quality" aria-label="{{ _('search.filter_aria_text_quality') }}">
|
||||
<option value="">{{ _("search.filter_text_quality_all") }}</option>
|
||||
<option value="high">{{ _("search.filter_text_quality_high") }}</option>
|
||||
<option value="medium">{{ _("search.filter_text_quality_medium") }}</option>
|
||||
<option value="low">{{ _("search.filter_text_quality_low") }}</option>
|
||||
<option value="no_text">{{ _("search.filter_text_quality_no_text") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-filter-item">
|
||||
<label for="filter-date-from">Date From</label>
|
||||
<input type="date" id="filter-date-from" aria-label="Filter from date">
|
||||
<label for="filter-date-from">{{ _("search.filter_date_from") }}</label>
|
||||
<input type="date" id="filter-date-from" aria-label="{{ _('search.filter_aria_date_from') }}">
|
||||
</div>
|
||||
<div class="search-filter-item">
|
||||
<label for="filter-date-to">Date To</label>
|
||||
<input type="date" id="filter-date-to" aria-label="Filter to date">
|
||||
<label for="filter-date-to">{{ _("search.filter_date_to") }}</label>
|
||||
<input type="date" id="filter-date-to" aria-label="{{ _('search.filter_aria_date_to') }}">
|
||||
</div>
|
||||
<div class="search-filter-item" style="align-self: flex-end;">
|
||||
<button type="button" id="clear-filters-btn" style="padding: 0.4rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.8rem; cursor: pointer; background: white; color: #374151;" aria-label="Clear all filters">
|
||||
Clear Filters
|
||||
<button type="button" id="clear-filters-btn" style="padding: 0.4rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.8rem; cursor: pointer; background: white; color: #374151;" aria-label="{{ _('search.filter_aria_clear') }}">
|
||||
{{ _("search.filter_clear_button") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Saved Searches -->
|
||||
<div class="search-saved-bar" id="saved-searches-bar">
|
||||
<span class="saved-label"><i class="fas fa-bookmark" aria-hidden="true"></i> Saved Searches:</span>
|
||||
<span class="saved-label"><i class="fas fa-bookmark" aria-hidden="true"></i> {{ _("search.saved_label") }}:</span>
|
||||
<span id="saved-searches-list" aria-live="polite" style="display: flex; gap: 0.25rem; flex-wrap: wrap;">
|
||||
<span style="color: #9ca3af; font-size: 0.85rem;">Loading...</span>
|
||||
<span style="color: #9ca3af; font-size: 0.85rem;">{{ _("search.saved_loading") }}</span>
|
||||
</span>
|
||||
<button type="button" id="save-search-btn" class="btn-save-search" aria-label="Save current search and filters as a saved search">
|
||||
<i class="fas fa-plus" aria-hidden="true"></i> Save Current
|
||||
<button type="button" id="save-search-btn" class="btn-save-search" aria-label="{{ _('search.saved_aria_save') }}">
|
||||
<i class="fas fa-plus" aria-hidden="true"></i> {{ _("search.saved_button") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Settings - DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("settings.title") }} - DocuElevate{% endblock %}
|
||||
|
||||
{# Category icon mapping #}
|
||||
{% set category_icons = {
|
||||
@@ -48,27 +48,27 @@
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start gap-4 mb-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold mb-1">Application Settings</h1>
|
||||
<h1 class="text-3xl font-bold mb-1">{{ _("settings.page_heading") }}</h1>
|
||||
<p class="text-gray-500 text-sm">
|
||||
Manage configuration. Priority: <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">DB</span> >
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 ml-1">ENV</span> >
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 ml-1">DEFAULT</span>
|
||||
<span class="mx-1.5">·</span> <span class="text-red-600">*</span> = restart required <span class="mx-1.5">·</span> <i class="fas fa-lock text-xs" aria-hidden="true"></i> = encrypted at rest
|
||||
{{ _("settings.manage_config_prefix") }} <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">{{ _("settings.source_db_badge") }}</span> >
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 ml-1">{{ _("settings.source_env_badge") }}</span> >
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 ml-1">{{ _("settings.source_default_badge") }}</span>
|
||||
<span class="mx-1.5">·</span> <span class="text-red-600">*</span> {{ _("settings.restart_required_suffix") }} <span class="mx-1.5">·</span> <i class="fas fa-lock text-xs" aria-hidden="true"></i> {{ _("settings.encrypted_suffix") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-shrink-0">
|
||||
<a href="/setup?step=1"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
<i class="fas fa-magic mr-1.5" aria-hidden="true"></i> Wizard
|
||||
<i class="fas fa-magic mr-1.5" aria-hidden="true"></i> {{ _("settings.wizard_btn") }}
|
||||
</a>
|
||||
<a href="/database-wizard"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
<i class="fas fa-database mr-1.5" aria-hidden="true"></i> DB Wizard
|
||||
<i class="fas fa-database mr-1.5" aria-hidden="true"></i> {{ _("settings.db_wizard_btn") }}
|
||||
</a>
|
||||
<div class="relative" x-data="{ exportOpen: false }">
|
||||
<button @click="exportOpen = !exportOpen"
|
||||
class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||
<i class="fas fa-download mr-1.5" aria-hidden="true"></i> Export
|
||||
<i class="fas fa-download mr-1.5" aria-hidden="true"></i> {{ _("settings.export_btn") }}
|
||||
<i class="fas fa-chevron-down ml-1 text-xs" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div x-show="exportOpen" @click.outside="exportOpen = false" x-transition
|
||||
@@ -76,18 +76,18 @@
|
||||
<a href="/api/settings/export-env?source=db"
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
|
||||
@click="exportOpen = false">
|
||||
<i class="fas fa-database mr-2 text-green-600" aria-hidden="true"></i>DB settings only
|
||||
<i class="fas fa-database mr-2 text-green-600" aria-hidden="true"></i>{{ _("settings.export_db_only") }}
|
||||
</a>
|
||||
<a href="/api/settings/export-env?source=effective"
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
|
||||
@click="exportOpen = false">
|
||||
<i class="fas fa-layer-group mr-2 text-blue-600" aria-hidden="true"></i>Full effective config
|
||||
<i class="fas fa-layer-group mr-2 text-blue-600" aria-hidden="true"></i>{{ _("settings.export_full_config") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/admin/settings/audit-log"
|
||||
class="inline-flex items-center px-3 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-blue-500">
|
||||
<i class="fas fa-history mr-1.5" aria-hidden="true"></i> Audit Log
|
||||
<i class="fas fa-history mr-1.5" aria-hidden="true"></i> {{ _("settings.audit_log_btn") }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,14 +99,14 @@
|
||||
type="search"
|
||||
x-model="searchQuery"
|
||||
@input="filterSettings()"
|
||||
placeholder="Search settings by name, key, or description…"
|
||||
placeholder="{{ _('settings.search_placeholder') }}"
|
||||
class="w-full pl-10 pr-20 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
||||
aria-label="Search settings"
|
||||
aria-label="{{ _('settings.search_aria_label') }}"
|
||||
/>
|
||||
<div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
|
||||
<span x-show="searchQuery" x-text="matchCount + ' found'" x-transition class="text-xs text-gray-400"></span>
|
||||
<button x-show="searchQuery" @click="searchQuery = ''; filterSettings()" type="button"
|
||||
class="text-gray-400 hover:text-gray-600" aria-label="Clear search">
|
||||
class="text-gray-400 hover:text-gray-600" aria-label="{{ _('settings.search_clear_aria') }}">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -125,9 +125,9 @@
|
||||
<!-- Two-column layout -->
|
||||
<div class="flex gap-6">
|
||||
<!-- Sidebar Navigation (hidden on small screens) -->
|
||||
<aside class="hidden lg:block w-56 flex-shrink-0" aria-label="Settings categories">
|
||||
<aside class="hidden lg:block w-56 flex-shrink-0" aria-label="{{ _('settings.categories_aria') }}">
|
||||
<nav class="settings-sidebar space-y-0.5 bg-white rounded-lg border border-gray-200 p-2 shadow-sm">
|
||||
<p class="px-3 py-1.5 text-xs font-semibold text-gray-400 uppercase tracking-wider">Categories</p>
|
||||
<p class="px-3 py-1.5 text-xs font-semibold text-gray-400 uppercase tracking-wider">{{ _("settings.categories_heading") }}</p>
|
||||
{% for category, settings_list in settings_data.items() %}
|
||||
<button
|
||||
type="button"
|
||||
@@ -149,11 +149,11 @@
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Mobile category jump (visible on small screens only) -->
|
||||
<div class="lg:hidden mb-4">
|
||||
<label for="mobile-category-select" class="sr-only">Jump to category</label>
|
||||
<label for="mobile-category-select" class="sr-only">{{ _("settings.jump_to_category") }}</label>
|
||||
<select id="mobile-category-select"
|
||||
@change="scrollToCategory($event.target.value)"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm shadow-sm">
|
||||
<option value="">Jump to category…</option>
|
||||
<option value="">{{ _("settings.jump_to_category") }}</option>
|
||||
{% for category in settings_data.keys() %}
|
||||
<option value="{{ category }}">{{ category }} ({{ settings_data[category]|length }})</option>
|
||||
{% endfor %}
|
||||
@@ -163,8 +163,8 @@
|
||||
<!-- No results state -->
|
||||
<div x-show="searchQuery && matchCount === 0" class="settings-no-results bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<i class="fas fa-search text-4xl text-gray-300 mb-3"></i>
|
||||
<p class="text-gray-500 text-lg font-medium">No settings found</p>
|
||||
<p class="text-gray-400 text-sm mt-1">Try a different search term or <button type="button" @click="searchQuery = ''; filterSettings()" class="text-blue-500 hover:underline">clear the search</button></p>
|
||||
<p class="text-gray-500 text-lg font-medium">{{ _("settings.no_results_heading") }}</p>
|
||||
<p class="text-gray-400 text-sm mt-1">{{ _("settings.no_results_hint") }} <button type="button" @click="searchQuery = ''; filterSettings()" class="text-blue-500 hover:underline">{{ _("settings.no_results_clear") }}</button></p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="saveSettings">
|
||||
@@ -191,7 +191,7 @@
|
||||
<h2 class="text-lg font-semibold text-gray-800">{{ category }}</h2>
|
||||
<span class="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full tabular-nums"
|
||||
x-text="(visibleCount['{{ category|e }}'] ?? {{ settings_list|length }}) + ' settings'">
|
||||
{{ settings_list|length }} settings
|
||||
{{ settings_list|length }} {{ _("settings.settings_count_suffix") }}
|
||||
</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-down text-gray-400 category-chevron"
|
||||
@@ -225,7 +225,7 @@
|
||||
<span class="text-red-600" title="Restart required">*</span>
|
||||
{% endif %}
|
||||
{% if setting.metadata.required %}
|
||||
<span class="text-red-600 text-xs">(required)</span>
|
||||
<span class="text-red-600 text-xs">{{ _("settings.required_label") }}</span>
|
||||
{% endif %}
|
||||
</label>
|
||||
<!-- Source Badge -->
|
||||
@@ -262,7 +262,7 @@
|
||||
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label for="{{ setting.key }}" class="ml-2 text-sm text-gray-700">
|
||||
Enable {{ setting.key.replace('_', ' ').title() }}
|
||||
{{ _("settings.boolean_enable_prefix") }} {{ setting.key.replace('_', ' ').title() }}
|
||||
</label>
|
||||
</div>
|
||||
{% elif setting.metadata.type == 'slider' %}
|
||||
@@ -302,7 +302,7 @@
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-gray-400">Effective value: <code x-text="formData['{{ setting.key }}'] || '(none)'"></code></p>
|
||||
<p class="mt-1 text-xs text-gray-400">{{ _("settings.effective_value_label") }} <code x-text="formData['{{ setting.key }}'] || '(none)'"></code></p>
|
||||
{% elif setting.metadata.type == 'user_autocomplete' %}
|
||||
<!-- User Autocomplete (WCAG 2.1 AA combobox pattern) -->
|
||||
<div class="relative" x-data="userAutocomplete('{{ setting.key }}')" @click.away="showSuggestions = false">
|
||||
@@ -320,7 +320,7 @@
|
||||
@keydown.enter.prevent="selectHighlighted()"
|
||||
@keydown.escape="showSuggestions = false"
|
||||
class="setting-input w-full px-3 py-2 pl-9 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Start typing to search users…"
|
||||
placeholder="{{ _('settings.user_autocomplete_placeholder') }}"
|
||||
autocomplete="off"
|
||||
role="combobox"
|
||||
aria-autocomplete="list"
|
||||
@@ -371,11 +371,11 @@
|
||||
class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg px-3 py-2 text-sm text-gray-500"
|
||||
role="status"
|
||||
>
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i> No matching users found
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i> {{ _("settings.user_autocomplete_empty") }}
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1" id="{{ setting.key }}_help">
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i>
|
||||
Type to search existing users by name, or enter any identifier manually.
|
||||
{{ _("settings.user_autocomplete_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
{% elif setting.metadata.type == 'autocomplete' %}
|
||||
@@ -395,7 +395,7 @@
|
||||
@keydown.enter.prevent="selectHighlighted()"
|
||||
@keydown.escape="showSuggestions = false"
|
||||
class="setting-input w-full px-3 py-2 pl-9 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Type to search or enter a value…"
|
||||
placeholder="{{ _('settings.autocomplete_placeholder') }}"
|
||||
autocomplete="off"
|
||||
role="combobox"
|
||||
aria-autocomplete="list"
|
||||
@@ -445,11 +445,11 @@
|
||||
class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg px-3 py-2 text-sm text-gray-500"
|
||||
role="status"
|
||||
>
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i> No matches — you can still type a custom value
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i> {{ _("settings.autocomplete_no_matches") }}
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1">
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i>
|
||||
Type to search known values, or enter any custom value.
|
||||
{{ _("settings.autocomplete_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
{% elif setting.metadata.type == 'model_picker' %}
|
||||
@@ -462,7 +462,7 @@
|
||||
list="{{ setting.key }}_models"
|
||||
x-model="formData['{{ setting.key }}']"
|
||||
class="setting-input w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Select a common model or type a custom name…"
|
||||
placeholder="{{ _('settings.model_picker_placeholder') }}"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<datalist id="{{ setting.key }}_models">
|
||||
@@ -472,7 +472,7 @@
|
||||
</datalist>
|
||||
<p class="text-xs text-gray-400 mt-1">
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i>
|
||||
Pick from the list or type any model name supported by your provider.
|
||||
{{ _("settings.model_picker_hint") }}
|
||||
</p>
|
||||
</div>
|
||||
{% elif setting.metadata.options %}
|
||||
@@ -483,7 +483,7 @@
|
||||
x-model="formData['{{ setting.key }}']"
|
||||
class="setting-input w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value="">— select —</option>
|
||||
<option value="">{{ _("common.select_placeholder") }}</option>
|
||||
{% for opt in setting.metadata.options %}
|
||||
<option value="{{ opt }}">{{ opt }}</option>
|
||||
{% endfor %}
|
||||
@@ -503,15 +503,15 @@
|
||||
autocomplete="off"
|
||||
/>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-3 space-x-2">
|
||||
<span class="text-xs text-gray-400" title="Value is encrypted at rest in database">
|
||||
<span class="text-xs text-gray-400" title="{{ _('settings.encrypted_title') }}">
|
||||
<i class="fas fa-lock"></i>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
@click="togglePassword('{{ setting.key }}')"
|
||||
class="text-gray-400 hover:text-gray-600 focus:outline-none"
|
||||
title="Show/hide value"
|
||||
aria-label="Toggle password visibility"
|
||||
title="{{ _('settings.toggle_visibility_title') }}"
|
||||
aria-label="{{ _('settings.toggle_visibility_aria') }}"
|
||||
>
|
||||
<i :class="showPassword['{{ setting.key }}'] ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
|
||||
</button>
|
||||
@@ -540,10 +540,10 @@
|
||||
@click="revertSetting('{{ setting.key }}')"
|
||||
:disabled="revertingKey === '{{ setting.key }}'"
|
||||
class="px-3 py-1 text-sm bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
|
||||
title="Remove DB override and revert to environment variable or default"
|
||||
title="{{ _('settings.revert_title') }}"
|
||||
>
|
||||
<span x-show="revertingKey !== '{{ setting.key }}'"><i class="fas fa-trash-alt mr-1" aria-hidden="true"></i>Remove from DB</span>
|
||||
<span x-show="revertingKey === '{{ setting.key }}'">Reverting…</span>
|
||||
<span x-show="revertingKey !== '{{ setting.key }}'"><i class="fas fa-trash-alt mr-1" aria-hidden="true"></i>{{ _("settings.revert_btn") }}</span>
|
||||
<span x-show="revertingKey === '{{ setting.key }}'">{{ _("settings.reverting") }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -552,10 +552,10 @@
|
||||
@click="saveSetting('{{ setting.key }}')"
|
||||
:disabled="savingKey === '{{ setting.key }}'"
|
||||
class="px-3 py-1 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
|
||||
title="Save this setting"
|
||||
title="{{ _('settings.save_setting_title') }}"
|
||||
>
|
||||
<span x-show="savingKey !== '{{ setting.key }}'"><i class="fas fa-save mr-1" aria-hidden="true"></i>Save</span>
|
||||
<span x-show="savingKey === '{{ setting.key }}'">Saving…</span>
|
||||
<span x-show="savingKey !== '{{ setting.key }}'"><i class="fas fa-save mr-1" aria-hidden="true"></i>{{ _("common.save") }}</span>
|
||||
<span x-show="savingKey === '{{ setting.key }}'">{{ _("settings.saving_state") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -573,15 +573,15 @@
|
||||
@click="resetForm"
|
||||
class="px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
Reset
|
||||
{{ _("common.reset") }}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving"
|
||||
class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span x-show="!saving">Save All Changes</span>
|
||||
<span x-show="saving">Saving...</span>
|
||||
<span x-show="!saving">{{ _("settings.save_all_btn") }}</span>
|
||||
<span x-show="saving">{{ _("settings.saving_state") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,37 +1,35 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Shared Links – DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("shared.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div x-data="sharedLinks()" x-init="init(); loadLinks()" class="container mx-auto px-4 py-8 max-w-5xl">
|
||||
<header class="mb-8">
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<i class="fas fa-share-alt text-blue-500" aria-hidden="true"></i>
|
||||
Shared Links
|
||||
{{ _("shared.heading") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-400 text-sm leading-relaxed max-w-2xl">
|
||||
Share documents with anyone via a time-limited or view-limited link.
|
||||
Recipients do not need a DocuElevate account. Links can be password-protected
|
||||
and revoked at any time.
|
||||
{{ _("shared.subtitle") }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Create link section -->
|
||||
<section class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6" aria-labelledby="create-link-heading">
|
||||
<h2 id="create-link-heading" class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Create New Shared Link</h2>
|
||||
<h2 id="create-link-heading" class="text-lg font-semibold text-gray-900 dark:text-white mb-4">{{ _("shared.create_heading") }}</h2>
|
||||
|
||||
<form @submit.prevent="createLink()" class="space-y-4">
|
||||
<!-- File ID -->
|
||||
<div class="flex flex-col sm:flex-row gap-3 items-start sm:items-end">
|
||||
<div class="flex-1">
|
||||
<label for="file-id-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
File ID <span class="text-red-500" aria-hidden="true">*</span>
|
||||
{{ _("shared.file_id_label") }} <span class="text-red-500" aria-hidden="true">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="file-id-input"
|
||||
type="number"
|
||||
x-model.number="newLink.file_id"
|
||||
placeholder="e.g. 42"
|
||||
placeholder="{{ _('shared.file_id_placeholder') }}"
|
||||
required
|
||||
min="1"
|
||||
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
|
||||
@@ -39,20 +37,20 @@
|
||||
aria-required="true"
|
||||
/>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
Find the file ID on the <a href="/files" class="underline hover:text-blue-600">Files</a> page or in the document detail URL.
|
||||
{{ _("shared.file_id_help_pre") }} <a href="/files" class="underline hover:text-blue-600">{{ _("shared.files_link") }}</a> {{ _("shared.file_id_help_post") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Label (optional) -->
|
||||
<div class="flex-1">
|
||||
<label for="link-label-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Label <span class="text-gray-400 font-normal">(optional)</span>
|
||||
{{ _("shared.label_label") }} <span class="text-gray-400 font-normal">({{ _("shared.optional") }})</span>
|
||||
</label>
|
||||
<input
|
||||
id="link-label-input"
|
||||
type="text"
|
||||
x-model="newLink.label"
|
||||
placeholder="e.g. Shared with Bob"
|
||||
placeholder="{{ _('shared.label_placeholder') }}"
|
||||
maxlength="255"
|
||||
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white text-sm"
|
||||
@@ -65,7 +63,7 @@
|
||||
<!-- Expiry -->
|
||||
<div class="flex-1">
|
||||
<label for="expires-select" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Expiry
|
||||
{{ _("shared.expiry_label") }}
|
||||
</label>
|
||||
<select
|
||||
id="expires-select"
|
||||
@@ -73,28 +71,28 @@
|
||||
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white text-sm"
|
||||
>
|
||||
<option :value="null">Never</option>
|
||||
<option value="1">1 hour</option>
|
||||
<option value="6">6 hours</option>
|
||||
<option value="12">12 hours</option>
|
||||
<option value="24">24 hours (1 day)</option>
|
||||
<option value="72">3 days</option>
|
||||
<option value="168">7 days</option>
|
||||
<option value="336">14 days</option>
|
||||
<option value="720">30 days</option>
|
||||
<option :value="null">{{ _("shared.expiry_never") }}</option>
|
||||
<option value="1">{{ _("shared.expiry_1h") }}</option>
|
||||
<option value="6">{{ _("shared.expiry_6h") }}</option>
|
||||
<option value="12">{{ _("shared.expiry_12h") }}</option>
|
||||
<option value="24">{{ _("shared.expiry_24h") }}</option>
|
||||
<option value="72">{{ _("shared.expiry_3d") }}</option>
|
||||
<option value="168">{{ _("shared.expiry_7d") }}</option>
|
||||
<option value="336">{{ _("shared.expiry_14d") }}</option>
|
||||
<option value="720">{{ _("shared.expiry_30d") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Max views -->
|
||||
<div class="flex-1">
|
||||
<label for="max-views-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Max downloads <span class="text-gray-400 font-normal">(optional)</span>
|
||||
{{ _("shared.max_downloads_label") }} <span class="text-gray-400 font-normal">({{ _("shared.optional") }})</span>
|
||||
</label>
|
||||
<input
|
||||
id="max-views-input"
|
||||
type="number"
|
||||
x-model.number="newLink.max_views"
|
||||
placeholder="Unlimited"
|
||||
placeholder="{{ _('shared.unlimited_placeholder') }}"
|
||||
min="1"
|
||||
max="10000"
|
||||
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
|
||||
@@ -105,13 +103,13 @@
|
||||
<!-- Password -->
|
||||
<div class="flex-1">
|
||||
<label for="link-password-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Password <span class="text-gray-400 font-normal">(optional)</span>
|
||||
{{ _("shared.password_label") }} <span class="text-gray-400 font-normal">({{ _("shared.optional") }})</span>
|
||||
</label>
|
||||
<input
|
||||
id="link-password-input"
|
||||
type="password"
|
||||
x-model="newLink.password"
|
||||
placeholder="Leave blank for no password"
|
||||
placeholder="{{ _('shared.password_placeholder') }}"
|
||||
maxlength="128"
|
||||
autocomplete="new-password"
|
||||
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
|
||||
@@ -135,7 +133,7 @@
|
||||
style="min-height:40px; min-width:44px;"
|
||||
>
|
||||
<i class="fas fa-share-alt mr-2" aria-hidden="true"></i>
|
||||
<span x-text="creating ? 'Creating…' : 'Create Link'"></span>
|
||||
<span x-text="creating ? '{{ _('shared.creating') }}' : '{{ _('shared.create_btn') }}'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -146,9 +144,9 @@
|
||||
<div class="flex items-start gap-3">
|
||||
<i class="fas fa-check-circle text-green-600 dark:text-green-400 mt-0.5 text-lg" aria-hidden="true"></i>
|
||||
<div class="flex-1">
|
||||
<p class="font-semibold text-green-800 dark:text-green-200 text-sm">Shared link created!</p>
|
||||
<p class="font-semibold text-green-800 dark:text-green-200 text-sm">{{ _("shared.link_created") }}</p>
|
||||
<p class="text-green-700 dark:text-green-300 text-xs mt-1">
|
||||
Copy and send this link to the recipient.
|
||||
{{ _("shared.link_created_help") }}
|
||||
</p>
|
||||
<div class="mt-3 flex items-center gap-2">
|
||||
<code
|
||||
@@ -164,10 +162,10 @@
|
||||
hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500
|
||||
transition-colors"
|
||||
style="min-height:40px; min-width:44px;"
|
||||
:aria-label="copied ? 'Copied!' : 'Copy link to clipboard'"
|
||||
:aria-label="copied ? '{{ _('common.copied') }}' : '{{ _('shared.copy_link_aria') }}'"
|
||||
>
|
||||
<i :class="copied ? 'fas fa-check text-green-600' : 'fas fa-copy'" aria-hidden="true"></i>
|
||||
<span class="ml-1 hidden sm:inline" x-text="copied ? 'Copied!' : 'Copy'"></span>
|
||||
<span class="ml-1 hidden sm:inline" x-text="copied ? '{{ _('common.copied') }}' : '{{ _('common.copy') }}'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,28 +178,28 @@
|
||||
<section class="bg-white dark:bg-gray-800 shadow rounded-lg p-6" aria-labelledby="links-heading">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 id="links-heading" class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Your Shared Links
|
||||
{{ _("shared.your_links") }}
|
||||
<span
|
||||
x-show="links.length > 0"
|
||||
class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
|
||||
x-text="links.length"
|
||||
aria-label="number of links"
|
||||
aria-label="{{ _('shared.links_count_aria') }}"
|
||||
></span>
|
||||
</h2>
|
||||
<button
|
||||
@click="loadLinks()"
|
||||
type="button"
|
||||
class="text-sm text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
|
||||
aria-label="Refresh shared links list"
|
||||
aria-label="{{ _('shared.refresh_aria') }}"
|
||||
>
|
||||
<i class="fas fa-sync-alt mr-1" aria-hidden="true"></i>Refresh
|
||||
<i class="fas fa-sync-alt mr-1" aria-hidden="true"></i>{{ _("common.refresh") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<template x-if="loading">
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500 py-4 text-center">
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i>Loading…
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i>{{ _("common.loading") }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@@ -209,22 +207,22 @@
|
||||
<template x-if="!loading && links.length === 0">
|
||||
<div class="text-center py-10 text-gray-400 dark:text-gray-500">
|
||||
<i class="fas fa-share-alt text-3xl mb-3" aria-hidden="true"></i>
|
||||
<p class="text-sm">No shared links yet. Create one above to get started.</p>
|
||||
<p class="text-sm">{{ _("shared.no_links") }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Links list -->
|
||||
<template x-if="!loading && links.length > 0">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm" aria-label="Shared links">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm" aria-label="{{ _('shared.table_aria') }}">
|
||||
<thead>
|
||||
<tr class="text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
<th scope="col" class="pb-3 pr-4">File / Label</th>
|
||||
<th scope="col" class="pb-3 pr-4">Link</th>
|
||||
<th scope="col" class="pb-3 pr-4">Expiry</th>
|
||||
<th scope="col" class="pb-3 pr-4">Views</th>
|
||||
<th scope="col" class="pb-3 pr-4">Status</th>
|
||||
<th scope="col" class="pb-3">Actions</th>
|
||||
<th scope="col" class="pb-3 pr-4">{{ _("shared.col_file_label") }}</th>
|
||||
<th scope="col" class="pb-3 pr-4">{{ _("shared.col_link") }}</th>
|
||||
<th scope="col" class="pb-3 pr-4">{{ _("shared.col_expiry") }}</th>
|
||||
<th scope="col" class="pb-3 pr-4">{{ _("shared.col_views") }}</th>
|
||||
<th scope="col" class="pb-3 pr-4">{{ _("common.status") }}</th>
|
||||
<th scope="col" class="pb-3">{{ _("common.actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100 dark:divide-gray-700">
|
||||
@@ -235,7 +233,7 @@
|
||||
<p class="font-medium text-gray-800 dark:text-gray-200 truncate" x-text="link.original_filename || ('File #' + link.file_id)"></p>
|
||||
<p x-show="link.label" class="text-xs text-gray-500 dark:text-gray-400 truncate" x-text="link.label"></p>
|
||||
<p x-show="link.has_password" class="text-xs text-yellow-600 dark:text-yellow-400 mt-0.5">
|
||||
<i class="fas fa-lock text-xs" aria-hidden="true"></i> Password protected
|
||||
<i class="fas fa-lock text-xs" aria-hidden="true"></i> {{ _("shared.password_protected") }}
|
||||
</p>
|
||||
</td>
|
||||
<!-- Link -->
|
||||
@@ -246,8 +244,8 @@
|
||||
type="button"
|
||||
@click="copyUrl(link.share_url)"
|
||||
class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded"
|
||||
aria-label="Copy link"
|
||||
title="Copy link"
|
||||
aria-label="{{ _('shared.copy_link_aria') }}"
|
||||
title="{{ _('shared.copy_link_title') }}"
|
||||
style="min-height:32px;min-width:32px;"
|
||||
>
|
||||
<i class="fas fa-copy text-xs" aria-hidden="true"></i>
|
||||
@@ -257,8 +255,8 @@
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="p-1 text-gray-400 hover:text-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded"
|
||||
aria-label="Open shared link"
|
||||
title="Open in new tab"
|
||||
aria-label="{{ _('shared.open_link_aria') }}"
|
||||
title="{{ _('shared.open_in_new_tab') }}"
|
||||
style="min-height:32px;min-width:32px;"
|
||||
>
|
||||
<i class="fas fa-external-link-alt text-xs" aria-hidden="true"></i>
|
||||
@@ -278,22 +276,22 @@
|
||||
<td class="py-3 pr-4 whitespace-nowrap">
|
||||
<template x-if="!link.is_active">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300">
|
||||
Revoked
|
||||
{{ _("shared.status_revoked") }}
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="link.is_active && isExpired(link)">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300">
|
||||
Expired
|
||||
{{ _("shared.status_expired") }}
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="link.is_active && isViewLimitReached(link)">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300">
|
||||
Limit reached
|
||||
{{ _("shared.status_limit_reached") }}
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="link.is_active && !isExpired(link) && !isViewLimitReached(link)">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300">
|
||||
Active
|
||||
{{ _("shared.status_active") }}
|
||||
</span>
|
||||
</template>
|
||||
</td>
|
||||
@@ -307,9 +305,9 @@
|
||||
border border-red-300 dark:border-red-700 rounded hover:bg-red-50 dark:hover:bg-red-900/20
|
||||
focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors"
|
||||
style="min-height:32px;min-width:44px;"
|
||||
:aria-label="'Revoke shared link for ' + (link.original_filename || 'file')"
|
||||
:aria-label="'{{ _('shared.revoke_aria_prefix') }} ' + (link.original_filename || '{{ _('shared.revoke_aria_file') }}')"
|
||||
>
|
||||
<i class="fas fa-ban mr-1" aria-hidden="true"></i> Revoke
|
||||
<i class="fas fa-ban mr-1" aria-hidden="true"></i> {{ _("shared.revoke_btn") }}
|
||||
</button>
|
||||
<span x-show="!link.is_active" class="text-xs text-gray-400 dark:text-gray-500">—</span>
|
||||
</td>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Document Similarity - DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("similarity.page_title") }}{% endblock %}
|
||||
|
||||
{% block head_extra %}
|
||||
<style>
|
||||
@@ -97,45 +97,43 @@
|
||||
<main id="main-content" class="sim-container px-4 py-8">
|
||||
<h1 class="text-2xl font-bold mb-2">
|
||||
<i class="fas fa-project-diagram text-blue-500" aria-hidden="true"></i>
|
||||
Document Similarity
|
||||
{{ _("similarity.heading") }}
|
||||
</h1>
|
||||
<p class="text-gray-500 mb-6 text-sm">
|
||||
Pairs of documents with high semantic similarity, ranked by score.
|
||||
Embeddings are computed during document ingestion; a background task
|
||||
also backfills any files that were processed before this feature was enabled.
|
||||
{{ _("similarity.subtitle") }}
|
||||
</p>
|
||||
|
||||
<!-- Embedding coverage stats -->
|
||||
<div class="stats-bar">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ total_files }}</div>
|
||||
<div class="stat-label">Total Files</div>
|
||||
<div class="stat-label">{{ _("similarity.stat_total_files") }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" style="color: #2563eb;">{{ files_with_embedding }}</div>
|
||||
<div class="stat-label">With Embedding</div>
|
||||
<div class="stat-label">{{ _("similarity.stat_with_embedding") }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" style="color: {% if files_missing_embedding > 0 %}#d97706{% else %}#059669{% endif %};">
|
||||
{{ files_missing_embedding }}
|
||||
</div>
|
||||
<div class="stat-label">Missing Embedding</div>
|
||||
<div class="stat-label">{{ _("similarity.stat_missing_embedding") }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value text-sm" style="word-break: break-all;">{{ embedding_model }}</div>
|
||||
<div class="stat-label">Embedding Model</div>
|
||||
<div class="stat-label">{{ _("similarity.stat_embedding_model") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if files_missing_embedding > 0 %}
|
||||
<div style="background: #fffff0; border: 1px solid #fefcbf; border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1.5rem; font-size: 0.85rem; color: #975a16;">
|
||||
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
|
||||
<strong>{{ files_missing_embedding }}</strong> file(s) have OCR text but no embedding yet.
|
||||
The background task will compute them automatically every 5 minutes, or you can
|
||||
<strong>{{ files_missing_embedding }}</strong> {{ _("similarity.files_missing_text") }}
|
||||
{{ _("similarity.backfill_auto") }}
|
||||
<button onclick="triggerBackfill()" id="backfill-btn"
|
||||
style="background: #d97706; color: white; border: none; padding: 0.2rem 0.6rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.8rem; min-height: 44px; min-width: 44px;"
|
||||
aria-label="Trigger embedding computation for all files missing embeddings">
|
||||
trigger it now
|
||||
aria-label="{{ _('similarity.trigger_aria') }}">
|
||||
{{ _("similarity.trigger_now") }}
|
||||
</button>.
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -144,12 +142,12 @@
|
||||
<div class="controls">
|
||||
<form id="pairsForm" onsubmit="loadPairs(event)" class="controls-form">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="pairThreshold">Min. similarity</label>
|
||||
<label for="pairThreshold">{{ _("similarity.min_similarity_label") }}</label>
|
||||
<input type="number" id="pairThreshold" min="0" max="1" step="0.05"
|
||||
value="{{ default_threshold }}" style="min-height:44px;">
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="pairLimit">Per page</label>
|
||||
<label for="pairLimit">{{ _("similarity.per_page_label") }}</label>
|
||||
<select id="pairLimit" style="min-height:44px;">
|
||||
<option value="25">25</option>
|
||||
<option value="50" selected>50</option>
|
||||
@@ -159,7 +157,7 @@
|
||||
<button type="submit"
|
||||
style="min-height:44px; background-color: #2563eb; color: white; font-weight: 700;
|
||||
padding: 0 1.25rem; border: none; border-radius: 0.5rem; cursor: pointer;">
|
||||
<i class="fas fa-search" aria-hidden="true"></i> Find Pairs
|
||||
<i class="fas fa-search" aria-hidden="true"></i> {{ _("similarity.find_pairs_btn") }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -167,23 +165,23 @@
|
||||
<!-- Results area -->
|
||||
<div id="pairs-loading" style="text-align: center; padding: 2rem; color: #718096;">
|
||||
<i class="fas fa-spinner fa-spin" aria-hidden="true" style="font-size: 1.5rem; margin-bottom: 0.5rem;"></i>
|
||||
<p>Scanning for similar document pairs…</p>
|
||||
<p>{{ _("similarity.scanning") }}</p>
|
||||
</div>
|
||||
<div id="pairs-content" style="display: none;" aria-live="polite"></div>
|
||||
<div id="pairs-empty" style="display: none;" class="empty-state">
|
||||
<i class="fas fa-check-circle text-green-400" aria-hidden="true"></i>
|
||||
<p class="font-semibold text-lg text-gray-700">No similar pairs found</p>
|
||||
<p class="font-semibold text-lg text-gray-700">{{ _("similarity.no_pairs_heading") }}</p>
|
||||
<p class="text-sm mt-1" id="pairs-empty-detail">
|
||||
No document pairs exceed the similarity threshold.
|
||||
{{ _("similarity.no_pairs_detail") }}
|
||||
</p>
|
||||
</div>
|
||||
<div id="pairs-error" style="display: none;" class="empty-state">
|
||||
<i class="fas fa-exclamation-triangle text-red-400" aria-hidden="true"></i>
|
||||
<p class="font-semibold text-lg text-gray-700" id="pairs-error-msg">Failed to load pairs.</p>
|
||||
<p class="font-semibold text-lg text-gray-700" id="pairs-error-msg">{{ _("similarity.load_error") }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav id="pairs-pagination" class="pagination" style="display: none;" aria-label="Similarity pairs pagination"></nav>
|
||||
<nav id="pairs-pagination" class="pagination" style="display: none;" aria-label="{{ _('similarity.pagination_aria') }}"></nav>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}My Subscription – DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("subscription.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
@@ -8,9 +8,9 @@
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 flex items-center gap-3">
|
||||
<i class="fas fa-layer-group text-indigo-500" aria-hidden="true"></i>
|
||||
My Subscription
|
||||
{{ _("subscription.heading") }}
|
||||
</h1>
|
||||
<p class="text-gray-500 text-sm mt-1">Your current plan, usage and available upgrades.</p>
|
||||
<p class="text-gray-500 text-sm mt-1">{{ _("subscription.subtitle") }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Flash messages -->
|
||||
@@ -21,11 +21,10 @@
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-xl p-6 flex items-start gap-4">
|
||||
<i class="fas fa-info-circle text-blue-500 text-2xl flex-shrink-0 mt-0.5" aria-hidden="true"></i>
|
||||
<div>
|
||||
<p class="font-semibold text-blue-800">Multi-user mode is not enabled.</p>
|
||||
<p class="font-semibold text-blue-800">{{ _("subscription.single_user_title") }}</p>
|
||||
<p class="text-blue-700 text-sm mt-1">
|
||||
Subscription tiers apply when multi-user mode is active. Your instance currently runs in
|
||||
single-user mode with no processing limits.
|
||||
An admin can enable multi-user mode via <a href="/settings" class="underline hover:text-blue-900">Settings</a>.
|
||||
{% set settings_link %}<a href="/settings" class="underline hover:text-blue-900">{{ _("nav.settings") }}</a>{% endset %}
|
||||
{{ _("subscription.single_user_body", settings_link=settings_link) | safe }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,17 +36,17 @@
|
||||
<div class="bg-amber-50 border border-amber-300 rounded-xl p-4 mb-6 flex items-start gap-3">
|
||||
<i class="fas fa-clock text-amber-500 text-xl flex-shrink-0 mt-0.5" aria-hidden="true"></i>
|
||||
<div class="flex-1">
|
||||
<p class="font-semibold text-amber-800">Pending plan change scheduled</p>
|
||||
<p class="font-semibold text-amber-800">{{ _("subscription.pending_title") }}</p>
|
||||
<p class="text-amber-700 text-sm mt-1">
|
||||
Your plan will change to <strong>{{ pending_tier.name }}</strong>
|
||||
on <strong>{% if pending_date %}{{ pending_date.strftime('%B') }} {{ pending_date.day }}, {{ pending_date.year }}{% endif %}</strong>.
|
||||
You keep all current plan benefits until then.
|
||||
{{ _("subscription.pending_will_change") }} <strong>{{ pending_tier.name }}</strong>
|
||||
{{ _("subscription.pending_on") }} <strong>{% if pending_date %}{{ pending_date.strftime('%B') }} {{ pending_date.day }}, {{ pending_date.year }}{% endif %}</strong>.
|
||||
{{ _("subscription.pending_benefits") }}
|
||||
</p>
|
||||
</div>
|
||||
<button type="button" onclick="cancelPendingChange()"
|
||||
class="ml-auto flex-shrink-0 text-sm text-amber-700 underline hover:text-amber-900 font-medium"
|
||||
aria-label="Cancel pending plan change">
|
||||
Cancel change
|
||||
aria-label="{{ _('subscription.cancel_pending') }}">
|
||||
{{ _("subscription.cancel_pending") }}
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -68,18 +67,18 @@
|
||||
{% else %}fa-bolt text-purple-600{% endif %}
|
||||
text-2xl" aria-hidden="true"></i>
|
||||
</div>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-widest">Current Plan</p>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-widest">{{ _("subscription.current_plan") }}</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">{{ tier.name }}</p>
|
||||
<p class="text-gray-500 text-sm mt-1">{{ tier.tagline }}</p>
|
||||
{% if tier.price_monthly > 0 %}
|
||||
<p class="mt-3 text-lg font-bold text-indigo-600">${{ tier.price_monthly }}<span class="text-sm font-normal text-gray-400">/month</span></p>
|
||||
<p class="mt-3 text-lg font-bold text-indigo-600">${{ tier.price_monthly }}<span class="text-sm font-normal text-gray-400">{{ _("subscription.per_month") }}</span></p>
|
||||
{% else %}
|
||||
<p class="mt-3 text-lg font-bold text-gray-500">Free</p>
|
||||
<p class="mt-3 text-lg font-bold text-gray-500">{{ _("subscription.free") }}</p>
|
||||
{% endif %}
|
||||
{% if period_start %}
|
||||
<p class="text-xs text-gray-400 mt-2">
|
||||
<i class="fas fa-calendar-alt mr-1" aria-hidden="true"></i>
|
||||
Since {{ period_start.strftime('%b') }} {{ period_start.day }}, {{ period_start.year }}
|
||||
{{ _("subscription.since") }} {{ period_start.strftime('%b') }} {{ period_start.day }}, {{ period_start.year }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -87,13 +86,13 @@
|
||||
<!-- Usage this period -->
|
||||
{% if usage %}
|
||||
<div class="md:col-span-2 bg-white rounded-xl shadow p-6">
|
||||
<h2 class="text-sm font-semibold text-gray-500 uppercase tracking-widest mb-4">Usage</h2>
|
||||
<h2 class="text-sm font-semibold text-gray-500 uppercase tracking-widest mb-4">{{ _("subscription.usage_heading") }}</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
|
||||
<!-- Lifetime -->
|
||||
<div class="text-center">
|
||||
<p class="text-3xl font-extrabold text-gray-900">{{ usage.lifetime }}</p>
|
||||
<p class="text-xs text-gray-500 mt-1">Total files (lifetime)</p>
|
||||
<p class="text-xs text-gray-500 mt-1">{{ _("subscription.lifetime_files") }}</p>
|
||||
{% if tier.lifetime_file_limit > 0 %}
|
||||
<div class="mt-2">
|
||||
{% set lifetime_pct = ((usage.lifetime / tier.lifetime_file_limit) * 100) | int %}
|
||||
@@ -106,14 +105,14 @@
|
||||
<p class="text-xs text-gray-400 mt-1">{{ usage.lifetime }} / {{ tier.lifetime_file_limit }}</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-xs text-green-600 mt-1">Unlimited</p>
|
||||
<p class="text-xs text-green-600 mt-1">{{ _("subscription.unlimited") }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Today -->
|
||||
<div class="text-center">
|
||||
<p class="text-3xl font-extrabold text-gray-900">{{ usage.today }}</p>
|
||||
<p class="text-xs text-gray-500 mt-1">Files today</p>
|
||||
<p class="text-xs text-gray-500 mt-1">{{ _("subscription.today_files") }}</p>
|
||||
{% if tier.daily_upload_limit > 0 %}
|
||||
<div class="mt-2">
|
||||
{% set today_pct = ((usage.today / tier.daily_upload_limit) * 100) | int %}
|
||||
@@ -123,17 +122,17 @@
|
||||
{% if today_pct >= 90 %}bg-red-500{% elif today_pct >= 70 %}bg-yellow-500{% else %}bg-blue-500{% endif %}"
|
||||
style="width: {{ [today_pct, 100] | min }}%"></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1">{{ usage.today }} / {{ tier.daily_upload_limit }} today</p>
|
||||
<p class="text-xs text-gray-400 mt-1">{{ usage.today }} / {{ tier.daily_upload_limit }} {{ _("subscription.today_label") }}</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-xs text-green-600 mt-1">Unlimited</p>
|
||||
<p class="text-xs text-green-600 mt-1">{{ _("subscription.unlimited") }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- This month -->
|
||||
<div class="text-center">
|
||||
<p class="text-3xl font-extrabold text-gray-900">{{ usage.month }}</p>
|
||||
<p class="text-xs text-gray-500 mt-1">Files this month</p>
|
||||
<p class="text-xs text-gray-500 mt-1">{{ _("subscription.month_files") }}</p>
|
||||
{% if tier.monthly_upload_limit > 0 %}
|
||||
<div class="mt-2">
|
||||
{% set month_pct = ((usage.month / tier.monthly_upload_limit) * 100) | int %}
|
||||
@@ -143,10 +142,10 @@
|
||||
{% if month_pct >= 90 %}bg-red-500{% elif month_pct >= 70 %}bg-yellow-500{% else %}bg-indigo-500{% endif %}"
|
||||
style="width: {{ [month_pct, 100] | min }}%"></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1">{{ usage.month }} / {{ tier.monthly_upload_limit }} this month</p>
|
||||
<p class="text-xs text-gray-400 mt-1">{{ usage.month }} / {{ tier.monthly_upload_limit }} {{ _("subscription.this_month_label") }}</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-xs text-green-600 mt-1">Unlimited</p>
|
||||
<p class="text-xs text-green-600 mt-1">{{ _("subscription.unlimited") }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -160,7 +159,7 @@
|
||||
<div class="bg-white rounded-xl shadow p-6 mb-8">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<i class="fas fa-list-check text-green-500" aria-hidden="true"></i>
|
||||
What's included in your plan
|
||||
{{ _("subscription.features_heading") }}
|
||||
</h2>
|
||||
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-gray-600">
|
||||
{% for feature in tier.features %}
|
||||
@@ -176,7 +175,7 @@
|
||||
<div class="mb-8">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<i class="fas fa-layer-group text-indigo-500" aria-hidden="true"></i>
|
||||
Available Plans
|
||||
{{ _("subscription.available_plans_heading") }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{% for t in all_tiers %}
|
||||
@@ -192,11 +191,11 @@
|
||||
|
||||
{% if is_current %}
|
||||
<span class="absolute top-3 right-3 text-xs bg-indigo-100 text-indigo-700 font-semibold rounded-full px-2 py-0.5">
|
||||
Current
|
||||
{{ _("subscription.current_badge") }}
|
||||
</span>
|
||||
{% elif is_pending %}
|
||||
<span class="absolute top-3 right-3 text-xs bg-amber-100 text-amber-700 font-semibold rounded-full px-2 py-0.5">
|
||||
Pending
|
||||
{{ _("subscription.pending_badge") }}
|
||||
</span>
|
||||
{% elif t.badge %}
|
||||
<span class="absolute top-3 right-3 text-xs bg-indigo-100 text-indigo-700 font-semibold rounded-full px-2 py-0.5">
|
||||
@@ -208,9 +207,9 @@
|
||||
<p class="font-bold text-gray-900 pr-16">{{ t.name }}</p>
|
||||
<p class="text-gray-500 text-xs mt-1 mb-3">{{ t.tagline }}</p>
|
||||
{% if t.price_monthly > 0 %}
|
||||
<p class="text-xl font-extrabold text-gray-900">${{ t.price_monthly }}<span class="text-sm font-normal text-gray-400">/mo</span></p>
|
||||
<p class="text-xl font-extrabold text-gray-900">${{ t.price_monthly }}<span class="text-sm font-normal text-gray-400">{{ _("subscription.per_mo") }}</span></p>
|
||||
{% else %}
|
||||
<p class="text-xl font-extrabold text-gray-500">Free</p>
|
||||
<p class="text-xl font-extrabold text-gray-500">{{ _("subscription.free") }}</p>
|
||||
{% endif %}
|
||||
<ul class="mt-3 space-y-1 text-xs text-gray-600">
|
||||
{% for feature in t.features[:3] %}
|
||||
@@ -220,7 +219,7 @@
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% if t.features | length > 3 %}
|
||||
<li class="text-indigo-500 font-medium">+ {{ (t.features | length) - 3 }} more</li>
|
||||
<li class="text-indigo-500 font-medium">+ {{ (t.features | length) - 3 }} {{ _("subscription.more_features_label") }}</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -228,14 +227,14 @@
|
||||
<div class="mt-4">
|
||||
{% if is_current and not pending_tier_id %}
|
||||
<span class="block text-center py-2 px-4 rounded-lg bg-gray-100 text-gray-400 text-sm font-semibold cursor-default">
|
||||
Your current plan
|
||||
{{ _("subscription.current_plan_cta") }}
|
||||
</span>
|
||||
{% elif is_current and pending_tier_id %}
|
||||
<!-- Keep current plan (cancel pending downgrade) -->
|
||||
<button type="button"
|
||||
onclick="changePlan('{{ t.id }}')"
|
||||
class="block w-full text-center py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition">
|
||||
Keep {{ t.name }}
|
||||
{{ _("subscription.keep_plan_prefix") }} {{ t.name }}
|
||||
</button>
|
||||
{% elif is_upgrade %}
|
||||
{% if t.id == 'business' %}
|
||||
@@ -247,21 +246,21 @@
|
||||
<button type="button"
|
||||
onclick="changePlan('{{ t.id }}')"
|
||||
class="block w-full text-center py-2 px-4 rounded-lg bg-green-600 hover:bg-green-700 text-white text-sm font-semibold transition">
|
||||
Upgrade to {{ t.name }}
|
||||
{{ _("subscription.upgrade_to_prefix") }} {{ t.name }}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% elif is_pending %}
|
||||
<button type="button"
|
||||
onclick="cancelPendingChange()"
|
||||
class="block w-full text-center py-2 px-4 rounded-lg bg-amber-100 hover:bg-amber-200 text-amber-800 text-sm font-semibold transition">
|
||||
Cancel scheduled change
|
||||
{{ _("subscription.cancel_scheduled") }}
|
||||
</button>
|
||||
{% else %}
|
||||
<!-- Downgrade -->
|
||||
<button type="button"
|
||||
onclick="changePlan('{{ t.id }}')"
|
||||
class="block w-full text-center py-2 px-4 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold transition">
|
||||
Downgrade to {{ t.name }}
|
||||
{{ _("subscription.downgrade_to_prefix") }} {{ t.name }}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -270,7 +269,7 @@
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-3">
|
||||
<i class="fas fa-info-circle mr-1" aria-hidden="true"></i>
|
||||
Upgrades take effect immediately. Downgrades are scheduled for the end of your current billing period.
|
||||
{{ _("subscription.upgrade_info") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -279,7 +278,7 @@
|
||||
<!-- Back link -->
|
||||
<div class="mt-8">
|
||||
<a href="/" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium flex items-center gap-1">
|
||||
<i class="fas fa-arrow-left text-xs" aria-hidden="true"></i> Back to Dashboard
|
||||
<i class="fas fa-arrow-left text-xs" aria-hidden="true"></i> {{ _("subscription.back_to_dashboard") }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,65 +1,66 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Terms of Service - DocuElevate{% endblock %}
|
||||
{% block title %}{{ _("terms.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<h1 class="text-4xl font-bold mb-6">Terms of Service</h1>
|
||||
<p class="text-sm text-gray-500 mb-8">Last Updated: {{ current_date|default('May 14, 2024') }}</p>
|
||||
<h1 class="text-4xl font-bold mb-6">{{ _("terms.heading") }}</h1>
|
||||
<p class="text-sm text-gray-500 mb-8">{{ _("terms.last_updated") }} {{ current_date|default('May 14, 2024') }}</p>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">1. Acceptance of Terms</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("terms.s1_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
By accessing or using DocuElevate, you agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use this service.
|
||||
{{ _("terms.s1_p1") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">2. Description of Service</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("terms.s2_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
DocuElevate provides document processing, OCR, metadata extraction, and storage services. We reserve the right to modify or discontinue any aspect of the service at any time.
|
||||
{{ _("terms.s2_p1") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">3. User Responsibilities</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("terms.s3_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
You are responsible for:
|
||||
{{ _("terms.s3_p1") }}
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
|
||||
<li>All content you upload to DocuElevate</li>
|
||||
<li>Ensuring you have proper rights to upload and process documents</li>
|
||||
<li>Maintaining the confidentiality of your account credentials</li>
|
||||
<li>Any activity that occurs under your account</li>
|
||||
<li>{{ _("terms.s3_li1") }}</li>
|
||||
<li>{{ _("terms.s3_li2") }}</li>
|
||||
<li>{{ _("terms.s3_li3") }}</li>
|
||||
<li>{{ _("terms.s3_li4") }}</li>
|
||||
</ul>
|
||||
<p class="text-gray-700 mb-3">
|
||||
By using our service, you also agree to our <a href="/privacy" class="text-blue-600 hover:underline">Privacy Policy</a> and <a href="/cookies" class="text-blue-600 hover:underline">Cookie Policy</a>.
|
||||
{{ _("terms.s3_p2_pre") }} <a href="/privacy" class="text-blue-600 hover:underline">{{ _("terms.privacy_link") }}</a>
|
||||
{{ _("terms.s3_p2_and") }} <a href="/cookies" class="text-blue-600 hover:underline">{{ _("terms.cookie_link") }}</a>{{ _("terms.s3_p2_post") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">4. Intellectual Property Rights</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("terms.s4_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
DocuElevate respects intellectual property rights. Users may not upload content that infringes on the intellectual property rights of others.
|
||||
{{ _("terms.s4_p1") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">5. Limitation of Liability</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("terms.s5_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
DocuElevate provides the service "as is" without warranties of any kind. We shall not be liable for any direct, indirect, incidental, special, consequential, or punitive damages resulting from your use of or inability to use the service.
|
||||
{{ _("terms.s5_p1") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">6. Governing Law</h2>
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ _("terms.s6_heading") }}</h2>
|
||||
<p class="text-gray-700 mb-3">
|
||||
These Terms shall be governed by the laws of Germany, without regard to its conflict of law provisions.
|
||||
{{ _("terms.s6_p1") }}
|
||||
</p>
|
||||
<p class="text-gray-700 mb-3">
|
||||
If you have any questions about these Terms, please contact us at <a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>.
|
||||
{{ _("terms.s6_p2_pre") }} <a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>{{ _("terms.s6_p2_post") }}
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
For information about how we use cookies, please see our <a href="/cookies" class="text-blue-600 hover:underline">Cookie Policy</a>. For licensing information, please refer to our <a href="/license" class="text-blue-600 hover:underline">License Information</a>.
|
||||
{{ _("terms.s6_p3_pre") }} <a href="/cookies" class="text-blue-600 hover:underline">{{ _("terms.cookie_link") }}</a>{{ _("terms.s6_p3_mid") }} <a href="/license" class="text-blue-600 hover:underline">{{ _("terms.license_link") }}</a>{{ _("terms.s6_p3_post") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Upload Document{% endblock %}
|
||||
{% block title %}{{ _("upload.page_title") }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex flex-col items-center justify-center p-4 sm:p-8">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8">Upload Files</h1>
|
||||
<h1 class="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8">{{ _("upload.page_title") }}</h1>
|
||||
|
||||
<!-- File Upload Section -->
|
||||
<div class="w-full max-w-2xl mb-6 sm:mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">Upload from Device</h2>
|
||||
<h2 class="text-xl font-semibold mb-4">{{ _("upload.section_device") }}</h2>
|
||||
<form action="/api/ui-upload" method="POST" enctype="multipart/form-data">
|
||||
<div
|
||||
id="dropZone"
|
||||
class="border-4 border-dashed border-gray-300 rounded-lg p-6 sm:p-8 bg-white text-center w-full"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="File upload area. Drag and drop files here, or press Enter to browse files."
|
||||
aria-label="{{ _('upload.drop_zone_aria') }}"
|
||||
ondragover="handleDragOver(event)"
|
||||
ondragleave="handleDragLeave(event)"
|
||||
>
|
||||
<p class="text-gray-500 mb-4 hidden sm:block">
|
||||
Drag & drop files or folders here, or click to select files.
|
||||
{{ _("upload.drop_hint_desktop") }}
|
||||
</p>
|
||||
<p class="text-gray-500 mb-4 sm:hidden">
|
||||
Tap to select files or use the camera button below.
|
||||
{{ _("upload.drop_hint_mobile") }}
|
||||
</p>
|
||||
<input
|
||||
id="fileInput"
|
||||
@@ -31,7 +31,7 @@
|
||||
onchange="handleFileSelect(event)"
|
||||
name="files"
|
||||
multiple
|
||||
aria-label="Select files to upload"
|
||||
aria-label="{{ _('upload.select_file') }}"
|
||||
accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,image/*"
|
||||
/>
|
||||
<!-- Browse Files button (all devices) -->
|
||||
@@ -41,11 +41,11 @@
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-200 mb-4"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
<i class="fas fa-folder-open mr-2" aria-hidden="true"></i> Browse Files
|
||||
<i class="fas fa-folder-open mr-2" aria-hidden="true"></i> {{ _("upload.browse_button") }}
|
||||
</button>
|
||||
<div class="text-sm text-gray-500 mt-2">
|
||||
<p>Allowed types: PDF, Office documents (Word, Excel, PowerPoint, etc.), Images</p>
|
||||
<p>Maximum size: 500MB per file • Directories are uploaded recursively</p>
|
||||
<p>{{ _("upload.file_types") }}</p>
|
||||
<p>{{ _("upload.file_size_hint") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
class="w-full flex items-center justify-center gap-2 bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition duration-200 cursor-pointer"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
<i class="fas fa-camera" aria-hidden="true"></i> Take Photo / Scan Document
|
||||
<i class="fas fa-camera" aria-hidden="true"></i> {{ _("upload.camera_button") }}
|
||||
<input
|
||||
id="cameraInput"
|
||||
type="file"
|
||||
@@ -63,7 +63,7 @@
|
||||
onchange="handleFileSelect(event)"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
aria-label="Take photo or scan document"
|
||||
aria-label="{{ _('upload.camera_button') }}"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
@@ -72,40 +72,40 @@
|
||||
|
||||
<!-- URL Upload Section -->
|
||||
<div class="w-full max-w-2xl mb-6 sm:mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">Upload from URL</h2>
|
||||
<h2 class="text-xl font-semibold mb-4">{{ _("upload.section_url") }}</h2>
|
||||
<div class="bg-white border border-gray-300 rounded-lg p-4 sm:p-6">
|
||||
<form id="urlUploadForm" class="space-y-4">
|
||||
<div>
|
||||
<label for="urlInput" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
File URL
|
||||
{{ _("upload.url_label") }}
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="urlInput"
|
||||
name="url"
|
||||
placeholder="https://example.com/document.pdf"
|
||||
placeholder="{{ _('upload.url_placeholder') }}"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
style="min-height:44px;"
|
||||
required
|
||||
/>
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
Enter a direct link to a file (PDF, Office documents, or images)
|
||||
{{ _("upload.url_description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="urlFilename" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Filename (optional)
|
||||
{{ _("upload.filename_label") }}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="urlFilename"
|
||||
name="filename"
|
||||
placeholder="my-document.pdf"
|
||||
placeholder="{{ _('upload.filename_placeholder') }}"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
style="min-height:44px;"
|
||||
/>
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
Leave empty to use filename from URL
|
||||
{{ _("upload.filename_description") }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@@ -113,7 +113,7 @@
|
||||
class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
Download and Process
|
||||
{{ _("upload.download_button") }}
|
||||
</button>
|
||||
</form>
|
||||
<div id="urlStatusMessage" class="mt-4" aria-live="polite"></div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DocuElevate - Verify Your Email</title>
|
||||
<title>{{ _("auth.verify_email_page_title") }}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
@@ -13,7 +13,7 @@
|
||||
<body class="bg-gray-100 min-h-screen flex items-center justify-center py-8">
|
||||
<main class="bg-white rounded-lg shadow-lg p-8 max-w-md w-full text-center" role="main">
|
||||
<div class="flex justify-center mb-6">
|
||||
<img src="/static/images/logo_writing.svg" alt="DocuElevate Logo" class="h-16">
|
||||
<img src="/static/images/logo_writing.svg" alt="{{ _('auth.logo_alt') }}" class="h-16">
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mb-4">
|
||||
@@ -22,19 +22,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-2">Check your inbox</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-2">{{ _("auth.verify_email_heading") }}</h1>
|
||||
<p class="text-gray-600 mb-6">
|
||||
We've sent you a verification email. Please click the link in the email to activate your account.
|
||||
{{ _("auth.verify_email_message") }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 mb-8">
|
||||
The link expires in 24 hours. If you don't see the email, check your spam folder.
|
||||
{{ _("auth.verify_email_expiry") }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
x-data="{ email: '', loading: false, message: '', error: '' }"
|
||||
class="border-t border-gray-100 pt-6"
|
||||
>
|
||||
<p class="text-sm text-gray-600 mb-3">Didn't receive it?</p>
|
||||
<p class="text-sm text-gray-600 mb-3">{{ _("auth.verify_email_resend_prompt") }}</p>
|
||||
|
||||
<div x-show="message" x-cloak
|
||||
class="bg-green-100 border-l-4 border-green-500 text-green-700 p-3 mb-4 rounded text-sm"
|
||||
@@ -73,14 +73,14 @@
|
||||
novalidate
|
||||
>
|
||||
<div>
|
||||
<label for="resend-email" class="sr-only">Email address</label>
|
||||
<label for="resend-email" class="sr-only">{{ _("auth.verify_email_resend_label") }}</label>
|
||||
<input
|
||||
type="email" id="resend-email" name="email"
|
||||
x-model="email"
|
||||
placeholder="Enter your email address"
|
||||
placeholder="{{ _('auth.verify_email_resend_placeholder') }}"
|
||||
autocomplete="email"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-500 focus:ring-opacity-50 text-sm"
|
||||
aria-label="Email address for resend"
|
||||
aria-label="{{ _('auth.verify_email_resend_aria_label') }}"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
</div>
|
||||
@@ -90,9 +90,9 @@
|
||||
class="w-full flex justify-center py-2 px-4 border border-indigo-600 rounded-md text-sm font-medium text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
|
||||
style="min-height:44px;"
|
||||
>
|
||||
<span x-show="!loading">Resend verification email</span>
|
||||
<span x-show="!loading">{{ _("auth.verify_email_resend_button") }}</span>
|
||||
<span x-show="loading" x-cloak>
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i>Sending…
|
||||
<i class="fas fa-spinner fa-spin mr-2" aria-hidden="true"></i>{{ _("common.loading") }}
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
@@ -100,7 +100,7 @@
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a href="/login" class="text-sm font-medium text-blue-600 hover:text-blue-500">
|
||||
Back to sign in
|
||||
{{ _("auth.verify_email_back_sign_in") }}
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user