Feature/saajan persona (#3)

* feat: add template based email content (html + plaintext fallback)

* feat: init saajan component

* feat: add aesthetic noise background and implement Saajan component in register and login

* feat: add post seal modal for vault

* refactor: add proper props interfaces

* refactor: expose props on ui components

* feat: add ssajan in lots of flows

* fix: remove render test with no value and add aria helper for btn identification

* refactor: update email notification to account for proper arguments

* refactor:  refactor E2E auth helper and mail parsing logic

---------

Co-authored-by: ramvignesh-b <ramvignesh-b@github.com>

frontend/src/components/reader/BurnModal.tsx

@@ -1,12 +1,19 @@
 import { CampfireIcon, FlameIcon, XCircleIcon } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
 
+interface BurnModalProps {
+  burnLetter: () => void;
+  isBurning: boolean;
+  setShowBurnModal: (show: boolean) => void;
+  setRevealState: (state: "sealed" | "revealed" | "burning" | "burned") => void;
+}
+
 export function BurnModal({
   burnLetter,
   isBurning,
   setShowBurnModal,
   setRevealState,
-}) {
+}: BurnModalProps) {
   const [flameOn, setFlameOn] = useState(0);
   const [rotate, setRotate] = useState(0);
   const [burnClicked, setBurnClicked] = useState(false);

frontend/src/components/reader/EnvelopeReveal.tsx

@@ -9,6 +9,7 @@ export interface EnvelopeRevealProps {
   onRevealComplete: () => void;
   ignite: boolean;
   isFlip?: boolean;
+  isInteractive?: boolean;
 }
 
 export function EnvelopeReveal({
@@ -17,6 +18,7 @@ export function EnvelopeReveal({
   onRevealComplete,
   ignite,
   isFlip,
+  isInteractive = true,
 }: EnvelopeRevealProps) {
   const [revealLetter, setRevealLetter] = useState(false);
   const [isFlipped, setIsFlipped] = useState(!!isFlip);
@@ -67,6 +69,7 @@ export function EnvelopeReveal({
               type="checkbox"
               className="transition checkbox absolute h-full w-full text-transparent bg-transparent z-100"
               ref={flapCheckbox}
+              disabled={!isInteractive}
             />
           </div>
           <img
@@ -103,6 +106,7 @@ export function EnvelopeReveal({
         <button
           id="env-front"
           type="button"
+          disabled={!isInteractive}
           className={`text-left p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2 ${isFlipped ? "pointer-events-none" : ""}`}
           onClick={() => setIsFlipped((prev) => !prev)}
         >

frontend/src/components/reader/PostActionOverlay.tsx

@@ -1,7 +1,11 @@
 import { useNavigate } from "react-router-dom";
 import { ROUTES } from "../../config/routes";
 
-export function PostActionOverlay({ revealState }) {
+interface PostActionOverlayProps {
+  revealState: "sealed" | "revealed" | "burning" | "burned";
+}
+
+export function PostActionOverlay({ revealState }: PostActionOverlayProps) {
   const navigate = useNavigate();
   return (
     <div

frontend/src/components/reader/ShareModal.tsx

@@ -4,7 +4,12 @@ import {
   XCircleIcon,
 } from "@phosphor-icons/react";
 
-export function ShareModal({ shareLink, setShareLink }) {
+interface ShareModalProps {
+  shareLink: string | null;
+  setShareLink: (link: string | null) => void;
+}
+
+export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
   const copyToClipboard = async () => {
     if (!shareLink) return;
     await navigator.clipboard.writeText(shareLink);