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>
2026-04-28 20:51:23 +05:30
parent 8a9ded42b5
commit 6cf24731ce
36 changed files with 650 additions and 227 deletions
@@ -16,8 +16,6 @@ export default function Activate() {

  useEffect(() => {
    if (!(uidb64 && token) || hasCalled.current) return;
-
-    // prevent double api calls
    hasCalled.current = true;

    const activateAccount = async () => {
@@ -46,7 +44,7 @@ export default function Activate() {
      )}

      {status === "success" && (
-        <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
+        <div className="flex flex-col items-center gap-6 duration-500">
          <div className="bg-success/10 p-4 rounded-full">
            <CheckCircleIcon
              size={64}
@@ -57,13 +55,12 @@ export default function Activate() {
          <h2 className="font-display text-xl text-success">
            Account Activated!
          </h2>
-          <p className="opacity-70 mb-8 leading-relaxed">
-            Welcome to <Logo />
+          <p className="opacity-70 leading-relaxed">
+            Welcome to <Logo scale={1} />
            <br />
            Your identity is now verified and ready for timeless letters.
          </p>
-          <div className="divider opacity-10"></div>
-
+          <div className="divider opacity-10 my-0"></div>
          <button
            type="button"
            className="btn btn-primary w-full shadow-lg"
@@ -85,16 +82,17 @@ export default function Activate() {
            <XCircleIcon size={64} weight="duotone" className="text-error" />
          </div>
          <h2 className="font-display text-xl text-error">Activation Failed</h2>
-          <p className="opacity-70 mb-8 leading-relaxed">
+          <p className="opacity-70 leading-relaxed">
            The link might be expired or already used. Please try registering
            again.
          </p>
+          <div className="divider opacity-10 my-0"></div>
          <button
            type="button"
            className="btn btn-ghost w-full"
            onClick={() => navigate(ROUTES.ONBOARD)}
          >
-            Back to Registration
+            Register Again
          </button>
        </div>
      )}
@@ -5,6 +5,7 @@ import { DrawerSection } from "../components/drawer/DrawerSection.tsx";
 import { LetterItem } from "../components/drawer/LetterItem.tsx";
 import { PasskeyModal } from "../components/drawer/PasskeyModal.tsx";
 import Logo from "../components/Logo";
+import Saajan from "../components/ui/Saajan.tsx";
 import { PATHS } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
 import { useLetters } from "../hooks/useLetters";
@@ -165,6 +166,12 @@ export default function Drawer() {
      <footer className="mt-25 font-sans text-[0.6rem] tracking-[0.2em] uppercase text-base-content/10 z-10">
        For your unsaid.
      </footer>
+      <div className="absolute bottom-0 z-50 font-sans">
+        <Saajan
+          message={`Good to see you again, ${user.full_name}.\nWhat's on your mind today?`}
+          position="top"
+        />
+      </div>
    </div>
  );
 }
@@ -83,11 +83,9 @@ describe("Editor Page", () => {
      expect(screen.queryByText(/Opening your draft/i)).not.toBeInTheDocument();
    });

-    // Initial state: DRAFT (not read-only)
    const canvas = screen.getByTestId("canvas");
    expect(canvas.getAttribute("data-readonly")).toBe("false");

-    // Click Seal in the main toolbar (it's in the div with id="writer-toolbar")
    const toolbar = container.querySelector("#writer-toolbar");
    const sealBtn = toolbar?.querySelector(".btn-primary");
    if (!sealBtn) throw new Error("Seal button not found");
@@ -293,7 +293,7 @@ export default function Editor() {
      setLetterStatus(status);
      setLastSavedPulseTick((prev) => prev + 1);

-      if (status === "SEALED") {
+      if (status === "SEALED" || status === "VAULT") {
        setSealedTargetId(targetId);
      }
      setSaveOverlay("saved");
@@ -419,7 +419,11 @@ export default function Editor() {
          />
        )}
        {sealedTargetId && (
-          <PostSealModal sealedTargetId={sealedTargetId} navigate={navigate} />
+          <PostSealModal
+            sealedTargetId={sealedTargetId}
+            navigate={navigate}
+            type={status === "VAULT" ? "VAULT" : "KEPT"}
+          />
        )}

        <div className="max-w-180 mx-auto px-1 md:px-0">
@@ -14,16 +14,6 @@ describe("Login Page", () => {
    server.resetHandlers();
  });

-  it("should render the sign-in form correctly", () => {
-    render(
-      <MemoryRouter>
-        <Login />
-      </MemoryRouter>,
-    );
-
-    expect(screen.getByText("Sign in to")).toBeInTheDocument();
-  });
-
  it("should display a technical issues message when the server is down", async () => {
    server.use(
      http.post(`${API_URL}${endpoints.LOGIN}`, () =>
@@ -1,5 +1,9 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ShieldCheckIcon, WarningIcon } from "@phosphor-icons/react";
+import {
+  HandPalmIcon,
+  ShieldCheckIcon,
+  WarningIcon,
+} from "@phosphor-icons/react";
 import axios from "axios";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -8,6 +12,7 @@ import { z } from "zod";
 import { api, publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
 import FormField from "../components/ui/FormField";
+import Saajan from "../components/ui/Saajan";
 import { endpoints } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
@@ -20,10 +25,19 @@ const loginSchema = z.object({

 type LoginInputs = z.infer<typeof loginSchema>;

-function WelcomeModal({ setShowWelcome }) {
+function WelcomeModal({
+  setShowWelcome,
+}: {
+  setShowWelcome: (show: boolean) => void;
+}) {
  return (
    <div className="modal modal-open backdrop-blur-sm transition-all duration-1000">
-      <div className="modal-box border border-primary/20 shadow-2xl p-8">
+      <div className="absolute bottom-1">
+        <Saajan
+          message={"I've lost words before.\nI know what it feels like."}
+        />
+      </div>
+      <div className="modal-box border bg-base-100/20 border-primary/20 shadow-2xl p-8">
        <div className="flex flex-col items-center text-center gap-4">
          <div className="bg-primary/10 p-4 rounded-full animate-pulse">
            <ShieldCheckIcon
@@ -33,19 +47,22 @@ function WelcomeModal({ setShowWelcome }) {
            />
          </div>
          <h3 className="font-display text-2xl font-bold text-primary">
-            Welcome to <Logo />!
+            Welcome to &nbsp;
+            <Logo /> &nbsp;!
          </h3>
          <p className="text-base-content/80 leading-relaxed">
-            To ensure <span className="font-bold">complete privacy</span>, all
-            your letters are{" "}
-            <span className="font-bold underline">
-              sealed with your password
-            </span>
-            , which only you have access to.
+            Before we begin, let me make a small promise.
+            <HandPalmIcon
+              size={18}
+              className="inline text-primary"
+              weight="fill"
+            />
+            <div className="divider my-0"></div>
            <br />
-            <span className="font-bold">
-              The server never sees it, and it's a solemn promise!
-            </span>
+            Everything you write here is sealed with your password,{" "}
+            <span className="font-display text-success">cryptographically</span>
+            , before it leaves your hands.
+            <br />A fancy way of saying, I couldn't if I tried.
          </p>

          <div className="alert alert-warning bg-paper/20 border-paper/20 flex items-start gap-3 text-left py-3">
@@ -53,6 +70,19 @@ function WelcomeModal({ setShowWelcome }) {
            <p className="text-sm font-medium text-primary-content">
              If you ever happen to forget your password, your letters are lost
              to time, forever.
+              <br />
+              <span className="font-bold mt-2">
+                I highly, highly recommend storing this password in your{" "}
+                <a
+                  href="https://www.privacyguides.org/en/passwords/"
+                  target="_blank"
+                  className="link link-primary-content"
+                  rel="noopener"
+                >
+                  password manager
+                </a>{" "}
+                or somewhere safe to remember it.
+              </span>
            </p>
          </div>

@@ -62,7 +92,7 @@ function WelcomeModal({ setShowWelcome }) {
              onClick={() => setShowWelcome(false)}
              className="btn btn-primary w-full shadow-lg"
            >
-              I understand
+              I'll remember
            </button>
          </div>
        </div>
@@ -78,6 +108,9 @@ export default function Login() {
  const [apiError, setApiError] = useState<string | null>(null);
  const { setAuthStore } = useAuth();
  const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
+  const [saajanMessage, setSaajanMessage] = useState<string>(
+    "I was wondering when you'd return.",
+  );
  const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER;

  const {
@@ -125,12 +158,13 @@ export default function Login() {
  };

  return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col items-center">
+      {!showWelcome && <Saajan message={saajanMessage} position="top" />}
      {showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
      <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
        <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
          <h1 className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight">
-            Sign in to <Logo />
+            Enter <Logo /> Archive
          </h1>

          {apiError && (
@@ -142,9 +176,10 @@ export default function Login() {
          <FormField
            label="Email"
            type="email"
-            placeholder="you@email.com"
+            placeholder="f.kafka@wrongtrain.com"
            registration={register("email")}
            error={errors.email?.message}
+            handleFocus={() => setSaajanMessage("I remember you.")}
          />

          <FormField
@@ -153,6 +188,9 @@ export default function Login() {
            placeholder="••••••••"
            registration={register("password")}
            error={errors.password?.message}
+            handleFocus={() =>
+              setSaajanMessage("The one thing I cannot know for you.")
+            }
          />

          <div className="card-actions mt-4">
@@ -44,7 +44,7 @@ export default function Reader() {

  const [isDecrypting, setIsDecrypting] = useState(true);
  const [revealState, setRevealState] = useState<
-    "sealed" | "revealed" | "burned"
+    "sealed" | "revealed" | "burned" | "burning"
  >("sealed");
  const [error, setError] = useState<{
    message: string;
@@ -8,6 +8,7 @@ import { z } from "zod";
 import { publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
 import FormField from "../components/ui/FormField";
+import Saajan from "../components/ui/Saajan";
 import { endpoints } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
 import { CryptoUtils } from "../utils/crypto";
@@ -31,6 +32,9 @@ export default function Register() {
  const navigate = useNavigate();
  const [isLoading, setIsLoading] = useState(false);
  const [apiError, setApiError] = useState<string | null>(null);
+  const [saajanMessage, setSaajanMessage] = useState<string>(
+    "I didn't think I'd be here either.\nAnd yet, here we are.",
+  );

  const {
    register,
@@ -41,6 +45,7 @@ export default function Register() {
  });

  const onSubmit = async (data: RegisterInputs) => {
+    setSaajanMessage("Good. I'll remember that.");
    setIsLoading(true);
    setApiError(null);
    try {
@@ -68,74 +73,96 @@ export default function Register() {
  };

  return (
-    <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
-      <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
-        <h1 className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight">
-          Create a <Logo /> Account
-        </h1>
-
-        {apiError && (
-          <div className="alert alert-error text-xs py-2 rounded-md">
-            <span>{apiError}</span>
+    <div className="flex flex-col">
+      <Saajan message={saajanMessage} position="right" />
+      <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
+        <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
+          <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
+            Create a <Logo /> Account
          </div>
-        )}

-        <FormField
-          label="Pen Name"
-          placeholder="Word Smith"
-          registration={register("full_name")}
-          error={errors.full_name?.message}
-        />
+          {apiError && (
+            <div className="alert alert-error text-xs py-2 rounded-md">
+              <span>{apiError}</span>
+            </div>
+          )}

-        <FormField
-          label="Email"
-          type="email"
-          placeholder="f.kafka@email.com"
-          registration={register("email")}
-          error={errors.email?.message}
-        />
+          <FormField
+            label="Pen Name"
+            placeholder="Word Smith"
+            registration={register("full_name")}
+            error={errors.full_name?.message}
+            handleFocus={() =>
+              setSaajanMessage("Hello friend. What should I call you?")
+            }
+          />

-        <FormField
-          label="Password"
-          type="password"
-          placeholder="••••••••"
-          registration={register("password")}
-          error={errors.password?.message}
-        />
+          <FormField
+            label="Email"
+            type="email"
+            placeholder="f.kafka@email.com"
+            registration={register("email")}
+            error={errors.email?.message}
+            handleFocus={() =>
+              setSaajanMessage(
+                "Where should I send your letters?\nNo empty lunchboxes, please.",
+              )
+            }
+          />

-        <FormField
-          label="Confirm Password"
-          type="password"
-          placeholder="••••••••"
-          registration={register("confirm_password")}
-          error={errors.confirm_password?.message}
-        />
+          <FormField
+            label="Password"
+            type="password"
+            placeholder="••••••••"
+            registration={register("password")}
+            error={errors.password?.message}
+            handleFocus={() =>
+              setSaajanMessage(
+                "Something only you know.\nI have one of those too.",
+              )
+            }
+          />

-        {/* Warning */}
-        <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
-          <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
-          <p className="text-sm font-semibold">
-            Choose a password you won't forget. <br />
-            <span className="underline decoration-2">There is no reset.</span>{" "}
-            If you lose it, your letters cannot be recovered.
-          </p>
-        </div>
+          <FormField
+            label="Confirm Password"
+            type="password"
+            placeholder="••••••••"
+            registration={register("confirm_password")}
+            error={errors.confirm_password?.message}
+            handleFocus={() =>
+              setSaajanMessage(
+                "Just once? Trust me, \nsome things are worth repeating twice.",
+              )
+            }
+          />

-        <div className="card-actions mt-4">
-          <button
-            type="submit"
-            disabled={isLoading}
-            aria-label="Register"
-            className="btn btn-primary w-full shadow-lg"
-          >
-            {isLoading ? (
-              <span className="loading loading-spinner loading-sm" />
-            ) : (
-              "Register"
-            )}
-          </button>
-        </div>
-      </form>
+          {/* Warning */}
+          <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
+            <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
+            <p className="text-sm font-semibold">
+              Choose a password you won't forget. <br />
+              Just like life,{" "}
+              <span className="underline decoration-2">there is no reset</span>{" "}
+              here. If you lose it, your letters cannot be recovered.
+            </p>
+          </div>
+
+          <div className="card-actions mt-4">
+            <button
+              type="submit"
+              disabled={isLoading}
+              aria-label="Register"
+              className="btn btn-primary w-full shadow-lg"
+            >
+              {isLoading ? (
+                <span className="loading loading-spinner loading-sm" />
+              ) : (
+                "Register"
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
    </div>
  );
 }
@@ -1,41 +1,55 @@
 import { EnvelopeSimpleOpenIcon } from "@phosphor-icons/react";
 import Logo from "../components/Logo";
+import Saajan from "../components/ui/Saajan";

 export default function VerifyEmail() {
  return (
-    <div className="glass-card w-full max-w-sm p-8 text-center flex flex-col items-center gap-6 fade-zoom">
-      <div className="auth-icon-container">
-        <EnvelopeSimpleOpenIcon
-          size={32}
-          weight="duotone"
-          className="text-primary"
-        />
+    <div className="relative">
+      <Saajan
+        message={"I sent something to your inbox.\nOpen it, and we can begin."}
+      />
+
+      <div className="glass-card w-full max-w-sm p-8 text-center flex flex-col items-center gap-6 fade-zoom">
+        <div className="auth-icon-container">
+          <EnvelopeSimpleOpenIcon
+            size={32}
+            weight="duotone"
+            className="text-primary"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <h2 className="font-display text-xl text-primary">
+            Check Your Mailbox
+          </h2>
+          <p className="text-sm opacity-80 leading-relaxed font-sans mt-6">
+            You're one train away from starting your <Logo scale={0.8} />{" "}
+            journey.
+          </p>
+        </div>
+
+        <div className="divider opacity-10 my-0"></div>
+
+        <div className="alert bg-base-200/50 p-4 rounded-lg text-xs leading-relaxed opacity-70 text-center">
+          <p>
+            Nothing yet? Sometimes letters take the wrong train. Check your spam
+            folder.
+            <br />
+            <span className="underline font-bold">
+              The link expires in 24 hours.
+            </span>
+            <br /> I'm patient... but not endlessly so
+          </p>
+        </div>
+
+        <button
+          type="button"
+          className="text-xs italic opacity-40 cursor-pointer underline"
+          onClick={() => window.close()}
+        >
+          You can close this window now.
+        </button>
      </div>
-
-      <div className="space-y-2">
-        <h2 className="font-display text-xl text-primary">Check Your Email</h2>
-        <p className="text-sm opacity-80 leading-relaxed font-sans">
-          We've sent an activation link to your inbox. <br />
-          Please click it to verify your <Logo /> account.
-        </p>
-      </div>
-
-      <div className="divider opacity-10"></div>
-
-      <div className="alert bg-base-200/50 p-4 rounded-lg text-xs leading-relaxed text-left opacity-70">
-        <p>
-          Didn't receive it? Check your spam folder or wait for a few minutes.
-          The link will expire in 24 hours.
-        </p>
-      </div>
-
-      <button
-        type="button"
-        className="text-xs italic opacity-40 cursor-pointer underline"
-        onClick={() => window.close()}
-      >
-        You can close this window now.
-      </button>
    </div>
  );
 }