fix(events): typed-DELETE confirmation for bulk delete (#417)
The bulk-delete modal previously used a password input as a confirmation gate, with an Enter-to-submit handler. Windows Hello / passkey flows that target password fields were able to autofill and synthesise an Enter keystroke, which submitted the form and triggered the destructive delete without an explicit click on the red Delete button (Rekoo's report in #417). Replace the password gate with a GitHub-style typed-literal pattern: the user types the literal "DELETE" (English, case-sensitive) into a plain text input. The Delete button stays disabled until the input matches, and there is no Enter-to-submit handler — only an explicit click on the red button proceeds. Plain text inputs aren't subject to password autofill or passkey ceremony so the auto-submit class of bug is gone. Server side, drop the bcrypt password verify on /admin/events/bulk-delete and the related INVALID_PASSWORD response. The server's auth boundary remains adminAuth + requirePermission('events.delete'); this matches DELETE /admin/events/:id which has never required a re-entered password. The client-side typed gate is the safeguard against accidental clicks. i18n: drop password-related keys, add confirmLabel + confirmHelp across en, de, nl, pt, ru. The literal "DELETE" stays English in all locales to keep the gesture immune to translation drift and unambiguous. Verified locally: typed-DELETE sanity spec covers the gate (wrong case disabled, correct enables, Enter-on-input no-ops, click submits, events deleted). Existing 03-bulk-archive smoke remains green.
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