generated from coulomb/repo-seed
tegwick
1df93bd385
- Local tag is now clickable - checks if document exists on server by ID or filename, and re-links if found - Delete from server now archives the proxy instead of removing it, making it a local-only document that can be re-uploaded - Added first-run pin reminder banner to help users pin the extension - Added issue report modal with context sections (extension info, browser info, document status, recent errors) and copy to clipboard as Markdown - Added clearServerFields and attachServerDocument functions to pdf-queue - Improved local tag styling with hover states and visual feedback Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1830 lines
53 KiB
TypeScript
1830 lines
53 KiB
TypeScript
/**
|
|
* Popup UI Logic
|
|
*/
|
|
|
|
import './popup.css';
|
|
import { loadCredentials, saveCredentials, deleteCredentials, updateLastUse } from '../utils/storage';
|
|
import { uploadPDF, testConnection, BinectAPIError, Document } from '../utils/binect-api';
|
|
import { fetchPDFBytes, DetectedPDF } from '../utils/pdf-detector';
|
|
import { addTrackingEntry } from '../tracking/tracker';
|
|
import { DocumentProxy, PDFQueueEntry, PDFStatus, PDFStatusMeta } from '../utils/pdf-queue';
|
|
import { computeMD5 } from '../utils/hash';
|
|
|
|
// DOM Elements
|
|
const authView = document.getElementById('authView')!;
|
|
const mainView = document.getElementById('mainView')!;
|
|
const noPdfView = document.getElementById('noPdfView')!;
|
|
const pdfListView = document.getElementById('pdfListView')!;
|
|
const pdfList = document.getElementById('pdfList')!;
|
|
const pdfCount = document.getElementById('pdfCount')!;
|
|
const statusMessage = document.getElementById('statusMessage')!;
|
|
|
|
const loginForm = document.getElementById('loginForm') as HTMLFormElement;
|
|
const usernameInput = document.getElementById('username') as HTMLInputElement;
|
|
const passwordInput = document.getElementById('password') as HTMLInputElement;
|
|
const loginBtn = document.getElementById('loginBtn') as HTMLButtonElement;
|
|
const authError = document.getElementById('authError')!;
|
|
|
|
const logoutBtn = document.getElementById('logoutBtn')!;
|
|
const archiveToggleBtn = document.getElementById('archiveToggleBtn')!;
|
|
const archiveIcon = document.getElementById('archiveIcon')!;
|
|
const liveIcon = document.getElementById('liveIcon')!;
|
|
const helpBtn = document.getElementById('helpBtn')!;
|
|
const togglePasswordBtn = document.getElementById('togglePassword') as HTMLButtonElement;
|
|
const eyeIcon = document.getElementById('eyeIcon')!;
|
|
const eyeOffIcon = document.getElementById('eyeOffIcon')!;
|
|
|
|
// Issue Report Modal Elements
|
|
const issueModal = document.getElementById('issueModal')!;
|
|
const reportIssueBtn = document.getElementById('reportIssueBtn')!;
|
|
const closeModalBtn = document.getElementById('closeModalBtn')!;
|
|
const modalBackdrop = issueModal.querySelector('.modal-backdrop')!;
|
|
const issueTitleInput = document.getElementById('issueTitle') as HTMLInputElement;
|
|
const issueDescriptionInput = document.getElementById('issueDescription') as HTMLTextAreaElement;
|
|
const copyToClipboardBtn = document.getElementById('copyToClipboardBtn') as HTMLButtonElement;
|
|
|
|
// Context section content elements
|
|
const extensionInfoContent = document.getElementById('extensionInfoContent')!;
|
|
const browserInfoContent = document.getElementById('browserInfoContent')!;
|
|
const documentStatusContent = document.getElementById('documentStatusContent')!;
|
|
const recentErrorsContent = document.getElementById('recentErrorsContent')!;
|
|
|
|
// Error tracking for issue reports
|
|
const recentErrors: Array<{ timestamp: number; message: string; stack?: string }> = [];
|
|
|
|
// Pin Reminder Elements
|
|
const pinReminder = document.getElementById('pinReminder')!;
|
|
const dismissPinReminderBtn = document.getElementById('dismissPinReminder')!;
|
|
|
|
// State
|
|
let pdfQueue: DocumentProxy[] = [];
|
|
let currentCredentials: { username: string; password: string } | null = null;
|
|
let showingArchive = false; // false = live view, true = archive view
|
|
|
|
// Auto-refresh state
|
|
const REFRESH_INTERVALS = [10, 20, 30, 50, 80, 130, 210]; // seconds
|
|
let refreshTimeouts: ReturnType<typeof setTimeout>[] = [];
|
|
let refreshIndex = 0;
|
|
|
|
/**
|
|
* Initialize popup
|
|
*/
|
|
async function init() {
|
|
// Check and show first-run pin reminder
|
|
await checkFirstRunReminder();
|
|
|
|
// Check if user has credentials
|
|
const credentials = await loadCredentials();
|
|
|
|
if (credentials) {
|
|
// Try to test connection
|
|
try {
|
|
const isConnected = await testConnection(credentials.username, credentials.password);
|
|
|
|
if (isConnected) {
|
|
currentCredentials = credentials;
|
|
await updateLastUse();
|
|
|
|
showMainView();
|
|
await loadPDFQueue();
|
|
} else {
|
|
// Authentication failed, credentials may be invalid
|
|
showAuthView();
|
|
}
|
|
} catch (error) {
|
|
// Connection test failed
|
|
console.error('[Popup] Connection test failed:', error);
|
|
showAuthView();
|
|
}
|
|
} else {
|
|
showAuthView();
|
|
}
|
|
|
|
// Setup event listeners
|
|
setupEventListeners();
|
|
}
|
|
|
|
/**
|
|
* Check if this is first run and show pin reminder
|
|
*/
|
|
async function checkFirstRunReminder() {
|
|
const STORAGE_KEY = 'pinReminderDismissed';
|
|
|
|
try {
|
|
const result = await chrome.storage.local.get(STORAGE_KEY);
|
|
if (!result[STORAGE_KEY]) {
|
|
// First run - show the reminder
|
|
pinReminder.style.display = 'block';
|
|
}
|
|
} catch (error) {
|
|
console.error('[Popup] Error checking first run:', error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Dismiss the pin reminder and remember the choice
|
|
*/
|
|
async function dismissPinReminder() {
|
|
const STORAGE_KEY = 'pinReminderDismissed';
|
|
|
|
pinReminder.style.display = 'none';
|
|
|
|
try {
|
|
await chrome.storage.local.set({ [STORAGE_KEY]: true });
|
|
} catch (error) {
|
|
console.error('[Popup] Error saving pin reminder state:', error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Setup event listeners
|
|
*/
|
|
function setupEventListeners() {
|
|
loginForm.addEventListener('submit', handleLogin);
|
|
logoutBtn.addEventListener('click', handleLogout);
|
|
archiveToggleBtn.addEventListener('click', handleToggleArchiveView);
|
|
helpBtn.addEventListener('click', handleHelp);
|
|
|
|
// Password toggle - ensure button exists and attach handler
|
|
if (togglePasswordBtn) {
|
|
togglePasswordBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handleTogglePassword();
|
|
});
|
|
}
|
|
|
|
// Pin reminder dismiss button
|
|
if (dismissPinReminderBtn) {
|
|
dismissPinReminderBtn.addEventListener('click', dismissPinReminder);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle toggle between live and archive view
|
|
*/
|
|
async function handleToggleArchiveView() {
|
|
showingArchive = !showingArchive;
|
|
|
|
// Update toggle button appearance
|
|
if (showingArchive) {
|
|
archiveIcon.style.display = 'none';
|
|
liveIcon.style.display = 'block';
|
|
archiveToggleBtn.title = 'Show live documents';
|
|
archiveToggleBtn.classList.add('active');
|
|
} else {
|
|
archiveIcon.style.display = 'block';
|
|
liveIcon.style.display = 'none';
|
|
archiveToggleBtn.title = 'Show archived';
|
|
archiveToggleBtn.classList.remove('active');
|
|
}
|
|
|
|
// Reload the appropriate list
|
|
await loadPDFQueue();
|
|
}
|
|
|
|
/**
|
|
* Start auto-refresh sequence after user interaction
|
|
*/
|
|
function startAutoRefresh() {
|
|
// Clear any existing refresh timeouts
|
|
cancelAutoRefresh();
|
|
refreshIndex = 0;
|
|
scheduleNextRefresh();
|
|
}
|
|
|
|
/**
|
|
* Schedule the next refresh in the sequence
|
|
*/
|
|
function scheduleNextRefresh() {
|
|
if (refreshIndex >= REFRESH_INTERVALS.length) {
|
|
return; // Sequence complete
|
|
}
|
|
|
|
const delay = REFRESH_INTERVALS[refreshIndex] * 1000;
|
|
const timeout = setTimeout(async () => {
|
|
console.log(`[Popup] Auto-refresh #${refreshIndex + 1} after ${REFRESH_INTERVALS[refreshIndex]}s`);
|
|
await handleRefreshAll();
|
|
refreshIndex++;
|
|
scheduleNextRefresh();
|
|
}, delay);
|
|
|
|
refreshTimeouts.push(timeout);
|
|
}
|
|
|
|
/**
|
|
* Cancel all pending auto-refresh timeouts
|
|
*/
|
|
function cancelAutoRefresh() {
|
|
for (const timeout of refreshTimeouts) {
|
|
clearTimeout(timeout);
|
|
}
|
|
refreshTimeouts = [];
|
|
}
|
|
|
|
/**
|
|
* Extract just the filename from a full path
|
|
*/
|
|
function extractFilename(fullPath: string): string {
|
|
// Handle both forward and back slashes
|
|
const parts = fullPath.split(/[/\\]/);
|
|
return parts[parts.length - 1] || fullPath;
|
|
}
|
|
|
|
/**
|
|
* Handle password visibility toggle
|
|
*/
|
|
function handleTogglePassword() {
|
|
const isPassword = passwordInput.type === 'password';
|
|
|
|
if (isPassword) {
|
|
// Show password
|
|
passwordInput.type = 'text';
|
|
eyeIcon.style.display = 'none';
|
|
eyeOffIcon.style.display = 'block';
|
|
togglePasswordBtn.setAttribute('aria-label', 'Hide password');
|
|
togglePasswordBtn.setAttribute('title', 'Hide password');
|
|
} else {
|
|
// Hide password
|
|
passwordInput.type = 'password';
|
|
eyeIcon.style.display = 'block';
|
|
eyeOffIcon.style.display = 'none';
|
|
togglePasswordBtn.setAttribute('aria-label', 'Show password');
|
|
togglePasswordBtn.setAttribute('title', 'Show password');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle login
|
|
*/
|
|
async function handleLogin(e: Event) {
|
|
e.preventDefault();
|
|
|
|
const username = usernameInput.value.trim();
|
|
const password = passwordInput.value;
|
|
|
|
if (!username || !password) {
|
|
showError('Please enter username and password');
|
|
return;
|
|
}
|
|
|
|
loginBtn.disabled = true;
|
|
loginBtn.textContent = 'Signing in...';
|
|
hideError();
|
|
|
|
try {
|
|
const isConnected = await testConnection(username, password);
|
|
|
|
if (!isConnected) {
|
|
showError('Invalid credentials. Please check your username and password.');
|
|
return;
|
|
}
|
|
|
|
// Save credentials
|
|
currentCredentials = { username, password };
|
|
await saveCredentials({ username, password });
|
|
|
|
showMainView();
|
|
await loadPDFQueue();
|
|
} catch (error) {
|
|
if (error instanceof BinectAPIError) {
|
|
showError(error.message);
|
|
} else {
|
|
showError('Authentication failed. Please try again.');
|
|
}
|
|
} finally {
|
|
loginBtn.disabled = false;
|
|
loginBtn.textContent = 'Sign In';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Load PDF queue from background and current tab
|
|
*/
|
|
async function loadPDFQueue() {
|
|
console.log('[Popup] Loading PDF queue, showingArchive:', showingArchive);
|
|
|
|
if (showingArchive) {
|
|
// Get archived proxies only
|
|
const response = await chrome.runtime.sendMessage({ action: 'getArchivedProxies' });
|
|
pdfQueue = response?.entries || [];
|
|
console.log('[Popup] Got', pdfQueue.length, 'archived entries');
|
|
} else {
|
|
// Get live proxies
|
|
let response = await chrome.runtime.sendMessage({ action: 'getLiveProxies' });
|
|
pdfQueue = response?.entries || [];
|
|
console.log('[Popup] Got', pdfQueue.length, 'live entries from background');
|
|
|
|
// Sync with server to discover documents uploaded elsewhere or missing locally
|
|
if (currentCredentials) {
|
|
await syncWithServer();
|
|
}
|
|
|
|
// Auto-restore any archived documents that are in active states (in_basket, in_production)
|
|
// These should never be archived as it confuses user expectations
|
|
const archivedResponse = await chrome.runtime.sendMessage({ action: 'getArchivedProxies' });
|
|
const archivedEntries: DocumentProxy[] = archivedResponse?.entries || [];
|
|
for (const entry of archivedEntries) {
|
|
if (entry.binectStatus === 'in_basket' || entry.binectStatus === 'in_production') {
|
|
console.log('[Popup] Auto-restoring active document from archive:', entry.filename);
|
|
await chrome.runtime.sendMessage({ action: 'restoreProxy', id: entry.id });
|
|
}
|
|
}
|
|
|
|
// Reload live proxies after potential restorations and server sync
|
|
response = await chrome.runtime.sendMessage({ action: 'getLiveProxies' });
|
|
pdfQueue = response?.entries || [];
|
|
console.log('[Popup] After auto-restore and sync, got', pdfQueue.length, 'live entries');
|
|
|
|
// Check current tab for PDF and add to persistent queue via background
|
|
const currentTabPDF = await checkCurrentTabForPDF();
|
|
if (currentTabPDF) {
|
|
// Add via background service (will check for duplicates)
|
|
const addResult = await chrome.runtime.sendMessage({
|
|
action: 'addPDF',
|
|
pdf: currentTabPDF
|
|
});
|
|
if (addResult?.entry) {
|
|
console.log('[Popup] Added current tab PDF to persistent queue:', currentTabPDF.filename);
|
|
}
|
|
}
|
|
|
|
// Fallback: check recent downloads if queue is still empty
|
|
if (pdfQueue.length === 0) {
|
|
console.log('[Popup] Queue empty, checking recent downloads...');
|
|
const recentPDFs = await checkRecentDownloads();
|
|
for (const pdf of recentPDFs) {
|
|
// Add each PDF via background service (will check for duplicates)
|
|
await chrome.runtime.sendMessage({
|
|
action: 'addPDF',
|
|
pdf
|
|
});
|
|
}
|
|
}
|
|
|
|
// Reload live queue after potential additions
|
|
response = await chrome.runtime.sendMessage({ action: 'getLiveProxies' });
|
|
pdfQueue = response?.entries || [];
|
|
console.log('[Popup] Final live queue count:', pdfQueue.length);
|
|
}
|
|
|
|
// Render the list
|
|
renderPDFList();
|
|
}
|
|
|
|
/**
|
|
* Sync local proxies with server documents
|
|
* Creates local proxies for documents that exist on server but not locally
|
|
*/
|
|
async function syncWithServer() {
|
|
if (!currentCredentials) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Get list of documents from server
|
|
const result = await chrome.runtime.sendMessage({
|
|
action: 'listServerDocuments',
|
|
username: currentCredentials.username,
|
|
password: currentCredentials.password
|
|
});
|
|
|
|
if (!result.success || !result.documents) {
|
|
console.warn('[Popup] Failed to list server documents:', result.error);
|
|
return;
|
|
}
|
|
|
|
const serverDocs = result.documents as Array<{
|
|
id: number;
|
|
filename: string;
|
|
status: number;
|
|
statusText: string;
|
|
price?: number;
|
|
recipientAddress?: string;
|
|
errorDetails?: string;
|
|
}>;
|
|
|
|
console.log('[Popup] Syncing', serverDocs.length, 'server documents');
|
|
|
|
// Sync each server document to local proxy
|
|
for (const doc of serverDocs) {
|
|
await chrome.runtime.sendMessage({
|
|
action: 'syncFromServer',
|
|
binectDocumentId: doc.id,
|
|
filename: doc.filename,
|
|
binectStatusCode: doc.status,
|
|
binectStatusText: doc.statusText,
|
|
price: doc.price,
|
|
recipientAddress: doc.recipientAddress,
|
|
errorDetails: doc.errorDetails
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('[Popup] Server sync error:', error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Check recent downloads for PDFs (fallback mechanism)
|
|
*/
|
|
async function checkRecentDownloads(): Promise<DetectedPDF[]> {
|
|
return new Promise((resolve) => {
|
|
chrome.downloads.search(
|
|
{
|
|
limit: 20,
|
|
orderBy: ['-startTime']
|
|
},
|
|
(items) => {
|
|
console.log('[Popup] Checked recent downloads:', items.length, 'items');
|
|
|
|
const pdfs: DetectedPDF[] = [];
|
|
|
|
for (const item of items) {
|
|
if (
|
|
item.state === 'complete' &&
|
|
(item.filename.toLowerCase().endsWith('.pdf') || item.mime === 'application/pdf')
|
|
) {
|
|
let domain = 'unknown';
|
|
try {
|
|
const urlObj = new URL(item.url);
|
|
domain = urlObj.hostname;
|
|
} catch (e) {
|
|
// Keep default
|
|
}
|
|
|
|
pdfs.push({
|
|
id: `download-${item.id}`,
|
|
filename: item.filename.split('/').pop() || item.filename,
|
|
url: item.url,
|
|
size: item.fileSize,
|
|
timestamp: new Date(item.startTime).getTime(),
|
|
sourceDomain: domain
|
|
});
|
|
}
|
|
}
|
|
|
|
console.log('[Popup] Found', pdfs.length, 'PDF downloads');
|
|
resolve(pdfs);
|
|
}
|
|
);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Render the PDF list with grouped sections
|
|
*/
|
|
function renderPDFList() {
|
|
if (pdfQueue.length === 0) {
|
|
showNoPDF();
|
|
return;
|
|
}
|
|
|
|
noPdfView.style.display = 'none';
|
|
pdfListView.style.display = 'block';
|
|
|
|
let html = '';
|
|
|
|
if (showingArchive) {
|
|
// Archive view - show all archived documents in a flat list
|
|
pdfCount.textContent = `${pdfQueue.length} archived document${pdfQueue.length !== 1 ? 's' : ''}`;
|
|
|
|
html = `<div class="pdf-section">
|
|
<div class="pdf-section-header">Archived Documents</div>
|
|
${pdfQueue.map(pdf => renderPDFItem(pdf, 'archived')).join('')}
|
|
</div>`;
|
|
} else {
|
|
// Live view - group by Binect status
|
|
// Separate truly local pending uploads from server documents with errors
|
|
const pendingUpload = pdfQueue.filter(p =>
|
|
(p.binectStatus === 'pending' || p.binectStatus === 'uploading') ||
|
|
(p.binectStatus === 'failed' && !p.binectDocumentId) // Local failed uploads
|
|
);
|
|
const erroneous = pdfQueue.filter(p =>
|
|
p.binectStatus === 'failed' && p.binectDocumentId // Server documents with errors
|
|
);
|
|
const inBasket = pdfQueue.filter(p => p.binectStatus === 'in_basket' || p.binectStatus === 'ordering');
|
|
const inProduction = pdfQueue.filter(p => p.binectStatus === 'in_production');
|
|
const completed = pdfQueue.filter(p => p.binectStatus === 'sent' || p.binectStatus === 'canceled');
|
|
|
|
// Count actionable items
|
|
const actionableCount = pendingUpload.length + erroneous.length + inBasket.length;
|
|
|
|
// Update count
|
|
if (actionableCount > 0) {
|
|
pdfCount.textContent = `${actionableCount} PDF${actionableCount > 1 ? 's' : ''} need attention`;
|
|
} else if (inProduction.length > 0) {
|
|
pdfCount.textContent = `${inProduction.length} in production`;
|
|
} else if (completed.length > 0) {
|
|
pdfCount.textContent = `${completed.length} completed`;
|
|
} else {
|
|
pdfCount.textContent = 'No documents';
|
|
}
|
|
|
|
if (pendingUpload.length > 0) {
|
|
html += `<div class="pdf-section">
|
|
<div class="pdf-section-header">Ready to Upload</div>
|
|
${pendingUpload.map(pdf => renderPDFItem(pdf, 'pending')).join('')}
|
|
</div>`;
|
|
}
|
|
|
|
if (erroneous.length > 0) {
|
|
html += `<div class="pdf-section">
|
|
<div class="pdf-section-header">Has Errors</div>
|
|
${erroneous.map(pdf => renderPDFItem(pdf, 'erroneous')).join('')}
|
|
</div>`;
|
|
}
|
|
|
|
if (inBasket.length > 0) {
|
|
html += `<div class="pdf-section">
|
|
<div class="pdf-section-header">In Basket</div>
|
|
${inBasket.map(pdf => renderPDFItem(pdf, 'basket')).join('')}
|
|
</div>`;
|
|
}
|
|
|
|
if (inProduction.length > 0) {
|
|
html += `<div class="pdf-section">
|
|
<div class="pdf-section-header">In Production</div>
|
|
${inProduction.map(pdf => renderPDFItem(pdf, 'production')).join('')}
|
|
</div>`;
|
|
}
|
|
|
|
if (completed.length > 0) {
|
|
// Show only last 5 completed items in live view
|
|
const recentCompleted = completed.slice(0, 5);
|
|
html += `<div class="pdf-section pdf-section-completed">
|
|
<div class="pdf-section-header">Recently Completed</div>
|
|
${recentCompleted.map(pdf => renderPDFItem(pdf, 'completed')).join('')}
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
pdfList.innerHTML = html;
|
|
|
|
// Add event listeners
|
|
setupPDFListEventListeners();
|
|
hideStatus();
|
|
}
|
|
|
|
/**
|
|
* Render a single PDF item
|
|
*/
|
|
function renderPDFItem(pdf: DocumentProxy, section: 'pending' | 'erroneous' | 'basket' | 'production' | 'completed' | 'archived'): string {
|
|
const statusClass = getStatusClass(pdf.binectStatus);
|
|
const statusText = getStatusText(pdf);
|
|
const priceText = pdf.price ? `${(pdf.price / 100).toFixed(2)} €` : '';
|
|
const displayFilename = extractFilename(pdf.filename);
|
|
const isLocalOnly = !pdf.binectDocumentId;
|
|
|
|
let actionsHtml = '';
|
|
|
|
// Check if document can be deleted from server (erroneous or canceled)
|
|
const canDeleteFromServer = pdf.binectDocumentId && (pdf.binectStatusCode === 7 || pdf.binectStatusCode === 6);
|
|
|
|
switch (section) {
|
|
case 'pending':
|
|
actionsHtml = `
|
|
<button class="btn-send-item" data-id="${escapeHtml(pdf.id)}" ${pdf.binectStatus === 'uploading' ? 'disabled' : ''}>
|
|
${pdf.binectStatus === 'uploading' ? 'Uploading...' : (pdf.binectStatus === 'failed' ? 'Retry' : 'Upload')}
|
|
</button>
|
|
<button class="btn-archive" data-id="${escapeHtml(pdf.id)}">Archive</button>
|
|
`;
|
|
break;
|
|
case 'erroneous':
|
|
// Server documents with errors - can only delete from server
|
|
actionsHtml = `
|
|
<button class="btn-delete-server" data-id="${escapeHtml(pdf.id)}">Delete from server</button>
|
|
`;
|
|
break;
|
|
case 'basket':
|
|
// No archive button for in_basket - these are active documents
|
|
actionsHtml = `
|
|
<button class="btn-order-item" data-id="${escapeHtml(pdf.id)}" ${pdf.binectStatus === 'ordering' ? 'disabled' : ''}>
|
|
${pdf.binectStatus === 'ordering' ? 'Sending...' : 'Send'}
|
|
</button>
|
|
`;
|
|
break;
|
|
case 'production':
|
|
// No archive button for in_production - these are active documents
|
|
actionsHtml = '';
|
|
break;
|
|
case 'completed':
|
|
// For sent/canceled documents - offer delete from server if applicable
|
|
if (canDeleteFromServer) {
|
|
actionsHtml = `
|
|
<button class="btn-delete-server" data-id="${escapeHtml(pdf.id)}">Delete from server</button>
|
|
`;
|
|
} else {
|
|
actionsHtml = `
|
|
<button class="btn-archive" data-id="${escapeHtml(pdf.id)}">Archive</button>
|
|
`;
|
|
}
|
|
break;
|
|
case 'archived':
|
|
actionsHtml = `
|
|
<button class="btn-restore" data-id="${escapeHtml(pdf.id)}">Restore</button>
|
|
<button class="btn-dismiss btn-remove" data-id="${escapeHtml(pdf.id)}">Delete</button>
|
|
`;
|
|
break;
|
|
}
|
|
|
|
// Show detailed error info for erroneous documents
|
|
const hasErrorDetails = pdf.binectStatus === 'failed' && pdf.errorMessage && pdf.binectStatusCode === 7;
|
|
|
|
// Build metadata parts - only include what we have
|
|
const metaParts: string[] = [];
|
|
if (pdf.size > 0) {
|
|
metaParts.push(formatFileSize(pdf.size));
|
|
}
|
|
if (pdf.sourceDomain && pdf.sourceDomain !== 'binect.de') {
|
|
metaParts.push(escapeHtml(pdf.sourceDomain));
|
|
} else if (pdf.binectDocumentId && pdf.sourceDomain === 'binect.de') {
|
|
metaParts.push(`ID: ${pdf.binectDocumentId}`);
|
|
}
|
|
if (priceText) {
|
|
metaParts.push(`<span class="pdf-price">${priceText}</span>`);
|
|
}
|
|
|
|
return `
|
|
<div class="pdf-list-item ${statusClass}" data-id="${escapeHtml(pdf.id)}">
|
|
<div class="pdf-item-icon">${getStatusIcon(pdf.binectStatus)}</div>
|
|
<div class="pdf-item-details">
|
|
<div class="pdf-item-filename" title="${escapeHtml(pdf.filename)}">
|
|
${escapeHtml(displayFilename)}
|
|
${isLocalOnly ? `<span class="tag-local" data-id="${escapeHtml(pdf.id)}" title="Click to check server">local</span>` : ''}
|
|
</div>
|
|
${metaParts.length > 0 ? `<div class="pdf-item-meta">${metaParts.join(' · ')}</div>` : ''}
|
|
${pdf.recipientAddress ? `<div class="pdf-item-recipient">${escapeHtml(pdf.recipientAddress.split('\n')[0])}</div>` : ''}
|
|
<div class="pdf-item-status ${statusClass}">${statusText}</div>
|
|
${hasErrorDetails ? `<div class="pdf-item-error">${escapeHtml(pdf.errorMessage!)}</div>` : ''}
|
|
</div>
|
|
<div class="pdf-item-actions">
|
|
${actionsHtml}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Setup event listeners for PDF list items
|
|
*/
|
|
function setupPDFListEventListeners() {
|
|
// Upload/Send buttons
|
|
pdfList.querySelectorAll('.btn-send-item').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const id = (e.target as HTMLElement).dataset.id;
|
|
if (id) handleSendPDF(id);
|
|
});
|
|
});
|
|
|
|
// Order buttons
|
|
pdfList.querySelectorAll('.btn-order-item').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const id = (e.target as HTMLElement).dataset.id;
|
|
if (id) handleOrderPDF(id);
|
|
});
|
|
});
|
|
|
|
// Archive buttons
|
|
pdfList.querySelectorAll('.btn-archive').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const id = (e.target as HTMLElement).dataset.id;
|
|
if (id) handleArchivePDF(id);
|
|
});
|
|
});
|
|
|
|
// Restore buttons
|
|
pdfList.querySelectorAll('.btn-restore').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const id = (e.target as HTMLElement).dataset.id;
|
|
if (id) handleRestorePDF(id);
|
|
});
|
|
});
|
|
|
|
// Delete from server buttons
|
|
pdfList.querySelectorAll('.btn-delete-server').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const id = (e.target as HTMLElement).dataset.id;
|
|
if (id) handleDeleteFromServer(id);
|
|
});
|
|
});
|
|
|
|
// Delete/Remove buttons
|
|
pdfList.querySelectorAll('.btn-dismiss').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const id = (e.target as HTMLElement).dataset.id;
|
|
if (id) handleDeletePDF(id);
|
|
});
|
|
});
|
|
|
|
// Local tag clicks - check server for document
|
|
pdfList.querySelectorAll('.tag-local').forEach(tag => {
|
|
tag.addEventListener('click', (e) => {
|
|
e.stopPropagation(); // Don't bubble to parent
|
|
const id = (e.target as HTMLElement).dataset.id;
|
|
if (id) handleCheckServer(id);
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Get status text for a PDF
|
|
*/
|
|
function getStatusText(pdf: DocumentProxy): string {
|
|
switch (pdf.binectStatus) {
|
|
case 'pending':
|
|
return formatTimestamp(pdf.timestamp);
|
|
case 'uploading':
|
|
return 'Uploading...';
|
|
case 'failed':
|
|
return pdf.errorMessage || 'Upload failed';
|
|
case 'in_basket':
|
|
return pdf.binectStatusText || 'Ready to order';
|
|
case 'ordering':
|
|
return 'Sending...';
|
|
case 'in_production':
|
|
return pdf.binectStatusText || 'In production';
|
|
case 'sent':
|
|
return 'Sent successfully';
|
|
case 'canceled':
|
|
return 'Canceled';
|
|
default:
|
|
return formatTimestamp(pdf.timestamp);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get CSS class for status
|
|
*/
|
|
function getStatusClass(status: PDFStatus): string {
|
|
switch (status) {
|
|
case 'pending':
|
|
return 'pending';
|
|
case 'uploading':
|
|
case 'ordering':
|
|
return 'uploading';
|
|
case 'failed':
|
|
return 'failed';
|
|
case 'in_basket':
|
|
return 'in-basket';
|
|
case 'in_production':
|
|
return 'in-production';
|
|
case 'sent':
|
|
return 'sent';
|
|
case 'canceled':
|
|
return 'canceled';
|
|
default:
|
|
return '';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get icon for status
|
|
*/
|
|
function getStatusIcon(status: PDFStatus): string {
|
|
switch (status) {
|
|
case 'pending':
|
|
return '📄';
|
|
case 'uploading':
|
|
return '⏳';
|
|
case 'failed':
|
|
return '❌';
|
|
case 'in_basket':
|
|
return '🛒';
|
|
case 'ordering':
|
|
return '⏳';
|
|
case 'in_production':
|
|
return '🏭';
|
|
case 'sent':
|
|
return '✅';
|
|
case 'canceled':
|
|
return '🚫';
|
|
default:
|
|
return '📄';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle send PDF (upload to Binect)
|
|
*/
|
|
async function handleSendPDF(id: string) {
|
|
const pdf = pdfQueue.find(p => p.id === id);
|
|
if (!pdf || !currentCredentials) {
|
|
return;
|
|
}
|
|
|
|
// Update local state
|
|
pdf.binectStatus = 'uploading';
|
|
renderPDFList();
|
|
|
|
// Notify background
|
|
await chrome.runtime.sendMessage({
|
|
action: 'updatePDFStatus',
|
|
id,
|
|
status: 'uploading'
|
|
});
|
|
|
|
try {
|
|
// Fetch PDF bytes
|
|
const pdfBytes = await fetchPDFBytes(pdf.url);
|
|
|
|
// Compute content hash for deduplication
|
|
const contentHash = await computeMD5(pdfBytes);
|
|
|
|
// Upload to Binect with credentials
|
|
const document = await uploadPDF(
|
|
pdfBytes,
|
|
pdf.filename,
|
|
currentCredentials.username,
|
|
currentCredentials.password
|
|
);
|
|
|
|
// Track transfer
|
|
await addTrackingEntry({
|
|
timestamp: Date.now(),
|
|
sourceDomain: pdf.sourceDomain,
|
|
destinationUrl: 'https://api.binect.de/binectapi/v1/documents',
|
|
pdfSize: pdfBytes.byteLength,
|
|
result: document.status.code === 7 ? 'failure' : 'success',
|
|
errorMessage: document.status.code === 7 ? document.status.text : undefined
|
|
});
|
|
|
|
// Update last use timestamp
|
|
await updateLastUse();
|
|
|
|
// Extract price and recipient from document response
|
|
const meta: PDFStatusMeta = {
|
|
binectDocumentId: document.id,
|
|
binectStatus: document.status.code,
|
|
binectStatusText: document.status.text,
|
|
contentHash
|
|
};
|
|
|
|
if (document.letter?.letterData) {
|
|
meta.price = document.letter.letterData.price?.priceAfterTax;
|
|
meta.recipientAddress = document.letter.letterData.recipientAddress;
|
|
}
|
|
|
|
// Check if document is erroneous (status 7)
|
|
if (document.status.code === 7) {
|
|
// Extract error message
|
|
let errorMessage = document.status.text || 'Document has errors';
|
|
if (document.letter?.errors && document.letter.errors.length > 0) {
|
|
errorMessage = document.letter.errors.map(e => e.text || e.blankText).join('; ');
|
|
}
|
|
meta.errorMessage = errorMessage;
|
|
|
|
// Update status to failed (erroneous)
|
|
await chrome.runtime.sendMessage({
|
|
action: 'updatePDFStatus',
|
|
id,
|
|
status: 'failed',
|
|
meta
|
|
});
|
|
|
|
// Update local state
|
|
pdf.binectStatus = 'failed';
|
|
pdf.binectDocumentId = document.id;
|
|
pdf.binectStatusCode = document.status.code;
|
|
pdf.binectStatusText = document.status.text;
|
|
pdf.contentHash = contentHash;
|
|
pdf.errorMessage = errorMessage;
|
|
renderPDFList();
|
|
|
|
showStatus(`Document has errors: ${errorMessage}`, 'error');
|
|
} else {
|
|
// Document is shippable (status 2) - in basket
|
|
// Update status to in_basket
|
|
await chrome.runtime.sendMessage({
|
|
action: 'updatePDFStatus',
|
|
id,
|
|
status: 'in_basket',
|
|
meta
|
|
});
|
|
|
|
// Update local state
|
|
pdf.binectStatus = 'in_basket';
|
|
pdf.binectDocumentId = document.id;
|
|
pdf.binectStatusCode = document.status.code;
|
|
pdf.binectStatusText = document.status.text;
|
|
pdf.contentHash = contentHash;
|
|
if (document.letter?.letterData) {
|
|
pdf.price = document.letter.letterData.price?.priceAfterTax;
|
|
pdf.recipientAddress = document.letter.letterData.recipientAddress;
|
|
}
|
|
renderPDFList();
|
|
|
|
showStatus(`Uploaded! Ready to send (${(pdf.price || 0) / 100} €)`, 'success');
|
|
}
|
|
|
|
// Start auto-refresh sequence
|
|
startAutoRefresh();
|
|
|
|
// Hide status after 3 seconds
|
|
setTimeout(() => {
|
|
hideStatus();
|
|
}, 3000);
|
|
|
|
} catch (error) {
|
|
let errorMessage = 'Upload failed';
|
|
|
|
if (error instanceof BinectAPIError) {
|
|
errorMessage = error.message;
|
|
|
|
// If auth error, might need to re-login
|
|
if (error.statusCode === 401 || error.statusCode === 403) {
|
|
errorMessage = 'Invalid credentials. Please sign in again.';
|
|
setTimeout(() => {
|
|
handleLogout();
|
|
}, 2000);
|
|
}
|
|
} else if (error instanceof Error) {
|
|
errorMessage = error.message;
|
|
}
|
|
|
|
// Track failed transfer
|
|
await addTrackingEntry({
|
|
timestamp: Date.now(),
|
|
sourceDomain: pdf.sourceDomain,
|
|
destinationUrl: 'https://api.binect.de/binectapi/v1/documents',
|
|
pdfSize: pdf.size || 0,
|
|
result: 'failure',
|
|
errorMessage
|
|
});
|
|
|
|
// Update status to failed
|
|
await chrome.runtime.sendMessage({
|
|
action: 'updatePDFStatus',
|
|
id,
|
|
status: 'failed',
|
|
meta: { errorMessage }
|
|
});
|
|
|
|
// Update local state
|
|
pdf.binectStatus = 'failed';
|
|
pdf.errorMessage = errorMessage;
|
|
renderPDFList();
|
|
|
|
showStatus(errorMessage, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle order PDF (ship document to production)
|
|
*/
|
|
async function handleOrderPDF(id: string) {
|
|
const pdf = pdfQueue.find(p => p.id === id);
|
|
if (!pdf || !currentCredentials || !pdf.binectDocumentId) {
|
|
return;
|
|
}
|
|
|
|
// Update local state
|
|
pdf.binectStatus = 'ordering';
|
|
renderPDFList();
|
|
|
|
// Notify background
|
|
await chrome.runtime.sendMessage({
|
|
action: 'updatePDFStatus',
|
|
id,
|
|
status: 'ordering'
|
|
});
|
|
|
|
try {
|
|
// Ship the document
|
|
const result = await chrome.runtime.sendMessage({
|
|
action: 'shipDocument',
|
|
documentId: pdf.binectDocumentId,
|
|
username: currentCredentials.username,
|
|
password: currentCredentials.password
|
|
});
|
|
|
|
if (!result.success) {
|
|
throw new Error(result.error || 'Failed to ship document');
|
|
}
|
|
|
|
// Update status to in_production
|
|
const meta: PDFStatusMeta = {
|
|
binectStatus: result.status,
|
|
binectStatusText: result.statusText
|
|
};
|
|
|
|
await chrome.runtime.sendMessage({
|
|
action: 'updatePDFStatus',
|
|
id,
|
|
status: 'in_production',
|
|
meta
|
|
});
|
|
|
|
// Update local state
|
|
pdf.binectStatus = 'in_production';
|
|
pdf.binectStatusCode = result.status;
|
|
pdf.binectStatusText = result.statusText;
|
|
renderPDFList();
|
|
|
|
showStatus('Sent! Document is in production.', 'success');
|
|
|
|
// Start auto-refresh sequence
|
|
startAutoRefresh();
|
|
|
|
// Hide status after 3 seconds
|
|
setTimeout(() => {
|
|
hideStatus();
|
|
}, 3000);
|
|
|
|
} catch (error) {
|
|
const errorMessage = error instanceof Error ? error.message : 'Send failed';
|
|
|
|
// Revert to in_basket status
|
|
await chrome.runtime.sendMessage({
|
|
action: 'updatePDFStatus',
|
|
id,
|
|
status: 'in_basket',
|
|
meta: { errorMessage }
|
|
});
|
|
|
|
// Update local state
|
|
pdf.binectStatus = 'in_basket';
|
|
pdf.errorMessage = errorMessage;
|
|
renderPDFList();
|
|
|
|
showStatus(errorMessage, 'error');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle refresh all documents that have been uploaded to server
|
|
*/
|
|
async function handleRefreshAll() {
|
|
if (!currentCredentials) {
|
|
return;
|
|
}
|
|
|
|
// Find all documents that have been uploaded and might change status
|
|
// Include erroneous docs - they can be fixed on the server and become shippable
|
|
const uploadedDocs = pdfQueue.filter(p =>
|
|
p.binectDocumentId &&
|
|
(p.binectStatus === 'in_basket' ||
|
|
p.binectStatus === 'in_production' ||
|
|
(p.binectStatus === 'failed' && p.binectStatusCode === 7)) // Erroneous on server
|
|
);
|
|
|
|
if (uploadedDocs.length === 0) {
|
|
return;
|
|
}
|
|
|
|
console.log(`[Popup] Refreshing ${uploadedDocs.length} document(s)...`);
|
|
|
|
let successCount = 0;
|
|
let errorCount = 0;
|
|
|
|
for (const pdf of uploadedDocs) {
|
|
try {
|
|
await handleRefreshStatus(pdf.id);
|
|
successCount++;
|
|
} catch {
|
|
errorCount++;
|
|
}
|
|
}
|
|
|
|
if (errorCount > 0) {
|
|
console.log(`[Popup] Refresh complete: ${successCount} ok, ${errorCount} failed`);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle refresh document status
|
|
*/
|
|
async function handleRefreshStatus(id: string) {
|
|
const pdf = pdfQueue.find(p => p.id === id);
|
|
if (!pdf || !currentCredentials || !pdf.binectDocumentId) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Get current status from Binect
|
|
const result = await chrome.runtime.sendMessage({
|
|
action: 'getDocumentStatus',
|
|
documentId: pdf.binectDocumentId,
|
|
username: currentCredentials.username,
|
|
password: currentCredentials.password
|
|
});
|
|
|
|
if (!result.success) {
|
|
// Check if document was deleted on server (404)
|
|
if (result.errorCode === 404) {
|
|
console.log('[Popup] Document deleted on server, archiving:', id);
|
|
await handleArchivePDF(id);
|
|
showStatus('Document no longer exists on server', 'error');
|
|
return;
|
|
}
|
|
throw new Error(result.error || 'Failed to get status');
|
|
}
|
|
|
|
// Determine new local status based on Binect status code
|
|
let newStatus: PDFStatus = pdf.binectStatus;
|
|
if (result.status === 5) {
|
|
newStatus = 'sent';
|
|
} else if (result.status === 6) {
|
|
newStatus = 'canceled';
|
|
} else if (result.status === 7) {
|
|
newStatus = 'failed'; // Erroneous
|
|
} else if (result.status === 3 || result.status === 4) {
|
|
newStatus = 'in_production';
|
|
} else if (result.status === 2) {
|
|
newStatus = 'in_basket';
|
|
}
|
|
|
|
const meta: PDFStatusMeta = {
|
|
binectStatus: result.status,
|
|
binectStatusText: result.statusText,
|
|
price: result.price,
|
|
recipientAddress: result.recipientAddress,
|
|
errorMessage: result.errorDetails
|
|
};
|
|
|
|
// Update in background
|
|
await chrome.runtime.sendMessage({
|
|
action: 'updatePDFStatus',
|
|
id,
|
|
status: newStatus,
|
|
meta
|
|
});
|
|
|
|
// Update local state
|
|
pdf.binectStatus = newStatus;
|
|
pdf.binectStatusCode = result.status;
|
|
pdf.binectStatusText = result.statusText;
|
|
if (result.price !== undefined) pdf.price = result.price;
|
|
if (result.recipientAddress) pdf.recipientAddress = result.recipientAddress;
|
|
// Clear or set error message based on status
|
|
pdf.errorMessage = result.errorDetails || undefined;
|
|
renderPDFList();
|
|
|
|
} catch (error) {
|
|
console.error('[Popup] Refresh error:', error);
|
|
// Only show errors that aren't already handled (like 404)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle archive PDF (move from live to archive)
|
|
*/
|
|
async function handleArchivePDF(id: string) {
|
|
await chrome.runtime.sendMessage({ action: 'archiveProxy', id });
|
|
pdfQueue = pdfQueue.filter(p => p.id !== id);
|
|
renderPDFList();
|
|
showStatus('Document archived', 'success');
|
|
setTimeout(() => hideStatus(), 2000);
|
|
}
|
|
|
|
/**
|
|
* Handle restore PDF (move from archive to live)
|
|
*/
|
|
async function handleRestorePDF(id: string) {
|
|
await chrome.runtime.sendMessage({ action: 'restoreProxy', id });
|
|
pdfQueue = pdfQueue.filter(p => p.id !== id);
|
|
renderPDFList();
|
|
showStatus('Document restored', 'success');
|
|
setTimeout(() => hideStatus(), 2000);
|
|
}
|
|
|
|
/**
|
|
* Handle check server for a local document
|
|
* Checks if document exists on server (by ID if known, or by filename)
|
|
*/
|
|
async function handleCheckServer(id: string) {
|
|
const pdf = pdfQueue.find(p => p.id === id);
|
|
if (!pdf || !currentCredentials) {
|
|
return;
|
|
}
|
|
|
|
// Find the tag element to show visual feedback
|
|
const tagElement = pdfList.querySelector(`.tag-local[data-id="${id}"]`) as HTMLElement;
|
|
if (tagElement) {
|
|
tagElement.classList.add('checking');
|
|
tagElement.textContent = '...';
|
|
}
|
|
|
|
try {
|
|
// First, try to find by known document ID if available
|
|
if (pdf.binectDocumentId) {
|
|
try {
|
|
const result = await chrome.runtime.sendMessage({
|
|
action: 'getDocumentStatus',
|
|
documentId: pdf.binectDocumentId,
|
|
username: currentCredentials.username,
|
|
password: currentCredentials.password
|
|
});
|
|
|
|
if (result.success) {
|
|
// Document still exists on server, re-attach it
|
|
await chrome.runtime.sendMessage({
|
|
action: 'attachServerDocument',
|
|
id,
|
|
binectDocumentId: pdf.binectDocumentId,
|
|
binectStatusCode: result.status,
|
|
binectStatusText: result.statusText,
|
|
price: result.price,
|
|
recipientAddress: result.recipientAddress,
|
|
errorMessage: result.errorDetails
|
|
});
|
|
|
|
// Update local state
|
|
pdf.binectStatusCode = result.status;
|
|
pdf.binectStatusText = result.statusText;
|
|
if (result.price !== undefined) pdf.price = result.price;
|
|
if (result.recipientAddress) pdf.recipientAddress = result.recipientAddress;
|
|
|
|
renderPDFList();
|
|
showStatus('Document found on server and re-linked', 'success');
|
|
setTimeout(() => hideStatus(), 2000);
|
|
return;
|
|
}
|
|
// If 404, continue to filename search
|
|
} catch {
|
|
// Document not found by ID, try filename search
|
|
}
|
|
}
|
|
|
|
// Try to find by filename in server documents
|
|
const listResult = await chrome.runtime.sendMessage({
|
|
action: 'listServerDocuments',
|
|
username: currentCredentials.username,
|
|
password: currentCredentials.password
|
|
});
|
|
|
|
if (!listResult.success || !listResult.documents) {
|
|
throw new Error('Failed to list server documents');
|
|
}
|
|
|
|
// Extract just the filename for comparison (without path)
|
|
const targetFilename = extractFilename(pdf.filename).toLowerCase();
|
|
|
|
// Find matching document by filename
|
|
const match = (listResult.documents as Array<{
|
|
id: number;
|
|
filename: string;
|
|
status: number;
|
|
statusText: string;
|
|
price?: number;
|
|
recipientAddress?: string;
|
|
errorDetails?: string;
|
|
}>).find(doc => {
|
|
const docFilename = extractFilename(doc.filename).toLowerCase();
|
|
return docFilename === targetFilename;
|
|
});
|
|
|
|
if (match) {
|
|
// Found a matching document, attach it
|
|
await chrome.runtime.sendMessage({
|
|
action: 'attachServerDocument',
|
|
id,
|
|
binectDocumentId: match.id,
|
|
binectStatusCode: match.status,
|
|
binectStatusText: match.statusText,
|
|
price: match.price,
|
|
recipientAddress: match.recipientAddress,
|
|
errorMessage: match.errorDetails
|
|
});
|
|
|
|
// Update local state
|
|
pdf.binectDocumentId = match.id;
|
|
pdf.binectStatusCode = match.status;
|
|
pdf.binectStatusText = match.statusText;
|
|
if (match.price !== undefined) pdf.price = match.price;
|
|
if (match.recipientAddress) pdf.recipientAddress = match.recipientAddress;
|
|
if (match.errorDetails) pdf.errorMessage = match.errorDetails;
|
|
|
|
renderPDFList();
|
|
showStatus(`Found on server (ID: ${match.id})`, 'success');
|
|
setTimeout(() => hideStatus(), 2000);
|
|
} else {
|
|
// No matching document found
|
|
if (tagElement) {
|
|
tagElement.classList.remove('checking');
|
|
tagElement.textContent = 'local';
|
|
}
|
|
showStatus('Not found on server', 'error');
|
|
setTimeout(() => hideStatus(), 2000);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('[Popup] Check server error:', error);
|
|
if (tagElement) {
|
|
tagElement.classList.remove('checking');
|
|
tagElement.textContent = 'local';
|
|
}
|
|
const errorMessage = error instanceof Error ? error.message : 'Check failed';
|
|
showStatus(errorMessage, 'error');
|
|
setTimeout(() => hideStatus(), 2000);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle delete from server (for erroneous or canceled documents)
|
|
* After deleting, the proxy is archived and becomes local-only
|
|
*/
|
|
async function handleDeleteFromServer(id: string) {
|
|
const pdf = pdfQueue.find(p => p.id === id);
|
|
if (!pdf || !currentCredentials || !pdf.binectDocumentId) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await chrome.runtime.sendMessage({
|
|
action: 'deleteServerDocument',
|
|
documentId: pdf.binectDocumentId,
|
|
username: currentCredentials.username,
|
|
password: currentCredentials.password
|
|
});
|
|
|
|
if (!result.success) {
|
|
throw new Error(result.error || 'Failed to delete from server');
|
|
}
|
|
|
|
// Clear server fields to make it local-only
|
|
await chrome.runtime.sendMessage({ action: 'clearServerFields', id });
|
|
|
|
// Archive the proxy (it's now local-only)
|
|
await chrome.runtime.sendMessage({ action: 'archiveProxy', id });
|
|
|
|
// Update local state
|
|
pdf.binectDocumentId = undefined;
|
|
pdf.binectStatusCode = undefined;
|
|
pdf.binectStatusText = undefined;
|
|
pdf.binectStatus = 'pending';
|
|
pdf.price = undefined;
|
|
pdf.recipientAddress = undefined;
|
|
pdf.errorMessage = undefined;
|
|
|
|
// Remove from current view (it's now archived)
|
|
pdfQueue = pdfQueue.filter(p => p.id !== id);
|
|
renderPDFList();
|
|
|
|
showStatus('Document deleted from server and archived', 'success');
|
|
setTimeout(() => hideStatus(), 2000);
|
|
|
|
} catch (error) {
|
|
const errorMessage = error instanceof Error ? error.message : 'Delete failed';
|
|
showStatus(errorMessage, 'error');
|
|
setTimeout(() => hideStatus(), 3000);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle delete PDF (permanently remove)
|
|
*/
|
|
async function handleDeletePDF(id: string) {
|
|
await chrome.runtime.sendMessage({ action: 'removePDF', id });
|
|
pdfQueue = pdfQueue.filter(p => p.id !== id);
|
|
renderPDFList();
|
|
}
|
|
|
|
/**
|
|
* Handle logout
|
|
*/
|
|
async function handleLogout() {
|
|
await deleteCredentials();
|
|
currentCredentials = null;
|
|
pdfQueue = [];
|
|
|
|
// Clear form
|
|
loginForm.reset();
|
|
|
|
showAuthView();
|
|
}
|
|
|
|
/**
|
|
* Handle help button
|
|
*/
|
|
function handleHelp() {
|
|
// Open tracking page
|
|
chrome.tabs.create({ url: chrome.runtime.getURL('tracking.html') });
|
|
}
|
|
|
|
/**
|
|
* Check if the current active tab is viewing a PDF
|
|
*/
|
|
async function checkCurrentTabForPDF(): Promise<DetectedPDF | null> {
|
|
try {
|
|
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
|
|
|
|
if (!tab || !tab.url) {
|
|
return null;
|
|
}
|
|
|
|
// Check if the URL is a PDF
|
|
const url = tab.url;
|
|
const isPDF = url.toLowerCase().endsWith('.pdf') ||
|
|
url.includes('type=application/pdf') ||
|
|
url.includes('mime=application/pdf');
|
|
|
|
if (isPDF) {
|
|
// Extract filename from URL
|
|
let filename = 'document.pdf';
|
|
try {
|
|
const urlObj = new URL(url);
|
|
const pathname = urlObj.pathname;
|
|
const pathParts = pathname.split('/');
|
|
const lastPart = pathParts[pathParts.length - 1];
|
|
if (lastPart && lastPart.toLowerCase().endsWith('.pdf')) {
|
|
filename = decodeURIComponent(lastPart);
|
|
} else if (tab.title && tab.title !== 'about:blank' && !tab.title.startsWith('chrome://')) {
|
|
// Use tab title if available
|
|
filename = tab.title.endsWith('.pdf') ? tab.title : `${tab.title}.pdf`;
|
|
}
|
|
} catch (e) {
|
|
// Use tab title as fallback
|
|
if (tab.title && tab.title !== 'about:blank') {
|
|
filename = tab.title.endsWith('.pdf') ? tab.title : `${tab.title}.pdf`;
|
|
}
|
|
}
|
|
|
|
// Extract domain
|
|
let domain = 'unknown';
|
|
try {
|
|
const urlObj = new URL(url);
|
|
domain = urlObj.hostname;
|
|
} catch (e) {
|
|
// Keep default
|
|
}
|
|
|
|
return {
|
|
id: `tab-${tab.id}`,
|
|
filename,
|
|
url,
|
|
size: 0, // Unknown size for viewed PDFs
|
|
timestamp: Date.now(),
|
|
sourceDomain: domain
|
|
};
|
|
}
|
|
|
|
return null;
|
|
} catch (error) {
|
|
console.error('Error checking current tab for PDF:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Show auth view
|
|
*/
|
|
function showAuthView() {
|
|
authView.style.display = 'block';
|
|
mainView.style.display = 'none';
|
|
}
|
|
|
|
/**
|
|
* Show main view
|
|
*/
|
|
function showMainView() {
|
|
authView.style.display = 'none';
|
|
mainView.style.display = 'block';
|
|
}
|
|
|
|
/**
|
|
* Show no PDF view
|
|
*/
|
|
function showNoPDF() {
|
|
noPdfView.style.display = 'block';
|
|
pdfListView.style.display = 'none';
|
|
hideStatus();
|
|
}
|
|
|
|
/**
|
|
* Show error message
|
|
*/
|
|
function showError(message: string) {
|
|
authError.textContent = message;
|
|
authError.style.display = 'block';
|
|
}
|
|
|
|
/**
|
|
* Hide error message
|
|
*/
|
|
function hideError() {
|
|
authError.style.display = 'none';
|
|
}
|
|
|
|
/**
|
|
* Show status message
|
|
*/
|
|
function showStatus(message: string, type: 'uploading' | 'success' | 'error') {
|
|
statusMessage.textContent = message;
|
|
statusMessage.className = `status-message ${type}`;
|
|
statusMessage.style.display = 'block';
|
|
}
|
|
|
|
/**
|
|
* Hide status message
|
|
*/
|
|
function hideStatus() {
|
|
statusMessage.style.display = 'none';
|
|
}
|
|
|
|
/**
|
|
* Escape HTML to prevent XSS
|
|
*/
|
|
function escapeHtml(text: string): string {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
/**
|
|
* Format file size
|
|
*/
|
|
function formatFileSize(bytes: number): string {
|
|
if (bytes === 0) {
|
|
return 'Size unknown';
|
|
} else if (bytes < 1024) {
|
|
return `${bytes} B`;
|
|
} else if (bytes < 1024 * 1024) {
|
|
return `${(bytes / 1024).toFixed(1)} KB`;
|
|
} else {
|
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Format timestamp
|
|
*/
|
|
function formatTimestamp(timestamp: number): string {
|
|
const now = Date.now();
|
|
const diff = now - timestamp;
|
|
|
|
if (diff < 60 * 1000) {
|
|
return 'Just now';
|
|
} else if (diff < 60 * 60 * 1000) {
|
|
const minutes = Math.floor(diff / (60 * 1000));
|
|
return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
|
|
} else if (diff < 24 * 60 * 60 * 1000) {
|
|
const hours = Math.floor(diff / (60 * 60 * 1000));
|
|
return `${hours} hour${hours > 1 ? 's' : ''} ago`;
|
|
} else {
|
|
return new Date(timestamp).toLocaleDateString();
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// Issue Report Modal
|
|
// =============================================================================
|
|
|
|
/**
|
|
* Track errors for issue reports
|
|
*/
|
|
function trackError(error: Error | string, stack?: string) {
|
|
const errorEntry = {
|
|
timestamp: Date.now(),
|
|
message: typeof error === 'string' ? error : error.message,
|
|
stack: stack || (error instanceof Error ? error.stack : undefined)
|
|
};
|
|
recentErrors.unshift(errorEntry);
|
|
// Keep only last 10 errors
|
|
if (recentErrors.length > 10) {
|
|
recentErrors.pop();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get extension info for issue report
|
|
*/
|
|
function getExtensionInfo(): string {
|
|
const manifest = chrome.runtime.getManifest();
|
|
return JSON.stringify({
|
|
name: manifest.name,
|
|
version: manifest.version,
|
|
manifestVersion: manifest.manifest_version
|
|
}, null, 2);
|
|
}
|
|
|
|
/**
|
|
* Get browser info for issue report
|
|
*/
|
|
function getBrowserInfo(): string {
|
|
const ua = navigator.userAgent;
|
|
let browserName = 'Unknown';
|
|
let browserVersion = 'Unknown';
|
|
|
|
// Parse user agent for browser info
|
|
if (ua.includes('Chrome/')) {
|
|
browserName = 'Chrome';
|
|
const match = ua.match(/Chrome\/(\d+\.\d+\.\d+\.\d+)/);
|
|
if (match) browserVersion = match[1];
|
|
} else if (ua.includes('Firefox/')) {
|
|
browserName = 'Firefox';
|
|
const match = ua.match(/Firefox\/(\d+\.\d+)/);
|
|
if (match) browserVersion = match[1];
|
|
} else if (ua.includes('Edge/')) {
|
|
browserName = 'Edge';
|
|
const match = ua.match(/Edge\/(\d+\.\d+)/);
|
|
if (match) browserVersion = match[1];
|
|
}
|
|
|
|
return JSON.stringify({
|
|
browser: browserName,
|
|
version: browserVersion,
|
|
platform: navigator.platform,
|
|
language: navigator.language,
|
|
userAgent: ua
|
|
}, null, 2);
|
|
}
|
|
|
|
/**
|
|
* Get document status for issue report
|
|
*/
|
|
function getDocumentStatusInfo(): string {
|
|
if (pdfQueue.length === 0) {
|
|
return 'No documents in queue';
|
|
}
|
|
|
|
const summary = {
|
|
total: pdfQueue.length,
|
|
byStatus: {} as Record<string, number>,
|
|
documents: pdfQueue.map(doc => ({
|
|
id: doc.id.substring(0, 8) + '...',
|
|
binectStatus: doc.binectStatus,
|
|
binectStatusCode: doc.binectStatusCode,
|
|
hasError: !!doc.errorMessage
|
|
}))
|
|
};
|
|
|
|
// Count by status
|
|
for (const doc of pdfQueue) {
|
|
summary.byStatus[doc.binectStatus] = (summary.byStatus[doc.binectStatus] || 0) + 1;
|
|
}
|
|
|
|
return JSON.stringify(summary, null, 2);
|
|
}
|
|
|
|
/**
|
|
* Get recent errors for issue report
|
|
*/
|
|
function getRecentErrorsInfo(): string {
|
|
if (recentErrors.length === 0) {
|
|
return 'No recent errors';
|
|
}
|
|
|
|
return recentErrors.map(err => {
|
|
const date = new Date(err.timestamp).toISOString();
|
|
let text = `[${date}] ${err.message}`;
|
|
if (err.stack) {
|
|
text += `\n Stack: ${err.stack.split('\n').slice(0, 3).join('\n ')}`;
|
|
}
|
|
return text;
|
|
}).join('\n\n');
|
|
}
|
|
|
|
/**
|
|
* Open the issue report modal
|
|
*/
|
|
function openIssueModal() {
|
|
// Clear previous input
|
|
issueTitleInput.value = '';
|
|
issueDescriptionInput.value = '';
|
|
|
|
// Reset checkboxes
|
|
issueModal.querySelectorAll('input[type="checkbox"]').forEach(cb => {
|
|
(cb as HTMLInputElement).checked = false;
|
|
});
|
|
|
|
// Populate context sections
|
|
extensionInfoContent.textContent = getExtensionInfo();
|
|
browserInfoContent.textContent = getBrowserInfo();
|
|
documentStatusContent.textContent = getDocumentStatusInfo();
|
|
recentErrorsContent.textContent = getRecentErrorsInfo();
|
|
|
|
// Close all sections by default
|
|
issueModal.querySelectorAll('.context-section-content').forEach(section => {
|
|
(section as HTMLElement).style.display = 'none';
|
|
});
|
|
issueModal.querySelectorAll('.toggle-icon').forEach(icon => {
|
|
icon.textContent = '▶';
|
|
});
|
|
|
|
// Show modal
|
|
issueModal.style.display = 'flex';
|
|
}
|
|
|
|
/**
|
|
* Close the issue report modal
|
|
*/
|
|
function closeIssueModal() {
|
|
issueModal.style.display = 'none';
|
|
}
|
|
|
|
/**
|
|
* Toggle a context section
|
|
*/
|
|
function toggleContextSection(sectionId: string) {
|
|
const content = document.getElementById(sectionId);
|
|
const button = issueModal.querySelector(`[data-section="${sectionId}"]`);
|
|
const icon = button?.querySelector('.toggle-icon');
|
|
|
|
if (content && icon) {
|
|
const isVisible = content.style.display !== 'none';
|
|
content.style.display = isVisible ? 'none' : 'block';
|
|
icon.textContent = isVisible ? '▶' : '▼';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Format issue report as Markdown and copy to clipboard
|
|
*/
|
|
async function copyIssueToClipboard() {
|
|
const title = issueTitleInput.value.trim();
|
|
const description = issueDescriptionInput.value.trim();
|
|
|
|
// Build markdown content
|
|
let markdown = '';
|
|
|
|
if (title) {
|
|
markdown += `# ${title}\n\n`;
|
|
}
|
|
|
|
if (description) {
|
|
markdown += `## Description\n\n${description}\n\n`;
|
|
}
|
|
|
|
// Add context sections (only those not excluded)
|
|
const sections = [
|
|
{ id: 'extensionInfo', name: 'Extension Info', content: extensionInfoContent.textContent },
|
|
{ id: 'browserInfo', name: 'Browser Info', content: browserInfoContent.textContent },
|
|
{ id: 'documentStatus', name: 'Document Status', content: documentStatusContent.textContent },
|
|
{ id: 'recentErrors', name: 'Recent Errors', content: recentErrorsContent.textContent }
|
|
];
|
|
|
|
let hasContext = false;
|
|
for (const section of sections) {
|
|
const checkbox = issueModal.querySelector(`input[data-exclude="${section.id}"]`) as HTMLInputElement;
|
|
if (!checkbox?.checked && section.content && section.content !== 'No recent errors' && section.content !== 'No documents in queue') {
|
|
if (!hasContext) {
|
|
markdown += `## Context\n\n`;
|
|
hasContext = true;
|
|
}
|
|
markdown += `### ${section.name}\n\n\`\`\`json\n${section.content}\n\`\`\`\n\n`;
|
|
}
|
|
}
|
|
|
|
// Copy to clipboard
|
|
try {
|
|
await navigator.clipboard.writeText(markdown);
|
|
|
|
// Show success feedback
|
|
const originalText = copyToClipboardBtn.textContent;
|
|
copyToClipboardBtn.textContent = 'Copied!';
|
|
copyToClipboardBtn.classList.add('btn-copy-success');
|
|
|
|
setTimeout(() => {
|
|
copyToClipboardBtn.textContent = originalText;
|
|
copyToClipboardBtn.classList.remove('btn-copy-success');
|
|
}, 2000);
|
|
} catch (error) {
|
|
console.error('Failed to copy to clipboard:', error);
|
|
trackError(error as Error);
|
|
|
|
// Show error feedback
|
|
copyToClipboardBtn.textContent = 'Copy failed';
|
|
setTimeout(() => {
|
|
copyToClipboardBtn.textContent = 'Copy to Clipboard';
|
|
}, 2000);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Setup issue modal event listeners
|
|
*/
|
|
function setupIssueModalListeners() {
|
|
// Open modal
|
|
reportIssueBtn.addEventListener('click', openIssueModal);
|
|
|
|
// Close modal
|
|
closeModalBtn.addEventListener('click', closeIssueModal);
|
|
modalBackdrop.addEventListener('click', closeIssueModal);
|
|
|
|
// Close on Escape key
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && issueModal.style.display !== 'none') {
|
|
closeIssueModal();
|
|
}
|
|
});
|
|
|
|
// Context section toggles
|
|
issueModal.querySelectorAll('.context-toggle').forEach(toggle => {
|
|
toggle.addEventListener('click', () => {
|
|
const sectionId = (toggle as HTMLElement).dataset.section;
|
|
if (sectionId) {
|
|
toggleContextSection(sectionId);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Copy to clipboard
|
|
copyToClipboardBtn.addEventListener('click', copyIssueToClipboard);
|
|
}
|
|
|
|
// Initialize on load
|
|
init();
|
|
|
|
// Setup issue modal listeners after DOM is ready
|
|
setupIssueModalListeners();
|