fait la mise a jour du webhook GitHub.

et aussi fait la mise a jour pou

Author: softpython2884

src/app/(app)/profile/page.tsx

@@ -15,7 +15,7 @@ import * as z from 'zod';
 import { useEffect, useState, useActionState, startTransition } from 'react'; // Corrected import
 import { useToast } from '@/hooks/use-toast';
 import * as authService from '@/lib/authService';
-import { fetchUserGithubOAuthTokenAction, disconnectGithubAction, fetchGithubUserDetailsAction } from '@/app/(app)/projects/[id]/actions'; 
+import { fetchUserGithubOAuthTokenAction, disconnectGithubAction, fetchGithubUserDetailsAction, fetchDiscordUserDetailsAction, disconnectDiscordAction } from '@/app/(app)/projects/[id]/actions'; 
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
@@ -36,6 +36,14 @@ interface GithubUserDetails {
   name: string | null;
 }
 
+interface DiscordUserDetails {
+    id: string;
+    username: string;
+    avatar: string | null;
+    discriminator: string;
+}
+
+
 export default function ProfilePage() {
   const { user, isLoading: authLoading, refreshUser } = useAuth();
   const router = useRouter();
@@ -47,7 +55,11 @@ export default function ProfilePage() {
   const [githubUserDetails, setGithubUserDetails] = useState<GithubUserDetails | null>(null);
   const [isLoadingGithub, setIsLoadingGithub] = useState(true);
 
-  const [disconnectState, disconnectFormAction, isDisconnectPending] = useActionState(disconnectGithubAction, { success: false });
+  const [discordUserDetails, setDiscordUserDetails] = useState<DiscordUserDetails | null>(null);
+  const [isLoadingDiscord, setIsLoadingDiscord] = useState(true);
+
+  const [disconnectGithubState, disconnectGithubFormAction, isDisconnectGithubPending] = useActionState(disconnectGithubAction, { success: false });
+  const [disconnectDiscordState, disconnectDiscordFormAction, isDisconnectDiscordPending] = useActionState(disconnectDiscordAction, { success: false });
 
 
   const form = useForm<ProfileFormValues>({
@@ -70,9 +82,11 @@ export default function ProfilePage() {
   }, [user, form]);
 
   useEffect(() => {
-    async function loadGithubData() {
+    async function loadExternalData() {
       if (user) {
         setIsLoadingGithub(true);
+        setIsLoadingDiscord(true);
+
         const tokenData = await fetchUserGithubOAuthTokenAction();
         if (tokenData?.accessToken) {
           setGithubToken(tokenData.accessToken);
@@ -83,22 +97,37 @@ export default function ProfilePage() {
           setGithubUserDetails(null);
         }
         setIsLoadingGithub(false);
+        
+        const discordDetails = await fetchDiscordUserDetailsAction();
+        setDiscordUserDetails(discordDetails);
+        setIsLoadingDiscord(false);
       }
     }
-    if (!authLoading) loadGithubData();
+    if (!authLoading) loadExternalData();
   }, [user, authLoading]);
 
   useEffect(() => {
-    if (!isDisconnectPending && disconnectState) {
-      if (disconnectState.success && disconnectState.message) { // Check for message
-        toast({ title: "Success", description: disconnectState.message });
+    if (!isDisconnectGithubPending && disconnectGithubState) {
+      if (disconnectGithubState.success && disconnectGithubState.message) {
+        toast({ title: "Success", description: disconnectGithubState.message });
         setGithubToken(null);
         setGithubUserDetails(null);
-      } else if (disconnectState.error) {
-        toast({ variant: "destructive", title: "Error", description: disconnectState.error });
+      } else if (disconnectGithubState.error) {
+        toast({ variant: "destructive", title: "Error", description: disconnectGithubState.error });
       }
     }
-  }, [disconnectState, isDisconnectPending, toast]);
+  }, [disconnectGithubState, isDisconnectGithubPending, toast]);
+
+  useEffect(() => {
+    if (!isDisconnectDiscordPending && disconnectDiscordState) {
+        if (disconnectDiscordState.success && disconnectDiscordState.message) {
+            toast({ title: "Success", description: disconnectDiscordState.message });
+            setDiscordUserDetails(null);
+        } else if (disconnectDiscordState.error) {
+            toast({ variant: "destructive", title: "Error", description: disconnectDiscordState.error });
+        }
+    }
+  }, [disconnectDiscordState, isDisconnectDiscordPending, toast]);
 
 
   if (authLoading) {
@@ -167,17 +196,27 @@ export default function ProfilePage() {
   };
 
   const handleConnectGitHub = () => {
-    // Redirect to the GitHub OAuth login flow
     window.location.href = `/api/auth/github/oauth/login?redirectTo=/profile`;
   };
 
   const handleDisconnectGitHub = () => {
-     const dummyFormData = new FormData(); // useActionState requires FormData
-     startTransition(() => { // Corrected usage
-        disconnectFormAction(dummyFormData);
+     const dummyFormData = new FormData();
+     startTransition(() => {
+        disconnectGithubFormAction(dummyFormData);
      });
   };
 
+  const handleConnectDiscord = () => {
+    window.location.href = `/api/auth/discord/oauth/login?redirectTo=/profile`;
+  };
+
+  const handleDisconnectDiscord = () => {
+      const dummyFormData = new FormData();
+      startTransition(() => {
+          disconnectDiscordFormAction(dummyFormData);
+      });
+  };
+
 
   return (
     <div className="space-y-8">
@@ -243,8 +282,9 @@ export default function ProfilePage() {
                          {githubUserDetails && <Avatar className="h-5 w-5 inline-block"><AvatarImage src={githubUserDetails.avatar_url} /></Avatar>}
                       </div>
                       <div className="flex items-center space-x-2">
-                        <RadioGroupItem value="discord" id="r-discord" disabled />
-                        <Label htmlFor="r-discord" className="text-muted-foreground">Use Discord Profile Picture</Label>
+                        <RadioGroupItem value="discord" id="r-discord" disabled={!discordUserDetails} />
+                        <Label htmlFor="r-discord" className={!discordUserDetails ? "text-muted-foreground" : ""}>Use Discord Profile Picture</Label>
+                        {discordUserDetails?.avatar && <Avatar className="h-5 w-5 inline-block"><AvatarImage src={`https://cdn.discordapp.com/avatars/${discordUserDetails.id}/${discordUserDetails.avatar}.png`} /></Avatar>}
                       </div>
                    </RadioGroup>
                 </Card>
@@ -324,8 +364,8 @@ export default function ProfilePage() {
               {isLoadingGithub ? (
                  <Skeleton className="h-9 w-24" />
               ) : githubToken ? (
-                <Button variant="outline" onClick={handleDisconnectGitHub} disabled={isDisconnectPending}>
-                  {isDisconnectPending ? <Loader2 className="h-4 w-4 animate-spin mr-2"/> : <PowerOff className="mr-2 h-4 w-4" />}
+                <Button variant="outline" onClick={handleDisconnectGitHub} disabled={isDisconnectGithubPending}>
+                  {isDisconnectGithubPending ? <Loader2 className="h-4 w-4 animate-spin mr-2"/> : <PowerOff className="mr-2 h-4 w-4" />}
                   Disconnect
                 </Button>
               ) : (
@@ -336,19 +376,42 @@ export default function ProfilePage() {
             </div>
           </Card>
 
-          {/* Discord Connection (Placeholder) */}
+          {/* Discord Connection */}
            <Card className="p-4 bg-muted/30">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-3">
                 <MessageSquare className="h-8 w-8 text-indigo-500" />
                 <div>
                   <h4 className="font-semibold">Discord</h4>
-                  <p className="text-sm text-muted-foreground">Connect to receive notifications (Coming Soon).</p>
+                  {isLoadingDiscord ? (
+                      <Skeleton className="h-4 w-32 mt-1" />
+                  ) : discordUserDetails ? (
+                     <div className="text-sm text-muted-foreground">
+                        Connected as: <span className="font-medium text-primary">{discordUserDetails.username}#{discordUserDetails.discriminator}</span>
+                        {discordUserDetails.avatar && (
+                            <Avatar className="h-5 w-5 inline-block ml-2 align-middle">
+                                <AvatarImage src={`https://cdn.discordapp.com/avatars/${discordUserDetails.id}/${discordUserDetails.avatar}.png`} alt={discordUserDetails.username} data-ai-hint="discord avatar" />
+                                <AvatarFallback>{getInitials(discordUserDetails.username)}</AvatarFallback>
+                            </Avatar>
+                        )}
+                     </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">Not Connected. Connect to enable DM notifications.</p>
+                  )}
                 </div>
               </div>
-              <Button disabled>
-                <MessageSquare className="mr-2 h-4 w-4" /> Connect (Soon)
-              </Button>
+               {isLoadingDiscord ? (
+                 <Skeleton className="h-9 w-24" />
+              ) : discordUserDetails ? (
+                <Button variant="outline" onClick={handleDisconnectDiscord} disabled={isDisconnectDiscordPending}>
+                  {isDisconnectDiscordPending ? <Loader2 className="h-4 w-4 animate-spin mr-2"/> : <PowerOff className="mr-2 h-4 w-4" />}
+                  Disconnect
+                </Button>
+              ) : (
+                <Button onClick={handleConnectDiscord}>
+                  <MessageSquare className="mr-2 h-4 w-4" /> Connect
+                </Button>
+              )}
             </div>
           </Card>
         </CardContent>

src/app/(app)/projects/[id]/page.tsx

@@ -62,6 +62,8 @@ import {
   type UpdateProjectDiscordSettingsFormState,
   deleteProjectAction,
   type DeleteProjectFormState,
+  setupGithubWebhookAction,
+  type SetupGithubWebhookFormState,
 } from './actions';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -345,6 +347,7 @@ function ProjectDetailPageContent() {
   const [linkGithubState, linkProjectToGithubFormAction, isLinkGithubPending] = useActionState(linkProjectToGithubAction, { message: "", error: "" });
   const [updateDiscordSettingsState, updateDiscordSettingsFormAction, isUpdateDiscordSettingsPending] = useActionState(updateProjectDiscordSettingsAction, { message: "", error: "" });
   const [deleteProjectState, deleteProjectFormAction, isDeleteProjectPending] = useActionState(deleteProjectAction, {success: false});
+  const [setupWebhookState, setupGithubWebhookFormAction, isSetupWebhookPending] = useActionState(setupGithubWebhookAction, { success: false });
 
 
   const loadTasks = useCallback(async () => {
@@ -763,6 +766,20 @@ function ProjectDetailPageContent() {
     }
   }, [deleteProjectState, isDeleteProjectPending, toast, router]);
 
+  useEffect(() => {
+    if (!isSetupWebhookPending && setupWebhookState) {
+      if (setupWebhookState.success) {
+        toast({ title: "Success", description: setupWebhookState.message });
+        if (setupWebhookState.project) {
+            setProject(setupWebhookState.project);
+        }
+      }
+      if (setupWebhookState.error) {
+        toast({ variant: 'destructive', title: 'Webhook Error', description: setupWebhookState.error });
+      }
+    }
+  }, [setupWebhookState, isSetupWebhookPending, toast]);
+
 
   useEffect(() => {
     if (project) {
@@ -1255,6 +1272,15 @@ function ProjectDetailPageContent() {
     });
   };
 
+  const handleSetupWebhook = () => {
+    if (!project) return;
+    const formData = new FormData();
+    formData.append('projectUuid', project.uuid);
+    startTransition(() => {
+      setupGithubWebhookFormAction(formData);
+    });
+  };
+
   const copyToClipboard = (text: string, type: string) => {
     navigator.clipboard.writeText(text);
     toast({ title: `${type} Copied!`, description: `${type} URL copied to clipboard.` });
@@ -2203,14 +2229,15 @@ function ProjectDetailPageContent() {
                         <CardTitle className="flex items-center"><GitBranch className="mr-2 h-5 w-5"/>Activity Logs</CardTitle>
                         <CardDescription>View recent commits and activity from the linked GitHub repository.</CardDescription>
                       </div>
-                      <Button variant="outline" size="sm" disabled>
-                        <Github className="mr-2 h-4 w-4" /> Setup Webhook (Coming Soon)
+                      <Button variant="outline" size="sm" onClick={handleSetupWebhook} disabled={!project.githubRepoUrl || !!project.githubWebhookId || isSetupWebhookPending || !canManageCodeSpace}>
+                        {isSetupWebhookPending && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
+                        {project.githubWebhookId ? <><CheckCircle className="h-4 w-4 mr-2 text-green-500" />Webhook Active</> : <><Github className="mr-2 h-4 w-4" />Setup Webhook</>}
                       </Button>
                     </CardHeader>
                     <CardContent className="text-center py-8 text-muted-foreground border-dashed border-2 rounded-md m-6">
                         <Terminal className="mx-auto h-12 w-12 opacity-50 mb-3" />
                         <p className="font-medium">GitHub Webhook Integration</p>
-                        <p className="text-xs">This feature is planned for a future update. Once implemented, commit history will appear here.</p>
+                        <p className="text-xs">Once the webhook is set up, commit history will appear here.</p>
                     </CardContent>
                 </Card>
             </CardContent>

src/app/api/auth/discord/oauth/callback/route.ts

@@ -0,0 +1,104 @@
+
+import { type NextRequest, NextResponse } from 'next/server';
+import { auth } from '@/lib/authEdge';
+import { storeUserDiscordToken } from '@/lib/db';
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const code = searchParams.get('code');
+  const stateFromDiscord = searchParams.get('state');
+
+  const DISCORD_CLIENT_ID = process.env.DISCORD_CLIENT_ID;
+  const DISCORD_CLIENT_SECRET = process.env.DISCORD_CLIENT_SECRET;
+  const NEXT_PUBLIC_APP_URL = process.env.NEXT_PUBLIC_APP_URL;
+
+  if (!DISCORD_CLIENT_ID || !DISCORD_CLIENT_SECRET || !NEXT_PUBLIC_APP_URL) {
+    console.error('[Discord OAuth Callback] OAuth environment variables not configured.');
+    return NextResponse.redirect(new URL('/profile?error=oauth_config_error', request.url));
+  }
+
+  const storedStateCookie = request.cookies.get('discord_oauth_state');
+  request.cookies.delete('discord_oauth_state');
+
+  if (!storedStateCookie) {
+    console.error('[Discord OAuth Callback] Missing OAuth state cookie.');
+    return NextResponse.redirect(new URL('/profile?error=oauth_state_missing', request.url));
+  }
+
+  let storedStateData;
+  try {
+    storedStateData = JSON.parse(storedStateCookie.value);
+  } catch (e) {
+    console.error('[Discord OAuth Callback] Error parsing OAuth state cookie:', e);
+    return NextResponse.redirect(new URL('/profile?error=oauth_state_invalid_parse', request.url));
+  }
+  
+  if (!stateFromDiscord || stateFromDiscord !== storedStateData.csrf) {
+    console.error('[Discord OAuth Callback] OAuth state mismatch.');
+    return NextResponse.redirect(new URL('/profile?error=oauth_state_mismatch', request.url));
+  }
+
+  const session = await auth();
+  if (!session?.user?.uuid) {
+    console.error('[Discord OAuth Callback] No active FlowUp user session found.');
+    return NextResponse.redirect(new URL('/login?error=oauth_no_session', request.url));
+  }
+  
+  if (!code) {
+    const error = searchParams.get('error');
+    const errorDescription = searchParams.get('error_description');
+    return NextResponse.redirect(new URL(`/profile?error=oauth_missing_code&discord_error=${error || ''}&discord_desc=${errorDescription || ''}`, request.url));
+  }
+
+  try {
+    const tokenResponse = await fetch('https://discord.com/api/oauth2/token', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: new URLSearchParams({
+        client_id: DISCORD_CLIENT_ID,
+        client_secret: DISCORD_CLIENT_SECRET,
+        grant_type: 'authorization_code',
+        code,
+        redirect_uri: `${NEXT_PUBLIC_APP_URL}/api/auth/discord/oauth/callback`,
+      }),
+    });
+
+    if (!tokenResponse.ok) {
+        throw new Error(`Discord token exchange failed: ${await tokenResponse.text()}`);
+    }
+    const tokenData = await tokenResponse.json();
+
+    const userResponse = await fetch('https://discord.com/api/users/@me', {
+        headers: {
+            Authorization: `Bearer ${tokenData.access_token}`,
+        },
+    });
+
+    if (!userResponse.ok) {
+        throw new Error(`Failed to fetch Discord user details: ${await userResponse.text()}`);
+    }
+    const userData = await userResponse.json();
+    
+    await storeUserDiscordToken(session.user.uuid, {
+        accessToken: tokenData.access_token,
+        refreshToken: tokenData.refresh_token,
+        expiresAt: Date.now() + tokenData.expires_in * 1000,
+        scopes: tokenData.scope,
+        discordUserId: userData.id,
+        discordUsername: userData.username,
+        discordAvatar: userData.avatar,
+    });
+    
+    const redirectPath = storedStateData.redirectTo || '/profile';
+    const redirectUrlObj = new URL(redirectPath, request.nextUrl.origin);
+    redirectUrlObj.searchParams.set('discord_oauth_status', 'success');
+    
+    return NextResponse.redirect(redirectUrlObj);
+
+  } catch (error: any) {
+    console.error('[Discord OAuth Callback] Error:', error);
+    return NextResponse.redirect(new URL(`/profile?error=oauth_callback_error&message=${encodeURIComponent(error.message || 'Unknown error')}`, request.url));
+  }
+}