b1adb29a-1743-4986-93a2-2bc6a03985c9

Build # b1adb29a-1743-4986-93a2-2bc6a03985c9

Build Type

circleci

Committed by Florian Zia

Commit Message

merge: main -> MNTOR-1056-Migrate-breach-alert-email

Pull Request Pull Request #2790: MNTOR-1056: Migrate breach alert email

Run Details

282 of 1293 branches covered (21.81%)

Branch coverage included in aggregate %.

58 of 58 new or added lines in 4 files covered. (100.0%)

959 of 3510 relevant lines covered (27.32%)

4.44 hits per line

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

0.0

/src/views/partials/email-breach-alert.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'

const breachAlertContainerStyle = `
  background: #f9f9fa;
  color: black;
  padding: 36px 0 24px;
`

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 breachAlertCtaStyle = `
  background: #0060df;
  border-radius: 4px;
  color: white;
  display: inline-block;
  margin: 24px 0;
  margin: auto;
  padding: 12px 24px;
`

const breachAlertEmailPartial = data => `
  <tr>
    <td style='${breachAlertContainerStyle}'>
      <p>
        ${getMessage('email-breach-detected', {
          'email-address': `<strong>${data.breachedEmail}</strong>`
        })}
      </p>
      <table style='${breachAlertTableStyle}'>
        <tr>
          <td>
            <table style='${breachAlertCardsContainerStyle}'>
              <tr>
                <td style='${breachAlertCardsTitleStyle}'>
                  <img
                    height='25'
                    src='${data.breachAlert.LogoPath}'
                    style='${breachAlertCardsTitleImageStyle}'
                    width='25'
                  >
                  ${data.breachAlert.Title}
                </td>
              </tr>
              <tr>
                <td style='padding: 24px;'>
                  <p
                    class='text-light'
                    style='${breachAlertLabelStyle}'
                  >
                    ${'data.breachAlert.localizedStrings.breachAdded'}
                  </p>
                  <p
                    class='text-medium'
                    style='${breachAlertValueStyle}'
                  >
                    ${data.breachAlert.AddedDate}
                  </p>

                  ${data.breachAlert.DataClasses
                    ? `
                        <p
                          class='text-light'
                          style='${breachAlertLabelStyle}'
                        >
                          ${'data.breachAlert.localizedStrings.compromisedData'}
                        </p>
                        <span
                          class='text-medium'
                          style='${breachAlertValueStyle}'
                        >
                          ${data.breachAlert.DataClasses}
                        </span>
                      `
                    : ''}
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

      <a
        href='{{ ctaHref }}'
        style='${breachAlertCtaStyle}'
      >
        ${getMessage('email-dashboard-cta')}
      </a>
    </td>
  </tr>
`

export { breachAlertEmailPartial }

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
7	const breachAlertContainerStyle = `	×
8	background: #f9f9fa;
9	color: black;
10	padding: 36px 0 24px;
11	`
12
13	const breachAlertTableStyle = `	×
14	margin: auto
15	`
16
17	const breachAlertCardsContainerStyle = `	×
18	background: white;
19	border-radius: 6px;
20	border-spacing: 0;
21	border: 1px solid #eeeeee;
22	box-shadow: 0 0 6px #dddddd;
23	display: inline-table;
24	margin: 12px;
25	min-width: 240px;
26	width: 30%;
27	`
28
29	const breachAlertCardsTitleStyle = `	×
30	background: #eeeeee;
31	border-top-left-radius: 6px;
32	border-top-right-radius: 6px;
33	padding: 12px;
34	`
35
36	const breachAlertCardsTitleImageStyle = `	×
37	vertical-align: bottom;
38	`
39
40	const breachAlertLabelStyle = `	×
41	color: #5e5e72;
42	font-family: sans-serif;
43	font-size: 13px;
44	font-weight: 300;
45	margin: 0px;
46	padding-bottom: 4px;
47	`
48
49	const breachAlertValueStyle = `	×
50	color: #20123a;
51	font-family: sans-serif;
52	font-size: 15px;
53	font-weight: 600;
54	margin: 0px;
55	padding-bottom: 15px;
56	`
57
58	const breachAlertCtaStyle = `	×
59	background: #0060df;
60	border-radius: 4px;
61	color: white;
62	display: inline-block;
63	margin: 24px 0;
64	margin: auto;
65	padding: 12px 24px;
66	`
67
68	const breachAlertEmailPartial = data => `	×
69	<tr>
70	<td style='${breachAlertContainerStyle}'>
71	<p>
72	${getMessage('email-breach-detected', {
73	'email-address': `<strong>${data.breachedEmail}</strong>`
74	})}
75	</p>
76	<table style='${breachAlertTableStyle}'>
77	<tr>
78	<td>
79	<table style='${breachAlertCardsContainerStyle}'>
80	<tr>
81	<td style='${breachAlertCardsTitleStyle}'>
82	<img
83	height='25'
84	src='${data.breachAlert.LogoPath}'
85	style='${breachAlertCardsTitleImageStyle}'
86	width='25'
87	>
88	${data.breachAlert.Title}
89	</td>
90	</tr>
91	<tr>
92	<td style='padding: 24px;'>
93	<p
94	class='text-light'
95	style='${breachAlertLabelStyle}'
96	>
97	${'data.breachAlert.localizedStrings.breachAdded'}
98	</p>
99	<p
100	class='text-medium'
101	style='${breachAlertValueStyle}'
102	>
103	${data.breachAlert.AddedDate}
104	</p>
105
106	${data.breachAlert.DataClasses	×
107	? `
108	<p
109	class='text-light'
110	style='${breachAlertLabelStyle}'
111	>
112	${'data.breachAlert.localizedStrings.compromisedData'}
113	</p>
114	<span
115	class='text-medium'
116	style='${breachAlertValueStyle}'
117	>
118	${data.breachAlert.DataClasses}
119	</span>
120	`
121	: ''}
122	</td>
123	</tr>
124	</table>
125	</td>
126	</tr>
127	</table>
128
129	<a
130	href='{{ ctaHref }}'
131	style='${breachAlertCtaStyle}'
132	>
133	${getMessage('email-dashboard-cta')}
134	</a>
135	</td>
136	</tr>
137	`
138
139	export { breachAlertEmailPartial }

mozilla / blurts-server / b1adb29a-1743-4986-93a2-2bc6a03985c9

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