feat: unify real activity tracking, admin monitoring, and error UX

frontend/components/LoginComponent.tsx

@@ -20,7 +20,6 @@ export function LoginComponent() {
     walletConnected, 
     walletAddress,
     user,
-    firebaseUser,
     authMethod 
   } = useAuth()
   
@@ -29,23 +28,21 @@ export function LoginComponent() {
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [isEmailLogin, setIsEmailLogin] = useState(false)
+  const [isSignup, setIsSignup] = useState(false)
+  const [username, setUsername] = useState("")
   const [isConnectingWallet, setIsConnectingWallet] = useState(false)
   const [connectionStatus, setConnectionStatus] = useState<'idle' | 'connecting' | 'connected' | 'error'>('idle')
 
   // ✅ Check if user is already authenticated
   useEffect(() => {
     if (!isLoadingAuth) {
-      if (walletConnected && walletAddress) {
-        console.log('✅ MetaMask already connected:', walletAddress)
+      if (user && authMethod) {
+        console.log('✅ User already authenticated:', authMethod)
         setConnectionStatus('connected')
-        toast.success("Already connected to MetaMask!")
-        router.push("/dashboard")
-      } else if (firebaseUser) {
-        console.log('✅ Firebase user already logged in:', firebaseUser.email)
         router.push("/dashboard")
       }
     }
-  }, [isLoadingAuth, walletConnected, walletAddress, firebaseUser, router])
+  }, [isLoadingAuth, user, authMethod, router])
 
   const handleWalletConnect = async () => {
     setIsConnectingWallet(true)
@@ -66,7 +63,6 @@ export function LoginComponent() {
       if (success) {
         setConnectionStatus('connected')
         console.log('✅ MetaMask connection successful')
-        toast.success("MetaMask connected successfully! 🦊")
         
         // Small delay to ensure state is updated
         setTimeout(() => {
@@ -74,19 +70,10 @@ export function LoginComponent() {
         }, 1000)
       } else {
         setConnectionStatus('error')
-        toast.error("Failed to connect MetaMask. Please try again.")
       }
     } catch (error: any) {
       console.error('❌ Wallet connection error:', error)
       setConnectionStatus('error')
-      
-      if (error.message?.includes('User rejected')) {
-        toast.error("Connection cancelled by user.")
-      } else if (error.message?.includes('MetaMask not detected')) {
-        toast.error("Please install MetaMask extension.")
-      } else {
-        toast.error("MetaMask connection failed. Please try again.")
-      }
     } finally {
       setIsConnectingWallet(false)
     }
@@ -107,17 +94,48 @@ export function LoginComponent() {
 
     try {
       console.log('📧 Attempting email login for:', email)
-      await loginWithEmail(email, password)
-      toast.success("Logged in successfully!")
-      router.push("/dashboard")
+      const success = await loginWithEmail(email, password)
+      if (success) {
+        setTimeout(() => router.push("/dashboard"), 500)
+      }
     } catch (error: any) {
       console.error('❌ Email login failed:', error)
-      toast.error(error.message || "Login failed. Please check your credentials.")
+    }
+  }
+
+  const { signupWithEmail } = useAuth()
+
+  const handleEmailSignup = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!email.trim() || !password.trim() || !username.trim()) {
+      toast.error("Please fill in all fields")
+      return
+    }
+
+    if (!email.includes('@')) {
+      toast.error("Please enter a valid email address")
+      return
+    }
+
+    if (password.length < 6) {
+      toast.error("Password must be at least 6 characters")
+      return
+    }
+
+    try {
+      console.log('📧 Attempting email signup for:', email)
+      const success = await signupWithEmail(email, password, username)
+      if (success) {
+        setTimeout(() => router.push("/dashboard"), 500)
+      }
+    } catch (error: any) {
+      console.error('❌ Email signup failed:', error)
     }
   }
 
   // ✅ Show connected state if already authenticated
-  if (connectionStatus === 'connected' || (walletConnected && walletAddress)) {
+  if (user && authMethod) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-gray-900 dark:via-blue-900/20 dark:to-purple-900/20 p-4">
         <Card className="w-full max-w-md shadow-2xl border-0 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm">
@@ -126,14 +144,18 @@ export function LoginComponent() {
               <CheckCircle2 className="w-6 h-6 text-green-600" />
             </div>
             <CardTitle className="text-xl font-bold text-green-600">
-              MetaMask Connected! 🦊
+              {authMethod === 'metamask' ? 'MetaMask Connected' : 'Logged In'}
             </CardTitle>
           </CardHeader>
           <CardContent className="text-center space-y-4">
             <Alert className="border-green-200 bg-green-50 dark:bg-green-900/20">
               <Wallet className="w-4 h-4 text-green-600" />
               <AlertDescription className="text-green-700 dark:text-green-300">
-                🦊 {walletAddress?.slice(0, 6)}...{walletAddress?.slice(-4)}
+                {authMethod === 'metamask' && walletAddress ? (
+                  <>{walletAddress.slice(0, 6)}...{walletAddress.slice(-4)}</>
+                ) : (
+                  <>{user.email}</>
+                )}
               </AlertDescription>
             </Alert>
             
@@ -146,7 +168,7 @@ export function LoginComponent() {
                 onClick={() => window.location.reload()} 
                 className="w-full"
               >
-                Connect Different Wallet
+                Logout
               </Button>
             </div>
           </CardContent>
@@ -154,6 +176,12 @@ export function LoginComponent() {
       </div>
     )
   }
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-gray-900 dark:via-blue-900/20 dark:to-purple-900/20 p-4">
@@ -165,7 +193,7 @@ export function LoginComponent() {
           
           <div className="space-y-2">
             <CardTitle className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
-              Welcome to OpenLearnX! 🎓
+              Welcome to OpenLearnX
             </CardTitle>
             <p className="text-gray-600 dark:text-gray-300">
               Connect your MetaMask wallet or login with email
@@ -194,14 +222,14 @@ export function LoginComponent() {
               ) : (
                 <>
                   <Wallet className="w-5 h-5 mr-2" />
-                  Connect MetaMask Wallet 🦊
+                  Connect MetaMask Wallet
                 </>
               )}
             </Button>
             
             <div className="bg-purple-50 dark:bg-purple-900/20 p-3 rounded-lg">
               <p className="text-xs text-purple-700 dark:text-purple-300 text-center">
-                ✨ Recommended: Get Web3 features, blockchain verification, and token rewards!
+                Recommended: Get Web3 features, blockchain verification, and token rewards.
               </p>
             </div>
           </div>
@@ -223,55 +251,92 @@ export function LoginComponent() {
               className="w-full"
             >
               <Mail className="w-4 h-4 mr-2" />
-              {isEmailLogin ? 'Hide Email Login' : 'Login with Email'}
+              {isEmailLogin ? 'Hide Email Options' : 'Login with Email'}
             </Button>
 
             {isEmailLogin && (
-              <form onSubmit={handleEmailLogin} className="space-y-4 mt-4">
-                <div>
-                  <Label htmlFor="email">Email Address</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    placeholder="Enter your email"
-                    disabled={isLoadingAuth}
-                    required
-                  />
-                </div>
-                
-                <div>
-                  <Label htmlFor="password">Password</Label>
-                  <Input
-                    id="password"
-                    type="password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    placeholder="Enter your password"
-                    disabled={isLoadingAuth}
-                    required
-                  />
+              <div className="space-y-4 mt-4">
+                {/* Toggle between Login and Signup */}
+                <div className="flex gap-2 bg-gray-100 dark:bg-gray-700 p-1 rounded-lg">
+                  <Button
+                    variant={!isSignup ? "default" : "ghost"}
+                    size="sm"
+                    onClick={() => setIsSignup(false)}
+                    className="flex-1"
+                  >
+                    Login
+                  </Button>
+                  <Button
+                    variant={isSignup ? "default" : "ghost"}
+                    size="sm"
+                    onClick={() => setIsSignup(true)}
+                    className="flex-1"
+                  >
+                    Sign Up
+                  </Button>
                 </div>
 
-                <Button
-                  type="submit"
-                  disabled={isLoadingAuth || !email.trim() || !password.trim()}
-                  className="w-full"
-                >
-                  {isLoadingAuth ? (
-                    <>
-                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                      Logging in...
-                    </>
-                  ) : (
-                    <>
-                      <Lock className="w-4 h-4 mr-2" />
-                      Login with Email
-                    </>
+                <form onSubmit={isSignup ? handleEmailSignup : handleEmailLogin} className="space-y-4">
+                  {isSignup && (
+                    <div>
+                      <Label htmlFor="username">Username</Label>
+                      <Input
+                        id="username"
+                        type="text"
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)}
+                        placeholder="Choose a username"
+                        disabled={isLoadingAuth}
+                        required={isSignup}
+                      />
+                    </div>
                   )}
-                </Button>
-              </form>
+
+                  <div>
+                    <Label htmlFor="email">Email Address</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      placeholder="Enter your email"
+                      disabled={isLoadingAuth}
+                      required
+                    />
+                  </div>
+                  
+                  <div>
+                    <Label htmlFor="password">Password</Label>
+                    <Input
+                      id="password"
+                      type="password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      placeholder={isSignup ? "Create a password (min 6 characters)" : "Enter your password"}
+                      disabled={isLoadingAuth}
+                      required
+                    />
+                  </div>
+
+                  <Button
+                    type="submit"
+                    disabled={isLoadingAuth || !email.trim() || !password.trim() || (isSignup && !username.trim())}
+                    className="w-full"
+                  >
+                    {isLoadingAuth ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        {isSignup ? 'Creating Account...' : 'Logging in...'}
+                      </>
+                    ) : (
+                      <>
+                        <Lock className="w-4 h-4 mr-2" />
+                        {isSignup ? 'Create Account' : 'Login'}
+                      </>
+                    )}
+                  </Button>
+                </form>
+              </div>
             )}
           </div>