packages/components/containers/credentialLeak/NoBreachesView.tsx

   1 import { c } from 'ttag';
   2
   3 import { ButtonLike } from '@proton/atoms';
   4 import { BRAND_NAME, VPN_APP_NAME } from '@proton/shared/lib/constants';
   5 import { getKnowledgeBaseUrl, getStaticURL } from '@proton/shared/lib/helpers/url';
   6 import alias from '@proton/styles/assets/img/breach-alert/img-alias.svg';
   7 import darkweb from '@proton/styles/assets/img/breach-alert/img-dark-web.svg';
   8 import netShield from '@proton/styles/assets/img/breach-alert/img-net-shield.svg';
   9 import allGood from '@proton/styles/assets/img/breach-alert/img-no-breaches-found.svg';
  10 import pwdManager from '@proton/styles/assets/img/breach-alert/img-password-manager.svg';
  11
  12 interface RecommendedTech {
  13     tech: string;
  14     img: string;
  15     title: string;
  16     link: string;
  17     desc: string;
  18     href: string;
  19 }
  20
  21 const protonTech = (): RecommendedTech[] => [
  22     {
  23         tech: 'darkweb',
  24         img: darkweb,
  25         title: c('Title').t`What is the dark web?`,
  26         desc: c('Info')
  27             .t`The dark web is a hidden part of the internet where stolen personal information, like identities, can be bought and sold.`,
  28         link: c('Link').t`Learn more`,
  29         href: getStaticURL('/blog/what-is-dark-web'),
  30     },
  31     {
  32         tech: 'aliases',
  33         img: alias,
  34         title: c('Title').t`What is an alias?`,
  35         link: c('Link').t`Create an alias`,
  36         desc: c('Info')
  37             .t`An email alias works like an email address, but reduces spam and keeps your actual email address and identity hidden.`,
  38         href: getKnowledgeBaseUrl('/addresses-and-aliases'),
  39     },
  40     {
  41         tech: 'vpn',
  42         img: netShield,
  43         title: c('Title').t`Block trackers and malware`,
  44         link: c('Link').t`Get ${VPN_APP_NAME}`,
  45         desc: c('Info')
  46             .t`NetShield is an ad-blocking feature from ${VPN_APP_NAME} that protects your device from ads, trackers, and malware.`,
  47         href: getStaticURL('/vpn'),
  48     },
  49     {
  50         tech: 'pass',
  51         img: pwdManager,
  52         title: c('Title').t`Passwords made easy`,
  53         link: c('Link').t`Get ${BRAND_NAME} Pass`,
  54         desc: c('Info')
  55             .t`Use a password manager to generate and securely store your passwords, ensuring strong passwords and easier sign-ins.`,
  56         href: getStaticURL('/pass'),
  57     },
  58 ];
  59
  60 const NoBreachesView = () => {
  61     return (
  62         <>
  63             <div className="flex flex-column flex-nowrap mb-8">
  64                 <img src={allGood} alt="" className="m-auto" />
  65                 <h3 className="color-success text-center m-auto text-rg text-semibold">{c('Title')
  66                     .t`No account information was found in any data breaches`}</h3>
  67             </div>
  68             <div>
  69                 <h4 className="text-xl text-bold">{c('Info').t`Want to learn more?`}</h4>
  70                 <p className="mt-4">{c('Info')
  71                     .t`Keep your info more secure and private with these guides and tips.`}</p>
  72                 <div className="flex flex-column items-stretch md:flex-row lg:flex-nowrap gap-4">
  73                     {protonTech().map((tech) => {
  74                         return (
  75                             <div
  76                                 className="flex flex-column flex-nowrap flex-auto md:w-1/3 lg:w-auto p-4 border border-weak rounded"
  77                                 key={`${tech.tech}`}
  78                             >
  79                                 <img src={tech.img} className="m-auto block" alt="" />
  80                                 <h5
  81                                     className="mt-4 text-rg text-semibold md:min-h-custom"
  82                                     style={{ '--md-min-h-custom': '2em' }}
  83                                 >
  84                                     {tech.title}
  85                                 </h5>
  86                                 <p className="text-sm color-weak mt-4 mb-2 flex-auto">{tech.desc}</p>
  87                                 <ButtonLike
  88                                     className="mt-auto mr-auto text-left"
  89                                     as="a"
  90                                     shape="underline"
  91                                     color="norm"
  92                                     href={tech.href}
  93                                     target="_blank"
  94                                 >
  95                                     {tech.link}
  96                                 </ButtonLike>
  97                             </div>
  98                         );
  99                     })}
 100                 </div>
 101             </div>
 102         </>
 103     );
 104 };
 105
 106 export default NoBreachesView;