mirror of
https://github.com/ramvignesh-b/pi-ku.git
synced 2026-05-04 08:56:52 +00:00
ramvignesh-b
526 lines
18 KiB
TypeScript
526 lines
18 KiB
TypeScript
import {
|
|
CampfireIcon,
|
|
EyeSlashIcon,
|
|
FlameIcon,
|
|
PaperPlaneTiltIcon,
|
|
XCircleIcon,
|
|
} from "@phosphor-icons/react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import {
|
|
type NavigateFunction,
|
|
useLocation,
|
|
useNavigate,
|
|
useParams,
|
|
} from "react-router-dom";
|
|
import { api } from "../api/apiClient";
|
|
import {
|
|
type CanvasJSON,
|
|
type CanvasTools,
|
|
ComposeCanvas,
|
|
} from "../components/editor/ComposeCanvas";
|
|
import Logo from "../components/Logo";
|
|
import { EnvelopeReveal } from "../components/reader/EnvelopeReveal";
|
|
import { LogModal } from "../components/ui/LogModal";
|
|
import { endpoints } from "../config/endpoints";
|
|
import { PATHS, ROUTES } from "../config/routes";
|
|
import { useKeyStore } from "../store/useKeyStore";
|
|
import { CryptoUtils } from "../utils/crypto";
|
|
import { formatDate } from "../utils/dateFormat";
|
|
import {
|
|
decryptCanvasImages,
|
|
decryptCanvasImagesWithSharingKey,
|
|
} from "../utils/letterLogic";
|
|
|
|
interface LetterMetadata {
|
|
recipient?: string;
|
|
updated_at?: string;
|
|
}
|
|
|
|
export default function Reader() {
|
|
const { public_id } = useParams();
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const sharingKey = location.hash.replace("#", "");
|
|
|
|
const navigateRef = useRef<NavigateFunction>(navigate);
|
|
const canvasRef = useRef<CanvasTools>(null);
|
|
|
|
const [isDecrypting, setIsDecrypting] = useState(true);
|
|
const [revealState, setRevealState] = useState<
|
|
"sealed" | "revealed" | "burned"
|
|
>("sealed");
|
|
const [error, setError] = useState<{
|
|
message: string;
|
|
log: string;
|
|
} | null>(null);
|
|
const [warning, setWarning] = useState<{
|
|
message: string;
|
|
log: string;
|
|
} | null>(null);
|
|
const [metadata, setMetadata] = useState<LetterMetadata | null>(null);
|
|
const [decryptedCanvasData, setDecryptedCanvasData] =
|
|
useState<CanvasJSON | null>(null);
|
|
const [showBurnModal, setShowBurnModal] = useState(false);
|
|
const [isBurning, setIsBurning] = useState(false);
|
|
const [ignite, setIgnite] = useState(false);
|
|
const [encryptedDek, setEncryptedDek] = useState<string | null>(null);
|
|
const [shareLink, setShareLink] = useState<string | null>(null);
|
|
|
|
const { masterKey } = useKeyStore();
|
|
|
|
const isAuthor = !!masterKey && !sharingKey;
|
|
|
|
const handleShare = async () => {
|
|
if (!(encryptedDek && masterKey && public_id)) return;
|
|
const cryptoUtils = new CryptoUtils();
|
|
const key = await cryptoUtils.extractSharingKey(encryptedDek, masterKey);
|
|
try {
|
|
await api.patch(`${endpoints.LETTERS}${public_id}/`, { type: "SENT" });
|
|
} catch (_err) {
|
|
} finally {
|
|
setShareLink(`${window.location.origin}${PATHS.read(public_id)}#${key}`);
|
|
}
|
|
};
|
|
|
|
const copyToClipboard = async () => {
|
|
if (!shareLink) return;
|
|
await navigator.clipboard.writeText(shareLink);
|
|
};
|
|
|
|
function ShareModal() {
|
|
return (
|
|
<div className="modal modal-open modal-middle bg-base-100/20 backdrop-blur-md z-100">
|
|
<div className="modal-box bg-base-100 border border-base-content/5 shadow-2xl relative">
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
|
onClick={() => setShareLink(null)}
|
|
aria-label="Close"
|
|
>
|
|
<XCircleIcon size={18} weight="bold" />
|
|
</button>
|
|
<div className="flex flex-col items-center justify-center text-center gap-6 py-4">
|
|
<div className="space-y-2">
|
|
<PaperPlaneTiltIcon
|
|
size={48}
|
|
weight="bold"
|
|
className="mb-4 text-primary mx-auto animate-[bounce_3s_ease-in-out_infinite]"
|
|
/>
|
|
<h3 className="font-serif text-3xl">Send this letter</h3>
|
|
<p className="text-base-content/80 text-sm font-sans mt-4">
|
|
You've carried these words long enough. Send your letter now,
|
|
and let the{" "}
|
|
<span className="text-accent font-display">unsaid</span> finally
|
|
find its home.
|
|
</p>
|
|
<div className="divider mx-auto" />
|
|
<blockquote className="text-sm info text-neutral-content/60 font-sans">
|
|
The recipient will have the same viewing experience like you do
|
|
now.
|
|
</blockquote>
|
|
</div>
|
|
<div className="w-full flex items-center gap-2 bg-base-300 p-2 rounded-xl">
|
|
<input
|
|
id="share-link-input"
|
|
readOnly
|
|
value={shareLink ?? ""}
|
|
className="flex-1 bg-transparent text-xs font-mono px-2 overflow-hidden text-ellipsis whitespace-nowrap outline-none"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={copyToClipboard}
|
|
className="btn btn-primary font-sans btn-sm rounded-tl-xl rounded-bl-xl rounded-tr-full rounded-br-full"
|
|
>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col gap-1 uppercase tracking-widest text-base-content/30 font-sans">
|
|
<p className="textarea-xs flex items-center justify-center">
|
|
<EyeSlashIcon weight="duotone" size={18} className="mr-2" />{" "}
|
|
Zero-Knowledge Share:
|
|
</p>
|
|
<p className="textarea-xs font-mono text-center">
|
|
The key never leaves your or the recipient's browser.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const burnLetter = async () => {
|
|
if (!public_id || isBurning) return;
|
|
setIsBurning(true);
|
|
try {
|
|
await api.patch(`${endpoints.LETTERS}${public_id}/`, {
|
|
status: "BURNED",
|
|
});
|
|
} catch (_err) {
|
|
} finally {
|
|
setIsBurning(false);
|
|
setShowBurnModal(false);
|
|
setIgnite(true);
|
|
setTimeout(() => {
|
|
setRevealState("burned");
|
|
}, 13000);
|
|
}
|
|
};
|
|
|
|
function BurnModal() {
|
|
const [flameOn, setFlameOn] = useState(0);
|
|
const [rotate, setRotate] = useState(0);
|
|
const [burnClicked, setBurnClicked] = useState(false);
|
|
useEffect(() => {
|
|
if (!burnClicked) return;
|
|
if (flameOn === 100) {
|
|
setRevealState("sealed");
|
|
burnLetter();
|
|
}
|
|
const interval = setInterval(() => {
|
|
setFlameOn((prev) => prev + 1);
|
|
setRotate(Math.random() * 4 - 2);
|
|
}, 100);
|
|
return () => clearInterval(interval);
|
|
}, [burnClicked, flameOn]);
|
|
|
|
const burnStyle = flameOn < 30 ? "" : `contrast(${flameOn / 30})`;
|
|
|
|
return (
|
|
<div className="modal modal-open modal-middle bg-base-100/20 backdrop-blur-md">
|
|
<div
|
|
className={`modal-box flex flex-col items-center gap-4 py-8 text-center transition-all duration-200 ease-in-out ${burnClicked ? "animate-[pulse_15s_linear_infinite]" : ""}`}
|
|
style={
|
|
{
|
|
transform: `rotate(${rotate}deg)`,
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
|
onClick={() => setShowBurnModal(false)}
|
|
aria-label="Close"
|
|
>
|
|
<XCircleIcon size={18} weight="bold" />
|
|
</button>
|
|
<CampfireIcon
|
|
size={48}
|
|
weight="duotone"
|
|
className="text-error animate-pulse"
|
|
/>
|
|
<h3 className="font-serif text-2xl">
|
|
Are you ready to burn this letter?
|
|
</h3>
|
|
<p className="text-sm font-sans text-base-content/80 mt-4">
|
|
Some words are meant to be unsaid, but they don't have to linger
|
|
forever.
|
|
<br />
|
|
Let the echoes of your unsaid be finally released.
|
|
</p>
|
|
<div className="mt-4 font-sans text-sm">
|
|
<span className="text-error">Press</span> and{" "}
|
|
<span className="text-error">hold</span> the{" "}
|
|
<span className="text-amber-300">flame</span> to proceed.
|
|
</div>
|
|
<div className="modal-action w-full justify-center gap-3 mt-2">
|
|
<div
|
|
className="absolute -mt-2 w-28 h-28 radial-progress pointer-events-none text-amber-200/60"
|
|
style={
|
|
{ "--value": flameOn, filter: burnStyle } as React.CSSProperties
|
|
}
|
|
role="progressbar"
|
|
></div>
|
|
<button
|
|
type="button"
|
|
className={`btn btn-error btn-dashed btn-circle w-24 h-24`}
|
|
style={
|
|
{
|
|
filter: burnStyle,
|
|
cursor: burnClicked ? "grabbing" : "grab",
|
|
} as React.CSSProperties
|
|
}
|
|
// onClick={handleBurn}
|
|
onMouseDown={() => setBurnClicked(true)}
|
|
onMouseUp={() => {
|
|
setFlameOn(0);
|
|
setBurnClicked(false);
|
|
}}
|
|
disabled={isBurning}
|
|
>
|
|
{isBurning ? (
|
|
<span className="loading loading-spinner loading-xs" />
|
|
) : (
|
|
<FlameIcon size={54} weight="duotone" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!(sharingKey || masterKey)) {
|
|
navigateRef.current("/login", {
|
|
state: { redirectUrl: `/read/${public_id}` },
|
|
});
|
|
return;
|
|
}
|
|
|
|
const loadAndDecrypt = async () => {
|
|
try {
|
|
const response = await api.get(`${endpoints.LETTERS}${public_id}/`);
|
|
const {
|
|
encrypted_content,
|
|
encrypted_metadata,
|
|
encrypted_dek,
|
|
images,
|
|
updated_at,
|
|
status,
|
|
} = response.data;
|
|
|
|
if (status === "BURNED")
|
|
throw new Error("This letter has been burned.");
|
|
|
|
if (encrypted_dek) setEncryptedDek(encrypted_dek);
|
|
|
|
const cryptoUtils = new CryptoUtils();
|
|
const isShared = !!sharingKey;
|
|
|
|
if (isShared && !encrypted_content) throw new Error("Content missing");
|
|
const isDecryptionKeyAvailable = encrypted_dek && masterKey;
|
|
if (!(isShared || isDecryptionKeyAvailable))
|
|
throw new Error("Auth required: Decryption key is not available");
|
|
|
|
// Decrypt Metadata
|
|
const decryptedMetadata = isShared
|
|
? await cryptoUtils.decryptMetadataWithSharingKey(
|
|
encrypted_metadata,
|
|
sharingKey,
|
|
)
|
|
: await cryptoUtils.decryptMetadata(
|
|
{ encrypted_content: encrypted_metadata, encrypted_dek },
|
|
// biome-ignore lint/style/noNonNullAssertion: masterKey is guaranteed to be non-null here as isDecryptionKeyAvailable is true
|
|
masterKey!,
|
|
);
|
|
setMetadata({
|
|
...(decryptedMetadata as LetterMetadata),
|
|
updated_at,
|
|
});
|
|
|
|
// Decrypt Content
|
|
const decryptedContent = isShared
|
|
? await cryptoUtils.decryptLetterWithSharingKey(
|
|
encrypted_content,
|
|
sharingKey,
|
|
)
|
|
: await cryptoUtils.decryptLetter(
|
|
{ encrypted_content, encrypted_dek },
|
|
// biome-ignore lint/style/noNonNullAssertion: masterKey is guaranteed to be non-null here as isDecryptionKeyAvailable is true
|
|
masterKey!,
|
|
);
|
|
|
|
const canvasData: CanvasJSON = JSON.parse(decryptedContent);
|
|
|
|
try {
|
|
// Decrypt Images
|
|
if (images?.length > 0) {
|
|
isShared
|
|
? await decryptCanvasImagesWithSharingKey(
|
|
canvasData,
|
|
images,
|
|
sharingKey,
|
|
cryptoUtils,
|
|
)
|
|
: await decryptCanvasImages(
|
|
canvasData,
|
|
images,
|
|
encrypted_dek,
|
|
// biome-ignore lint/style/noNonNullAssertion: masterKey is guaranteed to be non-null here as isDecryptionKeyAvailable is true
|
|
masterKey!,
|
|
cryptoUtils,
|
|
);
|
|
}
|
|
} catch (err) {
|
|
setWarning({
|
|
message:
|
|
"Failed to decrypt elements. Images might not render in the letter as intended.",
|
|
log: err instanceof Error ? err.message : "Unknown error",
|
|
});
|
|
}
|
|
setDecryptedCanvasData(canvasData);
|
|
} catch (err) {
|
|
setError({
|
|
message: `Failed to load letter :(`,
|
|
log: err instanceof Error ? err.message : "Unknown error",
|
|
});
|
|
} finally {
|
|
setIsDecrypting(false);
|
|
}
|
|
};
|
|
|
|
loadAndDecrypt();
|
|
}, [public_id, sharingKey, masterKey]);
|
|
|
|
useEffect(() => {
|
|
if (
|
|
!isDecrypting &&
|
|
revealState === "revealed" &&
|
|
decryptedCanvasData &&
|
|
canvasRef.current
|
|
) {
|
|
canvasRef.current.loadData(decryptedCanvasData);
|
|
}
|
|
}, [isDecrypting, revealState, decryptedCanvasData]);
|
|
|
|
if (isDecrypting) {
|
|
return (
|
|
<div className="flex items-center justify-center bg-base-100 font-serif">
|
|
<div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.4)_100%)] pointer-events-none z-0" />
|
|
<div className="text-center space-y-6 z-10">
|
|
<Logo />
|
|
<div className="flex flex-col items-center gap-2">
|
|
<span className="loading loading-ring loading-md text-primary/40"></span>
|
|
<p className="text-[10px] uppercase tracking-[0.4em] text-base-content/20 animate-pulse">
|
|
Breaking the seal...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<LogModal
|
|
isOpen={!!error}
|
|
onClose={() => (window.location.href = "/")}
|
|
message={error.message}
|
|
log={error.log}
|
|
status="ERROR"
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="min-h-fit w-full bg-base-100 px-4 py-8 md:py-16 font-serif relative overflow-hidden">
|
|
<div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.5)_100%)] pointer-events-none z-0" />
|
|
<div
|
|
className={`transition-all duration-1000 relative ${
|
|
revealState === "revealed"
|
|
? "opacity-0 w-0 h-0 overflow-hidden invisible"
|
|
: "opacity-100"
|
|
}`}
|
|
>
|
|
{revealState === "sealed" && (
|
|
<EnvelopeReveal
|
|
recipient={metadata?.recipient || "Someone dear"}
|
|
date={
|
|
metadata?.updated_at
|
|
? formatDate(new Date(metadata.updated_at))
|
|
: undefined
|
|
}
|
|
onRevealComplete={() => setRevealState("revealed")}
|
|
ignite={ignite}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{ignite && (
|
|
<div
|
|
className={`flex flex-col items-center justify-center min-h-screen bg-base-100 ${revealState === "burned" ? "opacity-100" : "opacity-0"} transition-all delay-300 duration-1000`}
|
|
>
|
|
<h1
|
|
className={`text-6xl ${revealState === "burned" ? "opacity-100" : "opacity-0"} lg:text-9xl italic font-extralight text-base-content animate-[pulse_3s_ease-in-out_3]`}
|
|
>
|
|
It is done
|
|
</h1>
|
|
<div
|
|
className={`text-xl ${revealState === "burned" ? "opacity-100" : "opacity-0"} lg:text-4xl text-center font-extralight text-base-content font-display mt-8 delay-3000 transition-all duration-2000 tracking-wide`}
|
|
>
|
|
<p className="w-full">
|
|
May your <span className="italic text-primary">soul</span> find
|
|
solace,
|
|
<br />
|
|
just like your <span className="text-accent italic">unsaid</span>{" "}
|
|
words did.
|
|
</p>
|
|
<div className="divider mx-auto w-24 text-center"></div>
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost text-sm text-neutral-content/60 font-sans"
|
|
onClick={() => navigate(ROUTES.DRAWER)}
|
|
>
|
|
Turn the page
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<LogModal
|
|
isOpen={!!warning}
|
|
onClose={() => setWarning(null)}
|
|
message={warning?.message || ""}
|
|
log={warning?.log || ""}
|
|
status="WARN"
|
|
/>
|
|
|
|
{revealState === "revealed" && (
|
|
<div className="max-w-4xl m-8 mx-auto space-y-8 relative inset-0 z-100">
|
|
<div className="relative group perspective-1000">
|
|
<div className="absolute inset-0 bg-primary/5 blur-3xl rounded-full scale-75 opacity-0 group-hover:opacity-100 transition-opacity duration-1000 pointer-events-none" />
|
|
|
|
<div className="bg-paper shadow-warm rounded-sm overflow-hidden animate-[opacity_1s_ease-in-out_1]">
|
|
<div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
|
|
<ComposeCanvas ref={canvasRef} readOnly />
|
|
</div>
|
|
|
|
{metadata?.recipient && (
|
|
<p className="text-center sm:hidden text-[10px] uppercase tracking-[0.3em] text-base-content/20 mt-8">
|
|
For {metadata.recipient}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{shareLink && <ShareModal />}
|
|
{showBurnModal && <BurnModal />}
|
|
|
|
{isAuthor && revealState !== "burned" && (
|
|
<div className="flex justify-center gap-2 mt-8 z-10 relative">
|
|
<button
|
|
id="share-letter-btn"
|
|
type="button"
|
|
className="btn btn-ghost btn-sm text-base-content/30 hover:text-base-content hover:bg-base-content/10 gap-1.5"
|
|
onClick={handleShare}
|
|
>
|
|
<PaperPlaneTiltIcon size={16} weight="duotone" />
|
|
<span className="text-md uppercase font-sans tracking-widest">
|
|
Send to someone...
|
|
</span>
|
|
</button>
|
|
<button
|
|
id="burn-letter-btn"
|
|
type="button"
|
|
className="btn btn-ghost btn-sm text-error/40 hover:text-error hover:bg-error/10 gap-1.5"
|
|
onClick={() => setShowBurnModal(true)}
|
|
>
|
|
<FlameIcon size={16} weight="duotone" />
|
|
<span className="text-md uppercase font-sans tracking-widest">
|
|
Burn the letter
|
|
</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<footer className="mt-16 text-center z-10 opacity-10 pointer-events-none">
|
|
<p className="text-xs font-sans uppercase tracking-[0.5em]">
|
|
Read. Remember. Release.
|
|
</p>
|
|
</footer>
|
|
</section>
|
|
);
|
|
}
|