Skip to content

Commit 758798b

Browse files
izadoesdevizadoesdev
committed
cleanup
1 parent e6c867a commit 758798b

File tree

1 file changed

+173
-93
lines changed
  • apps/dashboard/app/integrations/vercel/callback

1 file changed

+173
-93
lines changed

‎apps/dashboard/app/integrations/vercel/callback/page.tsx‎

Lines changed: 173 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
'use client';
22

3-
import { authClient } from '@databuddy/auth/client';
4-
import { SpinnerIcon } from '@phosphor-icons/react';
3+
import { authClient, useSession } from '@databuddy/auth/client';
4+
import {
5+
CheckCircleIcon,
6+
LinkIcon,
7+
SpinnerIcon,
8+
UserIcon,
9+
WarningCircleIcon,
10+
} from '@phosphor-icons/react';
511
import { useRouter, useSearchParams } from 'next/navigation';
612
import { Suspense, useEffect, useState } from 'react';
713
import { toast } from 'sonner';
14+
import { Button } from '@/components/ui/button';
15+
import { Card, CardContent } from '@/components/ui/card';
816

917
function VercelCallbackContent() {
1018
const router = useRouter();
1119
const searchParams = useSearchParams();
20+
const { data: session } = useSession();
1221
const [isProcessing, setIsProcessing] = useState(true);
1322
const [integrationData, setIntegrationData] = useState<{
1423
configurationId?: string;
@@ -79,115 +88,186 @@ function VercelCallbackContent() {
7988

8089
if (error) {
8190
return (
82-
<div className="flex min-h-screen items-center justify-center bg-background p-4">
83-
<div className="w-full max-w-md rounded border border-destructive/20 bg-destructive/5 p-6 text-center">
84-
<div className="mb-4 text-4xl text-destructive">⚠️</div>
85-
<h1 className="mb-2 font-semibold text-destructive text-lg">
86-
Integration Failed
87-
</h1>
88-
<p className="mb-4 text-muted-foreground text-sm">{error}</p>
89-
<button
90-
className="rounded bg-primary px-4 py-2 font-medium text-primary-foreground hover:bg-primary/90"
91-
onClick={handleCancel}
92-
type="button"
93-
>
94-
Go Back to Dashboard
95-
</button>
91+
<div className="mx-auto flex min-h-screen max-w-[1600px] flex-col p-3 sm:p-4 lg:p-6">
92+
<div className="flex flex-1 items-center justify-center">
93+
<div className="w-full max-w-md">
94+
<Card className="border-destructive border-l-4 bg-destructive/5">
95+
<CardContent className="p-6 text-center">
96+
<div className="mb-4 flex justify-center">
97+
<WarningCircleIcon className="h-12 w-12 text-destructive" />
98+
</div>
99+
<h1 className="mb-2 font-medium text-destructive text-lg">
100+
Integration Failed
101+
</h1>
102+
<p className="mb-4 text-muted-foreground text-sm">{error}</p>
103+
<Button onClick={handleCancel} type="button">
104+
Go Back to Dashboard
105+
</Button>
106+
</CardContent>
107+
</Card>
108+
</div>
96109
</div>
97110
</div>
98111
);
99112
}
100113

101114
if (isProcessing && !integrationData) {
102115
return (
103-
<div className="flex min-h-screen items-center justify-center bg-background">
104-
<div className="text-center">
105-
<div className="relative mb-4">
106-
<div className="absolute inset-0 animate-ping rounded-full bg-primary/20 blur-xl" />
107-
<SpinnerIcon className="relative mx-auto h-8 w-8 animate-spin text-primary" />
116+
<div className="mx-auto flex min-h-screen max-w-[1600px] flex-col p-3 sm:p-4 lg:p-6">
117+
<div className="flex flex-1 items-center justify-center">
118+
<div className="text-center">
119+
<div className="relative mb-4">
120+
<div className="absolute inset-0 animate-ping rounded-full bg-primary/20 blur-xl" />
121+
<SpinnerIcon className="relative mx-auto h-8 w-8 animate-spin text-primary" />
122+
</div>
123+
<h1 className="mb-2 font-medium text-lg">
124+
Processing integration...
125+
</h1>
126+
<p className="text-muted-foreground text-sm">
127+
Please wait while we verify your request.
128+
</p>
108129
</div>
109-
<h1 className="mb-2 font-semibold text-lg">
110-
Processing integration...
111-
</h1>
112-
<p className="text-muted-foreground text-sm">
113-
Please wait while we verify your request.
114-
</p>
115130
</div>
116131
</div>
117132
);
118133
}
119134

120135
return (
121-
<div className="flex min-h-screen items-center justify-center bg-background p-4">
122-
<div className="w-full max-w-lg rounded border bg-card p-6 shadow-lg">
123-
<div className="mb-6 text-center">
124-
<div className="mb-4 text-6xl">🔗</div>
125-
<h1 className="mb-2 font-bold text-2xl">Connect Vercel Account</h1>
126-
<p className="text-muted-foreground">
127-
You're about to connect your Vercel account to Databuddy
128-
</p>
129-
</div>
130-
131-
<div className="mb-6 space-y-3 rounded bg-muted/50 p-4">
132-
<h3 className="font-medium text-sm">Integration Details:</h3>
133-
{integrationData?.configurationId && (
134-
<div className="flex justify-between text-sm">
135-
<span className="text-muted-foreground">Configuration ID:</span>
136-
<span className="font-mono text-xs">
137-
{integrationData.configurationId}
138-
</span>
139-
</div>
140-
)}
141-
{integrationData?.teamId && (
142-
<div className="flex justify-between text-sm">
143-
<span className="text-muted-foreground">Team ID:</span>
144-
<span className="font-mono text-xs">
145-
{integrationData.teamId}
146-
</span>
136+
<div className="mx-auto flex min-h-screen max-w-[1600px] flex-col p-3 sm:p-4 lg:p-6">
137+
<div className="flex flex-1 items-center justify-center">
138+
<div className="w-full max-w-lg space-y-6">
139+
{/* Header */}
140+
<div className="text-center">
141+
<div className="mb-4 flex justify-center">
142+
<LinkIcon className="h-12 w-12 text-primary" />
147143
</div>
148-
)}
149-
<div className="flex justify-between text-sm">
150-
<span className="text-muted-foreground">Provider:</span>
151-
<span>Vercel</span>
144+
<h1 className="mb-2 font-medium text-2xl">
145+
Connect Vercel Account
146+
</h1>
147+
<p className="text-muted-foreground text-sm">
148+
You're about to connect your Vercel account to Databuddy
149+
</p>
152150
</div>
153-
</div>
154151

155-
<div className="mb-6 rounded border-blue-500 border-l-4 bg-blue-50 p-4 dark:bg-blue-950/20">
156-
<h4 className="mb-2 font-medium text-blue-800 text-sm dark:text-blue-200">
157-
What this integration will do:
158-
</h4>
159-
<ul className="space-y-1 text-blue-700 text-sm dark:text-blue-300">
160-
<li>• Access your Vercel projects and deployments</li>
161-
<li>• Monitor deployment analytics</li>
162-
<li>• Sync project data with Databuddy</li>
163-
<li>• Enable deployment notifications</li>
164-
</ul>
165-
</div>
152+
{/* Current User Account Info */}
153+
<Card className="border-primary border-l-4 bg-primary/5">
154+
<CardContent className="p-4">
155+
<h4 className="mb-3 flex items-center gap-2 font-medium text-primary text-sm">
156+
<UserIcon className="h-4 w-4" />
157+
Connecting to your Databuddy account
158+
</h4>
159+
<div className="space-y-2">
160+
<div className="flex items-center gap-3">
161+
{session?.user?.image ? (
162+
<img
163+
alt={session?.user?.name || 'User'}
164+
className="h-8 w-8 rounded-full"
165+
src={session.user.image}
166+
/>
167+
) : (
168+
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 font-medium text-primary text-sm">
169+
{session?.user?.name?.[0]?.toUpperCase() || 'U'}
170+
</div>
171+
)}
172+
<div>
173+
<div className="font-medium text-sm">
174+
{session?.user?.name || 'Unknown User'}
175+
</div>
176+
<div className="text-muted-foreground text-xs">
177+
{session?.user?.email || 'No email available'}
178+
</div>
179+
</div>
180+
</div>
181+
</div>
182+
</CardContent>
183+
</Card>
184+
185+
{/* Integration Details */}
186+
<Card>
187+
<CardContent className="p-4">
188+
<h3 className="mb-3 font-medium text-sm">Integration Details</h3>
189+
<div className="space-y-2">
190+
{integrationData?.configurationId && (
191+
<div className="flex justify-between text-sm">
192+
<span className="text-muted-foreground">
193+
Configuration ID:
194+
</span>
195+
<span className="font-mono text-xs">
196+
{integrationData.configurationId}
197+
</span>
198+
</div>
199+
)}
200+
{integrationData?.teamId && (
201+
<div className="flex justify-between text-sm">
202+
<span className="text-muted-foreground">Team ID:</span>
203+
<span className="font-mono text-xs">
204+
{integrationData.teamId}
205+
</span>
206+
</div>
207+
)}
208+
<div className="flex justify-between text-sm">
209+
<span className="text-muted-foreground">Provider:</span>
210+
<span className="font-medium">Vercel</span>
211+
</div>
212+
</div>
213+
</CardContent>
214+
</Card>
166215

167-
<div className="flex gap-3">
168-
<button
169-
className="flex-1 rounded border border-input bg-background px-4 py-2 font-medium hover:bg-accent hover:text-accent-foreground"
170-
disabled={isProcessing}
171-
onClick={handleCancel}
172-
type="button"
173-
>
174-
Cancel
175-
</button>
176-
<button
177-
className="flex-1 rounded bg-primary px-4 py-2 font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
178-
disabled={isProcessing}
179-
onClick={handleConfirmIntegration}
180-
type="button"
181-
>
182-
{isProcessing ? (
183-
<>
184-
<SpinnerIcon className="mr-2 inline h-4 w-4 animate-spin" />
185-
Connecting...
186-
</>
187-
) : (
188-
'Connect Account'
189-
)}
190-
</button>
216+
{/* Permissions */}
217+
<Card className="border-accent border-l-4 bg-accent/5">
218+
<CardContent className="p-4">
219+
<h4 className="mb-3 flex items-center gap-2 font-medium text-accent-foreground text-sm">
220+
<CheckCircleIcon className="h-4 w-4" />
221+
What this integration will do
222+
</h4>
223+
<ul className="space-y-2">
224+
<li className="flex items-center gap-3 text-sm">
225+
<CheckCircleIcon className="h-4 w-4 text-accent" />
226+
<span>Access your Vercel projects and deployments</span>
227+
</li>
228+
<li className="flex items-center gap-3 text-sm">
229+
<CheckCircleIcon className="h-4 w-4 text-accent" />
230+
<span>Monitor deployment analytics</span>
231+
</li>
232+
<li className="flex items-center gap-3 text-sm">
233+
<CheckCircleIcon className="h-4 w-4 text-accent" />
234+
<span>Sync project data with Databuddy</span>
235+
</li>
236+
<li className="flex items-center gap-3 text-sm">
237+
<CheckCircleIcon className="h-4 w-4 text-accent" />
238+
<span>Enable deployment notifications</span>
239+
</li>
240+
</ul>
241+
</CardContent>
242+
</Card>
243+
244+
{/* Actions */}
245+
<div className="flex gap-3">
246+
<Button
247+
className="flex-1"
248+
disabled={isProcessing}
249+
onClick={handleCancel}
250+
type="button"
251+
variant="outline"
252+
>
253+
Cancel
254+
</Button>
255+
<Button
256+
className="flex-1"
257+
disabled={isProcessing}
258+
onClick={handleConfirmIntegration}
259+
type="button"
260+
>
261+
{isProcessing ? (
262+
<>
263+
<SpinnerIcon className="mr-2 h-4 w-4 animate-spin" />
264+
Connecting...
265+
</>
266+
) : (
267+
'Connect Account'
268+
)}
269+
</Button>
270+
</div>
191271
</div>
192272
</div>
193273
</div>

0 commit comments

Comments
 (0)