harini

2026-05-26 19:26:33 +00:00 · 2025-07-25 23:58:20 +05:30
parent b70e81d201
commit 4d8061616d
112 changed files with 14445 additions and 59 deletions
@@ -0,0 +1,128 @@
+"use client"
+
+import { useState } from "react"
+import { useAuth } from "@/context/auth-context"
+import { Button } from "@/components/ui/button"
+import { Loader2 } from "lucide-react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+export function AuthButtons() {
+  const { user, firebaseUser, isLoadingAuth, authMethod, connectWallet, loginWithEmail, signupWithEmail, logout } =
+    useAuth()
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)
+
+  const handleEmailLogin = async () => {
+    await loginWithEmail(email, password)
+    setIsAuthModalOpen(false)
+  }
+
+  const handleEmailSignup = async () => {
+    await signupWithEmail(email, password)
+    setIsAuthModalOpen(false)
+  }
+
+  const displayAddress = user?.wallet_address || firebaseUser?.email || "Guest"
+
+  return (
+    <div className="flex items-center gap-4">
+      {authMethod ? (
+        <>
+          <span className="text-sm text-gray-600 dark:text-gray-300">
+            Connected:{" "}
+            {authMethod === "metamask" && user?.wallet_address
+              ? `${user.wallet_address.slice(0, 6)}...${user.wallet_address.slice(-4)}`
+              : authMethod === "firebase" && firebaseUser?.email
+                ? firebaseUser.email
+                : displayAddress}
+          </span>
+          <Button onClick={logout} variant="outline" disabled={isLoadingAuth}>
+            Logout
+          </Button>
+        </>
+      ) : (
+        <Dialog open={isAuthModalOpen} onOpenChange={setIsAuthModalOpen}>
+          <DialogTrigger asChild>
+            <Button disabled={isLoadingAuth}>
+              {isLoadingAuth && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Login / Sign Up
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-[425px] dark:bg-gray-900 dark:text-gray-100">
+            <DialogHeader>
+              <DialogTitle>Choose your authentication method</DialogTitle>
+            </DialogHeader>
+            <Tabs defaultValue="metamask" className="w-full">
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="metamask">MetaMask</TabsTrigger>
+                <TabsTrigger value="email">Email</TabsTrigger>
+              </TabsList>
+              <TabsContent value="metamask" className="space-y-4 p-4">
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Connect your MetaMask wallet for full access to courses, coding, and blockchain features.
+                </p>
+                <Button
+                  onClick={connectWallet}
+                  disabled={isLoadingAuth}
+                  className="w-full bg-primary-blue hover:bg-primary-blue/90 text-white"
+                >
+                  {isLoadingAuth && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  Connect MetaMask
+                </Button>
+              </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).
+                </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>
+              </TabsContent>
+            </Tabs>
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  )
+}