Merge pull request #95 from replicatedhq/devin/1746637242-admin-user-privileges

feature: Add toggle for user admin privileges

Author: marccampbell

chartsmith-app/app/admin/users/page.tsx

@@ -3,8 +3,9 @@
 import React, { useState, useEffect } from "react";
 import { useSession } from "@/app/hooks/useSession";
 import { listUserAdminAction } from "@/lib/auth/actions/list-users";
+import { updateUserAdminStatusAction } from "@/lib/auth/actions/update-admin-status";
 import { UserAdmin } from "@/lib/types/user";
-import { ArrowUpDown, Loader2, Shield, FolderKanban } from "lucide-react";
+import { ArrowUpDown, Loader2, Shield, FolderKanban, X, Check } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -21,6 +22,7 @@ export default function UsersPage() {
   const [sortField, setSortField] = useState<SortField>("lastActive");
   const [sortDirection, setSortDirection] = useState<SortDirection>("desc");
   const [loading, setLoading] = useState(true);
+  const [confirmDialog, setConfirmDialog] = useState<{ open: boolean; userId: string; newStatus: boolean } | null>(null);
 
   // Load users and workspace counts
   useEffect(() => {
@@ -51,6 +53,33 @@ export default function UsersPage() {
       setSortDirection("asc");
     }
   };
+  
+  // Handle admin status toggle
+  const handleAdminToggle = async (userId: string, newStatus: boolean) => {
+    setConfirmDialog({ open: true, userId, newStatus });
+  };
+
+  // Handle confirmation of admin status change
+  const handleConfirmAdminChange = async () => {
+    if (!confirmDialog || !session) return;
+    
+    try {
+      const success = await updateUserAdminStatusAction(session, confirmDialog.userId, confirmDialog.newStatus);
+      if (success) {
+        setUsers(prevUsers => 
+          prevUsers.map(user => 
+            user.id === confirmDialog.userId 
+              ? { ...user, isAdmin: confirmDialog.newStatus } 
+              : user
+          )
+        );
+      }
+    } catch (error) {
+      console.error("Failed to update admin status:", error);
+    } finally {
+      setConfirmDialog(null);
+    }
+  };
 
   // Sort users
   const sortedUsers = [...users].sort((a, b) => {
@@ -199,14 +228,22 @@ export default function UsersPage() {
                       {formatDate(user.lastActiveAt)}
                     </td>
                     <td className="px-4 py-3 text-sm text-text">
-                      {user.isAdmin ? (
-                        <div className="flex items-center text-primary">
-                          <Shield className="w-4 h-4 mr-1" />
-                          Admin
-                        </div>
-                      ) : (
-                        "User"
-                      )}
+                      <div className="flex items-center">
+                        <input
+                          type="checkbox"
+                          checked={user.isAdmin || false}
+                          onChange={() => handleAdminToggle(user.id, !user.isAdmin)}
+                          className="mr-2 h-4 w-4 rounded border-border text-primary focus:ring-primary"
+                        />
+                        {user.isAdmin ? (
+                          <div className="flex items-center text-primary">
+                            <Shield className="w-4 h-4 mr-1" />
+                            Admin
+                          </div>
+                        ) : (
+                          "User"
+                        )}
+                      </div>
                     </td>
                   </tr>
                 ))}
@@ -215,6 +252,40 @@ export default function UsersPage() {
           </div>
         )}
       </div>
+
+      {/* Confirmation Dialog */}
+      {confirmDialog && confirmDialog.open && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-surface p-6 rounded-lg border border-border max-w-md w-full">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-medium">Confirm Admin Status Change</h3>
+              <button 
+                onClick={() => setConfirmDialog(null)}
+                className="text-text/50 hover:text-text"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <p className="mb-6">
+              Are you sure you want to {confirmDialog.newStatus ? "grant" : "revoke"} admin privileges for this user?
+            </p>
+            <div className="flex justify-end space-x-4">
+              <button 
+                onClick={() => setConfirmDialog(null)}
+                className="px-4 py-2 border border-border rounded-md"
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={handleConfirmAdminChange}
+                className="px-4 py-2 bg-primary text-white rounded-md flex items-center"
+              >
+                <Check className="w-4 h-4 mr-2" /> Confirm
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
-}
+}

chartsmith-app/lib/auth/actions/update-admin-status.ts

@@ -0,0 +1,32 @@
+"use server";
+
+import { updateUserAdminStatus } from "../user";
+import { Session } from "../../types/session";
+import { logger } from "../../utils/logger";
+
+export async function updateUserAdminStatusAction(session: Session, userId: string, isAdmin: boolean): Promise<boolean> {
+  try {
+    // Only admins can change admin status
+    if (!session.user.isAdmin) {
+      logger.warn("Non-admin user attempted to update admin status", {
+        requestingUserId: session.user.id,
+        targetUserId: userId,
+      });
+      return false;
+    }
+    
+    // Prevent admins from modifying their own admin status
+    if (session.user.id === userId) {
+      logger.warn("Admin cannot modify their own admin status", {
+        userId: session.user.id,
+      });
+      return false;
+    }
+
+    const success = await updateUserAdminStatus(userId, isAdmin);
+    return success;
+  } catch (error) {
+    logger.error("Failed to update user admin status", { error, userId });
+    return false;
+  }
+}

chartsmith-app/lib/auth/user.ts

@@ -518,4 +518,27 @@ export async function approveWaitlistUser(waitlistId: string): Promise<boolean>
     logger.error("Failed to approve waitlist user", { waitlistId, error });
     return false;
   }
-}
+}
+
+/**
+ * Updates a user's admin status
+ * @param userId The ID of the user to update
+ * @param isAdmin Whether the user should have admin privileges
+ * @returns True if the update was successful, false otherwise
+ */
+export async function updateUserAdminStatus(userId: string, isAdmin: boolean): Promise<boolean> {
+  try {
+    const db = getDB(await getParam("DB_URI"));
+    await db.query(
+      `UPDATE chartsmith_user
+       SET is_admin = $1
+       WHERE id = $2`,
+      [isAdmin, userId]
+    );
+    logger.info("Updated user admin status", { userId, isAdmin });
+    return true;
+  } catch (err) {
+    logger.error("Failed to update user admin status", { err, userId });
+    return false;
+  }
+}