added password protected channels

Shahan-nub · Oct 24, 2024 · 5091d2e · 5091d2e
1 parent c0c0288
commit 5091d2e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 20 deletions.
diff --git a/src/components/Sidebar/Channel.jsx b/src/components/Sidebar/Channel.jsx
@@ -2,26 +2,50 @@ import { setMenu } from "@/lib/features/menuSlice";
 import { selectChannelName, setChannelInfo } from "@/lib/features/channelSlice";
 import { MdDelete } from "react-icons/md";
 import { useDispatch, useSelector } from "react-redux";
+import { CiLock } from "react-icons/ci";
 
-export default function Channel({id,channelName}) {
+export default function Channel({ id, channelName, password }) {
   const activeChannel = useSelector(selectChannelName);
 
   const dispatch = useDispatch();
   const handleChannelChange = () => {
-    dispatch(setChannelInfo({
-      channelId:id,
-      channelName:channelName
-    }))
-    dispatch(setMenu())
-  }
+    dispatch(
+      setChannelInfo({
+        channelId: id,
+        channelName: channelName,
+      })
+    );
+    dispatch(setMenu());
+  };
   return (
-    <div onClick={handleChannelChange}
-    className={`group flex items-center text-nowrap text-color-1 font-medium text-sm sm:text-base hover:bg-[#5b5f65] sm:pl-4 pl-3 pr-2 sm:py-2 cursor-pointer py-1 hover:text-white transition-all duration-200 ease-in-out
-    ${channelName===activeChannel && "bg-[rgb(57_56_61)] text-color-3 font-semibold border-l-8 border-color-3 rounded-l-[4px] lg:rounded-l-lg"}
-    `}>
+    <div
+      onClick={() => {
+        if (password) {
+          const passPrompt = prompt("Enter channel password");
+          if (passPrompt === password) {
+            handleChannelChange();
+          } else {
+            alert(
+              "Wrong password! Please enter the right password or join a public channel."
+            );
+          }
+        } else {
+          handleChannelChange();
+        }
+      }}
+      className={`group flex items-center justify-between text-nowrap text-color-1 font-medium text-sm sm:text-base hover:bg-[#5b5f65] sm:pl-4 pl-3 pr-2 sm:py-2 cursor-pointer py-1 hover:text-white transition-all duration-200 ease-in-out
+    ${
+      channelName === activeChannel &&
+      "bg-[rgb(57_56_61)] text-color-3 font-semibold border-l-8 border-color-3 rounded-l-[4px] lg:rounded-l-lg"
+    }
+    `}
+    >
+      <p>
         # {channelName}
-        {/* <MdDelete onClick={handleDeleteChannel}
+      </p> 
+      {password && <CiLock className=""></CiLock>}
+      {/* <MdDelete onClick={handleDeleteChannel}
         className="hidden group-hover:block text-color-1 hover:text-red-400"></MdDelete> */}
     </div>
-  )
+  );
 }
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
@@ -54,12 +54,12 @@ export default function Sidebar() {
   const handleAddChannel = async () => {
     // const newChannelName = prompt("Enter new channel name: ");
     const newChannelName = channelNameRef.current.value;
-    // const password = channelPasswordRef.current.value;
+    const password = channelPasswordRef.current.value;
     if (newChannelName) {
       try {
         const newChannel = {
           channelName: newChannelName,
-          // channelPassword: password,
+          channelPassword: password==="" && null,
         };
 
         setDoc(doc(collectionRef), newChannel);
@@ -93,14 +93,14 @@ export default function Sidebar() {
               placeholder="Enter your channel name..."
               className="bg-black rounded-sm border-1 border-white  focus:border-white text-white px-3 py-2 text-xs lg:text-base"
             />
-            {/* <label className="text-xs lg:text-sm whitespace-nowrap">{`Password: (ignore to create public channel)`}</label>
+            <label className="text-xs lg:text-base whitespace-nowrap">{`Password: (ignore to create public channel)`}</label>
 
             <input
               ref={channelPasswordRef}
               type="text"
               placeholder="Enter password..."
-              className="bg-black rounded-sm border-1 border-white focus:border-white text-white px-3 py-2 text-xs lg:text-sm"
-            /> */}
+              className="bg-black rounded-sm border-1 border-white focus:border-white text-white px-3 py-2 text-xs lg:text-base"
+            />
 
               <button
                 type="submit"

diff --git a/src/components/Sidebar/SidebarChannels.jsx b/src/components/Sidebar/SidebarChannels.jsx
@@ -4,14 +4,14 @@ import { setChannelInfo } from "@/lib/features/channelSlice";
 
 export default function SidebarChannels({channels}) {
 
-  console.log("channels are: ",channels)
+  // console.log("channels are: ",channels)
   return (
     // lg:h-[70%] h-[60%]
     <div className="flex flex-col lg:w-1/5  w-[100vw] h-max  overflow-scroll no-scrollbar backdrop-blur-xl absolute  justify-start ">
       {channels.map(({id,channel}) => {
         return (
           <Channel key={id} id={id}
-          channelName={channel.channelName}></Channel>
+          channelName={channel.channelName} password={channel.channelPassword}></Channel>
           )
       })}
     </div>