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

frontend/src/App.tsx

@@ -31,7 +31,7 @@ export default function App() {
 
   return (
     <BrowserRouter>
-      <main className="min-h-screen bg-base-200 flex items-center justify-center w-full">
+      <main className="relative min-h-screen min-w-screen flex items-center justify-center w-full bg-base-200 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]">
         <Suspense fallback={<SplashScreen />}>
           <Routes>
             <Route path={ROUTES.HOME} element={<Home />} />

frontend/src/components/Logo.tsx

@@ -1,7 +1,7 @@
 import { DotIcon } from "@phosphor-icons/react";
 import "@fontsource/knewave/400.css";
 
-export default function Logo({ scale = 2 }) {
+export default function Logo({ scale = 1 }) {
   return (
     <div
       role="img"
@@ -9,16 +9,16 @@ export default function Logo({ scale = 2 }) {
       className="inline-flex items-baseline justify-center leading-none select-none"
       style={{ fontFamily: "'Knewave', serif", scale }}
     >
-      <span className={`text-xl font-light text-accent`}>&nbsp;Pi</span>
+      <span className={`text-3xl font-light text-accent`}>Pi</span>
       <DotIcon
         weight="fill"
-        size={6}
+        size={12}
         className={`text-primary translate-y-1 -mx-px`}
       />
-      <span className={`text-xl font-light text-accent`}>&nbsp;Ku</span>
+      <span className={`text-3xl font-light text-accent`}>&nbsp;Ku</span>
       <DotIcon
         weight="fill"
-        size={6}
+        size={12}
         className={`text-primary translate-y-1 -mx-px`}
       />
     </div>

frontend/src/index.css

@@ -47,10 +47,7 @@
     --font-display: "Playwrite HR Lijeva Variable", cursive;
     --font-sans: "Jost Variable", sans-serif;
     --font-serif: "Playfair Display Variable", serif;
-    --color-glass-bg: rgba(28,
-            22,
-            16,
-            0.45);
+    --color-glass-bg: rgba(28, 22, 16, 0.45);
     --shadow-warm: 0 20px 50px -12px rgba(30, 20, 12, 0.6);
     --radius-xl: 1.5rem;
     --color-paper: oklch(97% 0.008 80);

frontend/src/pages/Login.tsx

@@ -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">

frontend/src/pages/Register.tsx

@@ -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,11 +73,13 @@ export default function Register() {
   };
 
   return (
+    <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">
-        <h1 className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight">
+          <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
             Create a <Logo /> Account
-        </h1>
+          </div>
 
           {apiError && (
             <div className="alert alert-error text-xs py-2 rounded-md">
@@ -85,6 +92,9 @@ export default function Register() {
             placeholder="Word Smith"
             registration={register("full_name")}
             error={errors.full_name?.message}
+            handleFocus={() =>
+              setSaajanMessage("Hello friend. What should I call you?")
+            }
           />
 
           <FormField
@@ -93,6 +103,11 @@ export default function Register() {
             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
@@ -101,6 +116,11 @@ export default function Register() {
             placeholder="••••••••"
             registration={register("password")}
             error={errors.password?.message}
+            handleFocus={() =>
+              setSaajanMessage(
+                "Something only you know.\nI have one of those too.",
+              )
+            }
           />
 
           <FormField
@@ -109,6 +129,11 @@ export default function Register() {
             placeholder="••••••••"
             registration={register("confirm_password")}
             error={errors.confirm_password?.message}
+            handleFocus={() =>
+              setSaajanMessage(
+                "Just once? Trust me, \nsome things are worth repeating twice.",
+              )
+            }
           />
 
           {/* Warning */}
@@ -116,8 +141,9 @@ export default function Register() {
             <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.
+              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>
 
@@ -137,5 +163,6 @@ export default function Register() {
           </div>
         </form>
       </div>
+    </div>
   );
 }