#11717

pending completion

Build # #11717

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #2738 from mozilla/MNTOR-802/breaches-email-cta

Mntor 802/breaches email cta

Run Details

278 of 1112 branches covered (25.0%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

948 of 2996 relevant lines covered (31.64%)

2.54 hits per line

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

0.0

/src/views/partials/breaches.js

import { getMessage, getLocale } from '../../utils/fluent.js'
import AppConstants from '../../app-constants.js'

const rowHtml = data => `
<details class='breach-row' data-email=${data.affectedEmail} hidden=${!data.primaryEmail}>
  <summary>
    <span>${data.companyName}</span><span>${data.dataClasses}</span><span>${data.addedDate}</span>
  </summary>
  <div>
    ${data.description}
  </div>
</details>
`

function createEmailOptions (data) {
  const emails = data.verifiedEmails.map(obj => obj.email)
  const optionElements = emails.map(email => `<option>${email}</option>`)

  return optionElements.join('')
}

function createBreachRows (data) {
  const locale = getLocale()
  const formattedBreaches = data.verifiedEmails.flatMap(account => {
    return account.breaches.map(breach => {
      const breachDate = Date.parse(breach.BreachDate)
      const addedDate = Date.parse(breach.AddedDate)
      const dataClassesTranslated = breach.DataClasses.map(item => getMessage(item))
      const formattedBreach = {
        affectedEmail: account.email,
        primaryEmail: account.primary,
        companyName: breach.Title,
        addedDate: new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'UTC' }).format(addedDate),
        dataClasses: new Intl.ListFormat(locale, { style: 'narrow' }).format(dataClassesTranslated),
        description: getMessage('breach-description', {
          companyName: breach.Title,
          breachDate: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(breachDate),
          addedDate: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(addedDate),
          dataClasses: new Intl.ListFormat(locale, { style: 'long' }).format(dataClassesTranslated)
        })
      }

      return rowHtml(formattedBreach)
    })
  })

  return formattedBreaches.join('')
}

export const breaches = data => `
<section>
  <header class='breaches-header'>
    <h1>${getMessage('breach-heading-email', { 'email-select': `<custom-select>${createEmailOptions(data.breachesData)}</custom-select>` })}</h1>
    <figure>
      <img src='/images/temp-diagram.png' width='80' height='80'>
      <figcaption class='breach-stats'>
        <strong>10 total breaches</strong>
        <label>Resolved</label>
        <label>Unresolved</label>
      </figcaption>
    </figure>
    <figure class='email-stats'>
      <img src='/images/icon-email.svg' width='55' height='30'>
      <figcaption>
        <strong>${getMessage('emails-monitored', { count: data.emailCount, total: AppConstants.MAX_NUM_ADDRESSES })}</strong>
        <a href='http://mozilla.org'>Add email address</a>
      </figcaption>
    </figure>
  </header>
</section>
<section class='breaches-table'>
  <header>
    <span>${getMessage('column-company')}</span><span>${getMessage('column-breached-data')}</span><span>${getMessage('column-detected')}</span>
  </header>
  ${createBreachRows(data.breachesData)}
</section>
<section style='display:none'>
  <button id="update-breaches">Update Breaches</button>
  <pre>${JSON.stringify(data.breachesData, null, 2)}</pre>
</section>
`

1	import { getMessage, getLocale } from '../../utils/fluent.js'
2	import AppConstants from '../../app-constants.js'
3
4	const rowHtml = data => `	×
5	<details class='breach-row' data-email=${data.affectedEmail} hidden=${!data.primaryEmail}>
6	<summary>
7	<span>${data.companyName}</span><span>${data.dataClasses}</span><span>${data.addedDate}</span>
8	</summary>
9	<div>
10	${data.description}
11	</div>
12	</details>
13	`
14
15	function createEmailOptions (data) {
16	const emails = data.verifiedEmails.map(obj => obj.email)	×
17	const optionElements = emails.map(email => `<option>${email}</option>`)	×
18
19	return optionElements.join('')	×
20	}
21
22	function createBreachRows (data) {
23	const locale = getLocale()	×
24	const formattedBreaches = data.verifiedEmails.flatMap(account => {	×
25	return account.breaches.map(breach => {	×
26	const breachDate = Date.parse(breach.BreachDate)	×
27	const addedDate = Date.parse(breach.AddedDate)	×
28	const dataClassesTranslated = breach.DataClasses.map(item => getMessage(item))	×
29	const formattedBreach = {	×
30	affectedEmail: account.email,
31	primaryEmail: account.primary,
32	companyName: breach.Title,
33	addedDate: new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'UTC' }).format(addedDate),
34	dataClasses: new Intl.ListFormat(locale, { style: 'narrow' }).format(dataClassesTranslated),
35	description: getMessage('breach-description', {
36	companyName: breach.Title,
37	breachDate: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(breachDate),
38	addedDate: new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' }).format(addedDate),
39	dataClasses: new Intl.ListFormat(locale, { style: 'long' }).format(dataClassesTranslated)
40	})
41	}
42
43	return rowHtml(formattedBreach)	×
44	})
45	})
46
47	return formattedBreaches.join('')	×
48	}
49
50	export const breaches = data => `	×
51	<section>
52	<header class='breaches-header'>
53	<h1>${getMessage('breach-heading-email', { 'email-select': `<custom-select>${createEmailOptions(data.breachesData)}</custom-select>` })}</h1>
54	<figure>
55	<img src='/images/temp-diagram.png' width='80' height='80'>
56	<figcaption class='breach-stats'>
57	<strong>10 total breaches</strong>
58	<label>Resolved</label>
59	<label>Unresolved</label>
60	</figcaption>
61	</figure>
62	<figure class='email-stats'>
63	<img src='/images/icon-email.svg' width='55' height='30'>
64	<figcaption>
65	<strong>${getMessage('emails-monitored', { count: data.emailCount, total: AppConstants.MAX_NUM_ADDRESSES })}</strong>
66	<a href='http://mozilla.org'>Add email address</a>
67	</figcaption>
68	</figure>
69	</header>
70	</section>
71	<section class='breaches-table'>
72	<header>
73	<span>${getMessage('column-company')}</span><span>${getMessage('column-breached-data')}</span><span>${getMessage('column-detected')}</span>
74	</header>
75	${createBreachRows(data.breachesData)}
76	</section>
77	<section style='display:none'>
78	<button id="update-breaches">Update Breaches</button>
79	<pre>${JSON.stringify(data.breachesData, null, 2)}</pre>
80	</section>
81	`

mozilla / blurts-server / #11717

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