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

Polish invitation resend and upload recovery

Browse Source
This commit is contained in:
soconnor
2026-09-10 11:53:59 -04:00
parent 361e14ec1d
commit d44ef7348c
15 changed files with 208 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/dashboard/people/group-people.tsx
+10 -4
View File
@@ -7,6 +7,7 @@ import { toast } from "sonner";
import type { GroupRole } from "@album/contracts";
import { api } from "@/trpc/react";
import { PendingInvites } from "@/components/pending-invites";
import { useConfirmAction } from "@/components/confirm-action";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
@@ -26,6 +27,8 @@ export function GroupPeople({
canManage: boolean;
}) {
const utils = api.useUtils();
const confirmation = useConfirmAction();
const [search, setSearch] = useState("");
const members = api.group.members.useQuery({ groupId });
const [email, setEmail] = useState("");
const [role, setRole] = useState<GroupRole>("member");
@@ -66,15 +69,18 @@ export function GroupPeople({
</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-4">
{confirmation.dialog}
<Input aria-label="Search group members" placeholder="Search members by name or email" value={search} onChange={event => setSearch(event.target.value)} />
{members.data && !members.data.some(member => `${member.name} ${member.email}`.toLowerCase().includes(search.toLowerCase())) ? <p role="status" className="text-sm text-muted-foreground">No matching members.</p> : null}
<ul className="flex flex-col gap-2">
{(members.data ?? []).map((member) => (
<li key={member.id} className="flex items-center justify-between gap-3">
{(members.data ?? []).filter(member => `${member.name} ${member.email}`.toLowerCase().includes(search.toLowerCase())).map((member) => (
<li key={member.id} className="flex flex-wrap items-center justify-between gap-3">
<div>
<p className="font-medium">{member.name}</p>
<p className="text-xs text-muted-foreground">{member.email}</p>
</div>
<div className="flex items-center gap-2">
{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 }); }}>
{canManage ? <Select value={member.role} disabled={setMember.isPending || remove.isPending} onValueChange={value => confirmation.ask(`Change ${member.name}'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>}
@@ -83,7 +89,7 @@ export function GroupPeople({
disabled={remove.isPending || setMember.isPending}
variant="ghost"
onClick={() =>
window.confirm("Remove this member from the group and all its events?") && remove.mutate({ groupId, userId: member.userId })
confirmation.ask("Remove this member from the group and all its events?", () => remove.mutate({ groupId, userId: member.userId }))
}
>
Remove
apps/web/src/app/e/[slug]/guest-upload.tsx
+31 -12
View File
@@ -1,6 +1,6 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import { ChevronDownIcon, SendIcon, UploadIcon } from "lucide-react";
import { useRouter } from "next/navigation";
@@ -19,6 +19,9 @@ import { Progress } from "@/components/ui/progress";
import { Spinner } from "@/components/ui/spinner";
type QueueItem = {
file?: File;
created?: { photoId: string; eventId: string; uploadUrl: string };
uploaded?: boolean;
id: string;
name: string;
progress: number;
@@ -53,6 +56,8 @@ export function GuestUpload({
const startSubmission = api.guest.startSubmission.useMutation();
const createPhoto = api.photos.create.useMutation();
const completePhoto = api.photos.complete.useMutation();
const retryUpload = api.photos.retryUpload.useMutation();
const uploading = useRef(false);
const utils = api.useUtils();
useEffect(() => {
@@ -70,6 +75,12 @@ export function GuestUpload({
() => queue.some((item) => item.status === "queued" || item.status === "uploading"),
[queue],
);
useEffect(() => {
if (!busy) return;
const warn = (event: BeforeUnloadEvent) => { event.preventDefault(); event.returnValue = ""; };
window.addEventListener("beforeunload", warn);
return () => window.removeEventListener("beforeunload", warn);
}, [busy]);
async function sendNote(detailsOnly = false) {
try {
@@ -84,29 +95,32 @@ export function GuestUpload({
} catch (error) { toast.error(error instanceof Error ? error.message : "Could not send note"); }
}
async function uploadFiles(files: File[]) {
async function uploadFiles(files: File[], retryItems?: QueueItem[]) {
const accepted = files.filter(isAllowedPhoto);
if (!uploadEnabled || busy) return;
if (!uploadEnabled || uploading.current) return;
if (accepted.length !== files.length) {
toast.error("Some files were skipped. Use JPEG, PNG, WebP, or HEIC under 25 MB.");
}
if (!accepted.length) return;
const items: QueueItem[] = accepted.map((file) => ({
uploading.current = true;
const items: QueueItem[] = retryItems ?? accepted.map((file) => ({
file,
id: crypto.randomUUID(),
name: file.name,
progress: 0,
status: "queued",
}));
setQueue((current) => [...items, ...current]);
for (const item of items) { item.status = "queued"; item.error = undefined; }
setQueue((current) => retryItems ? current.map(entry => items.find(item => item.id === entry.id) ?? entry) : [...items, ...current]);
const trimmedName = name.trim();
const trimmedEmail = email.trim();
const trimmedNote = note.trim();
try {
localStorage.setItem(guestKey(slug, "name"), trimmedName);
localStorage.setItem(guestKey(slug, "email"), trimmedEmail);
localStorage.setItem(guestKey(slug, "note"), trimmedNote);
localStorage.setItem(guestKey(slug, "notify"), String(notify));
try {
await ensureGuest.mutateAsync({
eventSlug: slug,
displayName: trimmedName || undefined,
@@ -127,25 +141,29 @@ export function GuestUpload({
),
);
try {
const created = await createPhoto.mutateAsync({
const created = item.created ?? await createPhoto.mutateAsync({
eventSlug: slug,
submissionId: submission.submissionId,
contentType,
fileName: file.name,
byteSize: file.size,
});
await putWithProgress(created.uploadUrl, file, contentType, (progress) => {
const previous = item.created;
item.created = created;
const uploadUrl = previous && !item.uploaded ? (await retryUpload.mutateAsync({ photoId: created.photoId, eventId: created.eventId })).uploadUrl : created.uploadUrl;
if (!item.uploaded && uploadUrl) await putWithProgress(uploadUrl, file, contentType, (progress) => {
setQueue((current) =>
current.map((entry) =>
entry.id === item.id ? { ...entry, progress } : entry,
),
);
});
item.uploaded = true;
await completePhoto.mutateAsync({ photoId: created.photoId });
setQueue((current) =>
current.map((entry) =>
entry.id === item.id
? { ...entry, status: "done", progress: 100 }
? { ...entry, status: "done", progress: 100, file: undefined }
: entry,
),
);
@@ -155,7 +173,7 @@ export function GuestUpload({
setQueue((current) =>
current.map((entry) =>
entry.id === item.id
? { ...entry, status: "error", error: message }
? { ...entry, created: item.created, uploaded: item.uploaded, status: "error", error: message }
: entry,
),
);
@@ -172,7 +190,7 @@ export function GuestUpload({
: entry,
),
);
}
} finally { uploading.current = false; }
}
if (!uploadEnabled && !notesEnabled) {
@@ -244,12 +262,13 @@ export function GuestUpload({
<li key={item.id} className="flex flex-col gap-1">
<div className="flex justify-between gap-3 text-sm">
<span className="truncate">{item.name}</span>
<span className="text-muted-foreground">{item.status}</span>
<span className="shrink-0 text-muted-foreground">{item.status === "done" ? "Uploaded · processing for gallery" : item.status === "uploading" ? `${item.progress}% uploaded` : item.status === "error" ? "Needs retry" : "Waiting"}</span>
</div>
<Progress value={item.progress} />
{item.error ? (
<p className="text-sm text-destructive">{item.error}</p>
) : null}
{item.status === "error" && item.file ? <Button type="button" variant="outline" disabled={busy || !uploadEnabled} onClick={() => void uploadFiles([item.file!], [{ ...item }])}>Retry file</Button> : null}
</li>
))}
</ul>
apps/web/src/app/invitations/[token]/page.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export default async function InvitationPage({
</CardHeader>
<CardContent className="flex flex-col gap-3">
<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} /> : <>
{session ? <RedeemInviteButton token={token} unverifiedEmail={!session.user.emailVerified ? session.user.email : undefined} /> : <>
<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>
</>}
apps/web/src/app/invitations/[token]/redeem-button.tsx
+10 -1
View File
@@ -5,8 +5,11 @@ import { toast } from "sonner";
import { api } from "@/trpc/react";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { useState } from "react";
import { authClient } from "@/lib/auth-client";
export function RedeemInviteButton({ token }: { token: string }) {
export function RedeemInviteButton({ token, unverifiedEmail }: { token: string; unverifiedEmail?: string }) {
const [sending, setSending] = useState(false);
const router = useRouter();
const redeem = api.invites.redeem.useMutation({
onSuccess: (result) => {
@@ -21,6 +24,12 @@ export function RedeemInviteButton({ token }: { token: string }) {
onError: (error) => toast.error(error.message),
});
if (unverifiedEmail) return <div className="flex flex-col gap-3"><p>Verify your email before accepting. Open the verification link in your inbox, then return here.</p><Button disabled={sending} onClick={async () => {
setSending(true);
try { const result = await authClient.sendVerificationEmail({ email: unverifiedEmail, callbackURL: `/invitations/${encodeURIComponent(token)}` }); if (result.error) throw new Error(result.error.message); toast.success("Verification email sent"); }
catch { toast.error("Could not send verification email. Try again shortly."); }
finally { setSending(false); }
}}>{sending ? "Sending…" : "Resend verification email"}</Button></div>;
return (
<Button
onClick={() => redeem.mutate({ token })}