From c89653e5bf10d3a9ccfc08029b61f8b635a0e608 Mon Sep 17 00:00:00 2001
From: Sebastien Marinier <sebastien.marinier@arawa.fr>
Date: Thu, 16 May 2024 19:42:10 +0200
Subject: [PATCH] fix: double encoded translations need to be parsed

---
 package.json                  | 1 +
 ts/Common/Translation.ts      | 5 +++++
 ts/Manager/EditRoomDialog.tsx | 6 +++---
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 74e9ec0..9b8c981 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
 		"colors": "^1.4.0",
 		"dotenv": "^16.0.0",
 		"execa": "^6.1.0",
+		"html-react-parser": "^5.1.10",
 		"libxmljs": "^0.19.8",
 		"qrcode.react": "^2.0.0",
 		"react-copy-to-clipboard": "^5.0.2",
diff --git a/ts/Common/Translation.ts b/ts/Common/Translation.ts
index d80eb5d..0c12a6c 100644
--- a/ts/Common/Translation.ts
+++ b/ts/Common/Translation.ts
@@ -1,3 +1,4 @@
+import parse from 'html-react-parser';
 import { Access } from './Api';
 
 export const AccessOptions = {
@@ -8,3 +9,7 @@ export const AccessOptions = {
 	[Access.Internal]: t('bbb', 'Internal'),
 	[Access.InternalRestricted]: t('bbb', 'Internal restricted'),
 };
+
+export function t_raw(app: string, string: string, vars?: { [key: string]: string }, count?: number, options?: EscapeOptions){
+	return parse(t(app, string, vars, count, options));
+}
diff --git a/ts/Manager/EditRoomDialog.tsx b/ts/Manager/EditRoomDialog.tsx
index a0b1bde..234eb72 100644
--- a/ts/Manager/EditRoomDialog.tsx
+++ b/ts/Manager/EditRoomDialog.tsx
@@ -5,14 +5,14 @@ import { Access, Room, Permission, RoomShare, api, Restriction } from '../Common
 import Dialog from './Dialog';
 import ShareWith from './ShareWith';
 import { SubmitInput } from './SubmitInput';
-import { AccessOptions } from '../Common/Translation';
+import { AccessOptions, t_raw} from '../Common/Translation';
 
 const descriptions: { [key: string]: string } = {
 	name: t('bbb', 'Descriptive name of this room.'),
 	welcome: t('bbb', 'This message is shown to all users in the chat area after they joined.'),
 	maxParticipants: t('bbb', 'Sets a limit on the number of participants for this room. Zero means there is no limit.'),
 	recording: t('bbb', 'If enabled, the moderator is able to start the recording.'),
-	access: t('bbb', 'Explanation of the different concepts that constitute access options :<br>- Public: Anyone who has the link can join.- <br>Internal: Only Nextcloud users can join.- <br>Password: Only guests who have the password can join..- <br>Waiting room: A moderator must accept each guest before they can join.- <br>Restricted : Only selected users and groups can access this room.'),
+	access: t_raw('bbb', 'Explanation of the different concepts that constitute access options :<br> - Public: Anyone who has the link can join.<br> - Internal: Only Nextcloud users can join.<br> - Password: Only guests who have the password can join..<br>- Waiting room: A moderator must accept each guest before they can join.<br> - Restricted : Only selected users and groups can access this room.'),
 	moderator: t('bbb', 'A moderator is able to manage all participants in a meeting including kicking, muting or selecting a presenter. Users with the role moderator are also able to close a meeting or change the default settings.'),
 	requireModerator: t('bbb', 'If enabled, normal users have to wait until a moderator is in the room.'),
 	moderatorToken: t('bbb', 'If enabled, a moderator URL is generated which allows access with moderator permission.'),
@@ -103,7 +103,7 @@ const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, op
 	}
 
 	return (
-		<Dialog open={open} onClose={() => setOpen(false)} title={t('bbb', 'Edit "{room}"', { room: room.name })}>
+		<Dialog open={open} onClose={() => setOpen(false)} title={t_raw('bbb', 'Edit "{room}"', { room: room.name })}>
 			<div className="bbb-form-element">
 				<h3>{t('bbb', 'Room URL')}</h3>
 				<div className="bbb-input-container">