Set text description in user page setting more safely

apps/app/src/client/components/Admin/Security/SecuritySetting/UserPageVisibilitySettings.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import React from 'react';
+import type React from 'react';
 
 import type AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 
@@ -8,10 +8,15 @@ type Props = {
   t: (key: string) => string;
 };
 
-export const UserPageVisibilitySettings: React.FC<Props> = ({ adminGeneralSecurityContainer, t }) => {
+export const UserPageVisibilitySettings: React.FC<Props> = ({
+  adminGeneralSecurityContainer,
+  t,
+}) => {
   return (
     <>
-      <h4 className="mb-3">{t('security_settings.user_page_visibility.user_page_visibility')}</h4>
+      <h4 className="mb-3">
+        {t('security_settings.user_page_visibility.user_page_visibility')}
+      </h4>
       <div className="row mb-4">
         <div className="col-md-10 offset-md-2">
           <div className="form-check form-switch form-check-success">
@@ -20,16 +25,20 @@ export const UserPageVisibilitySettings: React.FC<Props> = ({ adminGeneralSecuri
               className="form-check-input"
               id="is-user-pages-visible"
               checked={adminGeneralSecurityContainer.state.isHidingUserPages}
-              onChange={() => { adminGeneralSecurityContainer.changeUserPageVisibility() }}
+              onChange={() => {
+                adminGeneralSecurityContainer.changeUserPageVisibility();
+              }}
             />
-            <label className="form-label form-check-label" htmlFor="is-user-pages-visible">
+            <label
+              className="form-label form-check-label"
+              htmlFor="is-user-pages-visible"
+            >
               {t('security_settings.user_page_visibility.hide_user_pages')}
             </label>
           </div>
-          <p
-            className="form-text text-muted small mt-2"
-            dangerouslySetInnerHTML={{ __html: t('security_settings.user_page_visibility.desc') }}
-          />
+          <p className="form-text text-muted small mt-2">
+            {t('security_settings.user_page_visibility.desc')}
+          </p>
         </div>
       </div>
     </>