packages/components/containers/credentialLeak/BreachRecommendations.tsx

   1 import { c } from 'ttag';
   2
   3 import { Href } from '@proton/atoms';
   4 import Icon from '@proton/components/components/icon/Icon';
   5 import type { FetchedBreaches } from '@proton/components/containers/credentialLeak/models';
   6 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
   7
   8 interface Props {
   9     actions: FetchedBreaches['actions'];
  10     inModal?: boolean;
  11 }
  12
  13 // html removed from BE payloads until parsing and sanitizing is added
  14 // const parseHTML = (htmlString: string) => {
  15 //     const regex = /<a href="(.*?)">(.*?)<\/a>/g;
  16 //     let match;
  17 //     const parts = [];
  18 //     let lastIndex = 0;
  19
  20 //     while ((match = regex.exec(htmlString)) !== null) {
  21 //         const [fullMatch, href, text] = match;
  22 //         const plainText = htmlString.substring(lastIndex, match.index);
  23 //         parts.push(plainText);
  24 //         parts.push(
  25 //             <a key={parts.length} href={href} target="_blank" rel="noopener noreferrer">
  26 //                 {text}
  27 //             </a>
  28 //         );
  29 //         lastIndex = match.index + fullMatch.length;
  30 //     }
  31 //     parts.push(htmlString.substring(lastIndex));
  32
  33 //     return parts;
  34 // };
  35
  36 const getIcon = (code: string) => {
  37     if (code === 'password_source') {
  38         return 'key';
  39     }
  40     if (code === 'password_exposed') {
  41         return 'key';
  42     }
  43     if (code === '2fa') {
  44         return 'locks';
  45     }
  46     if (code === 'aliases') {
  47         return 'alias';
  48     }
  49     if (code === 'stay_alert') {
  50         return 'exclamation-circle';
  51     }
  52     if (code === 'passwords_all') {
  53         return 'key';
  54     }
  55     if (code === 'clean_devices') {
  56         return 'pass-laptop';
  57     }
  58 };
  59
  60 interface ActionProps {
  61     code: string;
  62     action: string;
  63     link?: string;
  64 }
  65 const Action = ({ code, action, link }: ActionProps) => {
  66     const iconName = getIcon(code);
  67
  68     return (
  69         <div className="flex flex-nowrap dropdown-item-button relative py-3 px-4">
  70             {iconName && <Icon name={iconName} className="shrink-0 mt-0 mr-2" />}
  71             {link ? (
  72                 <Href href={link} className="flex-1 expand-click-area color-inherit text-no-decoration">
  73                     {action}
  74                 </Href>
  75             ) : (
  76                 <span className="flex-1">{action}</span>
  77             )}
  78         </div>
  79     );
  80 };
  81
  82 const BreachRecommendations = ({ actions, inModal = false }: Props) => {
  83     if (!actions) {
  84         return null;
  85     }
  86
  87     const staySaferOnlineLink = (
  88         <Href href={getKnowledgeBaseUrl('/dark-web-monitoring')} key="link">
  89             {
  90                 // translator: full sentence is: Learn how to <stay safer online>
  91                 c('Link').t`stay safer online`
  92             }
  93         </Href>
  94     );
  95
  96     return (
  97         <>
  98             {inModal ? (
  99                 <h2 className="text-semibold text-rg mb-2">{c('Title').t`Recommended actions`}</h2>
 100             ) : (
 101                 <h3 className="text-semibold text-rg mb-2">{c('Title').t`Recommended actions`}</h3>
 102             )}
 103             <ul className="unstyled m-0">
 104                 {actions.map(({ code, name, urls }) => {
 105                     return (
 106                         <li className="border-top border-weak text-sm relative" key={name}>
 107                             <Action code={code} action={name} link={urls?.[0]} />
 108                         </li>
 109                     );
 110                 })}
 111                 <li className="py-3 px-4 border-top border-bottom border-weak color-weak text-sm">
 112                     {
 113                         // translator: full sentence is: Learn how to <stay safer online>
 114                         c('Info').jt`Learn how to ${staySaferOnlineLink}`
 115                     }
 116                 </li>
 117             </ul>
 118         </>
 119     );
 120 };
 121
 122 export default BreachRecommendations;