Add account hierarchy framework with migrations, RLS policies, and UI components
This commit is contained in:
T. Zehetbauer
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user