@@ -364,6 +370,841 @@ function CreateInviteModal({ onClose, onCreated }: CreateInviteModalProps) {
);
}
+interface EditInviteModalProps {
+ invite: InviteLinkSummary;
+ onClose: () => void;
+ onUpdated: () => void;
+}
+
+/**
+ * Edit modal — same shape as Create, pre-filled. Only sends fields the user actually changed
+ * (no-op churn avoidance). Disallowed for revoked rows (the row hides the Edit button entirely
+ * — Reinstate is the only path back from revoked).
+ */
+function EditInviteModal({ invite, onClose, onUpdated }: EditInviteModalProps) {
+ const addToast = useUIStore((s) => s.addToast);
+ const [name, setName] = useState(invite.name);
+ const [unlimited, setUnlimited] = useState(invite.maxUses === null);
+ const [maxUses, setMaxUses] = useState(invite.maxUses?.toString() ?? '1');
+ const [expiryId, setExpiryId] = useState
('keep');
+ const [customDateTime, setCustomDateTime] = useState('');
+ const [submitting, setSubmitting] = useState(false);
+ const nameInputRef = useRef(null);
+
+ // Auto-focus name input on mount
+ useEffect(() => {
+ nameInputRef.current?.focus();
+ }, []);
+
+ // Escape closes the modal (capture phase so it fires before the parent settings modal handler)
+ useEffect(() => {
+ const handleKey = (e: KeyboardEvent) => {
+ if (e.key === 'Escape' && !submitting) {
+ e.stopPropagation();
+ onClose();
+ }
+ };
+ document.addEventListener('keydown', handleKey, true);
+ return () => document.removeEventListener('keydown', handleKey, true);
+ }, [onClose, submitting]);
+
+ const handleSave = async () => {
+ const trimmed = name.trim();
+ if (trimmed.length === 0 || trimmed.length > 64) {
+ addToast('Name must be 1–64 characters', 'warning');
+ return;
+ }
+
+ // Validate maxUses input only when the user has selected limited mode.
+ // Server requires `maxUses >= usedCount` (a server-side floor of 1 still applies).
+ let newMax: number | null = null;
+ if (!unlimited) {
+ const parsed = Number(maxUses);
+ if (!Number.isInteger(parsed) || parsed < 1) {
+ addToast('Max uses must be a positive integer', 'warning');
+ return;
+ }
+ if (parsed < invite.usedCount) {
+ addToast(
+ `Max uses cannot be less than current uses (${invite.usedCount})`,
+ 'warning',
+ );
+ return;
+ }
+ newMax = parsed;
+ }
+
+ // Build a partial body — only include fields the user actually changed.
+ const body: { name?: string; maxUses?: number | null; expiresAt?: number | null } = {};
+ if (trimmed !== invite.name) body.name = trimmed;
+ if (newMax !== invite.maxUses) body.maxUses = newMax;
+
+ const resolved = resolveExpiryFromSelector(expiryId, customDateTime);
+ if (resolved.kind === 'invalid') {
+ addToast(resolved.message, 'warning');
+ return;
+ }
+ if (resolved.kind === 'value') {
+ body.expiresAt = resolved.expiresAt;
+ }
+ // 'omit' (Keep current) → leave expiresAt off the body entirely.
+
+ if (Object.keys(body).length === 0) {
+ addToast('No changes to save', 'warning');
+ return;
+ }
+
+ setSubmitting(true);
+ try {
+ await api.invites.update(invite.id, body);
+ addToast('Invite updated', 'success', 2000);
+ onUpdated();
+ onClose();
+ } catch (err) {
+ addToast(`Failed to update invite: ${(err as Error).message}`, 'warning');
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ // Floor for the maxUses input — at least 1, but also at least usedCount so the
+ // browser native validation matches the server's constraint.
+ const maxUsesMin = Math.max(1, invite.usedCount);
+
+ return createPortal(
+
+
+
+
e.stopPropagation()}
+ >
+
+
+
('7d');
+ const [customDateTime, setCustomDateTime] = useState('');
+ const [submitting, setSubmitting] = useState(false);
+
+ // Escape closes (capture phase to avoid bubbling into parent settings modal)
+ useEffect(() => {
+ const handleKey = (e: KeyboardEvent) => {
+ if (e.key === 'Escape' && !submitting) {
+ e.stopPropagation();
+ onClose();
+ }
+ };
+ document.addEventListener('keydown', handleKey, true);
+ return () => document.removeEventListener('keydown', handleKey, true);
+ }, [onClose, submitting]);
+
+ const maxUsesMin = invite.usedCount + 1;
+
+ const handleReinstate = async () => {
+ // Validate maxUses when limited.
+ let newMax: number | null = null;
+ if (!unlimited) {
+ const parsed = Number(maxUses);
+ if (!Number.isInteger(parsed) || parsed < maxUsesMin) {
+ addToast(
+ `Max uses must be at least ${maxUsesMin} (current uses: ${invite.usedCount})`,
+ 'warning',
+ );
+ return;
+ }
+ newMax = parsed;
+ }
+
+ // Reinstate always sets a new expiry — no 'keep' option in this flow.
+ const resolved = resolveExpiryFromSelector(expiryId, customDateTime);
+ if (resolved.kind === 'invalid') {
+ addToast(resolved.message, 'warning');
+ return;
+ }
+ if (resolved.kind === 'omit') {
+ // Unreachable: ExpirySelector for Reinstate is rendered with showKeep={false}.
+ addToast('Invalid expiry selection', 'warning');
+ return;
+ }
+
+ const body: { maxUses?: number | null; expiresAt?: number | null } = {
+ maxUses: newMax,
+ expiresAt: resolved.expiresAt,
+ };
+
+ setSubmitting(true);
+ try {
+ const result = await api.invites.reinstate(invite.id, body);
+ if (result.tokenRotated) {
+ try {
+ await navigator.clipboard.writeText(result.invite.url);
+ addToast('Reinstated with new link. Copied to clipboard.', 'success', 2500);
+ } catch {
+ addToast('Reinstated with new link. Copy manually from the row.', 'success', 2500);
+ }
+ } else {
+ addToast('Reinstated. The same link is active again.', 'success', 2500);
+ }
+ onReinstated();
+ onClose();
+ } catch (err) {
+ addToast(`Failed to reinstate: ${(err as Error).message}`, 'warning');
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ return createPortal(
+
+
+
+
e.stopPropagation()}
+ >
+
+
+
(null);
+ const [error, setError] = useState(false);
+
+ // Escape closes (capture phase to avoid bubbling into parent settings modal)
+ useEffect(() => {
+ const handleKey = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ e.stopPropagation();
+ onClose();
+ }
+ };
+ document.addEventListener('keydown', handleKey, true);
+ return () => document.removeEventListener('keydown', handleKey, true);
+ }, [onClose]);
+
+ useEffect(() => {
+ let cancelled = false;
+ api.invites
+ .redemptions(invite.id)
+ .then((r) => {
+ if (!cancelled) setRedemptions(r.redemptions);
+ })
+ .catch(() => {
+ if (cancelled) return;
+ setError(true);
+ setRedemptions([]);
+ addToast('Failed to load redemptions', 'warning');
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [invite.id, addToast]);
+
+ return createPortal(
+
+
+
+
e.stopPropagation()}
+ >
+
+
+ Redemptions for "{invite.name}"
+
+
+ ×
+
+
+
+
+ {invite.status === 'revoked' && (
+
+ This invite was revoked
+ {invite.revokedAt
+ ? ` ${new Date(invite.revokedAt).toLocaleDateString()}`
+ : ''}
+ . The redemptions below represent users who registered before revocation.
+
+ )}
+
+
+ {invite.usedCount}
+ {invite.maxUses !== null ? ` of ${invite.maxUses}` : ''} use
+ {invite.usedCount === 1 ? '' : 's'}
+
+
+
+
+ {redemptions === null ? (
+
Loading…
+ ) : redemptions.length === 0 ? (
+
+ {error ? 'Could not load redemptions.' : 'No redemptions yet.'}
+
+ ) : (
+
+ {redemptions.map((r) => {
+ const showCurrent =
+ !r.isDeleted &&
+ r.currentUsername !== null &&
+ r.currentUsername !== r.registrantUsername;
+ return (
+
+
+ {r.registrantUsername}
+ {(r.isDeleted || showCurrent) && (
+
+ {' '}
+ (now {r.isDeleted ? 'Deleted User' : r.currentUsername})
+
+ )}
+
+
+ {new Date(r.redeemedAt).toLocaleString()}
+
+
+ );
+ })}
+
+ )}
+
+
+
(null);
+
+ // Dismiss kebab popover on outside click + Escape. Mirrors the pattern used in
+ // TransferOwnershipModal — listen on document, check containment via ref.
+ useEffect(() => {
+ if (!showKebab) return;
+ const handleMouseDown = (e: MouseEvent) => {
+ if (
+ kebabContainerRef.current &&
+ !kebabContainerRef.current.contains(e.target as Node)
+ ) {
+ setShowKebab(false);
+ }
+ };
+ const handleKey = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ // Stop propagation so the parent settings modal doesn't ALSO close.
+ e.stopPropagation();
+ setShowKebab(false);
+ }
+ };
+ document.addEventListener('mousedown', handleMouseDown);
+ document.addEventListener('keydown', handleKey, true);
+ return () => {
+ document.removeEventListener('mousedown', handleMouseDown);
+ document.removeEventListener('keydown', handleKey, true);
+ };
+ }, [showKebab]);
+
+ const usageLabel =
+ invite.maxUses === null
+ ? `${invite.usedCount} use${invite.usedCount === 1 ? '' : 's'} · unlimited`
+ : `${invite.usedCount} / ${invite.maxUses} uses`;
+
+ const usageNearLimit =
+ invite.maxUses !== null && invite.maxUses > 0 && invite.usedCount / invite.maxUses >= 0.8;
+
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(invite.url);
+ addToast('Invite link copied', 'success', 2000);
+ } catch {
+ addToast('Failed to copy link', 'warning');
+ }
+ };
+
+ const performRevoke = async () => {
+ setActionLoading(true);
+ try {
+ await api.invites.revoke(invite.id);
+ addToast('Invite revoked', 'success', 2000);
+ setConfirmRevoke(false);
+ onMutate();
+ } catch (err) {
+ addToast(`Failed to revoke: ${(err as Error).message}`, 'warning');
+ } finally {
+ setActionLoading(false);
+ }
+ };
+
+ const performDelete = async () => {
+ setActionLoading(true);
+ try {
+ await api.invites.delete(invite.id);
+ addToast('Invite deleted', 'success', 2000);
+ setConfirmDelete(false);
+ onMutate();
+ } catch (err) {
+ addToast(`Failed to delete: ${(err as Error).message}`, 'warning');
+ } finally {
+ setActionLoading(false);
+ }
+ };
+
+ const statusPillClass =
+ invite.status === 'expired'
+ ? 'bg-rose-500/20 text-rose-400'
+ : invite.status === 'exhausted'
+ ? 'bg-amber-500/20 text-amber-400'
+ : 'bg-white/10 text-txt-tertiary';
+
+ return (
+ <>
+
+
+
+
+ {invite.name}
+
+
+ · {usageLabel}
+
+ {invite.status !== 'active' && (
+
+ {invite.status}
+
+ )}
+
+
+ {formatExpiry(invite)} · Created by {invite.createdByUsername ?? 'Unknown'} ·{' '}
+ {formatRelative(invite.createdAt)}
+
+
+
+
+ {invite.status === 'active' ? (
+ <>
+
+ Copy link
+
+
setShowEdit(true)}
+ className="px-2 py-1 text-xs text-txt-secondary hover:text-txt-primary bg-white/[0.04] hover:bg-white/[0.08] rounded transition-colors"
+ >
+ Edit
+
+
setConfirmRevoke(true)}
+ className="px-2 py-1 text-xs text-txt-secondary hover:text-txt-primary bg-white/[0.04] hover:bg-white/[0.08] rounded transition-colors"
+ >
+ Revoke
+
+
+ ) : (
+
setShowReinstate(true)}
+ className="px-2 py-1 text-xs text-txt-secondary hover:text-txt-primary bg-white/[0.04] hover:bg-white/[0.08] rounded transition-colors"
+ >
+ Reinstate
+
+ )}
+
setShowKebab((v) => !v)}
+ className="px-2 py-1 text-xs text-txt-secondary hover:text-txt-primary bg-white/[0.04] hover:bg-white/[0.08] rounded transition-colors"
+ >
+ ⋯
+
+ {showKebab && (
+
+ {
+ setShowKebab(false);
+ setShowRedemptions(true);
+ }}
+ className="w-full text-left px-3 py-1.5 text-xs text-txt-secondary hover:text-txt-primary hover:bg-white/[0.04] transition-colors"
+ >
+ View redemptions
+
+ {
+ setShowKebab(false);
+ setConfirmDelete(true);
+ }}
+ className="w-full text-left px-3 py-1.5 text-xs text-accent-rose hover:bg-accent-rose/10 transition-colors"
+ >
+ Delete permanently
+
+
+ )}
+
+
setShowEdit(false)}
+ onUpdated={onMutate}
+ />
+ )}
+ {showReinstate && (
+ setShowReinstate(false)}
+ onReinstated={onMutate}
+ />
+ )}
+ {showRedemptions && (
+ setShowRedemptions(false)} />
+ )}
+
+ setConfirmRevoke(false)}
+ onConfirm={performRevoke}
+ title={`Revoke "${invite.name}"?`}
+ description={
+ <>
+ The link will stop working immediately. Anyone who has the URL will not be able
+ to use it. You can reinstate the invite later — that will generate a new link
+ with a different URL.
+
+ }
+ confirmLabel="Revoke link"
+ variant="danger"
+ loading={actionLoading}
+ />
+
+ setConfirmDelete(false)}
+ onConfirm={performDelete}
+ title={`Delete "${invite.name}" permanently?`}
+ description={
+ <>
+ This cannot be undone. Redemption history for this link will also be removed.
+ If you only want to stop the link from working, use Revoke {' '}
+ instead — that preserves the redemption record.
+
+ }
+ confirmLabel="Delete permanently"
+ variant="danger"
+ loading={actionLoading}
+ />
+
+ );
+}
+
export function RegistrationPanel() {
const instanceSettings = useSettingsStore((s) => s.instanceSettings);
const updateInstanceSettings = useSettingsStore((s) => s.updateInstanceSettings);