Janady13/llms-txt-hub / apps/web/app/auth/connect-github/page.tsx

1'use client' 2 3import { useAuth } from '@thedaviddias/auth' 4import { Button } from '@thedaviddias/design-system/button' 5import { logger } from '@thedaviddias/logging' 6import { ArrowLeft, CheckCircle, Github } from 'lucide-react' 7import Link from 'next/link' 8import { useRouter } from 'next/navigation' 9import { useEffect, useState } from 'react' 10import { toast } from 'sonner' 11import { Card } from '@/components/ui/card' 12 13/** 14 * Page for connecting a GitHub account to the user's profile 15 */ 16export default function ConnectGitHubPage() { 17 const { user, isLoaded } = useAuth() 18 const router = useRouter() 19 const [isConnecting, setIsConnecting] = useState(false) 20 21 // Check if user already has GitHub connected via OAuth 22 const hasGitHubAuth = user?.externalAccounts?.some(account => account.provider === 'oauth_github') 23 24 useEffect(() => { 25 if (!isLoaded) return 26 27 // If user doesn't exist, redirect to login 28 if (!user) { 29 router.push('/login?redirect=/auth/connect-github') 30 return 31 } 32 33 // If user already has GitHub, redirect to profile 34 if (hasGitHubAuth) { 35 router.push('/profile?message=GitHub account already connected') 36 return 37 } 38 }, [isLoaded, user, hasGitHubAuth, router]) 39 40 /** 41 * Initiates the GitHub account connection flow 42 */ 43 const handleConnectGitHub = async () => { 44 setIsConnecting(true) 45 46 try { 47 // Redirect to login with GitHub to connect account 48 window.location.href = 49 '/login?provider=github&redirect=/profile?message=GitHub account connected successfully' 50 } catch (error) { 51 logger.error(error instanceof Error ? error : new Error(String(error)), { 52 data: error, 53 tags: { type: 'page', page: 'connect-github' } 54 }) 55 toast.error('Failed to connect GitHub account. Please try again.') 56 setIsConnecting(false) 57 } 58 } 59 60 // Loading state while checking user 61 if (!user) { 62 return ( 63 <div className="container mx-auto px-4 py-8"> 64 <div className="max-w-md mx-auto"> 65 <div className="text-center py-12"> 66 <div className="text-gray-500 dark:text-gray-400">Loading...</div> 67 </div> 68 </div> 69 </div> 70 ) 71 } 72 73 // Already connected state 74 if (hasGitHubAuth) { 75 return ( 76 <div className="container mx-auto px-4 py-8"> 77 <div className="max-w-md mx-auto space-y-6"> 78 <Card className="p-8 text-center space-y-6"> 79 <div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto"> 80 <CheckCircle className="w-8 h-8 text-green-600 dark:text-green-400" /> 81 </div> 82 83 <div> 84 <h1 className="text-2xl font-bold mb-2">GitHub Connected!</h1> 85 <p className="text-gray-600 dark:text-gray-400"> 86 Your GitHub account is already connected to your profile. 87 </p> 88 </div> 89 90 <div className="space-y-3"> 91 <Button asChild className="w-full"> 92 <Link href="/profile">View Profile</Link> 93 </Button> 94 95 <Button asChild variant="outline" className="w-full"> 96 <Link href="/submit">Submit Project</Link> 97 </Button> 98 </div> 99 </Card> 100 </div> 101 </div> 102 ) 103 } 104 105 return ( 106 <div className="container mx-auto px-4 py-8"> 107 <div className="max-w-md mx-auto space-y-6"> 108 {/* Back button */} 109 <Button asChild variant="outline" size="sm"> 110 <Link href="/profile" className="inline-flex items-center"> 111 <ArrowLeft className="w-4 h-4 mr-2" /> 112 Back to Profile 113 </Link> 114 </Button> 115 116 <Card className="p-8 text-center space-y-6"> 117 <div className="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto"> 118 <Github className="w-8 h-8 text-gray-600 dark:text-gray-400" /> 119 </div> 120 121 <div> 122 <h1 className="text-2xl font-bold mb-2">Connect Your GitHub Account</h1> 123 <p className="text-gray-600 dark:text-gray-400"> 124 Upgrade your account to unlock direct project submissions and get proper credit for 125 your contributions. 126 </p> 127 </div> 128 129 <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 text-left"> 130 <h3 className="font-semibold text-blue-900 dark:text-blue-100 mb-2"> 131 Benefits of connecting GitHub: 132 </h3> 133 <ul className="space-y-1 text-sm text-blue-800 dark:text-blue-200"> 134 <li className="flex items-center"> 135 <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mr-2" /> 136 Create pull requests under your GitHub account 137 </li> 138 <li className="flex items-center"> 139 <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mr-2" /> 140 Get proper attribution for your contributions 141 </li> 142 <li className="flex items-center"> 143 <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mr-2" /> 144 Faster submission process 145 </li> 146 <li className="flex items-center"> 147 <div className="w-1.5 h-1.5 bg-blue-600 rounded-full mr-2" /> 148 Access to contributor features 149 </li> 150 </ul> 151 </div> 152 153 <div className="space-y-3"> 154 <Button onClick={handleConnectGitHub} disabled={isConnecting} className="w-full"> 155 <Github className="w-4 h-4 mr-2" /> 156 {isConnecting ? 'Connecting...' : 'Connect GitHub Account'} 157 </Button> 158 159 <p className="text-xs text-gray-500 dark:text-gray-400"> 160 This will merge your accounts. You'll keep your existing profile and data. 161 </p> 162 </div> 163 </Card> 164 </div> 165 </div> 166 ) 167} 168