fix: fixed the app's behavior in read-only channels. (#421)

* fixed read only channel issue added error info when no permission * formatted with prettier
RocketChat · Feb 17, 2024 · 6fb23d7 · 6fb23d7
1 parent 149d883
commit 6fb23d7
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 11 deletions.
diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts
@@ -443,6 +443,23 @@ export default class EmbeddedChatApi {
     }
   }
 
+  async permissionInfo() {
+    try {
+      const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+      const response = await fetch(`${this.host}/api/v1/permissions.listAll`, {
+        headers: {
+          "Content-Type": "application/json",
+          "X-Auth-Token": authToken,
+          "X-User-Id": userId,
+        },
+        method: "GET",
+      });
+      return await response.json();
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
   async close() {
     await this.rcClient.unsubscribeAll();
     await this.rcClient.disconnect();

diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js
@@ -83,6 +83,8 @@ const ChatHeader = ({
     }
     setFilter(false);
   };
+  const setCanSendMsg = useUserStore((state) => state.setCanSendMsg);
+  const authenticatedUserId = useUserStore((state) => state.userId);
 
   const handleLogout = useCallback(async () => {
     try {
@@ -140,22 +142,53 @@ const ChatHeader = ({
   }, [setShowAllThreads, setShowSearch]);
 
   useEffect(() => {
+    const setMessageAllowed = async () => {
+      const permissionRes = await RCInstance.permissionInfo();
+      const channelRolesRes = await RCInstance.getChannelRoles(
+        isChannelPrivate
+      );
+
+      if (permissionRes.success && channelRolesRes.success) {
+        const postMsgRoles = permissionRes.update[140]?.roles || [];
+
+        const userRoles = channelRolesRes.roles
+          .filter((chRole) => chRole.u?._id === authenticatedUserId)
+          .flatMap((chRole) => chRole.roles);
+
+        const canSendMsg =
+          userRoles.length > 0 &&
+          postMsgRoles.some((role) => userRoles.includes(role));
+        setCanSendMsg(canSendMsg);
+      }
+    };
+
     const getChannelInfo = async () => {
       const res = await RCInstance.channelInfo();
       if (res.success) {
         setChannelInfo(res.room);
         if (res.room.t === 'p') setIsChannelPrivate(true);
-      } else if ('errorType' in res) {
-        if (res.errorType === 'error-room-not-found') {
-          dispatchToastMessage({
-            type: 'error',
-            message: "Channel doesn't exist. Logging out.",
-            position: toastPosition,
-          });
-          await RCInstance.logout();
-        }
+        if (res.room.ro) setMessageAllowed();
+      } else if (
+        'errorType' in res &&
+        res.errorType === 'error-room-not-found'
+      ) {
+        dispatchToastMessage({
+          type: 'error',
+          message: "Channel doesn't exist. Logging out.",
+          position: toastPosition,
+        });
+        await RCInstance.logout();
+      } else if ('errorType' in res && res.errorType === 'Not Allowed') {
+        dispatchToastMessage({
+          type: 'error',
+          message:
+            "You don't have permission to access this channel. Logging out",
+          position: toastPosition,
+        });
+        await RCInstance.logout();
       }
     };
+
     if (isUserAuthenticated) {
       getChannelInfo();
     }
@@ -166,6 +199,9 @@ const ChatHeader = ({
     setIsChannelPrivate,
     dispatchToastMessage,
     toastPosition,
+    isChannelPrivate,
+    setCanSendMsg,
+    authenticatedUserId,
   ]);
 
   const menuOptions = useMemo(() => {

diff --git a/packages/react/src/components/ChatInput/ChatInput.js b/packages/react/src/components/ChatInput/ChatInput.js
@@ -39,6 +39,7 @@ const ChatInput = ({ scrollToBottom }) => {
   const isUserAuthenticated = useUserStore(
     (state) => state.isUserAuthenticated
   );
+  const canSendMsg = useUserStore((state) => state.canSendMsg);
 
   const setIsUserAuthenticated = useUserStore(
     (state) => state.setIsUserAuthenticated
@@ -459,8 +460,14 @@ const ChatInput = ({ scrollToBottom }) => {
         >
           <textarea
             rows={1}
-            disabled={!isUserAuthenticated || isRecordingMessage}
-            placeholder={isUserAuthenticated ? 'Message' : 'Sign in to chat'}
+            disabled={!isUserAuthenticated || !canSendMsg || isRecordingMessage}
+            placeholder={
+              isUserAuthenticated && canSendMsg
+                ? 'Message'
+                : isUserAuthenticated
+                ? 'This room is read only'
+                : 'Sign in to chat'
+            }
             className={styles.textInput}
             onChange={onTextChange}
             onKeyUp={showCommands}

diff --git a/packages/react/src/store/userStore.js b/packages/react/src/store/userStore.js
@@ -19,8 +19,10 @@ const useUserStore = create((set) => ({
       avatarUrl,
     })),
   isUserAuthenticated: false,
+  canSendMsg: true,
   setIsUserAuthenticated: (isUserAuthenticated) =>
     set(() => ({ isUserAuthenticated })),
+  setCanSendMsg: (canSendMsg) => set(() => ({ canSendMsg })),
   password: null,
   setPassword: (password) => set(() => ({ password })),
   emailoruser: null,