Add interactive password requirements popup for Signup and Reset Password pages

- Create floating password requirements component that appears to the right of password fields
- Auto-hide requirements box after 1 second when all required criteria are met
- Display real-time validation with checkmarks and X marks for each requirement
- Apply to both Signup and Reset Password pages for consistent UX
- Remove static password requirements boxes in favor of dynamic popup

Author: Patel230

packages/web/src/components/PasswordRequirements.tsx

@@ -1,11 +1,14 @@
 import { Check, X } from 'lucide-react';
+import { useState, useEffect } from 'react';
 
 interface PasswordRequirementsProps {
   password: string;
   showAll?: boolean;
 }
 
 export function PasswordRequirements({ password, showAll = false }: PasswordRequirementsProps) {
+  const [showBox, setShowBox] = useState(true);
+
   const requirements = [
     {
       label: '8+ characters',
@@ -35,11 +38,27 @@ export function PasswordRequirements({ password, showAll = false }: PasswordRequ
     }
   ];
 
-  if (!password && !showAll) return null;
+  const allRequiredMet = requirements
+    .filter(req => !req.optional)
+    .every(req => req.met);
+
+  useEffect(() => {
+    if (allRequiredMet && password) {
+      const timer = setTimeout(() => {
+        setShowBox(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    } else if (password) {
+      setShowBox(true);
+    }
+  }, [allRequiredMet, password]);
+
+  if (!password) return null;
+  if (!showBox) return null;
 
   return (
-    <div className="mt-2 p-3 bg-gray-900/50 border border-gray-600/50 rounded-lg">
-      <p className="text-xs font-medium text-gray-300 mb-2">Password Requirements:</p>
+    <div className="absolute left-full ml-4 top-0 w-56 p-3 bg-gray-800/95 backdrop-blur-xl border border-gray-700/50 rounded-xl shadow-2xl z-50">
+      <p className="text-xs font-semibold text-gray-300 mb-2">Password Requirements</p>
       <ul className="space-y-1.5">
         {requirements.map((req, index) => (
           <li key={index} className="flex items-center space-x-2 text-xs">
@@ -53,9 +72,9 @@ export function PasswordRequirements({ password, showAll = false }: PasswordRequ
               <div className="h-3.5 w-3.5 rounded-full border border-gray-500 flex-shrink-0" />
             )}
             <span className={`${
-              password 
-                ? req.met 
-                  ? 'text-teal-400' 
+              password
+                ? req.met
+                  ? 'text-teal-400'
                   : 'text-gray-400'
                 : 'text-gray-400'
             }`}>

packages/web/src/pages/ResetPassword.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useSearchParams, useNavigate, Link } from 'react-router-dom';
 import { Lock, Eye, EyeOff, CheckCircle, XCircle } from 'lucide-react';
 import { TlsStatusIndicator } from '../components/TlsStatusIndicator';
+import { PasswordRequirements } from '../components/PasswordRequirements';
 import { validatePassword, getPasswordStrength } from '../utils/validation';
 
 export function ResetPassword() {
@@ -99,7 +100,7 @@ export function ResetPassword() {
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="space-y-5">
-              <div>
+              <div className="relative">
                 <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-1">
                   New Password
                 </label>
@@ -149,6 +150,8 @@ export function ResetPassword() {
                     </div>
                   </div>
                 )}
+
+                <PasswordRequirements password={password} />
               </div>
 
               <div>
@@ -212,15 +215,6 @@ export function ResetPassword() {
                 )}
               </div>
 
-              <div className="p-3 bg-blue-900/20 border border-blue-500/30 rounded-lg">
-                <p className="text-xs text-blue-300 font-semibold mb-2">Password Requirements:</p>
-                <ul className="text-xs text-blue-300/80 space-y-1">
-                  <li>• At least 8 characters long</li>
-                  <li>• Contains uppercase and lowercase letters</li>
-                  <li>• Contains at least one number</li>
-                </ul>
-              </div>
-
               <button
                 type="submit"
                 disabled={loading}

packages/web/src/pages/Signup.tsx

@@ -492,7 +492,7 @@ export function Signup() {
           </div>
 
           {/* Password Field */}
-          <div>
+          <div className="relative">
             <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-1">
               Password
             </label>