k# Please enter the commit message for your changes. Lines starting (#4144)

web/src/app/admin/users/page.tsx

@@ -19,6 +19,8 @@ import BulkAdd from "@/components/admin/users/BulkAdd";
 import Text from "@/components/ui/text";
 import { InvitedUserSnapshot } from "@/lib/types";
 import { SearchBar } from "@/components/search/SearchBar";
+import { ConfirmEntityModal } from "@/components/modals/ConfirmEntityModal";
+import { NEXT_PUBLIC_CLOUD_ENABLED } from "@/lib/constants";
 
 const UsersTables = ({
   q,
@@ -130,6 +132,13 @@ const AddUserButton = ({
   setPopup: (spec: PopupSpec) => void;
 }) => {
   const [modal, setModal] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+
+  const { data: invitedUsers } = useSWR<InvitedUserSnapshot[]>(
+    "/api/manage/users/invited",
+    errorHandlingFetcher
+  );
+
   const onSuccess = () => {
     mutate(
       (key) => typeof key === "string" && key.startsWith("/api/manage/users")
@@ -140,6 +149,7 @@ const AddUserButton = ({
       type: "success",
     });
   };
+
   const onFailure = async (res: Response) => {
     const error = (await res.json()).detail;
     setPopup({
@@ -147,15 +157,45 @@ const AddUserButton = ({
       type: "error",
     });
   };
+
+  const handleInviteClick = () => {
+    if (
+      !NEXT_PUBLIC_CLOUD_ENABLED &&
+      invitedUsers &&
+      invitedUsers.length === 0
+    ) {
+      setShowConfirmation(true);
+    } else {
+      setModal(true);
+    }
+  };
+
+  const handleConfirmFirstInvite = () => {
+    setShowConfirmation(false);
+    setModal(true);
+  };
+
   return (
     <>
-      <Button className="my-auto w-fit" onClick={() => setModal(true)}>
+      <Button className="my-auto w-fit" onClick={handleInviteClick}>
         <div className="flex">
           <FiPlusSquare className="my-auto mr-2" />
           Invite Users
         </div>
       </Button>
 
+      {showConfirmation && (
+        <ConfirmEntityModal
+          entityType="First User Invitation"
+          entityName="your Access Logic"
+          onClose={() => setShowConfirmation(false)}
+          onSubmit={handleConfirmFirstInvite}
+          additionalDetails="After inviting the first user, only invited users will be able to join this platform. This is a security measure to control access to your instance."
+          actionButtonText="Continue"
+          variant="action"
+        />
+      )}
+
       {modal && (
         <Modal title="Bulk Add Users" onOutsideClick={() => setModal(false)}>
           <div className="flex flex-col gap-y-4">