update error

2026-05-26 19:26:33 +00:00 · 2025-07-28 23:19:59 +05:30
parent 7f6531b097
commit 8816091e63
19 changed files with 4407 additions and 691 deletions
@@ -0,0 +1,155 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { 
+  User, Wallet, CheckCircle2, AlertCircle, 
+  Loader2, Sparkles, Shield 
+} from "lucide-react"
+import { toast } from "react-hot-toast"
+import api from "@/lib/api"
+
+interface UsernameSetupProps {
+  userProfile: {
+    user_id: string
+    wallet_address?: string
+    display_name?: string
+    username_set?: boolean
+    avatar_url?: string
+  }
+  onUsernameSet: (profile: any) => void
+}
+
+export function UsernameSetup({ userProfile, onUsernameSet }: UsernameSetupProps) {
+  const [username, setUsername] = useState("")
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleSubmitUsername = async () => {
+    if (!username.trim()) {
+      toast.error("Please enter a username")
+      return
+    }
+
+    if (username.length < 3) {
+      toast.error("Username must be at least 3 characters long")
+      return
+    }
+
+    setIsSubmitting(true)
+    
+    try {
+      let response
+      try {
+        response = await api.post("/api/dashboard/set-username", {
+          username: username.trim()
+        })
+      } catch (error) {
+        // Fallback to update-profile
+        response = await api.post("/api/dashboard/update-profile", {
+          display_name: username.trim()
+        })
+      }
+
+      if (response.success) {
+        toast.success(`Username "${username}" set successfully! 🎉`)
+        onUsernameSet(response.profile || { 
+          ...userProfile, 
+          display_name: username.trim(),
+          username_set: true 
+        })
+      } else {
+        toast.error(response.error || "Failed to set username")
+      }
+    } catch (error: any) {
+      console.error('Username setting error:', error)
+      toast.error("Failed to set username. Please try again.")
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const walletAddress = userProfile?.wallet_address || userProfile?.user_id
+
+  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">
+        <CardHeader className="text-center space-y-4">
+          <div className="mx-auto w-16 h-16 bg-gradient-to-br from-purple-500 to-blue-600 rounded-full flex items-center justify-center">
+            <User className="w-8 h-8 text-white" />
+          </div>
+          
+          <CardTitle className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
+            Welcome to OpenLearnX! 🎓
+          </CardTitle>
+          
+          <div className="bg-gradient-to-r from-purple-100 to-blue-100 dark:from-purple-900/30 dark:to-blue-900/30 p-4 rounded-lg">
+            <div className="flex items-center justify-center gap-2 mb-2">
+              <Wallet className="w-5 h-5 text-purple-600" />
+              <Badge variant="secondary" className="bg-purple-600 text-white">
+                MetaMask Connected
+              </Badge>
+            </div>
+            <p className="text-xs text-gray-600 dark:text-gray-400 font-mono break-all">
+              {walletAddress?.slice(0, 6)}...{walletAddress?.slice(-4)}
+            </p>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="username">Choose Your Username</Label>
+            <Input
+              id="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Enter your username"
+              maxLength={25}
+              disabled={isSubmitting}
+            />
+            
+            <div className="text-xs text-gray-500 space-y-1">
+              <p>• 3-25 characters</p>
+              <p>• Letters, numbers, and underscores recommended</p>
+            </div>
+          </div>
+
+          <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
+            <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2 flex items-center gap-2">
+              <Sparkles className="w-4 h-4" />
+              What you'll get:
+            </h4>
+            <ul className="text-sm text-blue-700 dark:text-blue-300 space-y-1">
+              <li>• Personalized learning dashboard</li>
+              <li>• Global leaderboard ranking</li>
+              <li>• Blockchain-verified achievements</li>
+              <li>• Community interaction</li>
+            </ul>
+          </div>
+
+          <Button
+            onClick={handleSubmitUsername}
+            disabled={!username.trim() || username.length < 3 || isSubmitting}
+            className="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700"
+          >
+            {isSubmitting ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Setting Username...
+              </>
+            ) : (
+              <>
+                <Shield className="w-4 h-4 mr-2" />
+                Set Username & Continue
+              </>
+            )}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}