Fix invitation bug and enhance UX with inline error messaging

Reviewed-on: #1

.gitignore

@@ -12,11 +12,12 @@
 
 # testing
 /coverage
-/test-results/
 /playwright-report/
+/test-results/
 /blob-report/
 /playwright/.cache/
 
+
 # next.js
 /.next/
 /out/

app/api/linkedin/callback/route.ts

@@ -17,7 +17,6 @@ export async function POST(request: NextRequest) {
   };
 
   if (!account_id || !userId) {
-    console.error("Unipile callback missing account_id or name:", body);
     return NextResponse.json(
       { error: "Missing account_id or user identifier" },
       { status: 400 }
@@ -29,18 +28,22 @@ export async function POST(request: NextRequest) {
     process.env.SUPABASE_SERVICE_ROLE_KEY!
   );
 
-  const { error } = await supabase
+  const { data, error } = await supabase
     .from("profiles")
     .update({
       unipile_account_id: account_id,
       unipile_account_status: status ?? "CONNECTED",
     })
-    .eq("id", userId);
+    .eq("id", userId)
+    .select();
 
   if (error) {
-    console.error("Error saving Unipile account_id:", error);
     return NextResponse.json({ error: "DB update failed" }, { status: 500 });
   }
 
+  if (!data || data.length === 0) {
+    return NextResponse.json({ error: "Profile not found" }, { status: 404 });
+  }
+
   return NextResponse.json({ ok: true });
 }

app/api/linkedin/connect/route.ts

@@ -29,9 +29,16 @@ export async function POST() {
 
   const type = profile?.unipile_account_id ? "reconnect" : "create";
 
+  // expiresOn: 1 hour from now (links also expire on daily restart regardless)
+  const expiresOn = new Date(Date.now() + 60 * 60 * 1000).toISOString();
+  // api_url must be the full Unipile server URL derived from the DSN
+  const api_url = `https://${dsn}`;
+
   const body: Record<string, unknown> = {
     type,
     providers: ["LINKEDIN"],
+    expiresOn,
+    api_url,
     notify_url: `${appUrl}/api/linkedin/callback`,
     success_redirect_url: `${appUrl}/dashboard/settings/account?linkedin=connected`,
     failure_redirect_url: `${appUrl}/dashboard/settings/account?linkedin=failed`,
@@ -39,9 +46,9 @@ export async function POST() {
     name: userData.user.id,
   };
 
-  // For reconnect we need the existing account_id
+  // For reconnect, the field is reconnect_account (not account_id)
   if (type === "reconnect" && profile?.unipile_account_id) {
-    body.account_id = profile.unipile_account_id;
+    body.reconnect_account = profile.unipile_account_id;
   }
 
   const response = await fetch(`https://${dsn}/api/v1/hosted/accounts/link`, {

app/auth/sign-up/page.tsx

@@ -1,13 +1,28 @@
 import { SignUpForm } from "@/components/sign-up-form";
+import { Suspense } from "react";
 
-export default async function Page({ searchParams }: { searchParams: Promise<{ email?: string }> }) {
+export default function Page({
-  const email = (await searchParams).email || "";
+  searchParams,
-
+}: {
+  searchParams: Promise<{ email?: string }>;
+}) {
   return (
     <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">
-        <SignUpForm initialEmail={email} />
+        <Suspense>
+          <SignUpFormContent searchParams={searchParams} />
+        </Suspense>
       </div>
     </div>
   );
 }
+
+
+async function SignUpFormContent({
+  searchParams,
+}: {
+  searchParams: Promise<{ email?: string }>;
+}) {
+  const email = (await searchParams).email || "";
+  return <SignUpForm initialEmail={email} />;
+}

app/dashboard/settings/account/page.tsx

@@ -19,13 +19,11 @@ async function AccountSettingsContent() {
     .single();
 
   const isConnected = !!profile?.unipile_account_id;
-  const accountId = profile?.unipile_account_id as string | null;
-  const status = profile?.unipile_account_status as string | null;
 
   return (
-    <div className="p-8 max-w-2xl mx-auto space-y-8">
+    <div className="p-8 max-w-3xl mx-auto space-y-8">
       <div>
-        <h1 className="text-2xl font-semibold mb-1 text-foreground">Account Settings</h1>
+        <h1 className="text-3xl font-semibold mb-1 text-foreground">Account Settings</h1>
         <p className="text-sm text-muted-foreground">
           Manage your personal account and integrations.
         </p>
@@ -33,8 +31,8 @@ async function AccountSettingsContent() {
 
       {/* LinkedIn Integration */}
       <div className="space-y-4">
-        <h2 className="text-lg font-medium text-foreground border-b border-border pb-2 flex items-center gap-2">
+        <h2 className="text-xl font-medium text-foreground border-b border-border pb-2 flex items-center gap-2">
-          <Linkedin className="h-5 w-5 text-[#0077B5]" />
+          <Linkedin className="h-6 w-6 text-[#0077B5]" />
           LinkedIn Integration
         </h2>
 
@@ -62,15 +60,7 @@ async function AccountSettingsContent() {
             )}
           </div>
 
-          {isConnected && (
+
-            <div className="bg-muted/50 rounded-md p-3 text-xs font-mono text-muted-foreground break-all">
-              <span className="text-foreground/60 mr-2">Account ID:</span>
-              {accountId}
-              {status && status !== "CONNECTED" && (
-                <span className="ml-2 text-amber-500">({status})</span>
-              )}
-            </div>
-          )}
 
           <div className="pt-2">
             {isConnected ? (
@@ -87,7 +77,7 @@ async function AccountSettingsContent() {
 
 function AccountSettingsSkeleton() {
   return (
-    <div className="p-8 max-w-2xl mx-auto space-y-8">
+    <div className="p-8 max-w-3xl mx-auto space-y-8">
       <div>
         <Skeleton className="h-8 w-48 mb-2" />
         <Skeleton className="h-4 w-72" />

app/dashboard/settings/team/actions.ts

@@ -3,17 +3,24 @@
 import { createClient } from "@/lib/supabase/server";
 import { revalidatePath } from "next/cache";
 
-export async function inviteUser(formData: FormData) {
+export type InviteStatus = {
+  success?: boolean;
+  error?: string;
+  message?: string;
+};
+
+export async function inviteUser(prevState: InviteStatus | null, formData: FormData): Promise<InviteStatus> {
   const email = formData.get("email") as string;
   if (!email) {
-    throw new Error("Email is required");
+    return { error: "Email is required" };
   }
 
+  try {
     const supabase = await createClient();
     const { data: userData, error: userError } = await supabase.auth.getUser();
 
     if (userError || !userData.user) {
-    throw new Error("Unauthorized");
+      return { error: "Unauthorized" };
     }
 
     const { data: profile } = await supabase
@@ -23,7 +30,33 @@ export async function inviteUser(formData: FormData) {
       .single();
 
     if (!profile || profile.role !== "owner" || !profile.organization_id) {
-    throw new Error("Only organization owners can invite new members");
+      return { error: "Only organization owners can invite new members" };
+    }
+
+    // Check if user is already a member
+    const { data: existingMember } = await supabase
+      .from("profiles")
+      .select("id")
+      .eq("email", email)
+      .eq("organization_id", profile.organization_id)
+      .maybeSingle();
+
+    if (existingMember) {
+      return { error: "User is already a member of this organization" };
+    }
+
+    // Check if there's already a pending invitation
+    const { data: existingInvitation } = await supabase
+      .from("invitations")
+      .select("id")
+      .eq("email", email)
+      .eq("organization_id", profile.organization_id)
+      .eq("status", "pending")
+      .gt("expires_at", new Date().toISOString())
+      .maybeSingle();
+
+    if (existingInvitation) {
+      return { error: "An invitation is already pending for this email address" };
     }
 
     const { error: inviteError } = await supabase
@@ -38,10 +71,15 @@ export async function inviteUser(formData: FormData) {
 
     if (inviteError) {
       console.error("Error creating invitation:", inviteError);
-    throw new Error("Failed to create invitation");
+      return { error: "Failed to create invitation" };
     }
 
     revalidatePath("/dashboard/settings/team");
+    return { success: true, message: "Invitation sent successfully" };
+  } catch (error) {
+    console.error("Unexpected error inviting user:", error);
+    return { error: "An unexpected error occurred" };
+  }
 }
 
 export async function revokeInvitation(formData: FormData) {

app/dashboard/settings/team/page.tsx

@@ -1,8 +1,9 @@
 import { createClient } from "@/lib/supabase/server";
-import { inviteUser, revokeInvitation } from "./actions";
+import { revokeInvitation } from "./actions";
 import { Suspense } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Trash2 } from "lucide-react";
+import { InviteMemberForm } from "@/components/invite-member-form";
 
 async function TeamSettingsContent() {
   const supabase = await createClient();
@@ -61,21 +62,7 @@ async function TeamSettingsContent() {
         <div className="space-y-4">
           <h2 className="text-lg font-medium text-foreground border-b border-border pb-2">Invite New Member</h2>
           <div className="bg-card border border-border rounded-lg p-4 shadow-sm">
-            <form action={inviteUser} className="flex gap-4">
+            <InviteMemberForm />
-              <input
-                type="email"
-                name="email"
-                placeholder="Email address"
-                required
-                className="flex-1 px-3 py-2 bg-background border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-              />
-              <button
-                type="submit"
-                className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm font-medium hover:bg-primary/90 transition-colors flex-shrink-0"
-              >
-                Send Invite
-              </button>
-            </form>
           </div>
         </div>
       )}

app/globals.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  font-size: 110%;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;

app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Geist } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import "./globals.css";
@@ -7,6 +7,11 @@ const defaultUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
   : "http://localhost:3000";
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+
 export const metadata: Metadata = {
   metadataBase: new URL(defaultUrl),
   title: "Next.js and Supabase Starter Kit",

components/invite-member-form.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useActionState, useEffect, useRef } from "react";
+import { inviteUser, type InviteStatus } from "@/app/dashboard/settings/team/actions";
+
+export function InviteMemberForm() {
+  const formRef = useRef<HTMLFormElement>(null);
+  const [state, formAction, isPending] = useActionState<InviteStatus | null, FormData>(
+    inviteUser,
+    null
+  );
+
+  useEffect(() => {
+    if (state?.success) {
+      formRef.current?.reset();
+    }
+  }, [state]);
+
+  return (
+    <div className="space-y-4">
+      <form ref={formRef} action={formAction} className="flex gap-4">
+        <input
+          type="email"
+          name="email"
+          placeholder="Email address"
+          required
+          disabled={isPending}
+          className="flex-1 px-3 py-2 bg-background border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+        />
+        <button
+          type="submit"
+          disabled={isPending}
+          className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm font-medium hover:bg-primary/90 transition-colors flex-shrink-0 disabled:opacity-50"
+        >
+          {isPending ? "Sending..." : "Send Invite"}
+        </button>
+      </form>
+      
+      {state?.error && (
+        <p className="text-sm text-destructive mt-1 animate-in fade-in slide-in-from-top-1">{state.error}</p>
+      )}
+      {state?.success && (
+        <p className="text-sm text-green-500 mt-1 animate-in fade-in slide-in-from-top-1">{state.message}</p>
+      )}
+    </div>
+  );
+}

components/sidebar.tsx

@@ -70,7 +70,7 @@ export const Sidebar: FC = () => {
     <aside
       className={cn(
         "flex flex-col h-screen border-r border-border bg-background transition-all duration-300",
-        collapsed ? "w-16" : "w-64"
+        collapsed ? "w-16" : "w-72"
       )}
     >
       <div className="flex items-center justify-between p-4 border-b border-border h-16">
@@ -79,7 +79,7 @@ export const Sidebar: FC = () => {
           onClick={() => setCollapsed(!collapsed)}
           className={cn("p-1 rounded-md hover:bg-muted transition-colors flex-shrink-0", collapsed && "mx-auto")}
         >
-          {collapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
+          {collapsed ? <ChevronRight size={20} /> : <ChevronLeft size={20} />}
         </button>
       </div>
 
@@ -98,7 +98,7 @@ export const Sidebar: FC = () => {
                 collapsed && "justify-center px-0"
               )}
             >
-              <Icon size={18} className="shrink-0" />
+              <Icon size={20} className="shrink-0" />
               {!collapsed && <span>{item.label}</span>}
             </Link>
           );
@@ -111,8 +111,8 @@ export const Sidebar: FC = () => {
             "flex items-center gap-3 w-full p-2 rounded-md hover:bg-muted text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-muted",
             collapsed ? "justify-center px-0" : "px-3"
           )}>
-            <div className="flex items-center justify-center bg-accent text-accent-foreground rounded-full w-8 h-8 shrink-0 overflow-hidden">
+            <div className="flex items-center justify-center bg-accent text-accent-foreground rounded-full w-9 h-9 shrink-0 overflow-hidden">
-              <User size={16} />
+              <User size={18} />
             </div>
             {!collapsed && (
               <span className="truncate flex-1 text-left font-medium">