aboutsummaryrefslogtreecommitdiffstats
path: root/apps
diff options
context:
space:
mode:
Diffstat (limited to 'apps')
-rw-r--r--apps/web/app/admin/background_jobs/page.tsx7
-rw-r--r--apps/web/app/admin/layout.tsx3
-rw-r--r--apps/web/app/admin/overview/page.tsx7
-rw-r--r--apps/web/app/invite/[token]/page.tsx28
-rw-r--r--apps/web/components/admin/CreateInviteDialog.tsx134
-rw-r--r--apps/web/components/admin/InvitesList.tsx192
-rw-r--r--apps/web/components/admin/UserList.tsx214
-rw-r--r--apps/web/components/invite/InviteAcceptForm.tsx311
8 files changed, 790 insertions, 106 deletions
diff --git a/apps/web/app/admin/background_jobs/page.tsx b/apps/web/app/admin/background_jobs/page.tsx
index 6a13dd64..92b9e370 100644
--- a/apps/web/app/admin/background_jobs/page.tsx
+++ b/apps/web/app/admin/background_jobs/page.tsx
@@ -1,5 +1,10 @@
+import { AdminCard } from "@/components/admin/AdminCard";
import BackgroundJobs from "@/components/admin/BackgroundJobs";
export default function BackgroundJobsPage() {
- return <BackgroundJobs />;
+ return (
+ <AdminCard>
+ <BackgroundJobs />
+ </AdminCard>
+ );
}
diff --git a/apps/web/app/admin/layout.tsx b/apps/web/app/admin/layout.tsx
index 20bd38bb..62a6932a 100644
--- a/apps/web/app/admin/layout.tsx
+++ b/apps/web/app/admin/layout.tsx
@@ -1,5 +1,4 @@
import { redirect } from "next/navigation";
-import { AdminCard } from "@/components/admin/AdminCard";
import { AdminNotices } from "@/components/admin/AdminNotices";
import MobileSidebar from "@/components/shared/sidebar/MobileSidebar";
import Sidebar from "@/components/shared/sidebar/Sidebar";
@@ -54,7 +53,7 @@ export default async function AdminLayout({
>
<div className="flex flex-col gap-1">
<AdminNotices />
- <AdminCard>{children}</AdminCard>
+ {children}
</div>
</SidebarLayout>
);
diff --git a/apps/web/app/admin/overview/page.tsx b/apps/web/app/admin/overview/page.tsx
index 226fb9d5..fe463058 100644
--- a/apps/web/app/admin/overview/page.tsx
+++ b/apps/web/app/admin/overview/page.tsx
@@ -1,5 +1,10 @@
+import { AdminCard } from "@/components/admin/AdminCard";
import ServerStats from "@/components/admin/ServerStats";
export default function AdminOverviewPage() {
- return <ServerStats />;
+ return (
+ <AdminCard>
+ <ServerStats />
+ </AdminCard>
+ );
}
diff --git a/apps/web/app/invite/[token]/page.tsx b/apps/web/app/invite/[token]/page.tsx
new file mode 100644
index 00000000..874146fc
--- /dev/null
+++ b/apps/web/app/invite/[token]/page.tsx
@@ -0,0 +1,28 @@
+import { redirect } from "next/navigation";
+import InviteAcceptForm from "@/components/invite/InviteAcceptForm";
+import KarakeepLogo from "@/components/KarakeepIcon";
+import { getServerAuthSession } from "@/server/auth";
+
+interface InvitePageProps {
+ params: {
+ token: string;
+ };
+}
+
+export default async function InvitePage({ params }: InvitePageProps) {
+ const session = await getServerAuthSession();
+ if (session) {
+ redirect("/");
+ }
+
+ return (
+ <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+ <div className="w-full max-w-md space-y-8">
+ <div className="flex items-center justify-center">
+ <KarakeepLogo height={80} />
+ </div>
+ <InviteAcceptForm token={params.token} />
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/components/admin/CreateInviteDialog.tsx b/apps/web/components/admin/CreateInviteDialog.tsx
new file mode 100644
index 00000000..84f5c60f
--- /dev/null
+++ b/apps/web/components/admin/CreateInviteDialog.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { useState } from "react";
+import { ActionButton } from "@/components/ui/action-button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TRPCClientError } from "@trpc/client";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const createInviteSchema = z.object({
+ email: z.string().email("Please enter a valid email address"),
+});
+
+interface CreateInviteDialogProps {
+ children: React.ReactNode;
+}
+
+export default function CreateInviteDialog({
+ children,
+}: CreateInviteDialogProps) {
+ const [open, setOpen] = useState(false);
+ const [errorMessage, setErrorMessage] = useState("");
+
+ const form = useForm<z.infer<typeof createInviteSchema>>({
+ resolver: zodResolver(createInviteSchema),
+ defaultValues: {
+ email: "",
+ },
+ });
+
+ const invalidateInvitesList = api.useUtils().invites.list.invalidate;
+ const createInviteMutation = api.invites.create.useMutation({
+ onSuccess: () => {
+ toast({
+ description: "Invite sent successfully",
+ });
+ invalidateInvitesList();
+ setOpen(false);
+ form.reset();
+ setErrorMessage("");
+ },
+ onError: (e) => {
+ if (e instanceof TRPCClientError) {
+ setErrorMessage(e.message);
+ } else {
+ setErrorMessage("Failed to send invite");
+ }
+ },
+ });
+
+ return (
+ <Dialog open={open} onOpenChange={setOpen}>
+ <DialogTrigger asChild>{children}</DialogTrigger>
+ <DialogContent className="sm:max-w-md">
+ <DialogHeader>
+ <DialogTitle>Send User Invitation</DialogTitle>
+ <DialogDescription>
+ Send an invitation to a new user to join Karakeep. They&apos;ll
+ receive an email with instructions to create their account and will
+ be assigned the &quot;user&quot; role.
+ </DialogDescription>
+ </DialogHeader>
+
+ <Form {...form}>
+ <form
+ onSubmit={form.handleSubmit(async (value) => {
+ setErrorMessage("");
+ await createInviteMutation.mutateAsync(value);
+ })}
+ className="space-y-4"
+ >
+ {errorMessage && (
+ <p className="text-sm text-destructive">{errorMessage}</p>
+ )}
+
+ <FormField
+ control={form.control}
+ name="email"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Email Address</FormLabel>
+ <FormControl>
+ <Input
+ type="email"
+ placeholder="user@example.com"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <div className="flex justify-end space-x-2">
+ <ActionButton
+ type="button"
+ variant="outline"
+ loading={false}
+ onClick={() => setOpen(false)}
+ >
+ Cancel
+ </ActionButton>
+ <ActionButton
+ type="submit"
+ loading={createInviteMutation.isPending}
+ >
+ Send Invitation
+ </ActionButton>
+ </div>
+ </form>
+ </Form>
+ </DialogContent>
+ </Dialog>
+ );
+}
diff --git a/apps/web/components/admin/InvitesList.tsx b/apps/web/components/admin/InvitesList.tsx
new file mode 100644
index 00000000..56d47fa9
--- /dev/null
+++ b/apps/web/components/admin/InvitesList.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import { ActionButton } from "@/components/ui/action-button";
+import { ButtonWithTooltip } from "@/components/ui/button";
+import LoadingSpinner from "@/components/ui/spinner";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
+import { formatDistanceToNow } from "date-fns";
+import { Mail, MailX, UserPlus } from "lucide-react";
+
+import ActionConfirmingDialog from "../ui/action-confirming-dialog";
+import CreateInviteDialog from "./CreateInviteDialog";
+
+export default function InvitesList() {
+ const invalidateInvitesList = api.useUtils().invites.list.invalidate;
+ const { data: invites, isLoading } = api.invites.list.useQuery();
+
+ const { mutateAsync: revokeInvite, isPending: isRevokePending } =
+ api.invites.revoke.useMutation({
+ onSuccess: () => {
+ toast({
+ description: "Invite revoked successfully",
+ });
+ invalidateInvitesList();
+ },
+ onError: (e) => {
+ toast({
+ variant: "destructive",
+ description: `Failed to revoke invite: ${e.message}`,
+ });
+ },
+ });
+
+ const { mutateAsync: resendInvite, isPending: isResendPending } =
+ api.invites.resend.useMutation({
+ onSuccess: () => {
+ toast({
+ description: "Invite resent successfully",
+ });
+ invalidateInvitesList();
+ },
+ onError: (e) => {
+ toast({
+ variant: "destructive",
+ description: `Failed to resend invite: ${e.message}`,
+ });
+ },
+ });
+
+ if (isLoading) {
+ return <LoadingSpinner />;
+ }
+
+ const activeInvites =
+ invites?.invites?.filter(
+ (invite) => new Date(invite.expiresAt) > new Date(),
+ ) || [];
+
+ const expiredInvites =
+ invites?.invites?.filter(
+ (invite) => new Date(invite.expiresAt) <= new Date(),
+ ) || [];
+
+ const getStatusBadge = (
+ invite: NonNullable<typeof invites>["invites"][0],
+ ) => {
+ if (new Date(invite.expiresAt) <= new Date()) {
+ return (
+ <span className="rounded-full bg-red-100 px-2 py-1 text-xs text-red-800">
+ Expired
+ </span>
+ );
+ }
+ return (
+ <span className="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-800">
+ Active
+ </span>
+ );
+ };
+
+ const InviteTable = ({
+ invites: inviteList,
+ title,
+ }: {
+ invites: NonNullable<typeof invites>["invites"];
+ title: string;
+ }) => (
+ <div className="mb-6">
+ <h3 className="mb-3 text-lg font-medium">
+ {title} ({inviteList.length})
+ </h3>
+ {inviteList.length === 0 ? (
+ <p className="text-sm text-gray-500">
+ No {title.toLowerCase()} invites
+ </p>
+ ) : (
+ <Table>
+ <TableHeader className="bg-gray-200">
+ <TableHead>Email</TableHead>
+ <TableHead>Invited By</TableHead>
+ <TableHead>Created</TableHead>
+ <TableHead>Expires</TableHead>
+ <TableHead>Status</TableHead>
+ <TableHead>Actions</TableHead>
+ </TableHeader>
+ <TableBody>
+ {inviteList.map((invite) => (
+ <TableRow key={invite.id}>
+ <TableCell className="py-2">{invite.email}</TableCell>
+ <TableCell className="py-2">{invite.invitedBy.name}</TableCell>
+ <TableCell className="py-2">
+ {formatDistanceToNow(new Date(invite.createdAt), {
+ addSuffix: true,
+ })}
+ </TableCell>
+ <TableCell className="py-2">
+ {formatDistanceToNow(new Date(invite.expiresAt), {
+ addSuffix: true,
+ })}
+ </TableCell>
+ <TableCell className="py-2">{getStatusBadge(invite)}</TableCell>
+ <TableCell className="flex gap-1 py-2">
+ {new Date(invite.expiresAt) > new Date() && (
+ <>
+ <ButtonWithTooltip
+ tooltip="Resend Invite"
+ variant="outline"
+ size="sm"
+ onClick={() => resendInvite({ inviteId: invite.id })}
+ disabled={isResendPending}
+ >
+ <Mail size={14} />
+ </ButtonWithTooltip>
+ <ActionConfirmingDialog
+ title="Revoke Invite"
+ description={`Are you sure you want to revoke the invite for ${invite.email}? This action cannot be undone.`}
+ actionButton={(setDialogOpen) => (
+ <ActionButton
+ variant="destructive"
+ loading={isRevokePending}
+ onClick={async () => {
+ await revokeInvite({ inviteId: invite.id });
+ setDialogOpen(false);
+ }}
+ >
+ Revoke
+ </ActionButton>
+ )}
+ >
+ <ButtonWithTooltip
+ tooltip="Revoke Invite"
+ variant="outline"
+ size="sm"
+ >
+ <MailX size={14} color="red" />
+ </ButtonWithTooltip>
+ </ActionConfirmingDialog>
+ </>
+ )}
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ )}
+ </div>
+ );
+
+ return (
+ <div className="flex flex-col gap-4">
+ <div className="mb-2 flex items-center justify-between text-xl font-medium">
+ <span>User Invitations</span>
+ <CreateInviteDialog>
+ <ButtonWithTooltip tooltip="Send Invite" variant="outline">
+ <UserPlus size={16} />
+ </ButtonWithTooltip>
+ </CreateInviteDialog>
+ </div>
+
+ <InviteTable invites={activeInvites} title="Active Invites" />
+ <InviteTable invites={expiredInvites} title="Expired Invites" />
+ </div>
+ );
+}
diff --git a/apps/web/components/admin/UserList.tsx b/apps/web/components/admin/UserList.tsx
index 2dd86277..3313fe60 100644
--- a/apps/web/components/admin/UserList.tsx
+++ b/apps/web/components/admin/UserList.tsx
@@ -19,6 +19,8 @@ import { useSession } from "next-auth/react";
import ActionConfirmingDialog from "../ui/action-confirming-dialog";
import AddUserDialog from "./AddUserDialog";
+import { AdminCard } from "./AdminCard";
+import InvitesList from "./InvitesList";
import ResetPasswordDialog from "./ResetPasswordDialog";
import UpdateUserDialog from "./UpdateUserDialog";
@@ -57,110 +59,118 @@ export default function UsersSection() {
return (
<div className="flex flex-col gap-4">
- <div className="mb-2 flex items-center justify-between text-xl font-medium">
- <span>{t("admin.users_list.users_list")}</span>
- <AddUserDialog>
- <ButtonWithTooltip tooltip="Create User" variant="outline">
- <UserPlus size={16} />
- </ButtonWithTooltip>
- </AddUserDialog>
- </div>
+ <AdminCard>
+ <div className="flex flex-col gap-4">
+ <div className="mb-2 flex items-center justify-between text-xl font-medium">
+ <span>{t("admin.users_list.users_list")}</span>
+ <AddUserDialog>
+ <ButtonWithTooltip tooltip="Create User" variant="outline">
+ <UserPlus size={16} />
+ </ButtonWithTooltip>
+ </AddUserDialog>
+ </div>
- <Table>
- <TableHeader className="bg-gray-200">
- <TableHead>{t("common.name")}</TableHead>
- <TableHead>{t("common.email")}</TableHead>
- <TableHead>{t("admin.users_list.num_bookmarks")}</TableHead>
- <TableHead>{t("common.quota")}</TableHead>
- <TableHead>Storage Quota</TableHead>
- <TableHead>{t("admin.users_list.asset_sizes")}</TableHead>
- <TableHead>{t("common.role")}</TableHead>
- <TableHead>{t("admin.users_list.local_user")}</TableHead>
- <TableHead>{t("common.actions")}</TableHead>
- </TableHeader>
- <TableBody>
- {users.users.map((u) => (
- <TableRow key={u.id}>
- <TableCell className="py-1">{u.name}</TableCell>
- <TableCell className="py-1">{u.email}</TableCell>
- <TableCell className="py-1">
- {userStats[u.id].numBookmarks}
- </TableCell>
- <TableCell className="py-1">
- {u.bookmarkQuota ?? t("admin.users_list.unlimited")}
- </TableCell>
- <TableCell className="py-1">
- {u.storageQuota
- ? toHumanReadableSize(u.storageQuota)
- : t("admin.users_list.unlimited")}
- </TableCell>
- <TableCell className="py-1">
- {toHumanReadableSize(userStats[u.id].assetSizes)}
- </TableCell>
- <TableCell className="py-1">
- {u.role && t(`common.roles.${u.role}`)}
- </TableCell>
- <TableCell className="py-1">
- {u.localUser ? <Check /> : <X />}
- </TableCell>
- <TableCell className="flex gap-1 py-1">
- <ActionConfirmingDialog
- title={t("admin.users_list.delete_user")}
- description={t(
- "admin.users_list.delete_user_confirm_description",
- {
- name: u.name ?? "this user",
- },
- )}
- actionButton={(setDialogOpen) => (
- <ActionButton
- variant="destructive"
- loading={isDeletionPending}
- onClick={async () => {
- await deleteUser({ userId: u.id });
- setDialogOpen(false);
- }}
+ <Table>
+ <TableHeader className="bg-gray-200">
+ <TableHead>{t("common.name")}</TableHead>
+ <TableHead>{t("common.email")}</TableHead>
+ <TableHead>{t("admin.users_list.num_bookmarks")}</TableHead>
+ <TableHead>{t("common.quota")}</TableHead>
+ <TableHead>Storage Quota</TableHead>
+ <TableHead>{t("admin.users_list.asset_sizes")}</TableHead>
+ <TableHead>{t("common.role")}</TableHead>
+ <TableHead>{t("admin.users_list.local_user")}</TableHead>
+ <TableHead>{t("common.actions")}</TableHead>
+ </TableHeader>
+ <TableBody>
+ {users.users.map((u) => (
+ <TableRow key={u.id}>
+ <TableCell className="py-1">{u.name}</TableCell>
+ <TableCell className="py-1">{u.email}</TableCell>
+ <TableCell className="py-1">
+ {userStats[u.id].numBookmarks}
+ </TableCell>
+ <TableCell className="py-1">
+ {u.bookmarkQuota ?? t("admin.users_list.unlimited")}
+ </TableCell>
+ <TableCell className="py-1">
+ {u.storageQuota
+ ? toHumanReadableSize(u.storageQuota)
+ : t("admin.users_list.unlimited")}
+ </TableCell>
+ <TableCell className="py-1">
+ {toHumanReadableSize(userStats[u.id].assetSizes)}
+ </TableCell>
+ <TableCell className="py-1">
+ {u.role && t(`common.roles.${u.role}`)}
+ </TableCell>
+ <TableCell className="py-1">
+ {u.localUser ? <Check /> : <X />}
+ </TableCell>
+ <TableCell className="flex gap-1 py-1">
+ <ActionConfirmingDialog
+ title={t("admin.users_list.delete_user")}
+ description={t(
+ "admin.users_list.delete_user_confirm_description",
+ {
+ name: u.name ?? "this user",
+ },
+ )}
+ actionButton={(setDialogOpen) => (
+ <ActionButton
+ variant="destructive"
+ loading={isDeletionPending}
+ onClick={async () => {
+ await deleteUser({ userId: u.id });
+ setDialogOpen(false);
+ }}
+ >
+ Delete
+ </ActionButton>
+ )}
>
- Delete
- </ActionButton>
- )}
- >
- <ButtonWithTooltip
- tooltip={t("admin.users_list.delete_user")}
- variant="outline"
- disabled={session!.user.id == u.id}
- >
- <Trash size={16} color="red" />
- </ButtonWithTooltip>
- </ActionConfirmingDialog>
- <ResetPasswordDialog userId={u.id}>
- <ButtonWithTooltip
- tooltip={t("admin.users_list.reset_password")}
- variant="outline"
- disabled={session!.user.id == u.id || !u.localUser}
- >
- <KeyRound size={16} color="red" />
- </ButtonWithTooltip>
- </ResetPasswordDialog>
- <UpdateUserDialog
- userId={u.id}
- currentRole={u.role!}
- currentQuota={u.bookmarkQuota}
- currentStorageQuota={u.storageQuota}
- >
- <ButtonWithTooltip
- tooltip="Edit User"
- variant="outline"
- disabled={session!.user.id == u.id}
- >
- <Pencil size={16} color="red" />
- </ButtonWithTooltip>
- </UpdateUserDialog>
- </TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
+ <ButtonWithTooltip
+ tooltip={t("admin.users_list.delete_user")}
+ variant="outline"
+ disabled={session!.user.id == u.id}
+ >
+ <Trash size={16} color="red" />
+ </ButtonWithTooltip>
+ </ActionConfirmingDialog>
+ <ResetPasswordDialog userId={u.id}>
+ <ButtonWithTooltip
+ tooltip={t("admin.users_list.reset_password")}
+ variant="outline"
+ disabled={session!.user.id == u.id || !u.localUser}
+ >
+ <KeyRound size={16} color="red" />
+ </ButtonWithTooltip>
+ </ResetPasswordDialog>
+ <UpdateUserDialog
+ userId={u.id}
+ currentRole={u.role!}
+ currentQuota={u.bookmarkQuota}
+ currentStorageQuota={u.storageQuota}
+ >
+ <ButtonWithTooltip
+ tooltip="Edit User"
+ variant="outline"
+ disabled={session!.user.id == u.id}
+ >
+ <Pencil size={16} color="red" />
+ </ButtonWithTooltip>
+ </UpdateUserDialog>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </div>
+ </AdminCard>
+
+ <AdminCard>
+ <InvitesList />
+ </AdminCard>
</div>
);
}
diff --git a/apps/web/components/invite/InviteAcceptForm.tsx b/apps/web/components/invite/InviteAcceptForm.tsx
new file mode 100644
index 00000000..dcebed73
--- /dev/null
+++ b/apps/web/components/invite/InviteAcceptForm.tsx
@@ -0,0 +1,311 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ActionButton } from "@/components/ui/action-button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/trpc";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TRPCClientError } from "@trpc/client";
+import { AlertCircle, Clock, Loader2, Mail, UserPlus } from "lucide-react";
+import { signIn } from "next-auth/react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const inviteAcceptSchema = z
+ .object({
+ name: z.string().min(1, "Name is required"),
+ password: z.string().min(8, "Password must be at least 8 characters"),
+ confirmPassword: z
+ .string()
+ .min(8, "Password must be at least 8 characters"),
+ })
+ .refine((data) => data.password === data.confirmPassword, {
+ message: "Passwords don't match",
+ path: ["confirmPassword"],
+ });
+
+interface InviteAcceptFormProps {
+ token: string;
+}
+
+export default function InviteAcceptForm({ token }: InviteAcceptFormProps) {
+ const router = useRouter();
+
+ const form = useForm<z.infer<typeof inviteAcceptSchema>>({
+ resolver: zodResolver(inviteAcceptSchema),
+ });
+
+ const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+ const {
+ isPending: loading,
+ data: inviteData,
+ error,
+ } = api.invites.get.useQuery({ token });
+
+ useEffect(() => {
+ if (error) {
+ setErrorMessage(error.message);
+ }
+ }, [error]);
+
+ const acceptInviteMutation = api.invites.accept.useMutation();
+
+ const handleBackToSignIn = () => {
+ router.push("/signin");
+ };
+
+ if (loading) {
+ return (
+ <Card className="w-full">
+ <CardHeader className="text-center">
+ <CardTitle className="text-2xl font-bold">
+ Loading Invitation
+ </CardTitle>
+ <CardDescription>
+ Please wait while we verify your invitation...
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-4">
+ <div className="flex items-center justify-center">
+ <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
+ </div>
+ </CardContent>
+ </Card>
+ );
+ }
+
+ if (!inviteData) {
+ return (
+ <Card className="w-full">
+ <CardHeader className="text-center">
+ <CardTitle className="text-2xl font-bold">
+ Invalid Invitation
+ </CardTitle>
+ <CardDescription>
+ This invitation link is not valid or has been removed.
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-4">
+ <div className="flex items-center justify-center">
+ <AlertCircle className="h-12 w-12 text-red-500" />
+ </div>
+
+ {errorMessage && (
+ <Alert variant="destructive">
+ <AlertCircle className="h-4 w-4" />
+ <AlertDescription>{errorMessage}</AlertDescription>
+ </Alert>
+ )}
+
+ <Button onClick={handleBackToSignIn} className="w-full">
+ Back to Sign In
+ </Button>
+ </CardContent>
+ </Card>
+ );
+ }
+
+ if (inviteData.expired) {
+ return (
+ <Card className="w-full">
+ <CardHeader className="text-center">
+ <CardTitle className="text-2xl font-bold">
+ Invitation Expired
+ </CardTitle>
+ <CardDescription>
+ This invitation link has expired and is no longer valid.
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-4">
+ <div className="flex items-center justify-center">
+ <Clock className="h-12 w-12 text-orange-500" />
+ </div>
+
+ <div className="space-y-2 text-center">
+ <p className="text-sm text-gray-600">
+ Please contact an administrator to request a new invitation.
+ </p>
+ </div>
+
+ <Button
+ onClick={handleBackToSignIn}
+ variant="outline"
+ className="w-full"
+ >
+ Back to Sign In
+ </Button>
+ </CardContent>
+ </Card>
+ );
+ }
+
+ return (
+ <Card className="w-full">
+ <CardHeader className="text-center">
+ <CardTitle className="text-2xl font-bold">
+ Accept Your Invitation
+ </CardTitle>
+ <CardDescription>
+ Complete your account setup to join Karakeep
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-6">
+ <div className="flex items-center justify-center">
+ <UserPlus className="h-12 w-12 text-blue-600" />
+ </div>
+
+ <div className="space-y-2 text-center">
+ <div className="flex items-center justify-center space-x-2">
+ <Mail className="h-4 w-4 text-gray-500" />
+ <p className="text-sm text-gray-600">Invited email:</p>
+ </div>
+ <p className="font-medium text-gray-900">{inviteData.email}</p>
+ </div>
+
+ <Form {...form}>
+ <form
+ onSubmit={form.handleSubmit(async (value) => {
+ try {
+ await acceptInviteMutation.mutateAsync({
+ token,
+ name: value.name,
+ password: value.password,
+ });
+
+ // Sign in the user after successful account creation
+ const resp = await signIn("credentials", {
+ redirect: false,
+ email: inviteData.email,
+ password: value.password,
+ });
+
+ if (!resp || !resp.ok || resp.error) {
+ setErrorMessage(
+ resp?.error ??
+ "Account created but sign in failed. Please try signing in manually.",
+ );
+ return;
+ }
+
+ router.replace("/");
+ } catch (e) {
+ if (e instanceof TRPCClientError) {
+ setErrorMessage(e.message);
+ } else {
+ setErrorMessage("An unexpected error occurred");
+ }
+ }
+ })}
+ className="space-y-4"
+ >
+ {errorMessage && (
+ <Alert variant="destructive">
+ <AlertCircle className="h-4 w-4" />
+ <AlertDescription>{errorMessage}</AlertDescription>
+ </Alert>
+ )}
+
+ <FormField
+ control={form.control}
+ name="name"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Full Name</FormLabel>
+ <FormControl>
+ <Input
+ type="text"
+ placeholder="Enter your full name"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="password"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Password</FormLabel>
+ <FormControl>
+ <Input
+ type="password"
+ placeholder="Create a password"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="confirmPassword"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Confirm Password</FormLabel>
+ <FormControl>
+ <Input
+ type="password"
+ placeholder="Confirm your password"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <ActionButton
+ type="submit"
+ loading={
+ form.formState.isSubmitting || acceptInviteMutation.isPending
+ }
+ className="w-full"
+ >
+ {form.formState.isSubmitting || acceptInviteMutation.isPending ? (
+ <>
+ <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+ Creating Account...
+ </>
+ ) : (
+ "Create Account & Sign In"
+ )}
+ </ActionButton>
+
+ <Button
+ type="button"
+ variant="ghost"
+ onClick={handleBackToSignIn}
+ className="w-full"
+ >
+ Back to Sign In
+ </Button>
+ </form>
+ </Form>
+ </CardContent>
+ </Card>
+ );
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-29 23:07:40 +0000