3fe052a3-a46d-4b6e-ac3b-1426227047d8

Build # 3fe052a3-a46d-4b6e-ac3b-1426227047d8

Build Type

push

circleci

Committed by GitHub

Commit Message

Merge pull request #2830 from mozilla/MNTOR-1160/add-new-email

Run Details

282 of 1332 branches covered (21.17%)

Branch coverage included in aggregate %.

79 of 79 new or added lines in 7 files covered. (100.0%)

959 of 3548 relevant lines covered (27.03%)

4.39 hits per line

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

0.0

/src/views/partials/settings.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 AppConstants from '../../app-constants.js'
import { getMessage } from '../../utils/fluent.js'

const emailNeedsVerificationSub = email => `
  <span class='verification-required'>
    ${getMessage('settings-email-verification-callout')}
  </span>

  <a class='js-settings-resend-email' data-email-id='${email.id}' href='#'>
    ${getMessage('settings-resend-email-verification-link')}
  </a>
`

const deleteButton = email => `
  <button
    data-subscriber-id='${email.subscriber_id}'
    data-email-id='${email.id}'
    class='settings-email-remove-button js-remove-email-button'
  >
    <img src='/images/icon-delete.svg'>
  </button>
`

const createEmailItem = (email, breachCounts) => `
  <li class='settings-email-item'>
    <strong>
      ${email.primary
          ? `${getMessage('settings-email-label-primary', { email: email.email })}`
          : email.email}
    </strong>
    ${email.verified
        ? getMessage('settings-email-number-of-breaches-info', {
            breachCount: breachCounts.get(email.email)
          })
        : emailNeedsVerificationSub(email)}

    ${email.primary ? '' : deleteButton(email)}
  </li>
`

// Moves the primary email to the front and sorts the rest alphabeticaly.
const getSortedEmails = emails => [...emails].sort((a, b) => {
  if (a.primary) {
    return -1
  }

  if (b.primary) {
    return 1
  }

  return a.email.localeCompare(b.email)
})

const createEmailList = (emails, breachCounts) => `
  <ul class='settings-email-list'>
    ${getSortedEmails(emails)
      .map(email => createEmailItem(email, breachCounts))
      .join('')}
  </ul>
`

const optionInput = (csrfToken, { isChecked, option }) => `
  <input
    ${isChecked ? 'checked' : ''}
    class='js-settings-alert-options-input'
    data-alert-option='${option}'
    data-csrf-token='${csrfToken}'
    name='settings-alert-options'
    type='radio'
  >
`

const alertOptions = ({ csrfToken, allEmailsToPrimary }) => `
  <div class='settings-alert-options'>
    <label class='settings-radio-input'>
    ${optionInput(csrfToken, {
      isChecked: !allEmailsToPrimary,
      option: 0
    })}
    <span class='settings-radio-label'>
      ${getMessage('settings-alert-preferences-option-one')}
    </span>
  </label>

  <label class='settings-radio-input'>
    ${optionInput(csrfToken, {
      isChecked: allEmailsToPrimary,
      option: 1
    })}
    <span class='settings-radio-label'>
      ${getMessage('settings-alert-preferences-option-two')}
    </span>
  </label>
  </div>
`

export const settings = data => {
  const { allEmailsToPrimary, breachCounts, csrfToken, emails, limit } = data

  return `
    <div class='settings js-settings' data-csrf-token='${csrfToken}'>
      <h2 class='settings-title'>${getMessage('settings-page-title')}</h2>

      <div class='settings-content'>
        <!-- Breach alert preferences -->
        <section>
          <h3 class='settings-section-title'>
            ${getMessage('settings-alert-preferences-title')}
          </h3>
          ${alertOptions({ csrfToken, allEmailsToPrimary })}
        </section>

        <hr>

        <!-- Monitored email addresses -->
        <section>
          <h3 class='settings-section-title'>
            ${getMessage('settings-email-list-title')}
          </h3>
          <p>${getMessage('settings-email-limit-info', { limit })}</p>

          ${createEmailList(emails, breachCounts)}
          <button
            class='primary settings-add-email-button' 
            data-dialog='add-email' 
            ${emails.length >= limit ? 'disabled' : ''}
          >${getMessage('settings-add-email-button')}</a>
        </section>

        <hr>

        <!-- Deactivate account -->
        <section>
          <h3 class='settings-section-title'>
            ${getMessage('settings-deactivate-account-title')}
          </h3>
          <p>${getMessage('settings-deactivate-account-info')}</p>
          <a
            class='settings-link-fxa'
            href='${AppConstants.FXA_SETTINGS_URL}'
            target='_blank'
          >
            ${getMessage('settings-fxa-link-label')}
          </a>
        </section>
      </div>
    </div>
  `
}

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 AppConstants from '../../app-constants.js'
6	import { getMessage } from '../../utils/fluent.js'
7
8	const emailNeedsVerificationSub = email => `	×
9	<span class='verification-required'>
10	${getMessage('settings-email-verification-callout')}
11	</span>
12
13	<a class='js-settings-resend-email' data-email-id='${email.id}' href='#'>
14	${getMessage('settings-resend-email-verification-link')}
15	</a>
16	`
17
18	const deleteButton = email => `	×
19	<button
20	data-subscriber-id='${email.subscriber_id}'
21	data-email-id='${email.id}'
22	class='settings-email-remove-button js-remove-email-button'
23	>
24	<img src='/images/icon-delete.svg'>
25	</button>
26	`
27
28	const createEmailItem = (email, breachCounts) => `	×
29	<li class='settings-email-item'>
30	<strong>
31	${email.primary	×
32	? `${getMessage('settings-email-label-primary', { email: email.email })}`
33	: email.email}
34	</strong>
35	${email.verified	×
36	? getMessage('settings-email-number-of-breaches-info', {
37	breachCount: breachCounts.get(email.email)
38	})
39	: emailNeedsVerificationSub(email)}
40
41	${email.primary ? '' : deleteButton(email)}	×
42	</li>
43	`
44
45	// Moves the primary email to the front and sorts the rest alphabeticaly.
46	const getSortedEmails = emails => [...emails].sort((a, b) => {	×
47	if (a.primary) {	×
48	return -1	×
49	}
50
51	if (b.primary) {	×
52	return 1	×
53	}
54
55	return a.email.localeCompare(b.email)	×
56	})
57
58	const createEmailList = (emails, breachCounts) => `	×
59	<ul class='settings-email-list'>
60	${getSortedEmails(emails)
61	.map(email => createEmailItem(email, breachCounts))	×
62	.join('')}
63	</ul>
64	`
65
66	const optionInput = (csrfToken, { isChecked, option }) => `	×
67	<input
68	${isChecked ? 'checked' : ''}	×
69	class='js-settings-alert-options-input'
70	data-alert-option='${option}'
71	data-csrf-token='${csrfToken}'
72	name='settings-alert-options'
73	type='radio'
74	>
75	`
76
77	const alertOptions = ({ csrfToken, allEmailsToPrimary }) => `	×
78	<div class='settings-alert-options'>
79	<label class='settings-radio-input'>
80	${optionInput(csrfToken, {
81	isChecked: !allEmailsToPrimary,
82	option: 0
83	})}
84	<span class='settings-radio-label'>
85	${getMessage('settings-alert-preferences-option-one')}
86	</span>
87	</label>
88
89	<label class='settings-radio-input'>
90	${optionInput(csrfToken, {
91	isChecked: allEmailsToPrimary,
92	option: 1
93	})}
94	<span class='settings-radio-label'>
95	${getMessage('settings-alert-preferences-option-two')}
96	</span>
97	</label>
98	</div>
99	`
100
101	export const settings = data => {	×
102	const { allEmailsToPrimary, breachCounts, csrfToken, emails, limit } = data	×
103
104	return `	×
105	<div class='settings js-settings' data-csrf-token='${csrfToken}'>
106	<h2 class='settings-title'>${getMessage('settings-page-title')}</h2>
107
108	<div class='settings-content'>
109	<!-- Breach alert preferences -->
110	<section>
111	<h3 class='settings-section-title'>
112	${getMessage('settings-alert-preferences-title')}
113	</h3>
114	${alertOptions({ csrfToken, allEmailsToPrimary })}
115	</section>
116
117	<hr>
118
119	<!-- Monitored email addresses -->
120	<section>
121	<h3 class='settings-section-title'>
122	${getMessage('settings-email-list-title')}
123	</h3>
124	<p>${getMessage('settings-email-limit-info', { limit })}</p>
125
126	${createEmailList(emails, breachCounts)}
127	<button
128	class='primary settings-add-email-button'
129	data-dialog='add-email'
130	${emails.length >= limit ? 'disabled' : ''}	×
131	>${getMessage('settings-add-email-button')}</a>
132	</section>
133
134	<hr>
135
136	<!-- Deactivate account -->
137	<section>
138	<h3 class='settings-section-title'>
139	${getMessage('settings-deactivate-account-title')}
140	</h3>
141	<p>${getMessage('settings-deactivate-account-info')}</p>
142	<a
143	class='settings-link-fxa'
144	href='${AppConstants.FXA_SETTINGS_URL}'
145	target='_blank'
146	>
147	${getMessage('settings-fxa-link-label')}
148	</a>
149	</section>
150	</div>
151	</div>
152	`
153	}

mozilla / blurts-server / 3fe052a3-a46d-4b6e-ac3b-1426227047d8

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