Add account hierarchy framework with migrations, RLS policies, and UI components

apps/web/app/[locale]/club/[slug]/portal/documents/page.tsx

@@ -1,10 +1,14 @@
-import { createClient } from '@supabase/supabase-js';
-import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
-import { Button } from '@kit/ui/button';
-import { Badge } from '@kit/ui/badge';
-import { FileText, Download, Shield, Receipt, FileCheck } from 'lucide-react';
 import Link from 'next/link';
 
+import { createClient } from '@supabase/supabase-js';
+
+import { FileText, Download, Shield, Receipt, FileCheck } from 'lucide-react';
+
+import { formatDate } from '@kit/shared/dates';
+import { Badge } from '@kit/ui/badge';
+import { Button } from '@kit/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
+
 interface Props {
   params: Promise<{ slug: string }>;
 }
@@ -14,77 +18,117 @@ export default async function PortalDocumentsPage({ params }: Props) {
 
   const supabase = createClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
-    process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
+    process.env.SUPABASE_SERVICE_ROLE_KEY ||
+      process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
   );
 
-  const { data: account } = await supabase.from('accounts').select('id, name').eq('slug', slug).single();
-  if (!account) return <div className="p-8 text-center">Organisation nicht gefunden</div>;
+  const { data: account } = await supabase
+    .from('accounts')
+    .select('id, name')
+    .eq('slug', slug)
+    .single();
+  if (!account)
+    return <div className="p-8 text-center">Organisation nicht gefunden</div>;
 
   // Demo documents (in production: query invoices + cms_files for this member)
   const documents = [
-    { id: '1', title: 'Mitgliedsbeitrag 2026', type: 'Rechnung', date: '2026-01-15', status: 'paid' },
-    { id: '2', title: 'Mitgliedsbeitrag 2025', type: 'Rechnung', date: '2025-01-10', status: 'paid' },
-    { id: '3', title: 'Beitrittserklärung', type: 'Dokument', date: '2020-01-15', status: 'signed' },
+    {
+      id: '1',
+      title: 'Mitgliedsbeitrag 2026',
+      type: 'Rechnung',
+      date: '2026-01-15',
+      status: 'paid',
+    },
+    {
+      id: '2',
+      title: 'Mitgliedsbeitrag 2025',
+      type: 'Rechnung',
+      date: '2025-01-10',
+      status: 'paid',
+    },
+    {
+      id: '3',
+      title: 'Beitrittserklärung',
+      type: 'Dokument',
+      date: '2020-01-15',
+      status: 'signed',
+    },
   ];
 
   const getStatusBadge = (status: string) => {
     switch (status) {
-      case 'paid': return <Badge variant="default">Bezahlt</Badge>;
-      case 'open': return <Badge variant="secondary">Offen</Badge>;
-      case 'signed': return <Badge variant="outline">Unterschrieben</Badge>;
-      default: return <Badge variant="secondary">{status}</Badge>;
+      case 'paid':
+        return <Badge variant="default">Bezahlt</Badge>;
+      case 'open':
+        return <Badge variant="secondary">Offen</Badge>;
+      case 'signed':
+        return <Badge variant="outline">Unterschrieben</Badge>;
+      default:
+        return <Badge variant="secondary">{status}</Badge>;
     }
   };
 
   const getIcon = (type: string) => {
     switch (type) {
-      case 'Rechnung': return <Receipt className="h-5 w-5 text-primary" />;
-      case 'Dokument': return <FileCheck className="h-5 w-5 text-primary" />;
-      default: return <FileText className="h-5 w-5 text-primary" />;
+      case 'Rechnung':
+        return <Receipt className="text-primary h-5 w-5" />;
+      case 'Dokument':
+        return <FileCheck className="text-primary h-5 w-5" />;
+      default:
+        return <FileText className="text-primary h-5 w-5" />;
     }
   };
 
   return (
-    <div className="min-h-screen bg-muted/30">
-      <header className="border-b bg-background px-6 py-4">
-        <div className="flex items-center justify-between max-w-4xl mx-auto">
+    <div className="bg-muted/30 min-h-screen">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="mx-auto flex max-w-4xl items-center justify-between">
           <div className="flex items-center gap-3">
-            <Shield className="h-5 w-5 text-primary" />
+            <Shield className="text-primary h-5 w-5" />
             <h1 className="text-lg font-bold">Meine Dokumente</h1>
           </div>
           <Link href={`/club/${slug}/portal`}>
-            <Button variant="ghost" size="sm">← Zurück zum Portal</Button>
+            <Button variant="ghost" size="sm">
+              ← Zurück zum Portal
+            </Button>
           </Link>
         </div>
       </header>
 
-      <main className="max-w-3xl mx-auto py-8 px-6">
+      <main className="mx-auto max-w-3xl px-6 py-8">
         <Card>
           <CardHeader>
             <CardTitle>Verfügbare Dokumente</CardTitle>
-            <p className="text-sm text-muted-foreground">{String(account.name)} — Dokumente und Rechnungen</p>
+            <p className="text-muted-foreground text-sm">
+              {String(account.name)} — Dokumente und Rechnungen
+            </p>
           </CardHeader>
           <CardContent>
             {documents.length === 0 ? (
-              <div className="text-center py-8 text-muted-foreground">
-                <FileText className="mx-auto h-10 w-10 mb-3" />
+              <div className="text-muted-foreground py-8 text-center">
+                <FileText className="mx-auto mb-3 h-10 w-10" />
                 <p>Keine Dokumente vorhanden</p>
               </div>
             ) : (
               <div className="space-y-3">
                 {documents.map((doc) => (
-                  <div key={doc.id} className="flex items-center justify-between rounded-lg border p-4 hover:bg-muted/30 transition-colors">
+                  <div
+                    key={doc.id}
+                    className="hover:bg-muted/30 flex items-center justify-between rounded-lg border p-4 transition-colors"
+                  >
                     <div className="flex items-center gap-3">
                       {getIcon(doc.type)}
                       <div>
-                        <p className="font-medium text-sm">{doc.title}</p>
-                        <p className="text-xs text-muted-foreground">{doc.type} — {new Date(doc.date).toLocaleDateString('de-DE')}</p>
+                        <p className="text-sm font-medium">{doc.title}</p>
+                        <p className="text-muted-foreground text-xs">
+                          {doc.type} — {formatDate(doc.date)}
+                        </p>
                       </div>
                     </div>
                     <div className="flex items-center gap-3">
                       {getStatusBadge(doc.status)}
                       <Button size="sm" variant="outline">
-                        <Download className="h-3 w-3 mr-1" />
+                        <Download className="mr-1 h-3 w-3" />
                         PDF
                       </Button>
                     </div>

apps/web/app/[locale]/club/[slug]/portal/invite/page.tsx

@@ -1,18 +1,25 @@
-import { createClient } from '@supabase/supabase-js';
+import Link from 'next/link';
 import { notFound } from 'next/navigation';
-import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
+
+import { createClient } from '@supabase/supabase-js';
+
+import { UserPlus, Shield, CheckCircle } from 'lucide-react';
+
+import { formatDate } from '@kit/shared/dates';
 import { Button } from '@kit/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 import { Input } from '@kit/ui/input';
 import { Label } from '@kit/ui/label';
-import { UserPlus, Shield, CheckCircle } from 'lucide-react';
-import Link from 'next/link';
 
 interface Props {
   params: Promise<{ slug: string }>;
   searchParams: Promise<{ token?: string }>;
 }
 
-export default async function PortalInvitePage({ params, searchParams }: Props) {
+export default async function PortalInvitePage({
+  params,
+  searchParams,
+}: Props) {
   const { slug } = await params;
   const { token } = await searchParams;
 
@@ -24,28 +31,35 @@ export default async function PortalInvitePage({ params, searchParams }: Props)
   );
 
   // Resolve account
-  const { data: account } = await supabase.from('accounts').select('id, name').eq('slug', slug).single();
+  const { data: account } = await supabase
+    .from('accounts')
+    .select('id, name')
+    .eq('slug', slug)
+    .single();
   if (!account) notFound();
 
   // Look up invitation
-  const { data: invitation } = await supabase.from('member_portal_invitations')
+  const { data: invitation } = await supabase
+    .from('member_portal_invitations')
     .select('id, email, status, expires_at, member_id')
     .eq('invite_token', token)
     .maybeSingle();
 
   if (!invitation || invitation.status !== 'pending') {
     return (
-      <div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
+      <div className="bg-muted/30 flex min-h-screen items-center justify-center p-6">
         <Card className="max-w-md text-center">
           <CardContent className="p-8">
-            <Shield className="mx-auto h-10 w-10 text-destructive mb-4" />
+            <Shield className="text-destructive mx-auto mb-4 h-10 w-10" />
             <h2 className="text-lg font-bold">Einladung ungültig</h2>
-            <p className="text-sm text-muted-foreground mt-2">
-              Diese Einladung ist abgelaufen, wurde bereits verwendet oder ist ungültig.
-              Bitte wenden Sie sich an Ihren Vereinsadministrator.
+            <p className="text-muted-foreground mt-2 text-sm">
+              Diese Einladung ist abgelaufen, wurde bereits verwendet oder ist
+              ungültig. Bitte wenden Sie sich an Ihren Vereinsadministrator.
             </p>
             <Link href={`/club/${slug}`}>
-              <Button variant="outline" className="mt-4">← Zur Website</Button>
+              <Button variant="outline" className="mt-4">
+                ← Zur Website
+              </Button>
             </Link>
           </CardContent>
         </Card>
@@ -56,14 +70,14 @@ export default async function PortalInvitePage({ params, searchParams }: Props)
   const expired = new Date(invitation.expires_at) < new Date();
   if (expired) {
     return (
-      <div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
+      <div className="bg-muted/30 flex min-h-screen items-center justify-center p-6">
         <Card className="max-w-md text-center">
           <CardContent className="p-8">
-            <Shield className="mx-auto h-10 w-10 text-amber-500 mb-4" />
+            <Shield className="mx-auto mb-4 h-10 w-10 text-amber-500" />
             <h2 className="text-lg font-bold">Einladung abgelaufen</h2>
-            <p className="text-sm text-muted-foreground mt-2">
-              Diese Einladung ist am {new Date(invitation.expires_at).toLocaleDateString('de-DE')} abgelaufen.
-              Bitte fordern Sie eine neue Einladung an.
+            <p className="text-muted-foreground mt-2 text-sm">
+              Diese Einladung ist am {formatDate(invitation.expires_at)}{' '}
+              abgelaufen. Bitte fordern Sie eine neue Einladung an.
             </p>
           </CardContent>
         </Card>
@@ -72,41 +86,67 @@ export default async function PortalInvitePage({ params, searchParams }: Props)
   }
 
   return (
-    <div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
+    <div className="bg-muted/30 flex min-h-screen items-center justify-center p-6">
       <Card className="w-full max-w-md">
         <CardHeader className="text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
-            <UserPlus className="h-6 w-6 text-primary" />
+          <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            <UserPlus className="text-primary h-6 w-6" />
           </div>
           <CardTitle>Einladung zum Mitgliederbereich</CardTitle>
-          <p className="text-sm text-muted-foreground">{String(account.name)}</p>
+          <p className="text-muted-foreground text-sm">
+            {String(account.name)}
+          </p>
         </CardHeader>
         <CardContent>
-          <div className="rounded-md bg-primary/5 border border-primary/20 p-4 mb-6">
+          <div className="bg-primary/5 border-primary/20 mb-6 rounded-md border p-4">
             <p className="text-sm">
-              Sie wurden eingeladen, ein Konto für den Mitgliederbereich zu erstellen.
-              Damit können Sie Ihr Profil einsehen, Dokumente herunterladen und Ihre Datenschutz-Einstellungen verwalten.
+              Sie wurden eingeladen, ein Konto für den Mitgliederbereich zu
+              erstellen. Damit können Sie Ihr Profil einsehen, Dokumente
+              herunterladen und Ihre Datenschutz-Einstellungen verwalten.
             </p>
           </div>
 
-          <form className="space-y-4" action={`/api/club/accept-invite`} method="POST">
+          <form
+            className="space-y-4"
+            action={`/api/club/accept-invite`}
+            method="POST"
+          >
             <input type="hidden" name="token" value={token} />
             <input type="hidden" name="slug" value={slug} />
 
             <div className="space-y-2">
               <Label>E-Mail-Adresse</Label>
-              <Input type="email" value={invitation.email} readOnly className="bg-muted" />
-              <p className="text-xs text-muted-foreground">Ihre E-Mail-Adresse wurde vom Verein vorgegeben.</p>
+              <Input
+                type="email"
+                value={invitation.email}
+                readOnly
+                className="bg-muted"
+              />
+              <p className="text-muted-foreground text-xs">
+                Ihre E-Mail-Adresse wurde vom Verein vorgegeben.
+              </p>
             </div>
 
             <div className="space-y-2">
               <Label>Passwort festlegen *</Label>
-              <Input type="password" name="password" placeholder="Mindestens 8 Zeichen" required minLength={8} />
+              <Input
+                type="password"
+                name="password"
+                placeholder="Mindestens 8 Zeichen"
+                required
+                minLength={8}
+              />
             </div>
 
             <div className="space-y-2">
               <Label>Passwort wiederholen *</Label>
-              <Input type="password" name="passwordConfirm" placeholder="Passwort bestätigen" required minLength={8} />
+              <Input
+                type="password"
+                name="passwordConfirm"
+                placeholder="Passwort bestätigen"
+                required
+                minLength={8}
+              />
             </div>
 
             <Button type="submit" className="w-full">
@@ -115,8 +155,14 @@ export default async function PortalInvitePage({ params, searchParams }: Props)
             </Button>
           </form>
 
-          <p className="mt-4 text-xs text-center text-muted-foreground">
-            Bereits ein Konto? <Link href={`/club/${slug}/portal`} className="text-primary underline">Anmelden</Link>
+          <p className="text-muted-foreground mt-4 text-center text-xs">
+            Bereits ein Konto?{' '}
+            <Link
+              href={`/club/${slug}/portal`}
+              className="text-primary underline"
+            >
+              Anmelden
+            </Link>
           </p>
         </CardContent>
       </Card>

apps/web/app/[locale]/club/[slug]/portal/page.tsx

@@ -1,10 +1,12 @@
-import { createClient } from '@supabase/supabase-js';
-import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
-import { Button } from '@kit/ui/button';
-import { UserCircle, FileText, CreditCard, Shield } from 'lucide-react';
 import Link from 'next/link';
 
+import { createClient } from '@supabase/supabase-js';
+
+import { UserCircle, FileText, CreditCard, Shield } from 'lucide-react';
+
 import { PortalLoginForm } from '@kit/site-builder/components';
+import { Button } from '@kit/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
 interface Props {
   params: Promise<{ slug: string }>;
@@ -18,15 +20,23 @@ export default async function MemberPortalPage({ params }: Props) {
     process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
   );
 
-  const { data: account } = await supabase.from('accounts').select('id, name').eq('slug', slug).single();
-  if (!account) return <div className="p-8 text-center">Organisation nicht gefunden</div>;
+  const { data: account } = await supabase
+    .from('accounts')
+    .select('id, name')
+    .eq('slug', slug)
+    .single();
+  if (!account)
+    return <div className="p-8 text-center">Organisation nicht gefunden</div>;
 
   // Check if user is already logged in
-  const { data: { user } } = await supabase.auth.getUser();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
 
   if (user) {
     // Check if this user is a member of this club
-    const { data: member } = await supabase.from('members')
+    const { data: member } = await supabase
+      .from('members')
       .select('id, first_name, last_name, status')
       .eq('account_id', account.id)
       .eq('user_id', user.id)
@@ -35,45 +45,61 @@ export default async function MemberPortalPage({ params }: Props) {
     if (member) {
       // Logged in member — show portal dashboard
       return (
-        <div className="min-h-screen bg-muted/30">
-          <header className="border-b bg-background px-6 py-4">
-            <div className="flex items-center justify-between max-w-4xl mx-auto">
+        <div className="bg-muted/30 min-h-screen">
+          <header className="bg-background border-b px-6 py-4">
+            <div className="mx-auto flex max-w-4xl items-center justify-between">
               <div className="flex items-center gap-3">
-                <Shield className="h-5 w-5 text-primary" />
-                <h1 className="text-lg font-bold">Mitgliederbereich — {String(account.name)}</h1>
+                <Shield className="text-primary h-5 w-5" />
+                <h1 className="text-lg font-bold">
+                  Mitgliederbereich — {String(account.name)}
+                </h1>
               </div>
               <div className="flex items-center gap-3">
-                <span className="text-sm text-muted-foreground">{String(member.first_name)} {String(member.last_name)}</span>
-                <Link href={`/club/${slug}`}><Button variant="ghost" size="sm">← Website</Button></Link>
+                <span className="text-muted-foreground text-sm">
+                  {String(member.first_name)} {String(member.last_name)}
+                </span>
+                <Link href={`/club/${slug}`}>
+                  <Button variant="ghost" size="sm">
+                    ← Website
+                  </Button>
+                </Link>
               </div>
             </div>
           </header>
-          <main className="max-w-4xl mx-auto py-12 px-6">
-            <h2 className="text-2xl font-bold mb-6">Willkommen, {String(member.first_name)}!</h2>
+          <main className="mx-auto max-w-4xl px-6 py-12">
+            <h2 className="mb-6 text-2xl font-bold">
+              Willkommen, {String(member.first_name)}!
+            </h2>
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
               <Link href={`/club/${slug}/portal/profile`}>
-                <Card className="hover:border-primary transition-colors cursor-pointer">
+                <Card className="hover:border-primary cursor-pointer transition-colors">
                   <CardContent className="p-6 text-center">
-                    <UserCircle className="mx-auto h-10 w-10 text-primary mb-3" />
+                    <UserCircle className="text-primary mx-auto mb-3 h-10 w-10" />
                     <h3 className="font-semibold">Mein Profil</h3>
-                    <p className="text-xs text-muted-foreground mt-1">Kontaktdaten und Datenschutz</p>
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      Kontaktdaten und Datenschutz
+                    </p>
                   </CardContent>
                 </Card>
               </Link>
               <Link href={`/club/${slug}/portal/documents`}>
-                <Card className="hover:border-primary transition-colors cursor-pointer">
+                <Card className="hover:border-primary cursor-pointer transition-colors">
                   <CardContent className="p-6 text-center">
-                    <FileText className="mx-auto h-10 w-10 text-primary mb-3" />
+                    <FileText className="text-primary mx-auto mb-3 h-10 w-10" />
                     <h3 className="font-semibold">Dokumente</h3>
-                    <p className="text-xs text-muted-foreground mt-1">Rechnungen und Bescheinigungen</p>
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      Rechnungen und Bescheinigungen
+                    </p>
                   </CardContent>
                 </Card>
               </Link>
               <Card>
                 <CardContent className="p-6 text-center">
-                  <CreditCard className="mx-auto h-10 w-10 text-primary mb-3" />
+                  <CreditCard className="text-primary mx-auto mb-3 h-10 w-10" />
                   <h3 className="font-semibold">Mitgliedsausweis</h3>
-                  <p className="text-xs text-muted-foreground mt-1">Digital anzeigen</p>
+                  <p className="text-muted-foreground mt-1 text-xs">
+                    Digital anzeigen
+                  </p>
                 </CardContent>
               </Card>
             </div>
@@ -85,14 +111,18 @@ export default async function MemberPortalPage({ params }: Props) {
 
   // Not logged in or not a member — show login form
   return (
-    <div className="min-h-screen bg-muted/30">
-      <header className="border-b bg-background px-6 py-4">
-        <div className="flex items-center justify-between max-w-4xl mx-auto">
+    <div className="bg-muted/30 min-h-screen">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="mx-auto flex max-w-4xl items-center justify-between">
           <h1 className="text-lg font-bold">Mitgliederbereich</h1>
-          <Link href={`/club/${slug}`}><Button variant="ghost" size="sm">← Zurück zur Website</Button></Link>
+          <Link href={`/club/${slug}`}>
+            <Button variant="ghost" size="sm">
+              ← Zurück zur Website
+            </Button>
+          </Link>
         </div>
       </header>
-      <main className="max-w-4xl mx-auto py-12 px-6">
+      <main className="mx-auto max-w-4xl px-6 py-12">
         <PortalLoginForm slug={slug} accountName={String(account.name)} />
       </main>
     </div>

apps/web/app/[locale]/club/[slug]/portal/profile/_components/portal-linked-accounts.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+import type { Provider, UserIdentity } from '@supabase/supabase-js';
+import { createClient } from '@supabase/supabase-js';
+
+import { Link2, Link2Off, Loader2 } from 'lucide-react';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import { OauthProviderLogoImage } from '@kit/ui/oauth-provider-logo-image';
+import { toast } from '@kit/ui/sonner';
+
+const PROVIDERS: Provider[] = ['google', 'apple', 'azure', 'github'];
+
+const PROVIDER_LABELS: Record<string, string> = {
+  google: 'Google',
+  apple: 'Apple',
+  azure: 'Microsoft',
+  github: 'GitHub',
+};
+
+function getSupabaseClient() {
+  return createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
+  );
+}
+
+export function PortalLinkedAccounts({ slug }: { slug: string }) {
+  const [identities, setIdentities] = useState<UserIdentity[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
+
+  const loadIdentities = useCallback(async () => {
+    const supabase = getSupabaseClient();
+    const {
+      data: { user },
+    } = await supabase.auth.getUser();
+
+    if (user?.identities) {
+      setIdentities(user.identities);
+    }
+
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    void loadIdentities();
+  }, [loadIdentities]);
+
+  const handleLink = async (provider: Provider) => {
+    setActionLoading(provider);
+
+    try {
+      const supabase = getSupabaseClient();
+      const redirectTo = `${window.location.origin}/club/${slug}/portal/profile`;
+
+      const { error } = await supabase.auth.linkIdentity({
+        provider,
+        options: { redirectTo },
+      });
+
+      if (error) {
+        toast.error(`Verknüpfung fehlgeschlagen: ${error.message}`);
+        setActionLoading(null);
+      }
+    } catch {
+      toast.error('Verbindungsfehler. Bitte versuchen Sie es erneut.');
+      setActionLoading(null);
+    }
+  };
+
+  const handleUnlink = async (identity: UserIdentity) => {
+    if (identities.length <= 1) {
+      toast.error('Sie benötigen mindestens eine Anmeldemethode.');
+      return;
+    }
+
+    setActionLoading(identity.id);
+
+    try {
+      const supabase = getSupabaseClient();
+      const { error } = await supabase.auth.unlinkIdentity(identity);
+
+      if (error) {
+        toast.error(`Trennung fehlgeschlagen: ${error.message}`);
+      } else {
+        toast.success(
+          `${PROVIDER_LABELS[identity.provider] ?? identity.provider} wurde getrennt.`,
+        );
+        await loadIdentities();
+      }
+    } catch {
+      toast.error('Verbindungsfehler. Bitte versuchen Sie es erneut.');
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-4">
+        <Loader2 className="text-muted-foreground h-5 w-5 animate-spin" />
+      </div>
+    );
+  }
+
+  const connectedProviders = identities
+    .filter((i) => i.provider !== 'email')
+    .map((i) => i.provider);
+
+  const availableProviders = PROVIDERS.filter(
+    (p) => !connectedProviders.includes(p),
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* Connected accounts */}
+      {identities.filter((i) => i.provider !== 'email').length > 0 && (
+        <div className="space-y-2">
+          <p className="text-muted-foreground text-xs font-medium">
+            Verknüpfte Konten
+          </p>
+
+          {identities
+            .filter((i) => i.provider !== 'email')
+            .map((identity) => (
+              <div
+                key={identity.id}
+                className="bg-muted/50 flex items-center justify-between rounded-lg border p-3"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="flex h-8 w-8 items-center justify-center">
+                    <OauthProviderLogoImage providerId={identity.provider} />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium capitalize">
+                      {PROVIDER_LABELS[identity.provider] ?? identity.provider}
+                    </p>
+                    {identity.identity_data?.email && (
+                      <p className="text-muted-foreground text-xs">
+                        {identity.identity_data.email as string}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                {identities.length > 1 && (
+                  <AlertDialog>
+                    <AlertDialogTrigger
+                      render={
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          disabled={actionLoading === identity.id}
+                        >
+                          {actionLoading === identity.id ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                          ) : (
+                            <Link2Off className="h-4 w-4" />
+                          )}
+                        </Button>
+                      }
+                    />
+
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Konto trennen?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          Möchten Sie die Verknüpfung mit{' '}
+                          {PROVIDER_LABELS[identity.provider] ??
+                            identity.provider}{' '}
+                          wirklich aufheben? Sie können sich dann nicht mehr
+                          darüber anmelden.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Abbrechen</AlertDialogCancel>
+                        <AlertDialogAction
+                          onClick={() => handleUnlink(identity)}
+                          className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                        >
+                          Trennen
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                )}
+              </div>
+            ))}
+        </div>
+      )}
+
+      {/* Available providers to link */}
+      {availableProviders.length > 0 && (
+        <div className="space-y-2">
+          <p className="text-muted-foreground text-xs font-medium">
+            Konto verknüpfen für schnellere Anmeldung
+          </p>
+
+          <div className="flex flex-wrap gap-2">
+            {availableProviders.map((provider) => (
+              <Button
+                key={provider}
+                variant="outline"
+                size="sm"
+                className="gap-2"
+                disabled={actionLoading === provider}
+                onClick={() => handleLink(provider)}
+              >
+                {actionLoading === provider ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <OauthProviderLogoImage providerId={provider} />
+                )}
+                {PROVIDER_LABELS[provider] ?? provider}
+              </Button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Info text when email-only */}
+      {identities.length <= 1 && availableProviders.length > 0 && (
+        <p className="text-muted-foreground text-xs">
+          Verknüpfen Sie ein Konto, um sich zukünftig schneller und ohne
+          Passwort anmelden zu können.
+        </p>
+      )}
+    </div>
+  );
+}

apps/web/app/[locale]/club/[slug]/portal/profile/page.tsx

@@ -1,11 +1,25 @@
-import { createClient } from '@supabase/supabase-js';
+import Link from 'next/link';
 import { redirect } from 'next/navigation';
-import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
+
+import { createClient } from '@supabase/supabase-js';
+
+import {
+  UserCircle,
+  Mail,
+  MapPin,
+  Phone,
+  Shield,
+  Calendar,
+  Link2,
+} from 'lucide-react';
+
+import { formatDate } from '@kit/shared/dates';
 import { Button } from '@kit/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 import { Input } from '@kit/ui/input';
 import { Label } from '@kit/ui/label';
-import { UserCircle, Mail, MapPin, Phone, Shield, Calendar } from 'lucide-react';
-import Link from 'next/link';
+
+import { PortalLinkedAccounts } from './_components/portal-linked-accounts';
 
 interface Props {
   params: Promise<{ slug: string }>;
@@ -19,15 +33,23 @@ export default async function PortalProfilePage({ params }: Props) {
     process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY!,
   );
 
-  const { data: account } = await supabase.from('accounts').select('id, name').eq('slug', slug).single();
-  if (!account) return <div className="p-8 text-center">Organisation nicht gefunden</div>;
+  const { data: account } = await supabase
+    .from('accounts')
+    .select('id, name')
+    .eq('slug', slug)
+    .single();
+  if (!account)
+    return <div className="p-8 text-center">Organisation nicht gefunden</div>;
 
   // Get current user
-  const { data: { user } } = await supabase.auth.getUser();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
   if (!user) redirect(`/club/${slug}/portal`);
 
   // Find member linked to this user
-  const { data: member } = await supabase.from('members')
+  const { data: member } = await supabase
+    .from('members')
     .select('*')
     .eq('account_id', account.id)
     .eq('user_id', user.id)
@@ -35,17 +57,20 @@ export default async function PortalProfilePage({ params }: Props) {
 
   if (!member) {
     return (
-      <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+      <div className="bg-muted/30 flex min-h-screen items-center justify-center">
         <Card className="max-w-md">
           <CardContent className="p-8 text-center">
-            <Shield className="mx-auto h-10 w-10 text-destructive mb-4" />
+            <Shield className="text-destructive mx-auto mb-4 h-10 w-10" />
             <h2 className="text-lg font-bold">Kein Mitglied</h2>
-            <p className="text-sm text-muted-foreground mt-2">
-              Ihr Benutzerkonto ist nicht mit einem Mitgliedsprofil in diesem Verein verknüpft.
-              Bitte wenden Sie sich an Ihren Vereinsadministrator.
+            <p className="text-muted-foreground mt-2 text-sm">
+              Ihr Benutzerkonto ist nicht mit einem Mitgliedsprofil in diesem
+              Verein verknüpft. Bitte wenden Sie sich an Ihren
+              Vereinsadministrator.
             </p>
             <Link href={`/club/${slug}/portal`}>
-              <Button variant="outline" className="mt-4">← Zurück</Button>
+              <Button variant="outline" className="mt-4">
+                ← Zurück
+              </Button>
             </Link>
           </CardContent>
         </Card>
@@ -56,28 +81,35 @@ export default async function PortalProfilePage({ params }: Props) {
   const m = member;
 
   return (
-    <div className="min-h-screen bg-muted/30">
-      <header className="border-b bg-background px-6 py-4">
-        <div className="flex items-center justify-between max-w-4xl mx-auto">
+    <div className="bg-muted/30 min-h-screen">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="mx-auto flex max-w-4xl items-center justify-between">
           <div className="flex items-center gap-3">
-            <Shield className="h-5 w-5 text-primary" />
+            <Shield className="text-primary h-5 w-5" />
             <h1 className="text-lg font-bold">Mein Profil</h1>
           </div>
-          <Link href={`/club/${slug}/portal`}><Button variant="ghost" size="sm">← Zurück zum Portal</Button></Link>
+          <Link href={`/club/${slug}/portal`}>
+            <Button variant="ghost" size="sm">
+              ← Zurück zum Portal
+            </Button>
+          </Link>
         </div>
       </header>
 
-      <main className="max-w-3xl mx-auto py-8 px-6 space-y-6">
+      <main className="mx-auto max-w-3xl space-y-6 px-6 py-8">
         <Card>
           <CardContent className="p-6">
             <div className="flex items-center gap-4">
-              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary">
+              <div className="bg-primary/10 text-primary flex h-16 w-16 items-center justify-center rounded-full">
                 <UserCircle className="h-8 w-8" />
               </div>
               <div>
-                <h2 className="text-xl font-bold">{String(m.first_name)} {String(m.last_name)}</h2>
-                <p className="text-sm text-muted-foreground">
-                  Nr. {String(m.member_number ?? '—')} — Mitglied seit {m.entry_date ? new Date(String(m.entry_date)).toLocaleDateString('de-DE') : '—'}
+                <h2 className="text-xl font-bold">
+                  {String(m.first_name)} {String(m.last_name)}
+                </h2>
+                <p className="text-muted-foreground text-sm">
+                  Nr. {String(m.member_number ?? '—')} — Mitglied seit{' '}
+                  {formatDate(m.entry_date)}
                 </p>
               </div>
             </div>
@@ -85,37 +117,111 @@ export default async function PortalProfilePage({ params }: Props) {
         </Card>
 
         <Card>
-          <CardHeader><CardTitle className="flex items-center gap-2"><Mail className="h-4 w-4" />Kontaktdaten</CardTitle></CardHeader>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Mail className="h-4 w-4" />
+              Kontaktdaten
+            </CardTitle>
+          </CardHeader>
           <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <div className="space-y-2"><Label>Vorname</Label><Input defaultValue={String(m.first_name)} readOnly /></div>
-            <div className="space-y-2"><Label>Nachname</Label><Input defaultValue={String(m.last_name)} readOnly /></div>
-            <div className="space-y-2"><Label>E-Mail</Label><Input defaultValue={String(m.email ?? '')} /></div>
-            <div className="space-y-2"><Label>Telefon</Label><Input defaultValue={String(m.phone ?? '')} /></div>
-            <div className="space-y-2"><Label>Mobil</Label><Input defaultValue={String(m.mobile ?? '')} /></div>
+            <div className="space-y-2">
+              <Label>Vorname</Label>
+              <Input defaultValue={String(m.first_name)} readOnly />
+            </div>
+            <div className="space-y-2">
+              <Label>Nachname</Label>
+              <Input defaultValue={String(m.last_name)} readOnly />
+            </div>
+            <div className="space-y-2">
+              <Label>E-Mail</Label>
+              <Input defaultValue={String(m.email ?? '')} />
+            </div>
+            <div className="space-y-2">
+              <Label>Telefon</Label>
+              <Input defaultValue={String(m.phone ?? '')} />
+            </div>
+            <div className="space-y-2">
+              <Label>Mobil</Label>
+              <Input defaultValue={String(m.mobile ?? '')} />
+            </div>
           </CardContent>
         </Card>
 
         <Card>
-          <CardHeader><CardTitle className="flex items-center gap-2"><MapPin className="h-4 w-4" />Adresse</CardTitle></CardHeader>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <MapPin className="h-4 w-4" />
+              Adresse
+            </CardTitle>
+          </CardHeader>
           <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <div className="space-y-2"><Label>Straße</Label><Input defaultValue={String(m.street ?? '')} /></div>
-            <div className="space-y-2"><Label>Hausnummer</Label><Input defaultValue={String(m.house_number ?? '')} /></div>
-            <div className="space-y-2"><Label>PLZ</Label><Input defaultValue={String(m.postal_code ?? '')} /></div>
-            <div className="space-y-2"><Label>Ort</Label><Input defaultValue={String(m.city ?? '')} /></div>
+            <div className="space-y-2">
+              <Label>Straße</Label>
+              <Input defaultValue={String(m.street ?? '')} />
+            </div>
+            <div className="space-y-2">
+              <Label>Hausnummer</Label>
+              <Input defaultValue={String(m.house_number ?? '')} />
+            </div>
+            <div className="space-y-2">
+              <Label>PLZ</Label>
+              <Input defaultValue={String(m.postal_code ?? '')} />
+            </div>
+            <div className="space-y-2">
+              <Label>Ort</Label>
+              <Input defaultValue={String(m.city ?? '')} />
+            </div>
           </CardContent>
         </Card>
 
         <Card>
-          <CardHeader><CardTitle className="flex items-center gap-2"><Shield className="h-4 w-4" />Datenschutz-Einwilligungen</CardTitle></CardHeader>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Link2 className="h-4 w-4" />
+              Anmeldemethoden
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <PortalLinkedAccounts slug={slug} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Shield className="h-4 w-4" />
+              Datenschutz-Einwilligungen
+            </CardTitle>
+          </CardHeader>
           <CardContent className="space-y-3">
             {[
-              { key: 'gdpr_newsletter', label: 'Newsletter per E-Mail', value: m.gdpr_newsletter },
-              { key: 'gdpr_internet', label: 'Veröffentlichung auf der Homepage', value: m.gdpr_internet },
-              { key: 'gdpr_print', label: 'Veröffentlichung in der Vereinszeitung', value: m.gdpr_print },
-              { key: 'gdpr_birthday_info', label: 'Geburtstagsinfo an Mitglieder', value: m.gdpr_birthday_info },
+              {
+                key: 'gdpr_newsletter',
+                label: 'Newsletter per E-Mail',
+                value: m.gdpr_newsletter,
+              },
+              {
+                key: 'gdpr_internet',
+                label: 'Veröffentlichung auf der Homepage',
+                value: m.gdpr_internet,
+              },
+              {
+                key: 'gdpr_print',
+                label: 'Veröffentlichung in der Vereinszeitung',
+                value: m.gdpr_print,
+              },
+              {
+                key: 'gdpr_birthday_info',
+                label: 'Geburtstagsinfo an Mitglieder',
+                value: m.gdpr_birthday_info,
+              },
             ].map(({ key, label, value }) => (
               <label key={key} className="flex items-center gap-3 text-sm">
-                <input type="checkbox" defaultChecked={Boolean(value)} className="h-4 w-4 rounded border-input" />
+                <input
+                  type="checkbox"
+                  defaultChecked={Boolean(value)}
+                  className="border-input h-4 w-4 rounded"
+                />
                 {label}
               </label>
             ))}