94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
type ResetLinkModalProps = {
|
|
variant?: "invite" | "reset";
|
|
email: string;
|
|
resetLink: string;
|
|
expiresAt: string;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export default function ResetLinkModal({
|
|
variant = "reset",
|
|
email,
|
|
resetLink,
|
|
expiresAt,
|
|
onClose
|
|
}: ResetLinkModalProps) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleKey = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") {
|
|
onClose();
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handleKey);
|
|
return () => window.removeEventListener("keydown", handleKey);
|
|
}, [onClose]);
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(resetLink);
|
|
setCopied(true);
|
|
window.setTimeout(() => setCopied(false), 2000);
|
|
} catch {
|
|
// Fallback: select the field so the user can copy manually.
|
|
setCopied(false);
|
|
}
|
|
};
|
|
|
|
const isInvite = variant === "invite";
|
|
|
|
return (
|
|
<div className="modal-backdrop" role="presentation" onClick={onClose}>
|
|
<div
|
|
className="modal-card"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="reset-link-title"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<div className="modal-header">
|
|
<div>
|
|
<h2 id="reset-link-title">{isInvite ? "Mailbox setup link" : "Temporary reset link"}</h2>
|
|
<p>
|
|
{isInvite
|
|
? <>Share this one-time setup link for <strong>{email}</strong>. The mailbox will only be created after the user chooses a password.</>
|
|
: <>No email was sent for <strong>{email}</strong>. Share this one-time link yourself.</>}
|
|
</p>
|
|
</div>
|
|
<button type="button" className="modal-close" onClick={onClose} aria-label="Close">
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<div className="stack">
|
|
<div className="link-field">
|
|
<label className="field">
|
|
<span>{isInvite ? "Setup link" : "One-time link"}</span>
|
|
<div className="link-row">
|
|
<input type="text" readOnly value={resetLink} onFocus={(e) => e.target.select()} />
|
|
<button type="button" className="ghost-button" onClick={handleCopy}>
|
|
{copied ? "Copied ✓" : "Copy"}
|
|
</button>
|
|
</div>
|
|
</label>
|
|
<span className="copy-feedback" aria-live="polite">{copied ? "Link copied to clipboard." : ""}</span>
|
|
</div>
|
|
|
|
<p className="modal-copy">
|
|
This link expires at {expiresAt} and becomes invalid after first use.
|
|
</p>
|
|
|
|
<div className="modal-actions">
|
|
<button type="button" className="primary-button" onClick={onClose}>
|
|
Done
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|