1. ta des boucle d'api :

  38 |     console.log('[authEdge.auth] No aut

Author: softpython2884

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

@@ -4,17 +4,21 @@
 import { useAuth } from '@/hooks/useAuth';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { User as UserIcon, Mail, Shield, Edit3, Image as ImageIcon } from 'lucide-react';
+import { User as UserIcon, Mail, Shield, Edit3, Image as ImageIcon, Github, Link2, PowerOff, ExternalLink, MessageSquare } from 'lucide-react';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useActionState, startTransition as ReactStartTransition } from 'react';
 import { useToast } from '@/hooks/use-toast';
-import * as authService from '@/lib/authService'; // Import server actions
+import * as authService from '@/lib/authService';
+import { fetchUserGithubOAuthTokenAction, disconnectGithubAction, fetchGithubUserDetailsAction } from '@/app/(app)/projects/[id]/actions'; // Re-using from project actions for now
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
 
 const profileFormSchema = z.object({
   name: z.string().min(2, { message: "Name must be at least 2 characters." }),
@@ -24,12 +28,27 @@ const profileFormSchema = z.object({
 
 type ProfileFormValues = z.infer<typeof profileFormSchema>;
 
+interface GithubUserDetails {
+  login: string;
+  avatar_url: string;
+  html_url: string;
+  name: string | null;
+}
+
 export default function ProfilePage() {
   const { user, isLoading: authLoading, refreshUser } = useAuth();
+  const router = useRouter();
   const [isEditing, setIsEditing] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { toast } = useToast();
 
+  const [githubToken, setGithubToken] = useState<string | null>(null);
+  const [githubUserDetails, setGithubUserDetails] = useState<GithubUserDetails | null>(null);
+  const [isLoadingGithub, setIsLoadingGithub] = useState(true);
+
+  const [disconnectState, disconnectFormAction, isDisconnectPending] = useActionState(disconnectGithubAction, { success: false });
+
+
   const form = useForm<ProfileFormValues>({
     resolver: zodResolver(profileFormSchema),
     defaultValues: {
@@ -49,6 +68,38 @@ export default function ProfilePage() {
     }
   }, [user, form]);
 
+  useEffect(() => {
+    async function loadGithubData() {
+      if (user) {
+        setIsLoadingGithub(true);
+        const tokenData = await fetchUserGithubOAuthTokenAction();
+        if (tokenData?.accessToken) {
+          setGithubToken(tokenData.accessToken);
+          const userDetails = await fetchGithubUserDetailsAction();
+          setGithubUserDetails(userDetails);
+        } else {
+          setGithubToken(null);
+          setGithubUserDetails(null);
+        }
+        setIsLoadingGithub(false);
+      }
+    }
+    if (!authLoading) loadGithubData();
+  }, [user, authLoading]);
+  
+  useEffect(() => {
+    if (!isDisconnectPending && disconnectState) {
+      if (disconnectState.success) {
+        toast({ title: "Success", description: disconnectState.message });
+        setGithubToken(null);
+        setGithubUserDetails(null);
+      } else if (disconnectState.error) {
+        toast({ variant: "destructive", title: "Error", description: disconnectState.error });
+      }
+    }
+  }, [disconnectState, isDisconnectPending, toast]);
+
+
   if (authLoading) {
     return (
       <div className="space-y-6">
@@ -81,7 +132,9 @@ export default function ProfilePage() {
   }
 
   if (!user) {
-    return <p>User not found. Please log in.</p>;
+    // Should be redirected by useAuth hook or AppLayout, but as a fallback:
+    router.push('/login');
+    return <p>Redirecting to login...</p>;
   }
 
   const getInitials = (name: string) => {
@@ -112,12 +165,25 @@ 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
+     ReactStartTransition(() => {
+        disconnectFormAction(dummyFormData);
+     });
+  };
+
+
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <div className="flex justify-between items-center">
         <div>
           <h1 className="text-3xl font-headline font-semibold">My Profile</h1>
-          <p className="text-muted-foreground">View and manage your personal information.</p>
+          <p className="text-muted-foreground">View and manage your personal information and connections.</p>
         </div>
         {!isEditing && (
           <Button variant="outline" onClick={() => setIsEditing(true)}>
@@ -207,6 +273,67 @@ export default function ProfilePage() {
           )}
         </form>
       </Card>
+
+      <Card className="max-w-2xl mx-auto shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl flex items-center"><Link2 className="mr-2 h-5 w-5 text-primary"/>External Connections</CardTitle>
+          <CardDescription>Manage your connections to third-party services.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* GitHub Connection */}
+          <Card className="p-4 bg-muted/30">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Github className="h-8 w-8" />
+                <div>
+                  <h4 className="font-semibold">GitHub</h4>
+                  {isLoadingGithub ? (
+                    <Skeleton className="h-4 w-32 mt-1" />
+                  ) : githubUserDetails ? (
+                    <div className="text-sm text-muted-foreground">
+                      Connected as: <a href={githubUserDetails.html_url} target="_blank" rel="noopener noreferrer" className="font-medium text-primary hover:underline">{githubUserDetails.login}</a> ({githubUserDetails.name || 'Name not public'})
+                      <Avatar className="h-5 w-5 inline-block ml-2 align-middle">
+                          <AvatarImage src={githubUserDetails.avatar_url} alt={githubUserDetails.login} data-ai-hint="github avatar" />
+                          <AvatarFallback>{getInitials(githubUserDetails.login)}</AvatarFallback>
+                      </Avatar>
+                    </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">Not Connected</p>
+                  )}
+                </div>
+              </div>
+              {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" />}
+                  Disconnect
+                </Button>
+              ) : (
+                <Button onClick={handleConnectGitHub}>
+                  <Github className="mr-2 h-4 w-4" /> Connect
+                </Button>
+              )}
+            </div>
+          </Card>
+
+          {/* Discord Connection (Placeholder) */}
+           <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>
+                </div>
+              </div>
+              <Button disabled>
+                <MessageSquare className="mr-2 h-4 w-4" /> Connect (Soon)
+              </Button>
+            </div>
+          </Card>
+        </CardContent>
+      </Card>
     </div>
   );
 }