feat: add welcome modal to login page

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>
       )}

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,6 +73,59 @@ export default function Login() {
   };
 
   return (
+    <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>
+
+              <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>
+        </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">
@@ -127,5 +183,6 @@ export default function Login() {
           </div>
         </form>
       </div>
+    </div>
   );
 }