packages/components/containers/login/AbuseModal.tsx

   1 import DOMPurify from 'dompurify';
   2 import { c } from 'ttag';
   3
   4 import { Button, Href } from '@proton/atoms';
   5 import Prompt from '@proton/components/components/prompt/Prompt';
   6 import { isElement } from '@proton/shared/lib/helpers/dom';
   7 import { getAbuseURL } from '@proton/shared/lib/helpers/url';
   8
   9 interface Props {
  10     message?: string;
  11     open: boolean;
  12     onClose: () => void;
  13 }
  14
  15 const sanitize = (msg: string) => {
  16     const sanitizedElement = DOMPurify.sanitize(msg, {
  17         RETURN_DOM: true,
  18         ALLOWED_TAGS: ['b', 'a', 'i', 'em', 'strong', 'br', 'p', 'span'],
  19         ALLOWED_ATTR: ['href'],
  20     });
  21
  22     sanitizedElement.querySelectorAll('a').forEach((node) => {
  23         if (node.tagName === 'A') {
  24             node.setAttribute('rel', 'noopener noreferrer');
  25             node.setAttribute('target', '_blank');
  26         }
  27     });
  28
  29     return sanitizedElement;
  30 };
  31
  32 const containsHTML = (el?: Node) => {
  33     return el?.childNodes && Array.from(el.childNodes).some(isElement);
  34 };
  35
  36 const purifyMessage = (msg: string) => {
  37     const sanitizedElement = sanitize(msg);
  38
  39     if (containsHTML(sanitizedElement)) {
  40         return <div dangerouslySetInnerHTML={{ __html: sanitizedElement.innerHTML }} />;
  41     }
  42
  43     return <>{msg}</>;
  44 };
  45
  46 const AbuseModal = ({ message, open, onClose }: Props) => {
  47     const contactLink = (
  48         <Href href={getAbuseURL()} key={1}>
  49             {c('Info').t`here`}
  50         </Href>
  51     );
  52
  53     return (
  54         <Prompt
  55             open={open}
  56             title={c('Title').t`Account suspended`}
  57             onClose={onClose}
  58             buttons={<Button onClick={onClose}>{c('Action').t`Close`}</Button>}
  59         >
  60             {message ? (
  61                 purifyMessage(message)
  62             ) : (
  63                 <>
  64                     <div className="mb-4">{c('Info')
  65                         .t`This account has been suspended due to a potential policy violation.`}</div>
  66                     <div>{c('Info').jt`If you believe this is in error, please contact us ${contactLink}.`}</div>
  67                 </>
  68             )}
  69         </Prompt>
  70     );
  71 };
  72
  73 export default AbuseModal;