From 83f125705e772e47b37ced1175429838d484baae Mon Sep 17 00:00:00 2001 From: Guillaume Cauchois Date: Mon, 18 Nov 2024 15:59:39 +0100 Subject: [PATCH 1/2] feat(Messaging): handle suspicious messages --- .../MessagingConversationReportModal.tsx | 6 ++- .../MessagingMessage.styles.ts | 15 +++++++ .../MessagingMessage/MessagingMessage.tsx | 44 ++++++++++++++++++- .../forms/schemas/formReportUser.ts | 4 +- .../utils/Typography/Typography.styles.ts | 3 +- src/utils/SuspiciousContent.ts | 13 ++++++ 6 files changed, 79 insertions(+), 6 deletions(-) create mode 100644 src/utils/SuspiciousContent.ts diff --git a/src/components/backoffice/messaging/MessagingConversation/MessagingConversationReport/MessagingConversationReportModal.tsx b/src/components/backoffice/messaging/MessagingConversation/MessagingConversationReport/MessagingConversationReportModal.tsx index 3a3f035d..8302338e 100644 --- a/src/components/backoffice/messaging/MessagingConversation/MessagingConversationReport/MessagingConversationReportModal.tsx +++ b/src/components/backoffice/messaging/MessagingConversation/MessagingConversationReport/MessagingConversationReportModal.tsx @@ -8,10 +8,12 @@ import { useOnReportMessagingConversationFormSubmit } from './useOnReportMessagi interface MessagingConversationReportModalProps { conversationId: string; + content?: string | null; } export const MessagingConversationReportModal = ({ conversationId, + content = null, }: MessagingConversationReportModalProps) => { const { onSubmit } = useOnReportMessagingConversationFormSubmit( async (conversationReportDto: ConversationReportDto) => { @@ -39,10 +41,10 @@ export const MessagingConversationReportModal = ({ onSubmit: handleReportUserSubmit, defaultValues: { reason: '', - comment: '', + comment: content || '', }, }; - }, [handleReportUserSubmit]); + }, [content, handleReportUserSubmit]); return ; }; diff --git a/src/components/backoffice/messaging/MessagingConversation/MessagingMessage/MessagingMessage.styles.ts b/src/components/backoffice/messaging/MessagingConversation/MessagingMessage/MessagingMessage.styles.ts index 916bf264..bf0fcd17 100644 --- a/src/components/backoffice/messaging/MessagingConversation/MessagingMessage/MessagingMessage.styles.ts +++ b/src/components/backoffice/messaging/MessagingConversation/MessagingMessage/MessagingMessage.styles.ts @@ -2,7 +2,10 @@ import styled from 'styled-components'; import { COLORS } from 'src/constants/styles'; export const MessageContainer = styled.div` + display: flex; + flex-direction: column; box-sizing: border-box; + gap: 5px; width: 100%; * { margin: 0; @@ -44,3 +47,15 @@ export const StyledMessage = styled.div` background: ${COLORS.hoverBlue}; } `; + +export const StyledWarning = styled.div` + display: flex; + flex-direction: row; + gap: 5px; + align-items: center; + + a { + color: ${COLORS.lightRed}; + text-decoration: underline; + } +`; diff --git a/src/components/backoffice/messaging/MessagingConversation/MessagingMessage/MessagingMessage.tsx b/src/components/backoffice/messaging/MessagingConversation/MessagingMessage/MessagingMessage.tsx index 1bfd3f7b..3db82616 100644 --- a/src/components/backoffice/messaging/MessagingConversation/MessagingMessage/MessagingMessage.tsx +++ b/src/components/backoffice/messaging/MessagingConversation/MessagingMessage/MessagingMessage.tsx @@ -1,12 +1,22 @@ /* eslint-disable react/no-danger */ import moment from 'moment'; -import React from 'react'; +import React, { useEffect } from 'react'; import { useSelector } from 'react-redux'; +import { MessagingConversationReportModal } from '../MessagingConversationReport/MessagingConversationReportModal'; import { Message } from 'src/api/types'; import { openModal } from 'src/components/modals/Modal'; +import { LucidIcon } from 'src/components/utils/Icons/LucidIcon'; +import { Typography } from 'src/components/utils/Typography'; +import { COLORS } from 'src/constants/styles'; import { selectCurrentUserId } from 'src/use-cases/current-user'; +import { selectSelectedConversationId } from 'src/use-cases/messaging'; import { escapeHtml, linkify } from 'src/utils'; -import { MessageContainer, StyledMessage } from './MessagingMessage.styles'; +import { isSuspiciousMessage } from 'src/utils/SuspiciousContent'; +import { + MessageContainer, + StyledMessage, + StyledWarning, +} from './MessagingMessage.styles'; import { MessagingMessageSuspiciousModal } from './MessagingMessageSuspiciousModal/MessagingMessageSuspiciousModal'; export interface MessagingMessageProps { @@ -14,8 +24,16 @@ export interface MessagingMessageProps { } export const MessagingMessage = ({ message }: MessagingMessageProps) => { + const selectedConversationId = useSelector(selectSelectedConversationId); const currentUserId = useSelector(selectCurrentUserId); const isOwnMessage = message.author.id === currentUserId; + const [isSuspicious, setIsSuspicious] = React.useState(false); + + useEffect(() => { + if (message.content) { + setIsSuspicious(isSuspiciousMessage(message.content)); + } + }, [message.content]); const handleClick = (event: React.MouseEvent) => { const whitelist = process.env.LINKIFY_SAFE_DOMAINS?.split(',') || []; @@ -35,6 +53,18 @@ export const MessagingMessage = ({ message }: MessagingMessageProps) => { } }; + const reportMessage = () => { + const reportContent = `Le message suivant me semble suspicieux : "${message.content}"`; + if (selectedConversationId) { + openModal( + + ); + } + }; + return ( @@ -45,6 +75,16 @@ export const MessagingMessage = ({ message }: MessagingMessageProps) => { onClick={handleClick} /> + {!isOwnMessage && isSuspicious && ( + + + + Attention, ce message est peut-être malveillant. Nous vous + recommandons de ne pas communiquer vos coordonnées et de nous  + signaler ce message en cas de doute + + + )}

{moment(message.createdAt).format('LLL')}

 ); diff --git a/src/components/forms/schemas/formReportUser.ts b/src/components/forms/schemas/formReportUser.ts index 1776fd9e..cb61b9a2 100644 --- a/src/components/forms/schemas/formReportUser.ts +++ b/src/components/forms/schemas/formReportUser.ts @@ -5,7 +5,7 @@ export const formReportUser: FormSchema<{ reason: string; comment: string; }> = { - id: 'form-add-organization', + id: 'form-report-user', fields: [ { id: 'reason', @@ -14,6 +14,7 @@ export const formReportUser: FormSchema<{ title: 'Raison du signalement *', options: USER_REPORT_REASONS, isRequired: true, + showLabel: true, }, { id: 'comment', @@ -21,6 +22,7 @@ export const formReportUser: FormSchema<{ component: 'text-input', title: 'Commentaire *', isRequired: true, + showLabel: true, }, ], }; diff --git a/src/components/utils/Typography/Typography.styles.ts b/src/components/utils/Typography/Typography.styles.ts index fdc47491..3b8362b3 100644 --- a/src/components/utils/Typography/Typography.styles.ts +++ b/src/components/utils/Typography/Typography.styles.ts @@ -6,7 +6,7 @@ export interface TypographyProps { children: React.ReactNode; size?: 'small' | 'normal' | 'large'; weight?: 'normal' | 'bold'; - color?: 'lighter' | 'light' | 'normal' | 'blue' | 'white'; + color?: 'lighter' | 'light' | 'normal' | 'blue' | 'white' | 'lightRed'; variant?: 'normal' | 'italic'; center?: boolean; } @@ -23,6 +23,7 @@ const colors: { [K in NonNullable]: string } = { light: COLORS.darkGray, normal: COLORS.black, blue: COLORS.primaryBlue, + lightRed: COLORS.lightRed, }; export const StyledTypography = styled.div` diff --git a/src/utils/SuspiciousContent.ts b/src/utils/SuspiciousContent.ts new file mode 100644 index 00000000..cf5374b0 --- /dev/null +++ b/src/utils/SuspiciousContent.ts @@ -0,0 +1,13 @@ +export const isSuspiciousMessage = (message: string): boolean => { + const forbiddenExpressions = + process.env.MESSAGING_FORBIDDEN_EXPRESSIONS?.split(',') || []; + + if (forbiddenExpressions.length === 0) { + return false; + } + const forbiddenPattern = new RegExp( + `\\b(${forbiddenExpressions.map((expr) => expr.trim()).join('|')})\\b`, + 'i' + ); + return forbiddenPattern.test(message); +}; From 449cf50e199da8eb9cd15be571d3afe062ad588f Mon Sep 17 00:00:00 2001 From: Guillaume Cauchois Date: Tue, 19 Nov 2024 10:01:50 +0100 Subject: [PATCH 2/2] feat(Messaging): Add MESSAGING_FORBIDDEN_EXPRESSIONS in .env.dist --- .env.dist | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.env.dist b/.env.dist index b78b2fca..e7b9220d 100644 --- a/.env.dist +++ b/.env.dist @@ -72,3 +72,5 @@ MAILJET_CONTACT_EMAIL= PUSHER_API_KEY= ASSOCIATION_APPOINTMENT= LINKEDIN_PARTNER_ID= +#MESSAGING +MESSAGING_FORBIDDEN_EXPRESSIONS=""