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,
+    --color-glass-bg: rgba(28, 22, 16, 0.45);
-            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
+            Before we begin, let me make a small promise.
-            your letters are{" "}
+            <HandPalmIcon
-            <span className="font-bold underline">
+              size={18}
-              sealed with your password
+              className="inline text-primary"
-            </span>
+              weight="fill"
-            , which only you have access to.
+            />
+            <div className="divider my-0"></div>
             <br />
-            <span className="font-bold">
+            Everything you write here is sealed with your password,{" "}
-              The server never sees it, and it's a solemn promise!
+            <span className="font-display text-success">cryptographically</span>
-            </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,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">
+    <div className="flex flex-col">
-      <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
+      <Saajan message={saajanMessage} position="right" />
-        <h1 className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight">
+      <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
-          Create a <Logo /> Account
+        <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
-        </h1>
+          <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
-
+            Create a <Logo /> Account
-        {apiError && (
-          <div className="alert alert-error text-xs py-2 rounded-md">
-            <span>{apiError}</span>
           </div>
-        )}
 
-        <FormField
+          {apiError && (
-          label="Pen Name"
+            <div className="alert alert-error text-xs py-2 rounded-md">
-          placeholder="Word Smith"
+              <span>{apiError}</span>
-          registration={register("full_name")}
+            </div>
-          error={errors.full_name?.message}
+          )}
-        />
 
-        <FormField
+          <FormField
-          label="Email"
+            label="Pen Name"
-          type="email"
+            placeholder="Word Smith"
-          placeholder="f.kafka@email.com"
+            registration={register("full_name")}
-          registration={register("email")}
+            error={errors.full_name?.message}
-          error={errors.email?.message}
+            handleFocus={() =>
-        />
+              setSaajanMessage("Hello friend. What should I call you?")
+            }
+          />
 
-        <FormField
+          <FormField
-          label="Password"
+            label="Email"
-          type="password"
+            type="email"
-          placeholder="••••••••"
+            placeholder="f.kafka@email.com"
-          registration={register("password")}
+            registration={register("email")}
-          error={errors.password?.message}
+            error={errors.email?.message}
-        />
+            handleFocus={() =>
+              setSaajanMessage(
+                "Where should I send your letters?\nNo empty lunchboxes, please.",
+              )
+            }
+          />
 
-        <FormField
+          <FormField
-          label="Confirm Password"
+            label="Password"
-          type="password"
+            type="password"
-          placeholder="••••••••"
+            placeholder="••••••••"
-          registration={register("confirm_password")}
+            registration={register("password")}
-          error={errors.confirm_password?.message}
+            error={errors.password?.message}
-        />
+            handleFocus={() =>
+              setSaajanMessage(
+                "Something only you know.\nI have one of those too.",
+              )
+            }
+          />
 
-        {/* Warning */}
+          <FormField
-        <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
+            label="Confirm Password"
-          <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
+            type="password"
-          <p className="text-sm font-semibold">
+            placeholder="••••••••"
-            Choose a password you won't forget. <br />
+            registration={register("confirm_password")}
-            <span className="underline decoration-2">There is no reset.</span>{" "}
+            error={errors.confirm_password?.message}
-            If you lose it, your letters cannot be recovered.
+            handleFocus={() =>
-          </p>
+              setSaajanMessage(
-        </div>
+                "Just once? Trust me, \nsome things are worth repeating twice.",
+              )
+            }
+          />
 
-        <div className="card-actions mt-4">
+          {/* Warning */}
-          <button
+          <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
-            type="submit"
+            <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
-            disabled={isLoading}
+            <p className="text-sm font-semibold">
-            aria-label="Register"
+              Choose a password you won't forget. <br />
-            className="btn btn-primary w-full shadow-lg"
+              Just like life,{" "}
-          >
+              <span className="underline decoration-2">there is no reset</span>{" "}
-            {isLoading ? (
+              here. If you lose it, your letters cannot be recovered.
-              <span className="loading loading-spinner loading-sm" />
+            </p>
-            ) : (
+          </div>
-              "Register"
+
-            )}
+          <div className="card-actions mt-4">
-          </button>
+            <button
-        </div>
+              type="submit"
-      </form>
+              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>
   );
 }