TODO: fix

Author: parthokr

src/app/api/organizations/[slug]/membership/[membershipId]/role/route.ts

@@ -0,0 +1,44 @@
+import { BackendClient } from "@/lib/backend-client";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ slug: string; membershipId: string }> }
+) {
+  const { slug, membershipId } = await params;
+  
+  try {
+    const cookieStore = await cookies();
+    const token = cookieStore.get("auth_token")?.value;
+
+    if (!token) {
+      return NextResponse.json(
+        { error: "Unauthorized" },
+        { status: 401 }
+      );
+    }
+
+    const body = await req.json();
+
+    const response = await BackendClient.patch<any>(
+      `/organizations/${slug}/membership/${membershipId}/role`,
+      body,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    return NextResponse.json(response);
+  } catch (error: any) {
+    console.error("Update member role error:", error);
+    
+    const status = error.status || 500;
+    return NextResponse.json(
+      error,
+      { status: status }
+    );
+  }
+}

src/app/api/sse-token/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from "next/server";
+import { BackendClient } from "@/lib/backend-client";
+import { cookies } from "next/headers";
+
+export async function GET(req: NextRequest) {
+  try {
+    const cookieStore = await cookies();
+    const token = cookieStore.get("auth_token")?.value;
+
+    if (!token) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const response = await BackendClient.get("/sse-token/obtain", {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: any) {
+    console.error("Error in sse-token API route:", error);
+    return NextResponse.json(
+      { message: error.message || "Internal Server Error" },
+      { status: error.status || 500 }
+    );
+  }
+}
+

src/app/organizations/[slug]/members/members-view.tsx

@@ -36,22 +36,57 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { ChevronLeft, ChevronRight, MoreHorizontal, UserCog } from "lucide-react";
-import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { useRouter, usePathname, useSearchParams, useParams } from "next/navigation";
 import { useState } from "react";
+import { toast } from "sonner";
 
 interface MembersViewProps {
   data: PaginatedData<OrganizationMember>;
+  currentUserRole?: string;
 }
 
 function ChangeRoleDialog({ member }: { member: OrganizationMember }) {
   const [role, setRole] = useState(member.role);
   const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const params = useParams();
+  const slug = params.slug as string;
+  const router = useRouter();
+
+  const handleSave = async () => {
+    if (role === member.role) {
+      setOpen(false);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await fetch(`/api/organizations/${slug}/membership/${member.membershipId}/role`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ role })
+      });
+
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.message || "Failed to update role");
+      }
 
-  const handleSave = () => {
-    console.log(`Changing role for ${member.username} to ${role}`);
-    setOpen(false);
+      toast.success("Role updated successfully");
+      setOpen(false);
+      router.refresh();
+    } catch (error: any) {
+      console.error(error);
+      toast.error(error.message || "Failed to update role");
+    } finally {
+      setLoading(false);
+    }
   };
 
+  const availableRoles = ["ADMIN", "STAFF", "MEMBER"].filter(r => r !== member.role);
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -68,29 +103,33 @@ function ChangeRoleDialog({ member }: { member: OrganizationMember }) {
           </DialogDescription>
         </DialogHeader>
         <div className="py-4">
-          <Select value={role} onValueChange={setRole}>
+          <Select value={role === member.role ? "" : role} onValueChange={setRole}>
             <SelectTrigger>
-              <SelectValue placeholder="Select a role" />
+              <SelectValue placeholder={member.role} />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="ADMIN">ADMIN</SelectItem>
-              <SelectItem value="STAFF">STAFF</SelectItem>
-              <SelectItem value="MEMBER">MEMBER</SelectItem>
+              {availableRoles.map((r) => (
+                <SelectItem key={r} value={r}>
+                  {r}
+                </SelectItem>
+              ))}
             </SelectContent>
           </Select>
         </div>
         <DialogFooter>
-          <Button variant="outline" onClick={() => setOpen(false)}>
+          <Button variant="outline" onClick={() => setOpen(false)} disabled={loading}>
             Cancel
           </Button>
-          <Button onClick={handleSave}>Save changes</Button>
+          <Button onClick={handleSave} disabled={loading || role === member.role}>
+            {loading ? "Saving..." : "Save changes"}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   );
 }
 
-export function MembersView({ data }: MembersViewProps) {
+export function MembersView({ data, currentUserRole }: MembersViewProps) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -218,7 +257,9 @@ export function MembersView({ data }: MembersViewProps) {
                       </span>
                   </TableCell>
                   <TableCell>
-                    <ChangeRoleDialog member={member} />
+                    {currentUserRole === 'ADMIN' && (
+                        <ChangeRoleDialog member={member} />
+                    )}
                   </TableCell>
                 </TableRow>
               ))}

src/app/organizations/[slug]/members/page.tsx

@@ -52,6 +52,9 @@ export default async function MembersPage({ params, searchParams }: PageProps) {
       );
   }
 
+  const currentOrg = user.organizations.find(o => o.slug === slug);
+  const currentRole = currentOrg?.role;
+
   const data = await getMembers(slug, page, size);
 
   if (!data) {
@@ -64,7 +67,7 @@ export default async function MembersPage({ params, searchParams }: PageProps) {
 
   return (
     <Suspense fallback={<div>Loading members...</div>}>
-      <MembersView data={data} />
+      <MembersView data={data} currentUserRole={currentRole} />
     </Suspense>
   );
 }

src/app/organizations/components/organization-form.tsx

@@ -67,6 +67,14 @@ export function OrganizationForm({
   checkSlugAvailability,
   readOnly = false
 }: OrganizationFormProps) {
+  // Some browser extensions (password managers, etc.) mutate <input> DOM before React hydrates,
+  // which can cause hydration mismatches. We gate rendering of a few "high risk" inputs until mount.
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
   const form = useForm<OrganizationFormValues>({
     resolver: zodResolver(organizationFormSchema),
     defaultValues: {
@@ -231,7 +239,25 @@ export function OrganizationForm({
                 <div className="relative">
                     <Mail className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                     <FormControl>
-                    <Input placeholder="contact@acme.com" type="email" className="pl-9" {...field} />
+                    {isMounted ? (
+                      <Input
+                        placeholder="contact@acme.com"
+                        type="email"
+                        className="pl-9"
+                        autoComplete="off"
+                        data-lpignore="true"
+                        data-1p-ignore="true"
+                        data-bwignore="true"
+                        {...field}
+                      />
+                    ) : (
+                      // Avoid rendering an actual <input> during SSR/first client render to prevent
+                      // extension-injected DOM from causing hydration mismatches.
+                      <div
+                        className="h-9 w-full rounded-md border border-input bg-transparent pl-9"
+                        aria-hidden="true"
+                      />
+                    )}
                     </FormControl>
                 </div>
                 <FormDescription>