packages/components/containers/credentialLeak/helpers.ts

   1 import camelCase from 'lodash/camelCase';
   2 import { c } from 'ttag';
   3
   4 import type { SampleBreach } from '@proton/components/containers/credentialLeak/models';
   5 import { DARK_WEB_MONITORING_NAME } from '@proton/shared/lib/constants';
   6 import breachIconAlertBig from '@proton/styles/assets/img/breach-alert/shield-bolt-danger-big.svg';
   7 import breachIconAlertSmall from '@proton/styles/assets/img/breach-alert/shield-bolt-danger-small.svg';
   8 import breachIconResolvedBig from '@proton/styles/assets/img/breach-alert/shield-bolt-resolved-big.svg';
   9 import breachIconResolvedSmall from '@proton/styles/assets/img/breach-alert/shield-bolt-resolved-small.svg';
  10 import breachIconWarningBig from '@proton/styles/assets/img/breach-alert/shield-bolt-warning-big.svg';
  11 import breachIconWarningSmall from '@proton/styles/assets/img/breach-alert/shield-bolt-warning-small.svg';
  12
  13 import { BREACH_STATE } from './models';
  14
  15 export const enum SEVERITY_LEVELS {
  16     HIGH = 0.67,
  17     MEDIUM = 0.33,
  18 }
  19
  20 export const enum BREACH_API_ERROR {
  21     GENERIC = 2902,
  22 }
  23
  24 export const isUnread = (state: BREACH_STATE): boolean => {
  25     return state === BREACH_STATE.UNREAD;
  26 };
  27
  28 export const isResolved = (state: BREACH_STATE): boolean => {
  29     return state === BREACH_STATE.RESOLVED;
  30 };
  31
  32 export const getBreachIcon = (severity: number, options: { big?: boolean; resolved?: boolean } = {}) => {
  33     const { resolved = false, big = false } = options;
  34     if (resolved) {
  35         if (big) {
  36             return breachIconResolvedBig;
  37         }
  38         return breachIconResolvedSmall;
  39     }
  40
  41     if (severity > SEVERITY_LEVELS.HIGH) {
  42         if (big) {
  43             return breachIconAlertBig;
  44         }
  45         return breachIconAlertSmall;
  46     }
  47
  48     if (big) {
  49         return breachIconWarningBig;
  50     }
  51     return breachIconWarningSmall;
  52
  53     // TO CHECK: no styles for low prio?
  54 };
  55
  56 export const getStyle = (severity: number): { colorClass: string; iconAltText: string } => {
  57     const style = {
  58         high: {
  59             colorClass: 'color-danger',
  60             iconAltText: c('Info').t`High Priority`,
  61         },
  62         medium: {
  63             colorClass: 'color-warning',
  64             iconAltText: c('Info').t`Medium Priority`,
  65         },
  66         low: {
  67             colorClass: 'color-warning', // TO DISCUSS : color-info looks misleading
  68             iconAltText: c('Info').t`Low Priority`,
  69         },
  70     };
  71
  72     // severity levels may be changed with updates to API if more levels are added in the future
  73     if (severity > SEVERITY_LEVELS.HIGH) {
  74         return style.high;
  75     } else if (severity > SEVERITY_LEVELS.MEDIUM) {
  76         return style.medium;
  77     } else {
  78         return style.low;
  79     }
  80 };
  81
  82 export const getFillerBreachData = () => {
  83     return {
  84         publishedAt: '2023-10-17T00:00:00+00:00',
  85         source: {
  86             category: {
  87                 name: c('Info').t`finance`,
  88             },
  89             country: {
  90                 name: null,
  91             },
  92         },
  93         size: 5389441,
  94         exposedData: [
  95             {
  96                 code: 'email',
  97                 name: c('Info').t`email`,
  98             },
  99             {
 100                 code: 'username',
 101                 name: c('Info').t`username`,
 102             },
 103             {
 104                 code: 'password',
 105                 name: c('Info').t`password`,
 106             },
 107         ],
 108         passwordLastChars: null,
 109         actions: [
 110             {
 111                 code: 'password',
 112                 desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.',
 113                 name: c('Info').t`Change your password`,
 114             },
 115             {
 116                 code: 'accounts',
 117                 desc: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
 118                 name: c('Info').t`Monitor accounts`,
 119             },
 120         ],
 121     };
 122 };
 123
 124 export function toCamelCase(obj: any): any {
 125     if (obj === null || typeof obj !== 'object') {
 126         return obj;
 127     }
 128
 129     if (Array.isArray(obj)) {
 130         return obj.map((item) => toCamelCase(item));
 131     }
 132
 133     const camelCaseObj: any = {};
 134     for (const key in obj) {
 135         if (Object.prototype.hasOwnProperty.call(obj, key)) {
 136             const camelCaseKey = camelCase(key);
 137             camelCaseObj[camelCaseKey] = toCamelCase(obj[key]);
 138         }
 139     }
 140
 141     return camelCaseObj;
 142 }
 143
 144 export const getEnableString = (reason: string) => {
 145     return c('Log preference').t`Enable ${reason}`;
 146 };
 147
 148 export const getEnabledString = (reason: string) => {
 149     return c('Notification').t`${reason} has been enabled`;
 150 };
 151
 152 export const getDisabledString = (reason: string) => {
 153     return c('Notification').t`${reason} has been disabled`;
 154 };
 155
 156 export const getUpsellText = (
 157     sample: SampleBreach | null,
 158     total: number | null,
 159     link: React.JSX.Element,
 160     inAccountSettings?: boolean
 161 ) => {
 162     if (!sample || !total) {
 163         return;
 164     }
 165     const isUnknownSource = !sample.source.domain && sample.source.isAggregated === false;
 166     const isMultipleSources = !sample.source.domain && sample.source.isAggregated === true;
 167
 168     const { name } = sample;
 169     const remainingCount = total - 1;
 170
 171     if (inAccountSettings) {
 172         if (!name) {
 173             //translator: full sentence is: Your information was found in at least one data leak. Turn on Dark Web Monitoring to view details and take action. <Learn more>
 174             return c('Account Settings - Info')
 175                 .jt`Your information was found in at least one data leak. Turn on ${DARK_WEB_MONITORING_NAME} to view details and take action. ${link}`;
 176         }
 177         //translator: full sentence is: <Name> and 1 other potential leak detected. Turn on Dark Web Monitoring to view details and take action. <Learn more>
 178         if (remainingCount === 1) {
 179             return c('Account Settings - Info')
 180                 .jt`${name} and 1 other potential leak detected. Turn on ${DARK_WEB_MONITORING_NAME} to view details and take action. ${link}`;
 181         }
 182         //translator: full sentence is: <Name> and <count> other potential leaks detected. Turn on Dark Web Monitoring to view details and take action. <Learn more>
 183         if (remainingCount > 1) {
 184             return c('Account Settings - Info')
 185                 .jt`${name} and ${remainingCount} other potential leaks detected. Turn on ${DARK_WEB_MONITORING_NAME} to view details and take action. ${link}`;
 186         }
 187         //translator: full sentence is: A potential leak from <Name> was detected. Turn on Dark Web Monitoring to view details and take action. <Learn more>
 188         if (isUnknownSource || isMultipleSources) {
 189             return c('Account Settings - Info')
 190                 .jt`A potential leak from ${name} was detected. Turn on ${DARK_WEB_MONITORING_NAME} to view details and take action. ${link}`;
 191         }
 192         //translator: full sentence is: A potential <name> was detected. Turn on Dark Web Monitoring to view details and take action. <Learn more>
 193         return c('Account Settings - Info')
 194             .jt`A potential ${name} leak was detected. Turn on ${DARK_WEB_MONITORING_NAME} to view details and take action. ${link}`;
 195     }
 196
 197     if (!name) {
 198         //translator: full sentence is: Your information was found in at least one data leak. Turn on Dark Web Monitoring to view details. <Learn more>
 199         return c('Security Center - Info')
 200             .jt`Your information was found in at least one data leak. Turn on ${DARK_WEB_MONITORING_NAME} to view details. ${link}`;
 201     }
 202     if (remainingCount === 1) {
 203         //translator: full sentence is: <Name> and 1 other potential leak detected. Turn on Dark Web Monitoring to view details. <Learn more>
 204         return c('Security Center - Info')
 205             .jt`${name} and 1 other potential leak detected. Turn on ${DARK_WEB_MONITORING_NAME} to view details. ${link}`;
 206     }
 207     if (remainingCount > 1) {
 208         //translator: full sentence is: <Name> and <count> other potential leaks detected. Turn on Dark Web Monitoring to view details. <Learn more>
 209         return c('Security Center - Info')
 210             .jt`${name} and ${remainingCount} other potential leaks detected. Turn on ${DARK_WEB_MONITORING_NAME} to view details. ${link}`;
 211     }
 212     if (isUnknownSource || isMultipleSources) {
 213         //translator: full sentence is: A potential leak from <Name> was detected. Turn on Dark Web Monitoring to view details and take action. <Learn more>
 214         return c('Account Settings - Info')
 215             .jt`A potential leak from ${name} was detected. Turn on ${DARK_WEB_MONITORING_NAME} to view details. ${link}`;
 216     }
 217     //translator: full sentence is: A potential <Name> leak was detected. Turn on Dark Web Monitoring to view details and take action. <Learn more>
 218     return c('Security Center - Info')
 219         .jt`A potential ${name} leak was detected. Turn on ${DARK_WEB_MONITORING_NAME} to view details. ${link}`;
 220 };