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

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>
             ))}