Merge pull request #419 from the-luap/fix/bulk-delete-typed-confirm-417
fix(events): typed-DELETE confirmation for bulk delete (#417)
This commit is contained in:
Paul Nothaft
@@ -1652,18 +1652,23 @@ router.post('/bulk-archive', adminAuth, requirePermission('events.archive'), [
|
||||
}
|
||||
});
|
||||
|
||||
// Bulk delete — destructive, irreversible. Requires the calling admin to
|
||||
// re-enter their password as a confirmation gate (verified against the
|
||||
// stored bcrypt hash, same pattern as /auth/admin/change-password). Caps at
|
||||
// 100 events per request to keep request time bounded; the per-event
|
||||
// cascade touches 5 DB tables + 3 filesystem paths so 1000 events would
|
||||
// risk timing out the request. Loops via deleteEventCascade so the per-
|
||||
// event delete behaviour stays in lock-step with DELETE /:id.
|
||||
// Bulk delete — destructive, irreversible. Caps at 100 events per request
|
||||
// to keep request time bounded; the per-event cascade touches 5 DB tables
|
||||
// + 3 filesystem paths so 1000 events would risk timing out the request.
|
||||
// Loops via deleteEventCascade so the per-event delete behaviour stays in
|
||||
// lock-step with DELETE /:id.
|
||||
//
|
||||
// Confirmation is enforced client-side via the typed-DELETE pattern in
|
||||
// BulkDeleteModal (#417). The previous server-side bcrypt-password gate
|
||||
// was dropped because the destructive single-event DELETE /:id has never
|
||||
// required a password either — events.delete permission + admin session
|
||||
// is the auth boundary for both. The typed-literal client gate is the
|
||||
// "accidental click" safeguard, and unlike a password input it isn't
|
||||
// affected by passkey/Windows Hello autofill that auto-submits the form.
|
||||
const BULK_DELETE_MAX = 100;
|
||||
router.post('/bulk-delete', adminAuth, requirePermission('events.delete'), [
|
||||
body('eventIds').isArray({ min: 1, max: BULK_DELETE_MAX }).withMessage(`eventIds must be an array of 1-${BULK_DELETE_MAX} ids`),
|
||||
body('eventIds.*').isInt().withMessage('Each eventId must be an integer'),
|
||||
body('password').isString().notEmpty().withMessage('Password is required for confirmation')
|
||||
body('eventIds.*').isInt().withMessage('Each eventId must be an integer')
|
||||
], async (req, res) => {
|
||||
try {
|
||||
const errors = validationResult(req);
|
||||
@@ -1671,19 +1676,7 @@ router.post('/bulk-delete', adminAuth, requirePermission('events.delete'), [
|
||||
return res.status(400).json({ errors: errors.array() });
|
||||
}
|
||||
|
||||
const { eventIds, password } = req.body;
|
||||
|
||||
// Verify the admin's password before doing anything destructive.
|
||||
// Same pattern as /auth/admin/change-password (auth.js).
|
||||
const admin = await db('admin_users').where({ id: req.admin.id }).first();
|
||||
if (!admin) {
|
||||
return res.status(401).json({ error: 'Authentication required' });
|
||||
}
|
||||
const validPassword = await bcrypt.compare(password, admin.password_hash);
|
||||
if (!validPassword) {
|
||||
logger.warn('Incorrect password on bulk-delete attempt', { adminId: req.admin.id, eventCount: eventIds.length });
|
||||
return res.status(401).json({ error: 'Incorrect password', code: 'INVALID_PASSWORD' });
|
||||
}
|
||||
const { eventIds } = req.body;
|
||||
|
||||
// Editor-role events.delete permission is already gated by the route
|
||||
// middleware. We do NOT additionally filter to created_by here because
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Trash2, AlertTriangle, X, Lock, Eye, EyeOff, Loader2 } from 'lucide-react';
|
||||
import { Trash2, AlertTriangle, X, Loader2 } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Card, Input } from '../common';
|
||||
import type { Event } from '../../types';
|
||||
|
||||
// The exact literal a user must type to confirm bulk deletion. Kept English
|
||||
// across locales (matching GitHub's repo-deletion pattern) so it can never
|
||||
// be interpreted as autofillable text or be triggered by passkey/Windows
|
||||
// Hello flows on a password field — see issue #417.
|
||||
const CONFIRM_LITERAL = 'DELETE';
|
||||
|
||||
interface BulkDeleteModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: (password: string) => Promise<void>;
|
||||
onConfirm: () => Promise<void>;
|
||||
selectedEvents: Event[];
|
||||
isLoading?: boolean;
|
||||
/** Set when the server responded 401 INVALID_PASSWORD; surfaces inline. */
|
||||
passwordError?: string | null;
|
||||
/** Clear the inline password error when the user starts typing again. */
|
||||
onPasswordErrorClear?: () => void;
|
||||
}
|
||||
|
||||
export const BulkDeleteModal: React.FC<BulkDeleteModalProps> = ({
|
||||
@@ -22,25 +24,18 @@ export const BulkDeleteModal: React.FC<BulkDeleteModalProps> = ({
|
||||
onConfirm,
|
||||
selectedEvents,
|
||||
isLoading = false,
|
||||
passwordError = null,
|
||||
onPasswordErrorClear,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [password, setPassword] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [confirmText, setConfirmText] = useState('');
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const count = selectedEvents.length;
|
||||
const confirmed = confirmText === CONFIRM_LITERAL;
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!password || isLoading) return;
|
||||
await onConfirm(password);
|
||||
};
|
||||
|
||||
const handlePasswordChange = (val: string) => {
|
||||
setPassword(val);
|
||||
if (passwordError && onPasswordErrorClear) onPasswordErrorClear();
|
||||
if (!confirmed || isLoading) return;
|
||||
await onConfirm();
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -61,7 +56,6 @@ export const BulkDeleteModal: React.FC<BulkDeleteModalProps> = ({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Processing-state banner replaces the warning + form when in flight. */}
|
||||
{isLoading ? (
|
||||
<div className="py-8 text-center">
|
||||
<Loader2 className="w-8 h-8 mx-auto mb-3 animate-spin text-red-600 dark:text-red-400" />
|
||||
@@ -90,28 +84,22 @@ export const BulkDeleteModal: React.FC<BulkDeleteModalProps> = ({
|
||||
|
||||
<div className="mb-6">
|
||||
<Input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
label={t('events.bulkDelete.passwordLabel', 'Re-enter your password to confirm')}
|
||||
value={password}
|
||||
onChange={(e) => handlePasswordChange(e.target.value)}
|
||||
placeholder={t('events.bulkDelete.passwordPlaceholder', 'Your admin password')}
|
||||
helperText={t('events.bulkDelete.passwordHelp', 'We require your password as a safeguard against accidental bulk deletions.')}
|
||||
error={passwordError || undefined}
|
||||
leftIcon={<Lock className="w-5 h-5" />}
|
||||
rightIcon={
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="p-1"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
}
|
||||
type="text"
|
||||
label={t(
|
||||
'events.bulkDelete.confirmLabel',
|
||||
'Type {{literal}} to confirm',
|
||||
{ literal: CONFIRM_LITERAL }
|
||||
)}
|
||||
value={confirmText}
|
||||
onChange={(e) => setConfirmText(e.target.value)}
|
||||
placeholder={CONFIRM_LITERAL}
|
||||
helperText={t(
|
||||
'events.bulkDelete.confirmHelp',
|
||||
'A typed confirmation prevents accidental deletions and isn\'t affected by browser autofill or passkey shortcuts.'
|
||||
)}
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && password) handleSubmit();
|
||||
}}
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -126,7 +114,7 @@ export const BulkDeleteModal: React.FC<BulkDeleteModalProps> = ({
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSubmit}
|
||||
disabled={!password || isLoading}
|
||||
disabled={!confirmed || isLoading}
|
||||
leftIcon={<Trash2 className="w-4 h-4" />}
|
||||
className="bg-red-600 hover:bg-red-700 focus:ring-red-500 text-white"
|
||||
>
|
||||
|
||||
@@ -1062,12 +1062,10 @@
|
||||
"bulkDelete": {
|
||||
"title": "{{count}} Veranstaltungen endgültig löschen?",
|
||||
"warning": "Die ausgewählten Veranstaltungen, alle ihre Fotos, Archive und Audit-Logs werden endgültig gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.",
|
||||
"passwordLabel": "Zur Bestätigung Ihr Passwort erneut eingeben",
|
||||
"passwordPlaceholder": "Ihr Admin-Passwort",
|
||||
"passwordHelp": "Wir benötigen Ihr Passwort als Schutz vor versehentlichen Massenlöschungen.",
|
||||
"confirmLabel": "Geben Sie {{literal}} ein, um zu bestätigen",
|
||||
"confirmHelp": "Eine getippte Bestätigung verhindert versehentliche Löschungen und ist nicht von Browser-Autofill oder Passkey-Verknüpfungen betroffen.",
|
||||
"submit": "{{count}} Veranstaltungen löschen",
|
||||
"processing": "{{count}} Veranstaltungen werden gelöscht. Dies kann einige Minuten dauern — bitte schließen Sie dieses Fenster nicht.",
|
||||
"incorrectPassword": "Falsches Passwort. Es wurden keine Veranstaltungen gelöscht.",
|
||||
"successAll": "{{count}} Veranstaltungen endgültig gelöscht",
|
||||
"successPartial": "{{success}} Veranstaltungen gelöscht, {{failed}} fehlgeschlagen",
|
||||
"errorGeneric": "Veranstaltungen konnten nicht gelöscht werden"
|
||||
|
||||
@@ -582,12 +582,10 @@
|
||||
"bulkDelete": {
|
||||
"title": "Permanently delete {{count}} events?",
|
||||
"warning": "This will permanently delete the selected events, all their photos, archives, and audit logs. This action cannot be undone.",
|
||||
"passwordLabel": "Re-enter your password to confirm",
|
||||
"passwordPlaceholder": "Your admin password",
|
||||
"passwordHelp": "We require your password as a safeguard against accidental bulk deletions.",
|
||||
"confirmLabel": "Type {{literal}} to confirm",
|
||||
"confirmHelp": "A typed confirmation prevents accidental deletions and isn't affected by browser autofill or passkey shortcuts.",
|
||||
"submit": "Delete {{count}} events",
|
||||
"processing": "Deleting {{count}} events. This may take a few minutes — please don't close this window.",
|
||||
"incorrectPassword": "Incorrect password. No events were deleted.",
|
||||
"successAll": "Permanently deleted {{count}} events",
|
||||
"successPartial": "Deleted {{success}} events, {{failed}} failed",
|
||||
"errorGeneric": "Failed to delete events"
|
||||
|
||||
@@ -562,7 +562,7 @@
|
||||
"draft": "Concept",
|
||||
"publishAndNotify": "Publiceren & klant informeren",
|
||||
"publishConfirm": "Hiermee wordt de galerij toegankelijk en wordt de notificatie-e-mail naar de klant verzonden. Doorgaan?",
|
||||
"publishSuccess": "Galerij gepubliceerd en klant ge\u00efnformeerd!",
|
||||
"publishSuccess": "Galerij gepubliceerd en klant geïnformeerd!",
|
||||
"draftBanner": "Deze galerij staat in conceptmodus. Upload je foto's en publiceer wanneer je klaar bent.",
|
||||
"daysLeft": "{{count}}d resterend",
|
||||
"daysLeft_plural": "{{count}}d resterend",
|
||||
@@ -576,12 +576,10 @@
|
||||
"bulkDelete": {
|
||||
"title": "{{count}} evenementen permanent verwijderen?",
|
||||
"warning": "De geselecteerde evenementen, al hun foto's, archieven en auditlogboeken worden permanent verwijderd. Deze actie kan niet ongedaan worden gemaakt.",
|
||||
"passwordLabel": "Voer ter bevestiging uw wachtwoord opnieuw in",
|
||||
"passwordPlaceholder": "Uw beheerderswachtwoord",
|
||||
"passwordHelp": "We vragen om uw wachtwoord als bescherming tegen onbedoelde bulkverwijderingen.",
|
||||
"confirmLabel": "Typ {{literal}} om te bevestigen",
|
||||
"confirmHelp": "Een getypte bevestiging voorkomt onbedoelde verwijderingen en wordt niet beïnvloed door browser-autofill of passkey-snelkoppelingen.",
|
||||
"submit": "{{count}} evenementen verwijderen",
|
||||
"processing": "{{count}} evenementen worden verwijderd. Dit kan enkele minuten duren — sluit dit venster niet.",
|
||||
"incorrectPassword": "Onjuist wachtwoord. Er zijn geen evenementen verwijderd.",
|
||||
"successAll": "{{count}} evenementen permanent verwijderd",
|
||||
"successPartial": "{{success}} evenementen verwijderd, {{failed}} mislukt",
|
||||
"errorGeneric": "Kan evenementen niet verwijderen"
|
||||
|
||||
@@ -576,12 +576,10 @@
|
||||
"bulkDelete": {
|
||||
"title": "Excluir permanentemente {{count}} eventos?",
|
||||
"warning": "Os eventos selecionados, todas as suas fotos, arquivos e logs de auditoria serão excluídos permanentemente. Esta ação não pode ser desfeita.",
|
||||
"passwordLabel": "Digite sua senha novamente para confirmar",
|
||||
"passwordPlaceholder": "Sua senha de administrador",
|
||||
"passwordHelp": "Solicitamos sua senha como proteção contra exclusões em massa acidentais.",
|
||||
"confirmLabel": "Digite {{literal}} para confirmar",
|
||||
"confirmHelp": "Uma confirmação digitada evita exclusões acidentais e não é afetada pelo autopreenchimento do navegador ou atalhos de passkey.",
|
||||
"submit": "Excluir {{count}} eventos",
|
||||
"processing": "Excluindo {{count}} eventos. Isso pode levar alguns minutos — não feche esta janela.",
|
||||
"incorrectPassword": "Senha incorreta. Nenhum evento foi excluído.",
|
||||
"successAll": "{{count}} eventos excluídos permanentemente",
|
||||
"successPartial": "{{success}} eventos excluídos, {{failed}} com falha",
|
||||
"errorGeneric": "Falha ao excluir eventos"
|
||||
|
||||
@@ -576,12 +576,10 @@
|
||||
"bulkDelete": {
|
||||
"title": "Безвозвратно удалить {{count}} событий?",
|
||||
"warning": "Выбранные события, все их фотографии, архивы и журналы аудита будут удалены безвозвратно. Это действие невозможно отменить.",
|
||||
"passwordLabel": "Введите пароль для подтверждения",
|
||||
"passwordPlaceholder": "Ваш пароль администратора",
|
||||
"passwordHelp": "Мы запрашиваем пароль для защиты от случайного массового удаления.",
|
||||
"confirmLabel": "Введите {{literal}} для подтверждения",
|
||||
"confirmHelp": "Подтверждение вводом текста предотвращает случайные удаления и не зависит от автозаполнения браузера или сочетаний клавиш с passkey.",
|
||||
"submit": "Удалить {{count}} событий",
|
||||
"processing": "Удаление {{count}} событий. Это может занять несколько минут — пожалуйста, не закрывайте это окно.",
|
||||
"incorrectPassword": "Неверный пароль. События не были удалены.",
|
||||
"successAll": "Безвозвратно удалено {{count}} событий",
|
||||
"successPartial": "Удалено {{success}} событий, {{failed}} не удалось",
|
||||
"errorGeneric": "Не удалось удалить события"
|
||||
|
||||
@@ -48,7 +48,6 @@ export const EventsListPage: React.FC = () => {
|
||||
const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number } | null>(null);
|
||||
const [showBulkArchiveModal, setShowBulkArchiveModal] = useState(false);
|
||||
const [showBulkDeleteModal, setShowBulkDeleteModal] = useState(false);
|
||||
const [bulkDeletePasswordError, setBulkDeletePasswordError] = useState<string | null>(null);
|
||||
const [copiedEventId, setCopiedEventId] = useState<number | null>(null);
|
||||
|
||||
const copyShareLink = async (event: Event) => {
|
||||
@@ -201,18 +200,15 @@ export const EventsListPage: React.FC = () => {
|
||||
},
|
||||
});
|
||||
|
||||
// Bulk delete mutation. The 401 INVALID_PASSWORD response surfaces inline
|
||||
// on the modal's password field rather than as a toast, since it's a
|
||||
// recoverable input error (the user can retry without losing context).
|
||||
// Bulk delete mutation. Confirmation is handled client-side by the modal's
|
||||
// typed-DELETE gate (#417); server still enforces auth + permission.
|
||||
const bulkDeleteMutation = useMutation({
|
||||
mutationFn: ({ eventIds, password }: { eventIds: number[]; password: string }) =>
|
||||
eventsService.bulkDeleteEvents(eventIds, password),
|
||||
mutationFn: (eventIds: number[]) => eventsService.bulkDeleteEvents(eventIds),
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-events'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-dashboard-stats'] });
|
||||
setSelectedEvents([]);
|
||||
setShowBulkDeleteModal(false);
|
||||
setBulkDeletePasswordError(null);
|
||||
|
||||
if (data.results.failed.length === 0) {
|
||||
toast.success(t('events.bulkDelete.successAll', { count: data.results.successful.length }));
|
||||
@@ -220,14 +216,9 @@ export const EventsListPage: React.FC = () => {
|
||||
toast.warning(t('events.bulkDelete.successPartial', { success: data.results.successful.length, failed: data.results.failed.length }));
|
||||
}
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
const e = error as { response?: { status?: number; data?: { code?: string; error?: string } } };
|
||||
if (e?.response?.status === 401 && e.response.data?.code === 'INVALID_PASSWORD') {
|
||||
setBulkDeletePasswordError(t('events.bulkDelete.incorrectPassword'));
|
||||
} else {
|
||||
toast.error(t('events.bulkDelete.errorGeneric'));
|
||||
setShowBulkDeleteModal(false);
|
||||
}
|
||||
onError: () => {
|
||||
toast.error(t('events.bulkDelete.errorGeneric'));
|
||||
setShowBulkDeleteModal(false);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -441,10 +432,7 @@ export const EventsListPage: React.FC = () => {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setBulkDeletePasswordError(null);
|
||||
setShowBulkDeleteModal(true);
|
||||
}}
|
||||
onClick={() => setShowBulkDeleteModal(true)}
|
||||
className="border-red-300 text-red-700 hover:bg-red-50 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900/30"
|
||||
>
|
||||
{t('events.deleteSelected', 'Delete Selected')}
|
||||
@@ -766,17 +754,12 @@ export const EventsListPage: React.FC = () => {
|
||||
{/* Bulk Delete Modal */}
|
||||
<BulkDeleteModal
|
||||
isOpen={showBulkDeleteModal}
|
||||
onClose={() => {
|
||||
setShowBulkDeleteModal(false);
|
||||
setBulkDeletePasswordError(null);
|
||||
}}
|
||||
onConfirm={async (password) => {
|
||||
await bulkDeleteMutation.mutateAsync({ eventIds: selectedEvents, password });
|
||||
onClose={() => setShowBulkDeleteModal(false)}
|
||||
onConfirm={async () => {
|
||||
await bulkDeleteMutation.mutateAsync(selectedEvents);
|
||||
}}
|
||||
selectedEvents={events.filter(e => selectedEvents.includes(e.id))}
|
||||
isLoading={bulkDeleteMutation.isPending}
|
||||
passwordError={bulkDeletePasswordError}
|
||||
onPasswordErrorClear={() => setBulkDeletePasswordError(null)}
|
||||
/>
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
|
||||
@@ -148,10 +148,12 @@ export const eventsService = {
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Bulk delete events (admin) — destructive. Requires the calling admin's
|
||||
// password as a server-side confirmation gate. On 401 the server returns
|
||||
// { error, code: 'INVALID_PASSWORD' } and no events are touched.
|
||||
async bulkDeleteEvents(eventIds: number[], password: string): Promise<{
|
||||
// Bulk delete events (admin) — destructive. The client-side confirmation
|
||||
// gate is a typed-literal pattern in the modal (issue #417); no password
|
||||
// is sent because passkey/autofill flows on a password input could
|
||||
// auto-submit the form. The admin session JWT remains the auth boundary,
|
||||
// matching DELETE /admin/events/:id which has never required a password.
|
||||
async bulkDeleteEvents(eventIds: number[]): Promise<{
|
||||
message: string;
|
||||
results: {
|
||||
successful: Array<{ id: number; name: string }>;
|
||||
@@ -160,7 +162,6 @@ export const eventsService = {
|
||||
}> {
|
||||
const response = await api.post('/admin/events/bulk-delete', {
|
||||
eventIds,
|
||||
password,
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user