From 0fb31b9f0b9421319e31f6bfcb2695c58eea006e Mon Sep 17 00:00:00 2001
From: ramvignesh-b <ramvignesh-b@github.com>
Date: Tue, 14 Apr 2026 23:53:16 +0530
Subject: [PATCH] feat: add welcome modal to login page

---
 frontend/src/pages/Activate.tsx |   8 +-
 frontend/src/pages/Login.tsx    | 165 +++++++++++++++++++++-----------
 2 files changed, 117 insertions(+), 56 deletions(-)

diff --git a/frontend/src/pages/Activate.tsx b/frontend/src/pages/Activate.tsx
index cad05d5..507a128 100644
--- a/frontend/src/pages/Activate.tsx
+++ b/frontend/src/pages/Activate.tsx
@@ -62,12 +62,16 @@ export default function Activate() {
             <br />
             Your identity is now verified and ready for timeless letters.
           </p>
+          <div className="divider opacity-10"></div>
+
           <button
             type="button"
             className="btn btn-primary w-full shadow-lg"
-            onClick={() => navigate(ROUTES.DRAWER)}
+            onClick={() =>
+              navigate(ROUTES.LOGIN, { state: { firstTime: true } })
+            }
           >
-            Open Drawer
+            Start Writing
           </button>
         </div>
       )}
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 075fa3a..0c6d6a9 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,8 +1,9 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+import { ShieldCheckIcon, WarningIcon } from "@phosphor-icons/react";
 import axios from "axios";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { z } from "zod";
 import { api, publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
@@ -13,7 +14,7 @@ import { useAuth } from "../hooks/useAuth";
 import { CryptoUtils } from "../utils/crypto";
 
 const loginSchema = z.object({
-  email: z.string().email("Please enter a valid email"),
+  email: z.email("Please enter a valid email"),
   password: z.string().min(1, "Password is required"),
 });
 
@@ -21,9 +22,11 @@ type LoginInputs = z.infer<typeof loginSchema>;
 
 export default function Login() {
   const navigate = useNavigate();
+  const location = useLocation();
   const [isLoading, setIsLoading] = useState(false);
   const [apiError, setApiError] = useState<string | null>(null);
   const { setAuthStore } = useAuth();
+  const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
 
   const {
     register,
@@ -70,62 +73,116 @@ export default function Login() {
   };
 
   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 font-bold justify-center text-primary tracking-tight">
-          Sign in to <Logo />
-        </h1>
+    <div className="flex flex-col gap-3">
+      {showWelcome && (
+        <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="flex flex-col items-center text-center gap-4">
+              <div className="bg-primary/10 p-4 rounded-full animate-pulse">
+                <ShieldCheckIcon
+                  size={48}
+                  weight="duotone"
+                  className="text-primary"
+                />
+              </div>
+              <h3 className="font-display text-2xl font-bold text-primary">
+                Welcome to <Logo />!
+              </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.
+                <br />
+                <span className="font-bold">
+                  The server never sees it, and it's a solemn promise!
+                </span>
+              </p>
 
-        {apiError && (
-          <div className="alert alert-error text-xs py-2 rounded-md">
-            <span>{apiError}</span>
+              <div className="alert alert-warning bg-paper/20 border-paper/20 flex items-start gap-3 text-left py-3">
+                <WarningIcon
+                  size={24}
+                  weight="fill"
+                  className="shrink-0 mt-0.5"
+                />
+                <p className="text-sm font-medium text-primary-content">
+                  If you ever happen to forget your password, your letters are
+                  lost to time, forever.
+                </p>
+              </div>
+
+              <div className="modal-action w-full">
+                <button
+                  type="button"
+                  onClick={() => setShowWelcome(false)}
+                  className="btn btn-primary w-full shadow-lg"
+                >
+                  I understand
+                </button>
+              </div>
+            </div>
           </div>
-        )}
-
-        <FormField
-          label="Email"
-          type="email"
-          placeholder="you@email.com"
-          registration={register("email")}
-          error={errors.email?.message}
-        />
-
-        <FormField
-          label="Password"
-          type="password"
-          placeholder="••••••••"
-          registration={register("password")}
-          error={errors.password?.message}
-        />
-
-        <div className="card-actions mt-4">
-          <button
-            type="submit"
-            name="login"
-            disabled={isLoading}
-            aria-label="Sign In"
-            className="btn btn-primary w-full shadow-lg"
-          >
-            {isLoading ? (
-              <span className="loading loading-spinner loading-sm" />
-            ) : (
-              "Sign In"
-            )}
-          </button>
         </div>
+      )}
+      <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 font-bold justify-center text-primary tracking-tight">
+            Sign in to <Logo />
+          </h1>
 
-        <div className="text-center text-sm font-medium text-base-content/70">
-          Don't have an account?{" "}
-          <button
-            type="button"
-            name="register"
-            onClick={() => navigate(ROUTES.ONBOARD)}
-            className="link link-primary no-underline hover:underline font-bold"
-          >
-            Register
-          </button>
-        </div>
-      </form>
+          {apiError && (
+            <div className="alert alert-error text-xs py-2 rounded-md">
+              <span>{apiError}</span>
+            </div>
+          )}
+
+          <FormField
+            label="Email"
+            type="email"
+            placeholder="you@email.com"
+            registration={register("email")}
+            error={errors.email?.message}
+          />
+
+          <FormField
+            label="Password"
+            type="password"
+            placeholder="••••••••"
+            registration={register("password")}
+            error={errors.password?.message}
+          />
+
+          <div className="card-actions mt-4">
+            <button
+              type="submit"
+              name="login"
+              disabled={isLoading}
+              aria-label="Sign In"
+              className="btn btn-primary w-full shadow-lg"
+            >
+              {isLoading ? (
+                <span className="loading loading-spinner loading-sm" />
+              ) : (
+                "Sign In"
+              )}
+            </button>
+          </div>
+
+          <div className="text-center text-sm font-medium text-base-content/70">
+            Don't have an account?{" "}
+            <button
+              type="button"
+              name="register"
+              onClick={() => navigate(ROUTES.ONBOARD)}
+              className="link link-primary no-underline hover:underline font-bold"
+            >
+              Register
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
   );
 }