Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/llms-txt-hub / apps/web/app/settings/integrations/page.tsx |
| Date | Not specified in source |
| Repository | Janady13/llms-txt-hub |
| Revision | e0f4bf978d4df168369c7601d9c5f5ea89e84377 |
| Branch | main |
| Path or archive member | apps/web/app/settings/integrations/page.tsx |
| Original SHA-256 | 764bbd75745285c4870bdd4cf949030ca1b4b9512fd9cfb42afffc810b4c0373 |
| Git blob SHA | 261e13545e196611fcbf0f55475b60926f5da19b |
| Reading-copy SHA-256 | 764bbd75745285c4870bdd4cf949030ca1b4b9512fd9cfb42afffc810b4c0373 |
Recovered source transcript
Download complete source text ↓235 lines · 9.5 KB
'use client'
import { useAuth } from '@thedaviddias/auth'
import { Badge } from '@thedaviddias/design-system/badge'
import { Button } from '@thedaviddias/design-system/button'
import { AlertTriangle, CheckCircle, ExternalLink, Github } from 'lucide-react'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
import { Card } from '@/components/ui/card'
import { analytics } from '@/lib/analytics'
export default function IntegrationsSettingsPage() {
const { user } = useAuth()
const [isDisconnecting, setIsDisconnecting] = useState(false)
useEffect(() => {
analytics.settingsPageView('integrations', 'settings')
}, [])
const hasGitHubAuth =
user && (user.user_metadata?.github_username || user.user_metadata?.user_name)
const githubUsername = user?.user_metadata?.user_name || user?.user_metadata?.github_username
/**
* Handles disconnecting the user's GitHub account
*/
const handleDisconnectGitHub = async () => {
analytics.disconnectService('github', 'settings-integrations')
if (
!confirm(
'Are you sure you want to disconnect your GitHub account? You will lose access to premium features.'
)
) {
analytics.accountDeleteCancel('settings-integrations-disconnect')
return
}
setIsDisconnecting(true)
try {
// Implementation would handle GitHub disconnection
toast.info('GitHub disconnection not yet implemented')
} catch (_error) {
toast.error('Failed to disconnect GitHub account')
} finally {
setIsDisconnecting(false)
}
}
return (
<div className="space-y-8">
<div>
<h2 className="text-2xl font-bold mb-2">Integrations</h2>
<p className="text-muted-foreground">
Connect external services to enhance your experience
</p>
</div>
{/* GitHub Integration */}
<Card className="p-6">
<div className="flex items-start justify-between mb-6">
<div className="flex items-center space-x-4">
<div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
<Github className="w-6 h-6 text-gray-600 dark:text-gray-400" />
</div>
<div>
<h3 className="text-lg font-semibold">GitHub</h3>
<p className="text-sm text-muted-foreground">
Connect your GitHub account for enhanced features
</p>
</div>
</div>
{hasGitHubAuth ? (
<Badge
variant="default"
className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
>
<CheckCircle className="w-3 h-3 mr-1" />
Connected
</Badge>
) : (
<Badge variant="secondary">Not Connected</Badge>
)}
</div>
{hasGitHubAuth ? (
<div className="space-y-6">
{/* Connected Account Info */}
<div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
<div className="flex items-start space-x-3">
<CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
<div>
<h4 className="font-medium text-green-900 dark:text-green-100">
GitHub Connected
</h4>
<p className="text-sm text-green-800 dark:text-green-200 mt-1">
Connected as <span className="font-mono">@{githubUsername}</span>
</p>
</div>
</div>
</div>
{/* Active Features */}
<div>
<h4 className="font-medium mb-3">Active Features</h4>
<div className="space-y-3">
<div className="flex items-center justify-between p-3 bg-muted rounded-lg">
<div className="flex items-center space-x-3">
<div className="w-2 h-2 bg-green-500 rounded-full" />
<div>
<div className="text-sm font-medium">Direct Project Submission</div>
<div className="text-xs text-muted-foreground">
Create pull requests under your GitHub account
</div>
</div>
</div>
<Badge variant="secondary">Active</Badge>
</div>
<div className="flex items-center justify-between p-3 bg-muted rounded-lg">
<div className="flex items-center space-x-3">
<div className="w-2 h-2 bg-green-500 rounded-full" />
<div>
<div className="text-sm font-medium">Contributor Profile</div>
<div className="text-xs text-muted-foreground">
Public profile with your GitHub contributions
</div>
</div>
</div>
<div className="flex items-center space-x-2">
<Badge variant="secondary">Active</Badge>
{githubUsername && (
<Button
asChild
variant="ghost"
size="sm"
className="h-6 px-2"
onClick={() =>
analytics.profileNavClick(`/u/${githubUsername}`, 'settings-integrations')
}
>
<Link href={`/u/${githubUsername}`} className="flex items-center">
<ExternalLink className="w-3 h-3" />
</Link>
</Button>
)}
</div>
</div>
<div className="flex items-center justify-between p-3 bg-muted rounded-lg">
<div className="flex items-center space-x-3">
<div className="w-2 h-2 bg-green-500 rounded-full" />
<div>
<div className="text-sm font-medium">Enhanced Authentication</div>
<div className="text-xs text-muted-foreground">Secure OAuth-based login</div>
</div>
</div>
<Badge variant="secondary">Active</Badge>
</div>
</div>
</div>
{/* Account Management */}
<div className="pt-6 border-t">
<h4 className="font-medium mb-3">Account Management</h4>
<div className="flex items-center justify-between p-4 border border-red-200 dark:border-red-800 rounded-lg">
<div className="flex items-start space-x-3">
<AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
<div>
<div className="font-medium text-red-900 dark:text-red-100">
Disconnect GitHub
</div>
<div className="text-sm text-red-800 dark:text-red-200 mt-1">
Remove GitHub integration and lose premium features
</div>
</div>
</div>
<Button
variant="destructive"
size="sm"
onClick={handleDisconnectGitHub}
disabled={isDisconnecting}
>
{isDisconnecting ? 'Disconnecting...' : 'Disconnect'}
</Button>
</div>
</div>
</div>
) : (
<div className="space-y-6">
{/* Benefits */}
<div>
<h4 className="font-medium mb-3">Benefits of Connecting GitHub</h4>
<div className="space-y-3">
<div className="flex items-center space-x-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<div className="w-2 h-2 bg-blue-500 rounded-full" />
<span className="text-sm">Submit projects directly through the platform</span>
</div>
<div className="flex items-center space-x-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<div className="w-2 h-2 bg-blue-500 rounded-full" />
<span className="text-sm">Get proper credit for your contributions</span>
</div>
<div className="flex items-center space-x-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<div className="w-2 h-2 bg-blue-500 rounded-full" />
<span className="text-sm">Showcase your contributions on your profile</span>
</div>
<div className="flex items-center space-x-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<div className="w-2 h-2 bg-blue-500 rounded-full" />
<span className="text-sm">Enhanced security with OAuth authentication</span>
</div>
</div>
</div>
{/* Connect Button */}
<div className="pt-4">
<Button
asChild
className="w-full sm:w-auto"
onClick={() => analytics.connectGitHub('settings-integrations', 'settings')}
>
<Link href="/auth/connect-github">
<Github className="w-4 h-4 mr-2" />
Connect GitHub Account
</Link>
</Button>
</div>
</div>
)}
</Card>
</div>
)
}