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

frontend/components/auth-buttons.tsx

@@ -8,37 +8,56 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { toast } from "react-hot-toast"
 
 export function AuthButtons() {
-  const { user, firebaseUser, isLoadingAuth, authMethod, connectWallet, loginWithEmail, signupWithEmail, logout } =
-    useAuth()
+  const { user, isLoadingAuth, authMethod, connectWallet, loginWithEmail, signupWithEmail, logout } = useAuth()
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
+  const [username, setUsername] = useState("")
   const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)
 
   const handleEmailLogin = async () => {
-    await loginWithEmail(email, password)
-    setIsAuthModalOpen(false)
+    if (!email.trim() || !password.trim()) {
+      toast.error("Please enter email and password")
+      return
+    }
+    const success = await loginWithEmail(email, password)
+    if (success) {
+      setIsAuthModalOpen(false)
+      setEmail("")
+      setPassword("")
+    }
   }
 
   const handleEmailSignup = async () => {
-    await signupWithEmail(email, password)
-    setIsAuthModalOpen(false)
+    if (!email.trim() || !password.trim() || !username.trim()) {
+      toast.error("Please fill in all fields")
+      return
+    }
+    if (password.length < 6) {
+      toast.error("Password must be at least 6 characters")
+      return
+    }
+    const success = await signupWithEmail(email, password, username)
+    if (success) {
+      setIsAuthModalOpen(false)
+      setEmail("")
+      setPassword("")
+      setUsername("")
+    }
   }
 
-  const displayAddress = user?.wallet_address || firebaseUser?.email || "Guest"
+  const displayAddress = user?.wallet_address || user?.email || "Guest"
 
   return (
     <div className="flex items-center gap-4">
-      {authMethod ? (
+      {authMethod && user ? (
         <>
           <span className="text-sm text-gray-600 dark:text-gray-300">
-            Connected:{" "}
-            {authMethod === "metamask" && user?.wallet_address
+            {authMethod === "metamask" && user.wallet_address
               ? `${user.wallet_address.slice(0, 6)}...${user.wallet_address.slice(-4)}`
-              : authMethod === "firebase" && firebaseUser?.email
-                ? firebaseUser.email
-                : displayAddress}
+              : user.email || displayAddress}
           </span>
           <Button onClick={logout} variant="outline" disabled={isLoadingAuth}>
             Logout
@@ -76,48 +95,88 @@ export function AuthButtons() {
               </TabsContent>
               <TabsContent value="email" className="space-y-4 p-4">
                 <p className="text-sm text-gray-600 dark:text-gray-300">
-                  Use email for a quick testing process (quizzes only).
+                  Use email to access courses and quizzes.
                 </p>
-                <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="your@email.com"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    className="dark:bg-gray-700 dark:border-gray-600"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="password">Password</Label>
-                  <Input
-                    id="password"
-                    type="password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="dark:bg-gray-700 dark:border-gray-600"
-                  />
-                </div>
-                <div className="flex gap-2">
-                  <Button
-                    onClick={handleEmailLogin}
-                    disabled={isLoadingAuth}
-                    className="flex-1 bg-primary-purple hover:bg-primary-purple/90 text-white"
-                  >
-                    {isLoadingAuth && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                    Login
-                  </Button>
-                  <Button
-                    onClick={handleEmailSignup}
-                    disabled={isLoadingAuth}
-                    variant="outline"
-                    className="flex-1 dark:text-gray-100 dark:border-gray-600 bg-transparent"
-                  >
-                    {isLoadingAuth && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                    Sign Up
-                  </Button>
-                </div>
+                <Tabs defaultValue="login" className="w-full">
+                  <TabsList className="grid w-full grid-cols-2">
+                    <TabsTrigger value="login">Login</TabsTrigger>
+                    <TabsTrigger value="signup">Sign Up</TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="login" className="space-y-3">
+                    <div className="space-y-2">
+                      <Label htmlFor="login-email">Email</Label>
+                      <Input
+                        id="login-email"
+                        type="email"
+                        placeholder="your@email.com"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className="dark:bg-gray-700 dark:border-gray-600"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="login-password">Password</Label>
+                      <Input
+                        id="login-password"
+                        type="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        className="dark:bg-gray-700 dark:border-gray-600"
+                      />
+                    </div>
+                    <Button
+                      onClick={handleEmailLogin}
+                      disabled={isLoadingAuth}
+                      className="w-full bg-primary-purple hover:bg-primary-purple/90 text-white"
+                    >
+                      {isLoadingAuth && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                      Login
+                    </Button>
+                  </TabsContent>
+                  <TabsContent value="signup" className="space-y-3">
+                    <div className="space-y-2">
+                      <Label htmlFor="signup-username">Username</Label>
+                      <Input
+                        id="signup-username"
+                        type="text"
+                        placeholder="Choose a username"
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)}
+                        className="dark:bg-gray-700 dark:border-gray-600"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="signup-email">Email</Label>
+                      <Input
+                        id="signup-email"
+                        type="email"
+                        placeholder="your@email.com"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className="dark:bg-gray-700 dark:border-gray-600"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="signup-password">Password</Label>
+                      <Input
+                        id="signup-password"
+                        type="password"
+                        placeholder="Min 6 characters"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        className="dark:bg-gray-700 dark:border-gray-600"
+                      />
+                    </div>
+                    <Button
+                      onClick={handleEmailSignup}
+                      disabled={isLoadingAuth}
+                      className="w-full bg-primary-purple hover:bg-primary-purple/90 text-white"
+                    >
+                      {isLoadingAuth && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                      Create Account
+                    </Button>
+                  </TabsContent>
+                </Tabs>
               </TabsContent>
             </Tabs>
           </DialogContent>