#12299

pending completion

Build # #12299

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #2790 from mozilla/MNTOR-1056-Migrate-breach-alert-email

Adds email preview for email verification and breach notification

Run Details

282 of 1375 branches covered (20.51%)

Branch coverage included in aggregate %.

174 of 174 new or added lines in 17 files covered. (100.0%)

959 of 3709 relevant lines covered (25.86%)

2.1 hits per line

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

0.0

/src/views/partials/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 { getMessage } from '../../utils/fluent.js'
import { formatDate } from '../../utils/format-date.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 = `
  vertical-align: bottom;
`

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 = data => {
  const { breachData, supportedLocales } = data
  const { LogoPath, AddedDate, DataClasses, Title } = breachData

  return `
    <table style='${breachAlertTableStyle}'>
      <tr>
        <td>
          <table style='${breachAlertCardsContainerStyle}'>
            <tr>
              <td style='${breachAlertCardsTitleStyle}'>
                <img
                  height='25'
                  src='${LogoPath}'
                  style='${breachAlertCardsTitleImageStyle}'
                  width='25'
                >
                ${Title}
              </td>
            </tr>
            <tr>
              <td style='padding: 24px;'>
                <p style='${breachAlertLabelStyle}'>
                  ${getMessage('breach-added-label')}
                </p>
                <p style='${breachAlertValueStyle}'>
                  ${formatDate(AddedDate, supportedLocales)}
                </p>

                ${DataClasses?.length > 0
                  ? `
                      <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 { getMessage } from '../../utils/fluent.js'
6	import { formatDate } from '../../utils/format-date.js'
7
8	const breachAlertTableStyle = `	×
9	margin: auto
10	`
11
12	const breachAlertCardsContainerStyle = `	×
13	background: white;
14	border-radius: 6px;
15	border-spacing: 0;
16	border: 1px solid #eeeeee;
17	box-shadow: 0 0 6px #dddddd;
18	display: inline-table;
19	margin: 12px;
20	min-width: 240px;
21	width: 30%;
22	`
23
24	const breachAlertCardsTitleStyle = `	×
25	background: #eeeeee;
26	border-top-left-radius: 6px;
27	border-top-right-radius: 6px;
28	padding: 12px;
29	`
30
31	const breachAlertCardsTitleImageStyle = `	×
32	vertical-align: bottom;
33	`
34
35	const breachAlertLabelStyle = `	×
36	color: #5e5e72;
37	font-family: sans-serif;
38	font-size: 13px;
39	font-weight: 300;
40	margin: 0px;
41	padding-bottom: 4px;
42	`
43
44	const breachAlertValueStyle = `	×
45	color: #20123a;
46	font-family: sans-serif;
47	font-size: 15px;
48	font-weight: 600;
49	margin: 0px;
50	padding-bottom: 15px;
51	`
52
53	const breachCardPartial = data => {	×
54	const { breachData, supportedLocales } = data	×
55	const { LogoPath, AddedDate, DataClasses, Title } = breachData	×
56
57	return `	×
58	<table style='${breachAlertTableStyle}'>
59	<tr>
60	<td>
61	<table style='${breachAlertCardsContainerStyle}'>
62	<tr>
63	<td style='${breachAlertCardsTitleStyle}'>
64	<img
65	height='25'
66	src='${LogoPath}'
67	style='${breachAlertCardsTitleImageStyle}'
68	width='25'
69	>
70	${Title}
71	</td>
72	</tr>
73	<tr>
74	<td style='padding: 24px;'>
75	<p style='${breachAlertLabelStyle}'>
76	${getMessage('breach-added-label')}
77	</p>
78	<p style='${breachAlertValueStyle}'>
79	${formatDate(AddedDate, supportedLocales)}
80	</p>
81
82	${DataClasses?.length > 0	×
83	? `
84	<p style='${breachAlertLabelStyle}'>
85	${getMessage('compromised-data')}
86	</p>
87	<span style='${breachAlertValueStyle}'>
88	${DataClasses.map(classKey => getMessage(classKey))	×
89	.join(', ')
90	.trim()}
91	</span>
92	`
93	: ''}
94	</td>
95	</tr>
96	</table>
97	</td>
98	</tr>
99	</table>
100	`
101	}
102
103	export { breachCardPartial }

mozilla / blurts-server / #12299

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