Merge branch 'develop' into feature-two-factor-auth

package.json

@@ -82,6 +82,7 @@
 		"react-switch": "^6.0.0",
 		"resolve": "1.20.0",
 		"resolve-url-loader": "^4.0.0",
+		"sanitize-html": "^2.6.0",
 		"sass-loader": "^10.1.1",
 		"semver": "7.3.5",
 		"sockjs-client": "1.5.1",

src/api/apiDeleteRemove.ts

@@ -0,0 +1,11 @@
+import { config } from '../resources/scripts/config';
+import { fetchData, FETCH_METHODS } from './fetchData';
+
+export const apiDeleteRemove = async (sessionId: number): Promise<any> => {
+	const url = `${config.endpoints.sessionBase}/${sessionId}`;
+
+	return fetchData({
+		url: url,
+		method: FETCH_METHODS.DELETE
+	});
+};

src/api/apiSendEnquiry.ts

@@ -1,5 +1,5 @@
 import { config } from '../resources/scripts/config';
-import { fetchData, FETCH_METHODS } from './fetchData';
+import { fetchData, FETCH_METHODS, FETCH_SUCCESS } from './fetchData';
 
 export const apiSendEnquiry = async (
 	sessionId: number,
@@ -15,6 +15,7 @@ export const apiSendEnquiry = async (
 		url: url,
 		method: FETCH_METHODS.POST,
 		rcValidation: true,
-		bodyData: message
+		bodyData: message,
+		responseHandling: [FETCH_SUCCESS.CONTENT]
 	});
 };

src/components/enquiry/WriteEnquiry.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect, useContext, useCallback } from 'react';
 
 import { history } from '../app/app';
 import { MessageSubmitInterfaceComponent } from '../messageSubmitInterface/messageSubmitInterfaceComponent';
@@ -12,12 +12,10 @@ import {
 	Overlay
 } from '../overlay/Overlay';
 import { BUTTON_TYPES } from '../button/Button';
-import { logout } from '../logout/logout';
 import { config } from '../../resources/scripts/config';
 import {
 	ActiveSessionGroupIdContext,
-	AcceptedGroupIdContext,
-	SessionsDataContext
+	AcceptedGroupIdContext
 } from '../../globalState';
 import { mobileDetailView, mobileListView } from '../app/navigationHandler';
 import { ReactComponent as EnvelopeCheckIcon } from '../../resources/img/illustrations/envelope-check.svg';
@@ -27,10 +25,11 @@ import { Headline } from '../headline/Headline';
 import { Text } from '../text/Text';
 
 export const WriteEnquiry = () => {
-	const { sessionsData } = useContext(SessionsDataContext);
 	const { setAcceptedGroupId } = useContext(AcceptedGroupIdContext);
 	const { activeSessionGroupId } = useContext(ActiveSessionGroupIdContext);
 	let [overlayActive, setOverlayActive] = useState(false);
+	const [sessionId, setSessionId] = useState<number | null>(null);
+	const [groupId, setGroupId] = useState<string | null>(null);
 
 	useEffect(() => {
 		if (activeSessionGroupId) {
@@ -43,17 +42,13 @@ export const WriteEnquiry = () => {
 		}
 	}, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-	const handleOverlayAction = (buttonFunction: string) => {
+	const handleOverlayAction = (buttonFunction: string): void => {
 		if (buttonFunction === OVERLAY_FUNCTIONS.REDIRECT) {
 			activateListView();
-			activeSessionGroupId
-				? setAcceptedGroupId(activeSessionGroupId)
-				: setAcceptedGroupId(sessionsData.mySessions[0].session.id);
+			setAcceptedGroupId(groupId);
 			history.push({
-				pathname: config.endpoints.userSessionsListView
+				pathname: `${config.endpoints.userSessionsListView}/${groupId}/${sessionId}`
 			});
-		} else {
-			logout();
 		}
 	};
 
@@ -102,18 +97,19 @@ export const WriteEnquiry = () => {
 		copy: translate('enquiry.write.overlayCopy'),
 		buttonSet: [
 			{
-				label: translate('enquiry.write.overlayButton1.label'),
+				label: translate('enquiry.write.overlay.button'),
 				function: OVERLAY_FUNCTIONS.REDIRECT,
-				type: BUTTON_TYPES.PRIMARY
-			},
-			{
-				label: translate('enquiry.write.overlayButton2.label'),
-				function: OVERLAY_FUNCTIONS.LOGOUT,
-				type: BUTTON_TYPES.LINK
+				type: BUTTON_TYPES.AUTO_CLOSE
 			}
 		]
 	};
 
+	const handleSendButton = useCallback((response) => {
+		setSessionId(response.sessionId);
+		setGroupId(response.rcGroupId);
+		setOverlayActive(true);
+	}, []);
+
 	return (
 		<div className="enquiry__wrapper">
 			<div className="enquiry__infoWrapper">
@@ -137,7 +133,7 @@ export const WriteEnquiry = () => {
 				</div>
 			</div>
 			<MessageSubmitInterfaceComponent
-				handleSendButton={() => setOverlayActive(true)}
+				handleSendButton={handleSendButton}
 				placeholder={translate('enquiry.write.input.placeholder')}
 				type={SESSION_LIST_TYPES.ENQUIRY}
 			/>

src/components/message/MessageItemComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useContext, useEffect, useState } from 'react';
+import sanitizeHtml from 'sanitize-html';
 import { getPrettyDateFromMessageDate } from '../../utils/dateHelpers';
 import {
 	UserDataContext,
@@ -23,6 +24,7 @@ import { stateToHTML } from 'draft-js-export-html';
 import { convertFromRaw, ContentState } from 'draft-js';
 import {
 	markdownToDraftDefaultOptions,
+	sanitizeHtmlDefaultOptions,
 	urlifyLinksInText
 } from '../messageSubmitInterface/richtextHelpers';
 import { VideoCallMessage } from './VideoCallMessage';
@@ -114,7 +116,10 @@ export const MessageItemComponent = ({
 
 		setRenderedMessage(
 			contentStateMessage.hasText()
-				? urlifyLinksInText(stateToHTML(contentStateMessage))
+				? sanitizeHtml(
+						urlifyLinksInText(stateToHTML(contentStateMessage)),
+						sanitizeHtmlDefaultOptions
+				  )
 				: ''
 		);
 	}, [message]);

src/components/messageSubmitInterface/messageSubmitInterfaceComponent.tsx

@@ -61,7 +61,8 @@ import {
 	emojiPickerCustomClasses,
 	toolbarCustomClasses,
 	handleEditorBeforeInput,
-	handleEditorPastedText
+	handleEditorPastedText,
+	escapeMarkdownChars
 } from './richtextHelpers';
 import { ReactComponent as EmojiIcon } from '../../resources/img/icons/smiley-positive.svg';
 import { ReactComponent as FileDocIcon } from '../../resources/img/icons/file-doc.svg';
@@ -457,8 +458,10 @@ export const MessageSubmitInterfaceComponent = (
 		const contentState = currentEditorState
 			? currentEditorState.getCurrentContent()
 			: editorState.getCurrentContent();
-		const rawObject = convertToRaw(contentState);
-		const markdownString = draftToMarkdown(rawObject);
+		const rawObject = convertToRaw(escapeMarkdownChars(contentState));
+		const markdownString = draftToMarkdown(rawObject, {
+			escapeMarkdownCharacters: false
+		});
 		return markdownString.trim();
 	};
 
@@ -514,7 +517,7 @@ export const MessageSubmitInterfaceComponent = (
 			apiSendEnquiry(enquirySessionId, getTypedMarkdownMessage())
 				.then((response) => {
 					setEditorState(EditorState.createEmpty());
-					props.handleSendButton();
+					props.handleSendButton(response);
 				})
 				.catch((error) => {
 					console.log(error);

src/components/messageSubmitInterface/richtextHelpers.ts

@@ -1,4 +1,11 @@
-import { DraftHandleValue } from 'draft-js';
+import {
+	ContentState,
+	convertToRaw,
+	DraftHandleValue,
+	Modifier,
+	SelectionState
+} from 'draft-js';
+import sanitizeHtml from 'sanitize-html';
 
 export const emojiPickerCustomClasses = {
 	emojiSelect: 'emoji__select',
@@ -95,7 +102,6 @@ export const markdownToDraftDefaultOptions = {
 			inline: [
 				'autolink',
 				'backticks',
-				'escape',
 				'htmltag',
 				'links',
 				'newline',
@@ -104,3 +110,49 @@ export const markdownToDraftDefaultOptions = {
 		}
 	}
 };
+
+export const sanitizeHtmlDefaultOptions = {
+	allowedTags: [
+		'a',
+		'em',
+		'p',
+		'div',
+		'b',
+		'i',
+		'ol',
+		'ul',
+		'li',
+		'strong',
+		'br'
+	],
+	allowedAttributes: sanitizeHtml.defaults.allowedAttributes
+};
+
+/**
+ * Escape markdown characters typed by the user
+ * @param contentState
+ */
+export const escapeMarkdownChars = (contentState: ContentState) => {
+	let newContentState = contentState;
+	const rawDraftObject = convertToRaw(contentState);
+
+	rawDraftObject.blocks.forEach((block) => {
+		const selectionState = SelectionState.createEmpty(block.key);
+		let counter = 0;
+		newContentState = [...block.text].reduce(
+			(contentState, char, charIndex) => {
+				if (['*', '_', '~', '`'].indexOf(char) < 0) return contentState;
+
+				const selection = selectionState.merge({
+					focusOffset: charIndex + counter,
+					anchorOffset: charIndex + counter
+				});
+				counter++;
+				return Modifier.insertText(contentState, selection, '\\');
+			},
+			newContentState
+		);
+	});
+
+	return newContentState;
+};

src/components/overlay/Overlay.tsx

@@ -23,6 +23,7 @@ export const OVERLAY_FUNCTIONS = {
 	DELETE_ACCOUNT: 'DELETE_ACCOUNT',
 	NEXT_STEP: 'NEXT_STEP',
 	PREV_STEP: 'PREV_STEP',
+	DELETE_SESSION: 'DELETE_SESSION',
 	FINISH_ANONYMOUS_CONVERSATION: 'FINISH_ANONYMOUS_CONVERSATION',
 	ARCHIVE: 'ARCHIVE'
 };
@@ -194,7 +195,7 @@ export const Overlay = (props: {
 						{activeOverlay.buttonSet?.map((item, i) => (
 							<Button
 								item={item}
-								key={i}
+								key={`${i}-${item.type}`}
 								buttonHandle={handleButtonClick}
 							/>
 						))}