#13087

pending completion

Build # #13087

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #2960 from mozilla/MNTOR-1496-Fix-report-email-breach-icons

Use cached logos and fallback icons for breach email

Run Details

282 of 1603 branches covered (17.59%)

Branch coverage included in aggregate %.

12 of 12 new or added lines in 5 files covered. (100.0%)

959 of 4331 relevant lines covered (22.14%)

1.85 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/views/emails/email-breach-card.js

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

import { getLocale, getMessage } from '../../utils/fluent.js'
import { formatDate } from '../../utils/format-date.js'
import { getBreachLogo } from '../../utils/breach-logo.js'

const breachAlertTableStyle = `
  margin: auto
`

const breachAlertCardsContainerStyle = `
  background: white;
  border-radius: 6px;
  border-spacing: 0;
  border: 1px solid #eeeeee;
  box-shadow: 0 0 6px #dddddd;
  display: inline-table;
  margin: 12px;
  min-width: 240px;
  width: 30%;
`

const breachAlertCardsTitleStyle = `
  background: #eeeeee;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  padding: 12px;
`

const breachAlertCardsTitleImageStyle = `
  display: inline-block;
  font-weight: bold;
  line-height: 2rem;
  overflow: hidden;
  margin-right: 0.5rem;
  text-align: center;
  vertical-align: middle;
  width: 2rem;
`

const breachAlertLabelStyle = `
  color: #5e5e72;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 300;
  margin: 0px;
  padding-bottom: 4px;
`

const breachAlertValueStyle = `
  color: #20123a;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0px;
  padding-bottom: 15px;
`

const breachCardPartial = (breachData, breachLogos) => {
  const {
    AddedDate,
    DataClasses,
    Title
  } = breachData

  return `
    <table style='${breachAlertTableStyle}'>
      <tr>
        <td>
          <table style='${breachAlertCardsContainerStyle}'>
            <tr>
            <td style='${breachAlertCardsTitleStyle}'>
              <span
                class='breachLogoWrapper'
                style='${breachAlertCardsTitleImageStyle}'
              >
                ${getBreachLogo(breachData, breachLogos)}
              </span>
              ${Title}
            </td>
            </tr>
            <tr>
              <td style='padding: 24px;'>
                <p style='${breachAlertLabelStyle}'>
                  ${getMessage('breach-added-label')}
                </p>
                <p style='${breachAlertValueStyle}'>
                  ${formatDate(AddedDate, getLocale())}
                </p>

                ${DataClasses?.length
                  ? `
                      <p style='${breachAlertLabelStyle}'>
                        ${getMessage('compromised-data')}
                      </p>
                      <span style='${breachAlertValueStyle}'>
                        ${DataClasses.map(classKey => getMessage(classKey))
                          .join(', ')
                          .trim()}
                      </span>
                    `
                  : ''}
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  `
}

export { breachCardPartial }

1	/* This Source Code Form is subject to the terms of the Mozilla Public
2	* License, v. 2.0. If a copy of the MPL was not distributed with this
3	* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5	import { getLocale, getMessage } from '../../utils/fluent.js'
6	import { formatDate } from '../../utils/format-date.js'
7	import { getBreachLogo } from '../../utils/breach-logo.js'
8
9	const breachAlertTableStyle = `	×
10	margin: auto
11	`
12
13	const breachAlertCardsContainerStyle = `	×
14	background: white;
15	border-radius: 6px;
16	border-spacing: 0;
17	border: 1px solid #eeeeee;
18	box-shadow: 0 0 6px #dddddd;
19	display: inline-table;
20	margin: 12px;
21	min-width: 240px;
22	width: 30%;
23	`
24
25	const breachAlertCardsTitleStyle = `	×
26	background: #eeeeee;
27	border-top-left-radius: 6px;
28	border-top-right-radius: 6px;
29	padding: 12px;
30	`
31
32	const breachAlertCardsTitleImageStyle = `	×
33	display: inline-block;
34	font-weight: bold;
35	line-height: 2rem;
36	overflow: hidden;
37	margin-right: 0.5rem;
38	text-align: center;
39	vertical-align: middle;
40	width: 2rem;
41	`
42
43	const breachAlertLabelStyle = `	×
44	color: #5e5e72;
45	font-family: sans-serif;
46	font-size: 13px;
47	font-weight: 300;
48	margin: 0px;
49	padding-bottom: 4px;
50	`
51
52	const breachAlertValueStyle = `	×
53	color: #20123a;
54	font-family: sans-serif;
55	font-size: 15px;
56	font-weight: 600;
57	margin: 0px;
58	padding-bottom: 15px;
59	`
60
61	const breachCardPartial = (breachData, breachLogos) => {	×
62	const {
63	AddedDate,
64	DataClasses,
65	Title
66	} = breachData	×
67
68	return `	×
69	<table style='${breachAlertTableStyle}'>
70	<tr>
71	<td>
72	<table style='${breachAlertCardsContainerStyle}'>
73	<tr>
74	<td style='${breachAlertCardsTitleStyle}'>
75	<span
76	class='breachLogoWrapper'
77	style='${breachAlertCardsTitleImageStyle}'
78	>
79	${getBreachLogo(breachData, breachLogos)}
80	</span>
81	${Title}
82	</td>
83	</tr>
84	<tr>
85	<td style='padding: 24px;'>
86	<p style='${breachAlertLabelStyle}'>
87	${getMessage('breach-added-label')}
88	</p>
89	<p style='${breachAlertValueStyle}'>
90	${formatDate(AddedDate, getLocale())}
91	</p>
92
93	${DataClasses?.length	×
94	? `
95	<p style='${breachAlertLabelStyle}'>
96	${getMessage('compromised-data')}
97	</p>
98	<span style='${breachAlertValueStyle}'>
99	${DataClasses.map(classKey => getMessage(classKey))	×
100	.join(', ')
101	.trim()}
102	</span>
103	`
104	: ''}
105	</td>
106	</tr>
107	</table>
108	</td>
109	</tr>
110	</table>
111	`
112	}
113
114	export { breachCardPartial }

mozilla / blurts-server / #13087

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous