Merge branch 'feat/ui-1.0.4' into 'test'

fix(i18n): Set the site_name in i18n to the configured value

See merge request opensource/answer!425

i18n/en_US.yaml

@@ -640,7 +640,7 @@ ui:
       msg:
         empty: Email cannot be empty.
   change_email:
-    page_title: Welcome to Answer
+    page_title: Welcome to {{site_name}}
     btn_cancel: Cancel
     btn_update: Update email address
     send_success: >-
@@ -840,7 +840,7 @@ ui:
   modal_confirm:
     title: Error...
   account_result:
-    page_title: Welcome to Answer
+    page_title: Welcome to {{site_name}}
     success: Your new account is confirmed; you will be redirected to the home page.
     link: Continue to homepage
     invalid: >-

ui/package.json

@@ -22,7 +22,9 @@
     "copy-to-clipboard": "^3.3.2",
     "dayjs": "^1.11.5",
     "diff": "^5.1.0",
+    "dompurify": "^2.4.3",
     "emoji-regex": "^10.2.1",
+    "html-react-parser": "^3.0.8",
     "i18next": "^21.9.0",
     "katex": "^0.16.2",
     "lodash": "^4.17.21",
@@ -51,6 +53,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/color": "^3.0.3",
+    "@types/dompurify": "^2.4.0",
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.184",
     "@types/marked": "^4.0.6",

ui/src/components/Editor/Viewer.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react';
 
 import { markdownToHtml } from '@/services';
+import { htmlToReact } from '@/utils';
 
 import { htmlRender } from './utils';
 
@@ -38,6 +39,7 @@ const Index = ({ value }, ref) => {
     }
 
     previewRef.current?.scrollTo(0, scrollTop);
+
     htmlRender(previewRef.current);
   }, [html]);
   useImperativeHandle(ref, () => {
@@ -49,9 +51,9 @@ const Index = ({ value }, ref) => {
   return (
     <div
       ref={previewRef}
-      className="preview-wrap position-relative p-3 bg-light rounded text-break text-wrap mt-2 fmt"
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+      className="preview-wrap position-relative p-3 bg-light rounded text-break text-wrap mt-2 fmt">
+      {htmlToReact(html)}
+    </div>
   );
 };
 

ui/src/pages/Users/ActivationResult/index.tsx

@@ -3,10 +3,12 @@ import { Container, Row, Col } from 'react-bootstrap';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
+import { siteInfoStore } from '@/stores';
 import { usePageTags } from '@/hooks';
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'account_result' });
+  const siteName = siteInfoStore((state) => state.siteInfo.name);
   const location = useLocation();
   usePageTags({
     title: t('account_activation', { keyPrefix: 'page_title' }),
@@ -15,7 +17,9 @@ const Index: FC = () => {
     <Container className="pt-4 mt-2 mb-5">
       <Row className="justify-content-center">
         <Col lg={6}>
-          <h3 className="text-center mt-3 mb-5">{t('page_title')}</h3>
+          <h3 className="text-center mt-3 mb-5">
+            {t('page_title', { site_name: siteName })}
+          </h3>
           {location.pathname?.includes('success') && (
             <>
               <p className="text-center">{t('success')}</p>

ui/src/pages/Users/ChangeEmail/index.tsx

@@ -2,18 +2,22 @@ import { FC, memo } from 'react';
 import { Container, Col } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
+import { siteInfoStore } from '@/stores';
 import { usePageTags } from '@/hooks';
 
 import SendEmail from './components/sendEmail';
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'change_email' });
+  const siteName = siteInfoStore((state) => state.siteInfo.name);
   usePageTags({
     title: t('change_email', { keyPrefix: 'page_title' }),
   });
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '6rem' }}>
-      <h3 className="text-center mb-5">{t('page_title')}</h3>
+      <h3 className="text-center mb-5">
+        {t('page_title', { site_name: siteName })}
+      </h3>
       <Col className="mx-auto" md={3}>
         <SendEmail />
       </Col>

ui/src/pages/Users/ConfirmNewEmail/index.tsx

@@ -4,7 +4,7 @@ import { Link, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
-import { loggedUserInfoStore } from '@/stores';
+import { loggedUserInfoStore, siteInfoStore } from '@/stores';
 import { changeEmailVerify, getLoggedUserInfo } from '@/services';
 
 const Index: FC = () => {
@@ -13,6 +13,7 @@ const Index: FC = () => {
   const [step, setStep] = useState('loading');
 
   const updateUser = loggedUserInfoStore((state) => state.update);
+  const siteName = siteInfoStore((state) => state.siteInfo.name);
 
   useEffect(() => {
     const code = searchParams.get('code');
@@ -38,7 +39,9 @@ const Index: FC = () => {
     <Container className="pt-4 mt-2 mb-5">
       <Row className="justify-content-center">
         <Col lg={6}>
-          <h3 className="text-center mt-3 mb-5">{t('page_title')}</h3>
+          <h3 className="text-center mt-3 mb-5">
+            {t('page_title', { site_name: siteName })}
+          </h3>
           {step === 'success' && (
             <>
               <p className="text-center">{t('confirm_new_email')}</p>

ui/src/utils/common.ts

@@ -1,4 +1,6 @@
 import i18next from 'i18next';
+import parse from 'html-react-parser';
+import * as DOMPurify from 'dompurify';
 
 const Diff = require('diff');
 
@@ -214,6 +216,13 @@ function diffText(newText: string, oldText: string): string {
     ?.replace(/<input/gi, '&lt;input');
 }
 
+function htmlToReact(html: string) {
+  const cleanedHtml = DOMPurify.sanitize(html, {
+    USE_PROFILES: { html: true },
+  });
+  return parse(cleanedHtml);
+}
+
 export {
   thousandthDivision,
   formatCount,
@@ -228,4 +237,5 @@ export {
   labelStyle,
   handleFormError,
   diffText,
+  htmlToReact,
 };