Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | 1x 6x 6x 6x 6x 6x 6x 6x 6x 6x | /**
* DeregistrationByEmailModal (Story 10.12 — AC9)
*
* Modal shown from HomePage and RegistrationWizard status guard.
* User enters email → always shows "check your inbox" (anti-enumeration).
*
* Tailwind/shadcn + lucide (no MUI): this modal is imported eagerly by the public
* HomePage, so it must stay off @mui/material to keep MUI out of the public bundle.
*/
import React, { useState } from 'react';
import { Loader2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/public/ui/dialog';
import { Button } from '@/components/public/ui/button';
import { Input } from '@/components/public/ui/input';
import { Label } from '@/components/public/ui/label';
import { useDeregistrationByEmail } from '@/hooks/useDeregistration';
interface DeregistrationByEmailModalProps {
open: boolean;
onClose: () => void;
eventCode: string;
}
export const DeregistrationByEmailModal: React.FC<DeregistrationByEmailModalProps> = ({
open,
onClose,
eventCode,
}) => {
const { t } = useTranslation(['registration', 'common']);
const [email, setEmail] = useState('');
const [emailError, setEmailError] = useState('');
const [submitted, setSubmitted] = useState(false);
const mutation = useDeregistrationByEmail();
const validateEmail = (value: string): boolean => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
};
const handleSubmit = () => {
if (!validateEmail(email)) {
setEmailError(t('deregistration.modal.emailError'));
return;
}
setEmailError('');
mutation.mutate(
{ email, eventCode },
{
onSettled: () => {
// Always show success regardless of result (anti-enumeration)
setSubmitted(true);
},
}
);
};
const handleClose = () => {
// Reset state on close
setEmail('');
setEmailError('');
setSubmitted(false);
onClose();
};
return (
<Dialog
open={open}
onOpenChange={(next) => {
// shadcn fires onOpenChange(false) on ESC / overlay / close button
if (!next) handleClose();
}}
>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>{t('deregistration.modal.title')}</DialogTitle>
</DialogHeader>
{submitted ? (
<p className="text-sm text-muted-foreground">
{t('deregistration.modal.successMessage')}
</p>
) : (
<div className="space-y-3">
<p className="text-sm text-muted-foreground">{t('deregistration.modal.body')}</p>
<div className="space-y-1.5">
<Label htmlFor="deregistration-email">{t('deregistration.modal.emailLabel')}</Label>
<Input
id="deregistration-email"
autoFocus
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
aria-invalid={Boolean(emailError)}
disabled={mutation.isPending}
onKeyDown={(e) => {
if (e.key === 'Enter') handleSubmit();
}}
/>
{emailError && <p className="text-sm text-destructive">{emailError}</p>}
</div>
</div>
)}
<DialogFooter>
{submitted ? (
<Button variant="outline" onClick={handleClose}>
{t('common:actions.close')}
</Button>
) : (
<>
<Button variant="outline" onClick={handleClose} disabled={mutation.isPending}>
{t('common:actions.close')}
</Button>
<Button
variant="destructive"
onClick={handleSubmit}
disabled={mutation.isPending || !email}
>
{mutation.isPending && <Loader2 className="h-4 w-4 animate-spin" />}
{t('deregistration.modal.submitButton')}
</Button>
</>
)}
</DialogFooter>
</DialogContent>
</Dialog>
);
};
|