[FEATURE]: Hide cards from others

backend/src/libs/utils/hideText.ts

@@ -0,0 +1,3 @@
+export const hideText = (text: string): string => {
+  return text.replace(/[a-zA-Z0-9'#]/g, 'a');
+};

backend/src/modules/boards/services/get.board.service.ts

@@ -1,13 +1,15 @@
 import { Inject, Logger, Injectable } from '@nestjs/common';
 import { InjectModel } from '@nestjs/mongoose';
-import { Model } from 'mongoose';
+import { LeanDocument, Model } from 'mongoose';
+import User from 'src/modules/users/schemas/user.schema';
 import { BOARDS_NOT_FOUND } from '../../../libs/exceptions/messages';
 import { GetTeamServiceInterface } from '../../teams/interfaces/services/get.team.service.interface';
 import * as Team from '../../teams/interfaces/types';
 import { QueryType } from '../interfaces/findQuery';
 import { GetBoardServiceInterface } from '../interfaces/services/get.board.service.interface';
 import Board, { BoardDocument } from '../schemas/board.schema';
 import BoardUser, { BoardUserDocument } from '../schemas/board.user.schema';
+import { hideText } from '../../../libs/utils/hideText';
 
 @Injectable()
 export default class GetBoardServiceImpl implements GetBoardServiceInterface {
@@ -144,7 +146,69 @@ export default class GetBoardServiceImpl implements GetBoardServiceInterface {
     return this.boardModel.findById(boardId).lean().exec();
   }
 
-  async getBoard(boardId: string) {
+  hideInformation(board: LeanDocument<Board>, userId: string) {
+    return board.columns.forEach((column) =>
+      column.cards
+        .filter(
+          (card) =>
+            (card.createdBy as User)._id.toString() !== userId.toString(),
+        )
+        .forEach((card) => {
+          const cardUser = card.createdBy as User;
+
+          cardUser.firstName = hideText(cardUser.firstName);
+          cardUser.lastName = hideText(cardUser.lastName);
+          card.text = hideText(card.text);
+          card.comments
+            .filter(
+              (comment) =>
+                (comment.createdBy as User)._id.toString() !==
+                userId.toString(),
+            )
+            .forEach((comment) => {
+              const commentUser = comment.createdBy as User;
+
+              commentUser.firstName = hideText(commentUser.firstName);
+
+              commentUser.lastName = hideText(commentUser.lastName);
+
+              comment.text = hideText(comment.text);
+            });
+
+          card.items
+            .filter(
+              (item) =>
+                (item.createdBy as User)._id.toString() !== userId.toString(),
+            )
+            .forEach((item) => {
+              const cardItem = item.createdBy as User;
+
+              item.text = hideText(item.text);
+              cardItem.firstName = hideText(cardItem.firstName);
+              cardItem.lastName = hideText(cardItem.lastName);
+
+              item.comments
+                .filter(
+                  (comment) =>
+                    (comment.createdBy as User)._id.toString() !==
+                    userId.toString(),
+                )
+                .forEach((comment) => {
+                  const commentUserItem = comment.createdBy as User;
+
+                  commentUserItem.firstName = hideText(
+                    commentUserItem.firstName,
+                  );
+                  commentUserItem.lastName = hideText(commentUserItem.lastName);
+
+                  comment.text = hideText(comment.text);
+                });
+            });
+        }),
+    );
+  }
+
+  async getBoardData(boardId: string) {
     const board = await this.boardModel
       .findById(boardId)
       .populate({
@@ -188,30 +252,46 @@ export default class GetBoardServiceImpl implements GetBoardServiceInterface {
       .lean({ virtuals: true })
       .exec();
 
-    if (!board) return null;
+    return board;
+  }
 
-    if (board.isSubBoard) {
-      const mainBoard = await this.boardModel
-        .findOne({ dividedBoards: { $in: boardId } })
-        .select('dividedBoards team title')
-        .populate({
-          path: 'dividedBoards',
-          select: '_id title',
-        })
-        .populate({
-          path: 'team',
-          select: 'name users _id',
+  async getMainBoardData(boardId: string) {
+    const mainBoard = await this.boardModel
+      .findOne({ dividedBoards: { $in: boardId } })
+      .select('dividedBoards team title')
+      .populate({
+        path: 'dividedBoards',
+        select: '_id title',
+      })
+      .populate({
+        path: 'team',
+        select: 'name users _id',
+        populate: {
+          path: 'users',
+          select: 'user role',
           populate: {
-            path: 'users',
-            select: 'user role',
-            populate: {
-              path: 'user',
-              select: 'firstName lastName joinedAt',
-            },
+            path: 'user',
+            select: 'firstName lastName joinedAt',
           },
-        })
-        .lean({ virtuals: true })
-        .exec();
+        },
+      })
+      .lean({ virtuals: true })
+      .exec();
+
+    return mainBoard;
+  }
+
+  async getBoard(boardId: string, userId: string) {
+    const board = await this.getBoardData(boardId);
+
+    if (!board) return null;
+
+    if (board.hideCards) {
+      this.hideInformation(board, userId);
+    }
+
+    if (board.isSubBoard) {
+      const mainBoard = await this.getMainBoardData(boardId);
       if (!mainBoard) return null;
       return { board, mainBoardData: mainBoard };
     }

backend/src/modules/users/schemas/user.schema.ts

@@ -9,6 +9,9 @@ export type UserDocument = User & mongoose.Document;
   },
 })
 export default class User {
+  @Prop({ type: mongoose.Schema.Types.ObjectId })
+  _id!: mongoose.Schema.Types.ObjectId;
+
   @Prop({ nullable: false })
   firstName!: string;
 

frontend/src/components/Board/Card/CardBoard.tsx

@@ -35,6 +35,7 @@ interface CardBoardProps {
 	boardUser?: BoardUser;
 	maxVotes?: number;
 	isSubmited: boolean;
+	hideCards: boolean;
 }
 
 const CardBoard = React.memo<CardBoardProps>(
@@ -50,7 +51,8 @@ const CardBoard = React.memo<CardBoardProps>(
 		isMainboard,
 		boardUser,
 		maxVotes,
-		isSubmited
+		isSubmited,
+		hideCards
 	}) => {
 		const isCardGroup = card.items.length > 1;
 		const comments = useMemo(() => {
@@ -64,6 +66,7 @@ const CardBoard = React.memo<CardBoardProps>(
 		const [deleting, setDeleting] = useState(false);
 
 		const handleOpenComments = () => {
+			if (hideCards && card.createdBy?._id !== userId) return;
 			setOpenComments(!isCommentsOpened);
 		};
 
@@ -135,7 +138,16 @@ const CardBoard = React.memo<CardBoardProps>(
 											justify="between"
 											css={{ mb: '$8', '& > div': { zIndex: 2 } }}
 										>
-											<Text size="md" css={{ wordBreak: 'break-word' }}>
+											<Text
+												size="md"
+												css={{
+													wordBreak: 'break-word',
+													filter:
+														hideCards && card.createdBy?._id !== userId
+															? 'blur($sizes$6)'
+															: 'none'
+												}}
+											>
 												{card.text}
 											</Text>
 											{isSubmited && (
@@ -144,6 +156,7 @@ const CardBoard = React.memo<CardBoardProps>(
 													css={{ width: '$20', height: '$20' }}
 												/>
 											)}
+
 											{!isSubmited && (
 												<PopoverCardSettings
 													firstOne={false}
@@ -156,6 +169,9 @@ const CardBoard = React.memo<CardBoardProps>(
 													newPosition={0}
 													handleEditing={handleEditing}
 													handleDeleteCard={handleDeleting}
+													hideCards={hideCards}
+													userId={userId}
+													item={card}
 												/>
 											)}
 										</Flex>
@@ -174,6 +190,7 @@ const CardBoard = React.memo<CardBoardProps>(
 											userId={userId}
 											isMainboard={isMainboard}
 											isSubmited={isSubmited}
+											hideCards={hideCards}
 										/>
 									)}
 									<CardFooter
@@ -190,6 +207,7 @@ const CardBoard = React.memo<CardBoardProps>(
 										isCommentsOpened={isCommentsOpened}
 										boardUser={boardUser}
 										maxVotes={maxVotes}
+										hideCards={hideCards}
 									/>
 								</Flex>
 							)}
@@ -211,6 +229,8 @@ const CardBoard = React.memo<CardBoardProps>(
 								socketId={socketId}
 								cardItems={card.items}
 								isSubmited={isSubmited}
+								hideCards={hideCards}
+								userId={userId}
 							/>
 						)}
 					</Flex>

frontend/src/components/Board/Card/CardFooter.tsx

@@ -28,6 +28,7 @@ interface FooterProps {
 	isCommentsOpened?: boolean;
 	boardUser?: BoardUser;
 	maxVotes?: number;
+	hideCards: boolean;
 }
 
 const StyledButtonIcon = styled(Button, {
@@ -68,7 +69,8 @@ const CardFooter = React.memo<FooterProps>(
 		boardUser,
 		maxVotes,
 		setOpenComments,
-		isCommentsOpened
+		isCommentsOpened,
+		hideCards
 	}) => {
 		const { createdBy } = card;
 
@@ -98,6 +100,7 @@ const CardFooter = React.memo<FooterProps>(
 
 		const handleDeleteVote = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 			event.stopPropagation();
+			if (hideCards && card.createdBy?._id !== userId) return;
 			if (votesOfUserInThisCard <= 0) return;
 			deleteVote.mutate({
 				boardId,
@@ -110,6 +113,7 @@ const CardFooter = React.memo<FooterProps>(
 
 		const handleAddVote = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 			event.stopPropagation();
+			if (hideCards && card.createdBy?._id !== userId) return;
 			if (maxVotes && actualBoardVotes && actualBoardVotes >= maxVotes) return;
 			addVote.mutate({
 				boardId,
@@ -123,7 +127,16 @@ const CardFooter = React.memo<FooterProps>(
 		return (
 			<Flex align="center" justify={!anonymous ? 'between' : 'end'} gap="6">
 				{!anonymous && !teamName && (
-					<Flex gap="4" align="center">
+					<Flex
+						gap="4"
+						align="center"
+						css={{
+							filter:
+								hideCards && card.createdBy?._id !== userId
+									? 'blur($sizes$6)'
+									: 'none'
+						}}
+					>
 						<Avatar
 							size={20}
 							fallbackText={`${createdBy?.firstName[0]}${createdBy?.lastName[0]}`}
@@ -143,7 +156,16 @@ const CardFooter = React.memo<FooterProps>(
 				)}
 				{!isItem && comments && (
 					<Flex gap="10" align="center">
-						<Flex align="center" gap="2">
+						<Flex
+							align="center"
+							gap="2"
+							css={{
+								filter:
+									hideCards && card.createdBy?._id !== userId
+										? 'blur($sizes$6)'
+										: 'none'
+							}}
+						>
 							<StyledButtonIcon
 								onClick={handleAddVote}
 								disabled={!isMainboard || actualBoardVotes === maxVotes}
@@ -161,7 +183,17 @@ const CardFooter = React.memo<FooterProps>(
 							</Text>
 						</Flex>
 
-						<Flex align="center" gap="2" css={{ mr: '$10' }}>
+						<Flex
+							align="center"
+							gap="2"
+							css={{
+								mr: '$10',
+								filter:
+									hideCards && card.createdBy?._id !== userId
+										? 'blur($sizes$6)'
+										: 'none'
+							}}
+						>
 							<StyledButtonIcon
 								onClick={handleDeleteVote}
 								disabled={!isMainboard || votesOfUserInThisCard === 0}
@@ -170,7 +202,16 @@ const CardFooter = React.memo<FooterProps>(
 							</StyledButtonIcon>
 						</Flex>
 
-						<Flex align="center" gap="2">
+						<Flex
+							align="center"
+							gap="2"
+							css={{
+								filter:
+									hideCards && card.createdBy?._id !== userId
+										? 'blur($sizes$6)'
+										: 'none'
+							}}
+						>
 							<StyledButtonIcon onClick={setOpenComments}>
 								<Icon
 									name={