Merge remote-tracking branch 'origin/main' into refactor/codebase-cleanup
# Conflicts: # backend/src/routes/adminEvents.js # backend/src/routes/protectedImages.js # frontend/src/pages/admin/EventDetailsPage.tsx
This commit is contained in:
Paul Nothaft
@@ -0,0 +1,219 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Download, Upload, AlertTriangle, ShieldAlert, ExternalLink, CheckCircle2 } from 'lucide-react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Button, Card } from '../common';
|
||||
import { api } from '../../config/api';
|
||||
|
||||
// Portable ".picpeak" roundtrip, split across two Backup Manager tabs:
|
||||
// - PicpeakExportCard → Dashboard (making a backup)
|
||||
// - PicpeakRestoreCard → Restore (restoring a backup)
|
||||
// The manifest is bundled inside the .picpeak, so there is no separate
|
||||
// "manifest only" download here.
|
||||
|
||||
interface RestoreResult {
|
||||
tables: number;
|
||||
filesRestored: number;
|
||||
usesExternalMedia: boolean;
|
||||
}
|
||||
|
||||
// ── Download half (Dashboard) ────────────────────────────────────────────────
|
||||
export const PicpeakExportCard: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [includePhotos, setIncludePhotos] = useState(false);
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
|
||||
const handleDownload = async () => {
|
||||
setDownloading(true);
|
||||
try {
|
||||
const res = await api.get('/admin/backup/picpeak/export', {
|
||||
params: { includePhotos },
|
||||
responseType: 'blob',
|
||||
});
|
||||
const cd = (res.headers['content-disposition'] as string) || '';
|
||||
const match = cd.match(/filename="?([^"]+)"?/);
|
||||
const filename = (match && match[1]) || 'picpeak-backup.picpeak';
|
||||
const url = window.URL.createObjectURL(res.data as Blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
} catch (_) {
|
||||
toast.error(t('backup.picpeak.downloadFailed', 'Could not create the backup file.'));
|
||||
} finally {
|
||||
setDownloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card padding="lg">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{t('backup.picpeak.title', 'Portable backup (.picpeak)')}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{t('backup.picpeak.intro', 'Download a single self-contained file, then upload it on another instance to clone this one — all through the browser.')}
|
||||
</p>
|
||||
|
||||
<div className="mt-6">
|
||||
<label className="flex items-center gap-2 text-sm text-neutral-700 dark:text-neutral-300">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-neutral-300"
|
||||
checked={includePhotos}
|
||||
onChange={(e) => setIncludePhotos(e.target.checked)}
|
||||
/>
|
||||
{t('backup.picpeak.includePhotos', 'Include original gallery photos (larger file)')}
|
||||
</label>
|
||||
<div className="mt-3 flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900/50 dark:bg-amber-900/20">
|
||||
<ShieldAlert className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600 dark:text-amber-400" />
|
||||
<p className="text-xs text-amber-800 dark:text-amber-200">
|
||||
{t('backup.picpeak.secretsWarning', 'This file contains secrets in plain text (email password, admin credentials, API keys). Store it securely and only transfer it over trusted channels.')}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-3"
|
||||
isLoading={downloading}
|
||||
onClick={handleDownload}
|
||||
leftIcon={<Download className="h-4 w-4" />}
|
||||
>
|
||||
{t('backup.picpeak.download', 'Download .picpeak')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
PicpeakExportCard.displayName = 'PicpeakExportCard';
|
||||
|
||||
// ── Restore half (Restore tab) ───────────────────────────────────────────────
|
||||
export const PicpeakRestoreCard: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const [pendingFile, setPendingFile] = useState<File | null>(null);
|
||||
const [restoring, setRestoring] = useState(false);
|
||||
const [result, setResult] = useState<RestoreResult | null>(null);
|
||||
|
||||
const onFilePick = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const f = e.target.files?.[0];
|
||||
if (f) setPendingFile(f);
|
||||
e.target.value = ''; // let the user re-pick the same file after cancelling
|
||||
};
|
||||
|
||||
const confirmRestore = async () => {
|
||||
if (!pendingFile) return;
|
||||
setRestoring(true);
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('backup', pendingFile);
|
||||
const res = await api.post<RestoreResult>('/admin/backup/picpeak/import', fd);
|
||||
setResult(res.data);
|
||||
setPendingFile(null);
|
||||
toast.success(t('backup.picpeak.restoreDone', 'Backup restored.'));
|
||||
} catch (e: any) {
|
||||
const msg = e.response?.data?.error || t('backup.picpeak.restoreFailed', 'Restore failed.');
|
||||
toast.error(msg);
|
||||
setPendingFile(null);
|
||||
} finally {
|
||||
setRestoring(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card padding="lg">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{t('backup.picpeak.restoreTitle', 'Restore from a .picpeak')}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{t('backup.picpeak.restoreIntro', 'Upload a .picpeak taken from this or another instance. Same database engine only.')}
|
||||
</p>
|
||||
<input ref={fileRef} type="file" accept=".picpeak,application/zip" className="hidden" onChange={onFilePick} />
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
leftIcon={<Upload className="h-4 w-4" />}
|
||||
>
|
||||
{t('backup.picpeak.chooseFile', 'Choose .picpeak file…')}
|
||||
</Button>
|
||||
|
||||
{result && (
|
||||
<div className="mt-4 rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-900/50 dark:bg-green-900/20">
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-600 dark:text-green-400" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-green-800 dark:text-green-200">
|
||||
{t('backup.picpeak.restoreDone', 'Backup restored.')}
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs text-green-700 dark:text-green-300">
|
||||
{t('backup.picpeak.restoreSummary', '{{tables}} tables and {{files}} files restored.', {
|
||||
tables: result.tables,
|
||||
files: result.filesRestored,
|
||||
})}
|
||||
</p>
|
||||
{result.usesExternalMedia && (
|
||||
<p className="mt-2 flex items-start gap-1 text-xs text-amber-800 dark:text-amber-300">
|
||||
<AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0" />
|
||||
<span>
|
||||
{t('backup.picpeak.externalMediaNote', 'This backup references an external-media library. Make sure external-media routing is configured on this instance.')}{' '}
|
||||
<a
|
||||
href="https://github.com/PicPeak/picpeak/blob/main/README.md"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-0.5 underline"
|
||||
>
|
||||
{t('backup.picpeak.externalMediaLink', 'Setup guide')}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
<Button variant="primary" size="sm" className="mt-3" onClick={() => window.location.reload()}>
|
||||
{t('backup.picpeak.reload', 'Reload app')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Destructive confirmation */}
|
||||
{pendingFile && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-neutral-800">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="mt-0.5 h-6 w-6 flex-shrink-0 text-red-600 dark:text-red-400" />
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{t('backup.picpeak.confirmTitle', 'Restore will delete all current data')}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-neutral-600 dark:text-neutral-300">
|
||||
{t('backup.picpeak.confirmBody', 'This permanently replaces ALL data on this instance with the uploaded backup, except your current account. This cannot be undone.')}
|
||||
</p>
|
||||
<p className="mt-2 truncate text-xs text-neutral-500 dark:text-neutral-400">{pendingFile.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<Button variant="outline" onClick={() => setPendingFile(null)} disabled={restoring}>
|
||||
{t('common.cancel', 'Cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
className="!bg-red-600 hover:!bg-red-700"
|
||||
isLoading={restoring}
|
||||
onClick={confirmRestore}
|
||||
>
|
||||
{t('backup.picpeak.confirmRestore', 'Delete & restore')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
PicpeakRestoreCard.displayName = 'PicpeakRestoreCard';
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { PicpeakRestoreCard } from './PicpeakBackupCard';
|
||||
import {
|
||||
RefreshCw,
|
||||
AlertTriangle,
|
||||
@@ -283,12 +284,47 @@ export const RestoreWizard = ({ onVerifyIntegrity } = {}) => {
|
||||
)}
|
||||
|
||||
{restoreData.source === 'upload' && (
|
||||
<Card className="p-4">
|
||||
<div className="text-center py-8">
|
||||
<Upload className="h-12 w-12 mx-auto mb-3 text-neutral-400" />
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">{t('backup.restore.source.upload.comingSoon')}</p>
|
||||
<div className="space-y-4">
|
||||
{/* Two upload kinds: the working portable .picpeak restore, and the
|
||||
legacy manifest+files upload (still a stub). */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<button
|
||||
onClick={() => setRestoreData(prev => ({ ...prev, uploadType: 'picpeak' }))}
|
||||
className={`p-6 rounded-lg border-2 transition-all ${
|
||||
restoreData.uploadType === 'picpeak'
|
||||
? 'border-primary bg-accent-dark/15'
|
||||
: 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
|
||||
}`}
|
||||
>
|
||||
<FileArchive className={`h-10 w-10 mb-2 mx-auto ${restoreData.uploadType === 'picpeak' ? 'text-primary' : 'text-neutral-400'}`} />
|
||||
<h4 className="font-medium text-neutral-900 dark:text-neutral-100">{t('backup.restore.source.upload.picpeak.name', '.picpeak backup')}</h4>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">{t('backup.restore.source.upload.picpeak.description', 'Portable full backup — restores everything (full override, keeps your current account).')}</p>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setRestoreData(prev => ({ ...prev, uploadType: 'manifest' }))}
|
||||
className={`p-6 rounded-lg border-2 transition-all ${
|
||||
restoreData.uploadType === 'manifest'
|
||||
? 'border-primary bg-accent-dark/15'
|
||||
: 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
|
||||
}`}
|
||||
>
|
||||
<Upload className={`h-10 w-10 mb-2 mx-auto ${restoreData.uploadType === 'manifest' ? 'text-primary' : 'text-neutral-400'}`} />
|
||||
<h4 className="font-medium text-neutral-900 dark:text-neutral-100">{t('backup.restore.source.upload.manifest.name', 'Manifest + files')}</h4>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">{t('backup.restore.source.upload.manifest.description', 'Upload a manifest and its backup files (legacy format).')}</p>
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{restoreData.uploadType === 'picpeak' && <PicpeakRestoreCard />}
|
||||
|
||||
{restoreData.uploadType === 'manifest' && (
|
||||
<Card className="p-4">
|
||||
<div className="text-center py-8">
|
||||
<Upload className="h-12 w-12 mx-auto mb-3 text-neutral-400" />
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">{t('backup.restore.source.upload.manifestComingSoon', 'Manifest Upload functionality coming soon')}</p>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { toast } from 'react-toastify';
|
||||
import { ShieldAlert } from 'lucide-react';
|
||||
|
||||
import { Button, Input } from '../common';
|
||||
import type { FeatureKey } from '../../services/featureFlags.service';
|
||||
import { businessProfileService } from '../../services/businessProfile.service';
|
||||
import { emailService, type EmailConfig } from '../../services/email.service';
|
||||
|
||||
// Features that need working SMTP to deliver anything.
|
||||
const EMAIL_FEATURES: FeatureKey[] = ['reminderEmails', 'incomingMail', 'whatsapp', 'bills'];
|
||||
|
||||
interface Props {
|
||||
selectedFeatures: Set<FeatureKey>;
|
||||
onDone: () => void;
|
||||
}
|
||||
|
||||
// Lean per-feature config, shown after the "How will you use PicPeak?" step.
|
||||
// Only the sections a selected feature actually needs are rendered; everything
|
||||
// else keeps its seeded defaults and is tunable later in Settings. Saving is
|
||||
// best-effort per section — a failure never traps the user on setup.
|
||||
export const SetupConfigStep: React.FC<Props> = ({ selectedFeatures, onDone }) => {
|
||||
const { t } = useTranslation();
|
||||
const showInvoicing = selectedFeatures.has('bills');
|
||||
const showEmail = EMAIL_FEATURES.some((f) => selectedFeatures.has(f));
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const [inv, setInv] = useState({
|
||||
companyName: '', addressLine1: '', postalCode: '', city: '', countryCode: '',
|
||||
vatId: '', taxId: '', defaultCurrency: 'CHF', iban: '',
|
||||
});
|
||||
const [mail, setMail] = useState({
|
||||
smtp_host: '', smtp_port: '587', smtp_user: '', smtp_pass: '', from_email: '', from_name: '',
|
||||
});
|
||||
|
||||
const invField = (k: keyof typeof inv) => (e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setInv((p) => ({ ...p, [k]: e.target.value }));
|
||||
const mailField = (k: keyof typeof mail) => (e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setMail((p) => ({ ...p, [k]: e.target.value }));
|
||||
|
||||
const finish = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
// Invoicing: only persist if they actually started filling it in.
|
||||
if (showInvoicing && inv.companyName.trim()) {
|
||||
await businessProfileService.update({
|
||||
companyName: inv.companyName.trim(),
|
||||
addressLine1: inv.addressLine1.trim(),
|
||||
postalCode: inv.postalCode.trim(),
|
||||
city: inv.city.trim(),
|
||||
countryCode: inv.countryCode.trim(),
|
||||
vatId: inv.vatId.trim(),
|
||||
taxId: inv.taxId.trim(),
|
||||
defaultCurrency: inv.defaultCurrency.trim() || 'CHF',
|
||||
});
|
||||
if (inv.iban.trim()) {
|
||||
await businessProfileService.createBankAccount({
|
||||
iban: inv.iban.replace(/\s+/g, ''),
|
||||
accountHolder: inv.companyName.trim(),
|
||||
currency: inv.defaultCurrency.trim() || 'CHF',
|
||||
isDefault: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
// Email: only persist if a host was entered.
|
||||
if (showEmail && mail.smtp_host.trim()) {
|
||||
const port = parseInt(mail.smtp_port, 10) || 587;
|
||||
const config: EmailConfig = {
|
||||
smtp_host: mail.smtp_host.trim(),
|
||||
smtp_port: port,
|
||||
smtp_secure: port === 465,
|
||||
smtp_user: mail.smtp_user.trim(),
|
||||
smtp_pass: mail.smtp_pass,
|
||||
from_email: mail.from_email.trim(),
|
||||
from_name: mail.from_name.trim(),
|
||||
tls_reject_unauthorized: true,
|
||||
};
|
||||
await emailService.updateConfig(config);
|
||||
}
|
||||
} catch (_) {
|
||||
toast.warn(t('setup.config.saveFailed', 'Some settings could not be saved — you can finish them in Settings.'));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
onDone();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<p className="rounded-lg bg-neutral-50 border border-neutral-200 px-3 py-2 text-xs text-neutral-600">
|
||||
{t('setup.config.intro', 'A few details for the features you picked. Anything you skip keeps its default and can be set later in Settings.')}
|
||||
</p>
|
||||
|
||||
{showInvoicing && (
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-neutral-800">{t('setup.config.invoicing', 'Invoicing details')}</h3>
|
||||
<div className="flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3">
|
||||
<ShieldAlert className="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-600" />
|
||||
<p className="text-xs text-amber-800">
|
||||
{t('setup.config.invoicingDisclaimer', 'Used on your invoices. Bank/IBAN and VAT details are your responsibility — verify them with your bank and Treuhänder/tax advisor.')}
|
||||
</p>
|
||||
</div>
|
||||
<Input placeholder={t('setup.config.companyName', 'Company / legal name')} value={inv.companyName} onChange={invField('companyName')} />
|
||||
<Input placeholder={t('setup.config.addressLine1', 'Street and number')} value={inv.addressLine1} onChange={invField('addressLine1')} />
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<Input placeholder={t('setup.config.postalCode', 'Postal code')} value={inv.postalCode} onChange={invField('postalCode')} />
|
||||
<div className="col-span-2"><Input placeholder={t('setup.config.city', 'City')} value={inv.city} onChange={invField('city')} /></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input placeholder={t('setup.config.countryCode', 'Country code (e.g. CH)')} value={inv.countryCode} onChange={invField('countryCode')} />
|
||||
<Input placeholder={t('setup.config.currency', 'Currency (e.g. CHF)')} value={inv.defaultCurrency} onChange={invField('defaultCurrency')} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input placeholder={t('setup.config.vatId', 'VAT ID (or leave blank)')} value={inv.vatId} onChange={invField('vatId')} />
|
||||
<Input placeholder={t('setup.config.taxId', 'Tax number (or VAT ID)')} value={inv.taxId} onChange={invField('taxId')} />
|
||||
</div>
|
||||
<Input placeholder={t('setup.config.iban', 'IBAN (for invoice payments)')} value={inv.iban} onChange={invField('iban')} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showEmail && (
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-neutral-800">{t('setup.config.email', 'Email delivery (SMTP)')}</h3>
|
||||
<p className="text-xs text-neutral-500">{t('setup.config.emailHint', 'Required to send reminders, invoices and notifications.')}</p>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="col-span-2"><Input placeholder={t('setup.config.smtpHost', 'SMTP host')} value={mail.smtp_host} onChange={mailField('smtp_host')} /></div>
|
||||
<Input placeholder={t('setup.config.smtpPort', 'Port')} value={mail.smtp_port} onChange={mailField('smtp_port')} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input placeholder={t('setup.config.smtpUser', 'Username')} value={mail.smtp_user} onChange={mailField('smtp_user')} autoComplete="off" />
|
||||
<Input type="password" placeholder={t('setup.config.smtpPass', 'Password')} value={mail.smtp_pass} onChange={mailField('smtp_pass')} autoComplete="new-password" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input type="email" placeholder={t('setup.config.fromEmail', 'From address')} value={mail.from_email} onChange={mailField('from_email')} />
|
||||
<Input placeholder={t('setup.config.fromName', 'From name')} value={mail.from_name} onChange={mailField('from_name')} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button type="button" variant="outline" size="lg" onClick={onDone} disabled={saving}>
|
||||
{t('setup.config.skip', 'Skip for now')}
|
||||
</Button>
|
||||
<Button type="button" variant="primary" size="lg" isLoading={saving} className="flex-1" onClick={finish}>
|
||||
{t('setup.config.finish', 'Finish setup')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SetupConfigStep.displayName = 'SetupConfigStep';
|
||||
@@ -137,18 +137,26 @@ export const AuthenticatedImage: React.FC<AuthenticatedImageProps> = ({
|
||||
throw new Error('No URL provided');
|
||||
}
|
||||
|
||||
// Build full URL for the image
|
||||
// Build full URL for the image. Only relative paths are app-owned;
|
||||
// an absolute URL is passed through untouched.
|
||||
const isRelative = rawUrl.startsWith('/');
|
||||
const fullImageUrl = rawUrl.startsWith('/admin')
|
||||
? buildResourceUrl(`/api${rawUrl}`)
|
||||
: rawUrl.startsWith('/')
|
||||
: isRelative
|
||||
? buildResourceUrl(rawUrl)
|
||||
: rawUrl;
|
||||
|
||||
const headers: Record<string, string> = {};
|
||||
const slugForRequest = resolveSlug(rawUrl);
|
||||
const token = getGalleryToken(slugForRequest);
|
||||
if (token) {
|
||||
headers.Authorization = `Bearer ${token}`;
|
||||
// Attach the gallery bearer token ONLY to relative (same-app) image
|
||||
// paths. Never send it to an absolute/external URL — that would leak
|
||||
// gallery credentials cross-origin. AuthenticatedImage does not
|
||||
// support external URLs by design.
|
||||
if (isRelative) {
|
||||
const slugForRequest = resolveSlug(rawUrl);
|
||||
const token = getGalleryToken(slugForRequest);
|
||||
if (token) {
|
||||
headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
}
|
||||
|
||||
const response = await fetch(fullImageUrl, {
|
||||
|
||||
Reference in New Issue
Block a user