soconnor/manyangles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add group management and event-specific invitation onboarding

Browse Source
This commit is contained in:
soconnor
2026-09-10 10:38:01 -04:00
parent 2c382b8bd1
commit 361e14ec1d
10 changed files with 131 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/dashboard/people/group-people.tsx
+7 -4
View File
@@ -74,13 +74,16 @@ export function GroupPeople({
<p className="text-xs text-muted-foreground">{member.email}</p>
</div>
<div className="flex items-center gap-2">
<Badge variant="secondary">{member.role === "owner" ? "Owner" : "Member"}</Badge>
{canManage ? <Select value={member.role} disabled={setMember.isPending || remove.isPending} onValueChange={value => { if (window.confirm(`Change this member's group role to ${value}?`)) setMember.mutate({ groupId, userId: member.userId, role: value as GroupRole }); }}>
<SelectTrigger aria-label={`Group role for ${member.name}`}><SelectValue /></SelectTrigger>
<SelectContent><SelectGroup><SelectItem value="member">Member</SelectItem><SelectItem value="owner">Owner</SelectItem></SelectGroup></SelectContent>
</Select> : <Badge variant="secondary">{member.role === "owner" ? "Owner" : "Member"}</Badge>}
{canManage ? (
<Button
size="sm"
disabled={remove.isPending || setMember.isPending}
variant="ghost"
onClick={() =>
remove.mutate({ groupId, userId: member.userId })
window.confirm("Remove this member from the group and all its events?") && remove.mutate({ groupId, userId: member.userId })
}
>
Remove
@@ -150,7 +153,7 @@ export function GroupPeople({
) : null}
</>
) : null}
{canManage ? <PendingInvites groupId={groupId} /> : null}
{canManage ? <PendingInvites groupId={groupId} canRevoke /> : null}
</CardContent>
</Card>
);
apps/web/src/app/dashboard/people/group-settings.tsx
+35
View File
@@ -0,0 +1,35 @@
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { SaveIcon } from "lucide-react";
import { toast } from "sonner";
import { api } from "@/trpc/react";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Field, FieldGroup, FieldLabel, FieldDescription } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
export function GroupSettings({ groupId, initialName }: { groupId: string; initialName: string }) {
const [name, setName] = useState(initialName);
const [saved, setSaved] = useState(initialName);
const utils = api.useUtils();
const router = useRouter();
const rename = api.group.rename.useMutation({
onSuccess: async result => {
setSaved(result.name); setName(result.name); toast.success("Group updated");
await Promise.all([utils.group.invalidate(), utils.viewer.invalidate()]);
router.refresh();
},
onError: error => toast.error(error.message),
});
return <Card>
<CardHeader><CardTitle>Group settings</CardTitle><CardDescription>Manage the shared workspace for your team and events.</CardDescription></CardHeader>
<CardContent><form onSubmit={event => { event.preventDefault(); rename.mutate({ groupId, name }); }}>
<FieldGroup>
<Field><FieldLabel htmlFor="group-name">Group name</FieldLabel><Input id="group-name" required maxLength={100} value={name} disabled={rename.isPending} onChange={event => setName(event.target.value)} /><FieldDescription>Renaming does not change event links, invite codes, or access.</FieldDescription></Field>
<Field orientation="horizontal"><Button disabled={rename.isPending || !name.trim() || name.trim() === saved} type="submit"><SaveIcon data-icon="inline-start" />{rename.isPending ? "Saving…" : "Save group"}</Button></Field>
</FieldGroup>
</form></CardContent>
</Card>;
}
apps/web/src/app/dashboard/people/page.tsx
+3
View File
@@ -1,5 +1,6 @@
import { createServerCaller } from "@/trpc/server";
import { GroupPeople } from "./group-people";
import { GroupSettings } from "./group-settings";
import {
Empty,
EmptyDescription,
@@ -30,7 +31,9 @@ export default async function DashboardPeoplePage() {
Shared members of {group.name}. Event access is still assigned per event.
</p>
</div>
{group.permissions.includes("group.manage") ? <GroupSettings key={group.id} groupId={group.id} initialName={group.name} /> : null}
<GroupPeople
key={group.id}
groupId={group.id}
canManage={group.permissions.includes("group.people.manage")}
/>
apps/web/src/app/invitations/[token]/page.tsx
+13 -11
View File
@@ -1,4 +1,3 @@
import { redirect } from "next/navigation";
import { headers } from "next/headers";
import Link from "next/link";
import { auth } from "@/server/auth";
@@ -13,6 +12,8 @@ import {
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
export const metadata = { title: "Invitation", robots: { index: false, follow: false }, referrer: "no-referrer" as const };
export default async function InvitationPage({
params,
}: {
@@ -37,25 +38,26 @@ export default async function InvitationPage({
);
}
if (!session) {
redirect(`/sign-up?invite=${encodeURIComponent(token)}`);
}
const callback = `/invitations/${encodeURIComponent(token)}`;
const role = preview.eventRole ?? preview.groupRole;
const roleLabel = role ? role.charAt(0).toUpperCase() + role.slice(1) : "team member";
return (
<main className="page-pad mx-auto max-w-md py-16">
<Card>
{preview.bannerUrl ? <img src={preview.bannerUrl} alt="" width={1200} height={450} className="aspect-[8/3] w-full rounded-t-xl object-cover" /> : null}
<CardHeader>
<CardTitle className="text-2xl font-semibold tracking-tight">Join this event</CardTitle>
<CardTitle className="text-2xl font-semibold tracking-tight">{preview.eventTitle ? `Help out with ${preview.eventTitle}` : `Join ${preview.groupName ?? "the team"}`}</CardTitle>
<CardDescription>
{preview.eventRole
? `You'll join as event ${preview.eventRole}.`
: preview.groupRole
? `You'll join the group as ${preview.groupRole}.`
: "This invite grants access."}
You’ve been invited to join as a {roleLabel}. {session ? "Accept below to join the team." : "Create an account or sign in to accept your invitation. Use the email address that received the invite."}
</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-3">
<RedeemInviteButton token={token} />
<p className="text-sm text-muted-foreground">This invitation grants team access, not a guest RSVP. Your assigned role controls what you can view and manage.</p>
{session ? <RedeemInviteButton token={token} /> : <>
<Button asChild><Link href={`/sign-up?invite=${encodeURIComponent(token)}&callbackURL=${encodeURIComponent(callback)}`}>Create account to accept</Link></Button>
<Button asChild variant="outline"><Link href={`/sign-in?callbackURL=${encodeURIComponent(callback)}`}>Already have an account? Sign in</Link></Button>
</>}
<Button asChild variant="ghost">
<Link href="/dashboard">Skip</Link>
</Button>
apps/web/src/app/sign-up/page.tsx
+3 -2
View File
@@ -17,7 +17,8 @@ export default async function SignUpPage({
searchParams: Promise<{ callbackURL?: string; invite?: string; code?: string }>;
}) {
const { callbackURL, invite, code } = await searchParams;
const token = invite ?? code;
const callbackInvite = callbackURL?.match(/^\/invitations\/([^/?#]+)$/)?.[1];
const token = invite ?? code ?? (callbackInvite ? decodeURIComponent(callbackInvite) : undefined);
const safeCallback =
callbackURL?.startsWith("/") && !callbackURL.startsWith("//")
? callbackURL
@@ -34,7 +35,7 @@ export default async function SignUpPage({
<CardHeader>
<CardTitle className="text-2xl font-semibold tracking-tight">Create an account</CardTitle>
<CardDescription>
{settings.openSignup
{token ? "Create your account with the email address that received the invitation. You’ll return to accept it next." : settings.openSignup
? "Host an event and share a guest upload link."
: "This deployment is invite-only. Use a code or invite link."}
</CardDescription>
apps/web/src/app/sign-up/sign-up-form.tsx
+2 -2
View File
@@ -96,7 +96,7 @@ export function SignUpForm({
/>
<FieldDescription>Use at least 10 characters in production.</FieldDescription>
</Field>
<Field>
{initialCode.length > 4 ? <p className="text-sm text-muted-foreground">Your invitation is attached. You’ll confirm your access after creating your account.</p> : <Field>
<FieldLabel htmlFor="invite">
Invite code {requireInvite ? "" : "(optional)"}
</FieldLabel>
@@ -115,7 +115,7 @@ export function SignUpForm({
className="tap-target"
required={requireInvite}
/>
</Field>
</Field>}
</FieldGroup>
{error ? (
<Alert variant="destructive">
apps/web/src/components/pending-invites.tsx
+9 -1
View File
@@ -1,6 +1,8 @@
"use client";
import { api } from "@/trpc/react";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
import { Empty, EmptyHeader, EmptyTitle, EmptyDescription } from "@/components/ui/empty";
@@ -8,7 +10,12 @@ import { Skeleton } from "@/components/ui/skeleton";
const label = (role: string) => role.charAt(0).toUpperCase() + role.slice(1);
export function PendingInvites({ groupId, eventId }: { groupId: string; eventId?: string }) {
export function PendingInvites({ groupId, eventId, canRevoke = false }: { groupId: string; eventId?: string; canRevoke?: boolean }) {
const utils = api.useUtils();
const revoke = api.group.revokeInvite.useMutation({
onSuccess: async () => { toast.success("Invite revoked"); await utils.group.pendingInvites.invalidate(); },
onError: error => toast.error(error.message),
});
const invites = api.group.pendingInvites.useQuery({ groupId, eventId }, { refetchInterval: 30000 });
return <section aria-label="Pending invites" className="flex flex-col gap-3">
<div className="flex items-center gap-2">
@@ -29,6 +36,7 @@ export function PendingInvites({ groupId, eventId }: { groupId: string; eventId?
{invite.groupRole ? <Badge variant="outline">Workspace {label(invite.groupRole)}</Badge> : null}
{invite.eventRole ? <Badge variant="outline">Event {label(invite.eventRole)}</Badge> : null}
<Badge variant="secondary">{invite.kind === "email" ? "Awaiting acceptance" : "Active code"}</Badge>
{canRevoke ? <Button type="button" variant="outline" disabled={revoke.isPending} onClick={() => { if (window.confirm("Revoke this invitation? It will stop granting access. Existing members keep their access.")) revoke.mutate({ groupId, inviteId: invite.id }); }}>Revoke</Button> : null}
</div>
</li>)}</ul>}
</section>;
apps/web/src/server/api/routers/group.ts
+27
View File
@@ -55,6 +55,33 @@ async function validateInviteGrants(userId: string, input: {
}
export const groupRouter = createTRPCRouter({
rename: protectedProcedure
.input(z.object({ groupId: z.string().uuid(), name: z.string().trim().min(1).max(100) }))
.mutation(async ({ ctx, input }) => {
const { access } = await loadGroupAccess(ctx.session.user.id, input.groupId, await getPlatformRole(ctx.session.user.id));
requireGroupPermission(access.permissions, GROUP_PERMISSIONS.GROUP_MANAGE);
await getDb().transaction(async tx => {
await tx.update(groups).set({ name: input.name, updatedAt: new Date() }).where(eq(groups.id, input.groupId));
await tx.insert(auditEvents).values({ groupId: input.groupId, actorUserId: ctx.session.user.id, action: "group.rename", subjectType: "group", subjectId: input.groupId });
});
return { name: input.name };
}),
revokeInvite: protectedProcedure
.input(z.object({ groupId: z.string().uuid(), inviteId: z.string().uuid() }))
.mutation(async ({ ctx, input }) => {
const { access } = await loadGroupAccess(ctx.session.user.id, input.groupId, await getPlatformRole(ctx.session.user.id));
requireGroupPermission(access.permissions, GROUP_PERMISSIONS.PEOPLE_MANAGE);
await getDb().transaction(async tx => {
const [invite] = await tx.update(invites).set({ status: "revoked", updatedAt: new Date() })
.where(and(eq(invites.id, input.inviteId), eq(invites.groupId, input.groupId), eq(invites.status, "pending")))
.returning({ id: invites.id, eventId: invites.eventId });
if (!invite) throw new TRPCError({ code: "NOT_FOUND", message: "Invite is no longer pending." });
await tx.insert(auditEvents).values({ groupId: input.groupId, eventId: invite.eventId, actorUserId: ctx.session.user.id, action: "invite.revoke", subjectType: "invite", subjectId: invite.id });
});
return { ok: true };
}),
pendingInvites: protectedProcedure
.input(z.object({ groupId: z.string().uuid(), eventId: z.string().uuid().optional() }))
.query(async ({ ctx, input }) => {
apps/web/src/server/api/routers/invites.ts
+14 -1
View File
@@ -1,6 +1,10 @@
import { redeemInviteInputSchema } from "@album/contracts";
import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
import { findInviteByToken, redeemInviteForUser } from "@/server/invites";
import { assertInviteRedeemable, findInviteByToken, redeemInviteForUser } from "@/server/invites";
import { events, groups, getDb } from "@album/database";
import { and, eq } from "drizzle-orm";
import { customBannerUrl, eventBannerUrl } from "@/server/event-banner";
import { galleryIsPublic } from "@/lib/publishing";
import { TRPCError } from "@trpc/server";
import { getDeploymentSettings } from "@/server/settings";
import { consumeRateLimit } from "@/server/rate-limit";
@@ -23,7 +27,16 @@ export const invitesRouter = createTRPCRouter({
if (!invite) {
throw new TRPCError({ code: "NOT_FOUND", message: "Invite not found" });
}
assertInviteRedeemable(invite);
const [event] = invite.eventId && invite.groupId ? await getDb().select().from(events)
.where(and(eq(events.id, invite.eventId), eq(events.groupId, invite.groupId))).limit(1) : [];
const [group] = invite.groupId ? await getDb().select({ name: groups.name }).from(groups).where(eq(groups.id, invite.groupId)).limit(1) : [];
const bannerUrl = event?.customBannerId ? await customBannerUrl(event.id, event.customBannerId)
: event && galleryIsPublic(event.galleryPolicy, event.galleryReleasedAt, event.galleryVisibleAt) ? await eventBannerUrl(event.id, event.bannerPhotoId) : null;
return {
eventTitle: event?.title ?? null,
groupName: group?.name ?? null,
bannerUrl,
kind: invite.kind,
status: invite.status,
groupRole: invite.groupRole,
apps/web/src/server/polish.integration.test.ts
+18 -1
View File
@@ -7,6 +7,7 @@ import { hashToken } from "./tokens";
import { redeemInviteForUser } from "./invites";
import { signsRouter } from "./api/routers/signs";
import { groupRouter } from "./api/routers/group";
import { invitesRouter } from "./api/routers/invites";
import type { TrpcContext } from "./api/trpc";
test.skipIf(process.env.POLISH_INTEGRATION !== "1")("invitation isolation, atomic redemption, and saved sign roundtrip/conflicts", async () => {
@@ -28,7 +29,12 @@ test.skipIf(process.env.POLISH_INTEGRATION !== "1")("invitation isolation, atomi
const [used] = await db.select().from(invites).where(eq(invites.tokenHash, hashToken(token)));
expect(used!.usedCount).toBe(1);
const workspace = groupRouter.createCaller(ctx(0));
const [pending] = await db.insert(invites).values({ kind: "email", email: people[1]!.email, tokenHash: hashToken(crypto.randomUUID()), groupId: group!.id, eventId: event!.id, eventRole: "manager" }).returning();
const pendingToken = crypto.randomUUID();
const [pending] = await db.insert(invites).values({ kind: "email", email: people[1]!.email, tokenHash: hashToken(pendingToken), groupId: group!.id, eventId: event!.id, eventRole: "manager" }).returning();
const preview = await invitesRouter.createCaller(ctx(1)).preview({ token: pendingToken });
expect(preview.eventTitle).toBe("Polish test");
expect(preview.eventRole).toBe("manager");
expect(preview).not.toHaveProperty("email");
await db.insert(invites).values([
{ kind: "email", tokenHash: hashToken(crypto.randomUUID()), groupId: group!.id, expiresAt: new Date(0) },
{ kind: "email", tokenHash: hashToken(crypto.randomUUID()), groupId: group!.id, usedCount: 1, maxUses: 1 },
@@ -40,6 +46,17 @@ test.skipIf(process.env.POLISH_INTEGRATION !== "1")("invitation isolation, atomi
expect(await workspace.pendingInvites({ groupId: group!.id })).toHaveLength(1);
await expect(groupRouter.createCaller(ctx(1)).pendingInvites({ groupId: group!.id })).rejects.toThrow();
await expect(workspace.pendingInvites({ groupId: crypto.randomUUID(), eventId: event!.id })).rejects.toThrow();
await expect(groupRouter.createCaller(ctx(1)).rename({ groupId: group!.id, name: "Denied" })).rejects.toThrow();
expect(await workspace.rename({ groupId: group!.id, name: " Updated group " })).toEqual({ name: "Updated group" });
expect((await workspace.get({ groupId: group!.id })).name).toBe("Updated group");
await expect(workspace.setMember({ groupId: group!.id, userId: people[0]!.id, role: "member" })).rejects.toThrow("at least one owner");
await expect(groupRouter.createCaller(ctx(1)).revokeInvite({ groupId: group!.id, inviteId: pending!.id })).rejects.toThrow();
await expect(workspace.revokeInvite({ groupId: group!.id, inviteId: crypto.randomUUID() })).rejects.toThrow();
await workspace.revokeInvite({ groupId: group!.id, inviteId: pending!.id });
await expect(invitesRouter.createCaller(ctx(1)).preview({ token: pendingToken })).rejects.toThrow("revoked");
expect(await workspace.pendingInvites({ groupId: group!.id })).toHaveLength(0);
const [revoked] = await db.select().from(invites).where(and(eq(invites.groupId, group!.id), eq(invites.id, pending!.id)));
expect(revoked!.status).toBe("revoked");
await expect(workspace.createCode({ groupId: group!.id, grantUnlimitedEvents: true })).rejects.toThrow("platform administrators");
const signs = signsRouter.createCaller(ctx(0));
await expect(signsRouter.createCaller(ctx(1)).prepare({ eventId: event!.id })).rejects.toThrow();