frontend the invite page, will now show error log, for example, user already exists etc

Author: Peter Nguyen

frontend-nextjs/src/app/[lang]/dashboard/invite/[inviteId]/invite-client.tsx

@@ -4,7 +4,8 @@ import { Button } from "@/components/ui/button";
 import { ApiError } from "@/lib/api";
 import { acceptInvite, InviteDetails } from "@/models/invite";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 
 type Props = {
   code: string;
@@ -16,6 +17,17 @@ type Props = {
 export default function InviteClient({ code, invite, dict, mockMode = false }: Props) {
   const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
   const [message, setMessage] = useState<string | null>(null);
+  const router = useRouter();
+
+  // After successful acceptance, redirect after a short delay.
+  useEffect(() => {
+    if (status === "success") {
+      const timer = setTimeout(() => {
+        router.push("/dashboard");
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [status, router]);
 
   const handleAccept = async () => {
     setStatus("loading");
@@ -29,14 +41,18 @@ export default function InviteClient({ code, invite, dict, mockMode = false }: P
     } catch (err) {
       setStatus("error");
       if (err instanceof ApiError) {
-        setMessage(err.message);
+        if (err.status === 401) {
+          setMessage(dict.dashboard.invite.login_required ?? "Please log in to accept this invite.");
+        } else {
+          setMessage(err.message);
+        }
       } else {
         setMessage("Something went wrong. Please try again.");
       }
     }
   };
 
-  const inviteInvalid = invite.expired || invite.used;
+  const inviteInvalid = invite.expired || invite.used || status === "success";
 
   return (
     <div className="max-w-xl mx-auto p-6 flex flex-col gap-4">

frontend-nextjs/src/app/[lang]/dashboard/invite/[inviteId]/page.tsx

@@ -1,40 +1,23 @@
-"use client";
-
-import type { InviteDetails } from "@/models/invite";
-import { useParams } from "next/navigation";
+import { getDictionary } from "@/app/[lang]/dictionaries";
+import { getInvite } from "@/models/invite";
+import { notFound } from "next/navigation";
 import InviteClient from "./invite-client";
 
-export default function Page() {
-  const params = useParams<{ lang?: string; inviteId?: string }>();
-  const code = params?.inviteId ?? "mock-invite-code";
+type Params = Promise<{ lang: string; inviteId: string }>;
+
+export default async function Page({ params }: { params: Params }) {
+  const { lang, inviteId } = await params;
 
-  const invite: InviteDetails = {
-    organisation_id: "1",
-    organisation_name: "Chaos Demo Org",
-    email: "invited.user@example.com",
-    expires_at: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7).toISOString(),
-    used: false,
-    expired: false,
-  };
+  const dict = await getDictionary(lang);
 
-  // Minimal dict mock so the UI renders without pulling translations.
-  const dict = {
-    dashboard: {
-      invite: {
-        title: "Organisation invite",
-        invited_by: "You’ve been invited to join {org}.",
-        sent_to: "Invite sent to",
-        expired: "This invite has expired.",
-        used: "This invite has already been used.",
-        login_cta: "Log in",
-        accept_cta: "Accept invite",
-        accepted: "Invite accepted (mock).",
-        wrong_account: "Not you? Log in with a different account.",
-      },
-    },
-  };
+  let invite;
+  try {
+    invite = await getInvite(inviteId);
+  } catch {
+    return notFound();
+  }
 
-  return <InviteClient code={code} invite={invite} dict={dict} mockMode />;
+  return <InviteClient code={inviteId} invite={invite} dict={dict} />;
 }
 
 

frontend-nextjs/src/app/[lang]/dashboard/organisation/[orgId]/members/members.tsx

@@ -20,6 +20,7 @@ import { DataTable } from "@/components/ui/data-table";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useState } from "react";
+import { ApiError } from "@/lib/api";
 
 export default function OrganisationMembers({ orgId, dict }: { orgId: string, dict: any }) {
   const queryClient = useQueryClient();
@@ -59,14 +60,40 @@ export function AddMemberDialog({ orgId, dict }: { orgId: string, dict: any }) {
   const queryClient = useQueryClient();
 
   const [email, setEmail] = useState("");
+  const [open, setOpen] = useState(false);
+  const [status, setStatus] = useState<"idle" | "loading">("idle");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const handleInviteMember = async () => {
-    await inviteOrganisationUser(orgId, email);
-    await queryClient.invalidateQueries({ queryKey: [`${orgId}-members`] });
+    setErrorMessage(null);
+
+    const trimmed = email.trim();
+    if (!trimmed) {
+      setErrorMessage(dict?.common?.email_required ?? "Email is required.");
+      return;
+    }
+
+    setStatus("loading");
+    try {
+      await inviteOrganisationUser(orgId, trimmed);
+      await queryClient.invalidateQueries({ queryKey: [`${orgId}-members`] });
+      setEmail("");
+      setOpen(false);
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setErrorMessage(err.message);
+      } else if (err instanceof Error) {
+        setErrorMessage(err.message);
+      } else {
+        setErrorMessage("Failed to invite member.");
+      }
+    } finally {
+      setStatus("idle");
+    }
   }
 
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="ghost" className="mr-1"><Plus className="w-8 h-8" /> </Button>
       </DialogTrigger>
@@ -77,10 +104,18 @@ export function AddMemberDialog({ orgId, dict }: { orgId: string, dict: any }) {
         <div className="flex flex-col gap-2">
           <p className="text-xs text-muted-foreground flex items-center gap-1">{dict.dashboard.members.admin_edit_block_description}</p>
           <Label>{dict.common.email}</Label>
-          <Input onChange={(e) => setEmail(e.target.value)} />
+          <Input value={email} onChange={(e) => setEmail(e.target.value)} />
+          {errorMessage && (
+            <p className="text-xs text-red-600">{errorMessage}</p>
+          )}
         </div>
         <DialogFooter>
-          <Button onClick={async () => await handleInviteMember()}>{dict.dashboard.actions.invite}</Button>
+          <Button
+            onClick={handleInviteMember}
+            disabled={status === "loading"}
+          >
+            {status === "loading" ? (dict?.common?.loading ?? "Loading...") : dict.dashboard.actions.invite}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

frontend-nextjs/src/lib/api.ts

@@ -71,23 +71,63 @@ export async function apiRequest<T>(
   const response = await fetch(url, fetchOptions);
 
   if (!response.ok) {
-    if (response.status === 401 || okRequiredOtherwiseLogin) {
-      if (isServer) {
-        const { redirect } = await import("next/navigation");
-        const { headers } = await import("next/headers");
-        const headersList = await headers();
-        const pathname = headersList.get("x-pathname") || "/";
-
-        redirect(`/login?to=${encodeURIComponent(pathname)}`);
+    // Best-effort parse of backend error payloads like `{ "error": "..." }`
+    // Use `response.clone()` so we don't consume the original body if needed elsewhere.
+    let serverMessage: string | undefined;
+    try {
+      const cloned = response.clone();
+      const contentType = cloned.headers.get("content-type") || "";
+      if (contentType.includes("application/json")) {
+        const parsed = (await cloned.json()) as unknown;
+        if (
+          parsed &&
+          typeof parsed === "object" &&
+          "error" in parsed &&
+          typeof (parsed as { error?: unknown }).error === "string"
+        ) {
+          serverMessage = (parsed as { error: string }).error;
+        } else if (
+          parsed &&
+          typeof parsed === "object" &&
+          "message" in parsed &&
+          typeof (parsed as { message?: unknown }).message === "string"
+        ) {
+          serverMessage = (parsed as { message: string }).message;
+        }
       } else {
-        window.location.href = `/login?to=${encodeURIComponent(window.location.pathname)}`;
+        const text = await cloned.text();
+        // Some servers mislabel JSON error responses; try JSON parse anyway.
+        try {
+          const parsed = JSON.parse(text) as unknown;
+          if (
+            parsed &&
+            typeof parsed === "object" &&
+            "error" in parsed &&
+            typeof (parsed as { error?: unknown }).error === "string"
+          ) {
+            serverMessage = (parsed as { error: string }).error;
+          } else if (
+            parsed &&
+            typeof parsed === "object" &&
+            "message" in parsed &&
+            typeof (parsed as { message?: unknown }).message === "string"
+          ) {
+            serverMessage = (parsed as { message: string }).message;
+          } else {
+            serverMessage = text;
+          }
+        } catch {
+          serverMessage = text;
+        }
       }
+    } catch {
+      // ignore parse errors
     }
 
     throw new ApiError(
       response.status,
       response.statusText,
-      `API request failed: ${method} ${path}`
+      serverMessage || `API request failed: ${method} ${path}`
     );
   }
 

frontend-nextjs/src/models/invite.ts

@@ -10,10 +10,23 @@ export type InviteDetails = {
   expired: boolean;
 };
 
+type InviteResponse = { message: InviteDetails };
+
+/**
+ * Gets the invite details for a given invite code.
+ * @param code - The invite code
+ * @returns The invite details
+ */
 export async function getInvite(code: string): Promise<InviteDetails> {
-  return await apiRequest<InviteDetails>(`/api/v1/invite/${code}`);
+  const res = await apiRequest<InviteResponse>(`/api/v1/invite/${code}`);
+  return res.message;
 }
 
+/**
+ * Accepts an invite for the current authenticated user.
+ * @param code - The invite code
+ * @returns The app message
+ */
 export async function acceptInvite(code: string): Promise<AppMessage> {
   return await apiRequest<AppMessage>(`/api/v1/invite/${code}`, {
     method: "POST",