• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

mozilla / blurts-server / #12159

pending completion
#12159

push

circleci

web-flow
Merge pull request #2806 from mozilla/MNTOR-1019/dialog-add-email

Sitewide dialog feature

282 of 1295 branches covered (21.78%)

Branch coverage included in aggregate %.

39 of 39 new or added lines in 6 files covered. (100.0%)

959 of 3494 relevant lines covered (27.45%)

2.23 hits per line

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

0.0
/src/views/partials/breaches.js
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, getLocale } from '../../utils/fluent.js'
6
import AppConstants from '../../app-constants.js'
7

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

12
  return optionElements.join('')
×
13
}
14

15
function createEmailCTA (count) {
16
  const total = parseInt(AppConstants.MAX_NUM_ADDRESSES)
×
17

18
  if (count >= total) return '' // don't show CTA if additional emails are not available for monitor
×
19

20
  return `<button class='anchor' data-dialog='add-email'>${getMessage('add-email-link')}</button>`
×
21
}
22

23
function createBreachRows (data) {
24
  const locale = getLocale()
×
25
  const shortDate = new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'UTC' })
×
26
  const shortList = new Intl.ListFormat(locale, { style: 'narrow' })
×
27
  const longDate = new Intl.DateTimeFormat(locale, { dateStyle: 'long', timeZone: 'UTC' })
×
28
  const longList = new Intl.ListFormat(locale, { style: 'long' })
×
29
  const breachRowsHTML = data.verifiedEmails.flatMap(account => {
×
30
    return account.breaches.map(breach => {
×
31
      const isHidden = !account.primary || breach.IsResolved // initial breach hidden state
×
32
      const status = breach.IsResolved ? 'resolved' : 'unresolved'
×
33
      const breachDate = Date.parse(breach.BreachDate)
×
34
      const addedDate = Date.parse(breach.AddedDate)
×
35
      const dataClassesTranslated = breach.DataClasses.map(item => getMessage(item))
×
36
      const description = getMessage('breach-description', {
×
37
        companyName: breach.Title,
38
        breachDate: longDate.format(breachDate),
39
        addedDate: longDate.format(addedDate),
40
        dataClasses: longList.format(dataClassesTranslated)
41
      })
42

43
      return `
×
44
      <details class='breach-row' data-status=${status} data-email=${account.email} hidden=${!account.primary} hidden=${isHidden}>
45
        <summary>
46
          <span>${breach.Title}</span><span>${shortList.format(dataClassesTranslated)}</span><span>${shortDate.format(addedDate)}</span>
47
        </summary>
48
        <article>
49
          <p>${description}</p>
50
          <p><strong>Resolve this breach:</strong></p>
51
          <ol class='resolve-list'>${createResolveSteps(breach)}</ol>
52
        </article>
53
      </details>
54
      `
55
    })
56
  })
57

58
  return breachRowsHTML.join('')
×
59
}
60

61
function createResolveSteps (breach) {
62
  const checkedArr = breach.ResolutionsChecked || []
×
63
  const resolveStepsHTML = Object.entries(breach.breachChecklist).map(([key, value]) => `
×
64
  <li class='resolve-list-item'>
65
    <input name='${breach.Id}' value='${key}' type='checkbox' ${checkedArr.includes(key) ? 'checked' : ''}>
×
66
    <p>${value.header}<br><i>${value.body}</i></p>
67
  </li>
68
  `)
69

70
  return resolveStepsHTML.join('')
×
71
}
72

73
export const breaches = data => `
×
74
<section>
75
  <header class='breaches-header'>
76
    <h1>${getMessage('breach-heading-email', { 'email-select': `<custom-select name='email-account'>${createEmailOptions(data.breachesData)}</custom-select>` })}</h1>
77
    <figure>
78
      <img src='/images/temp-diagram.webp' width='80' height='80'>
79
      <figcaption class='breach-stats'>
80
        <strong>10 total breaches</strong>
81
        <label>Resolved</label>
82
        <label>Unresolved</label>
83
      </figcaption>
84
    </figure>
85
    <figure class='email-stats'>
86
      <img src='/images/icon-email.svg' width='55' height='30'>
87
      <figcaption>
88
        <strong>${getMessage('emails-monitored', { count: data.emailCount, total: AppConstants.MAX_NUM_ADDRESSES })}</strong>
89
        ${createEmailCTA(data.emailCount)}
90
      </figcaption>
91
    </figure>
92
  </header>
93
</section>
94
<section class='breaches-filter'>
95
  <input id='breaches-unresolved' type='radio' name='breaches-status' value='unresolved' autocomplete='off' checked>
96
  <label for='breaches-unresolved'><output>&nbsp;</output>${getMessage('filter-label-unresolved')}</label>
97
  <input id='breaches-resolved' type='radio' name='breaches-status' value='resolved' autocomplete='off'>
98
  <label for='breaches-resolved'><output>&nbsp;</output>${getMessage('filter-label-resolved')}</label>
99
</section>
100
<section class='breaches-table' data-token=${data.csrfToken}>
101
  <header>
102
    <span>${getMessage('column-company')}</span><span>${getMessage('column-breached-data')}</span><span>${getMessage('column-detected')}</span>
103
  </header>
104
  ${createBreachRows(data.breachesData)}
105
</section>
106
`
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc