#11912

pending completion

Build # #11912

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #2755 from mozilla/MNTOR-1046-User-menu

MNTOR-1046: Add user menu

Run Details

282 of 1172 branches covered (24.06%)

Branch coverage included in aggregate %.

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

959 of 3117 relevant lines covered (30.77%)

2.5 hits per line

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

0.0

/src/views/main.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, getLocale } from '../utils/fluent.js'

const { SERVER_URL } = AppConstants

const mainLayout = data => `
<!doctype html>
<html lang=${getLocale()}>
  <head>
    <title>${getMessage('brand-fx-monitor')}</title>
    <style>html {display: none;}</style>

    <meta charset='utf-8'>
    <meta name='viewport' content='width=320, initial-scale=1'>
    <meta name='description' content='${getMessage('meta-desc')}'>
    <meta name='twitter:card' content='summary_large_image'>
    <meta property='og:title' content='${getMessage('brand-fx-monitor')}'>
    <meta property='og:type' content='website'>
    <meta property='og:url' content='${SERVER_URL}'>
    <meta property='og:image' content='${SERVER_URL}/images/og-image.webp'>

    <link rel='preload' href='/fonts/Metropolis-Bold.woff2' as='font' type='font/woff2' crossorigin>
    <link rel='preload' href='/fonts/Inter-Regular-latin.woff2' as='font' type='font/woff2' crossorigin>
    <link rel='stylesheet' href='/css/index.css' type='text/css'>
    <link rel='stylesheet' href='/css/partials/${data.partial.name}.css' type='text/css'>
    <link rel='icon' href='/images/favicon-16.webp' sizes='16x16'>
    <link rel='icon' href='/images/favicon-32.webp' sizes='32x32'>
    <link rel='icon' href='/images/favicon-48.webp' sizes='48x48'>
    <link rel='icon' href='/images/favicon-96.webp' sizes='96x96'>
    <link rel='icon' href='/images/favicon-144.webp' sizes='144x144'>
    <link rel='icon' href='/images/favicon-256.webp' sizes='256x256'>
    <link rel='apple-touch-icon' href='/images/apple-touch-icon.webp' sizes='180x180'>

    <script src='/js/index.js' type='module'></script>
  </head>
  <body>
    ${data.partial.name === 'landing' ? landingHeader(data) : mainHeader(data)}
    <main data-partial='${data.partial.name}'>
      ${data.partial(data)}
    </main>
    <footer>
      <a href='https://www.mozilla.org' target='_blank'>
        <img src='/images/moz-logo-1color-white-rgb-01.svg' width='100' height='29' loading='lazy' alt='${getMessage('mozilla')}'>
      </a>
      <menu>
        <li><a href='https://support.mozilla.org/kb/firefox-monitor-faq' target='_blank'>FAQ</a></li>
        <li><a href='https://www.mozilla.org/privacy/firefox-monitor' target='_blank'>${getMessage('terms-and-privacy')}</a></li>
        <li><a href='https://github.com/mozilla/blurts-server' target='_blank'>${getMessage('github')}</a></li>
      </menu>
    </footer>
  </body>
</html>
`

const userMenu = data => `
<div class='user-menu-wrapper' tabindex='-1'>
  <button
  aria-expanded='false'
  aria-haspopup='true'
  class='user-menu-button'
  title='${getMessage('menu-button-title')}'
  >
    <img src='${data.fxaProfile?.avatar}' alt='${getMessage('menu-button-alt')}' />
  </button>
  <menu class='user-menu-container user-menu-popover' role='navigation' hidden>
    <li role='menuitem' tabindex='1'>
      <a href='${AppConstants.FXA_SETTINGS_URL}' target='_blank' class='user-menu-header'>
        <b class='user-menu-email'>${data.fxaProfile?.email}</b>
        <div class='user-menu-subtitle'>
          ${getMessage('menu-item-fxa')}
          <img src='/images/icon-open-in.svg' />
        </div>
      </a>
    </li>
    <hr>
    <li role='menuitem'>
      <a href='/user/settings' class='user-menu-link'>
        <img src='/images/icon-settings.svg' />
        ${getMessage('menu-item-settings')}
      </a>
    </li>
    <li role='menuitem'>
      <a href='https://support.mozilla.org/kb/firefox-monitor' target='_blank' class='user-menu-link'>
        <img src='/images/icon-help.svg' />
        ${getMessage('menu-item-help')}
      </a>
    </li>
    <li role='menuitem'>
      <a href='/user/logout' class='user-menu-link'>
        <img src='/images/icon-signout.svg' />
        ${getMessage('menu-item-logout')}
      </a>
    </li>
  </menu>
</div>
`

const mainHeader = data => `
<header>
  <a href='/user/breaches'>
    <img class='monitor-logo' srcset='/images/monitor-logo-transparent.webp 213w, /images/monitor-logo-transparent@2x.webp 425w' width='213' height='33' alt='${getMessage('brand-fx-monitor')}'>
  </a>
  <div class='nav-wrapper'>
    <button class='nav-toggle'>
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='20'>
        <path d='M1 1h8M1 4h8M1 7h8' stroke='#000' stroke-width='1' stroke-linecap='round'/>
      </svg>
    </button>
    ${userMenu(data)}
  </div>
</header>
<nav>
  <a href='/user/dashboard' class='nav-item ${data.partial.name === 'dashboard' ? 'current' : ''}'>Dashboard</a>
  <a href='/user/breaches' class='nav-item ${data.partial.name === 'breaches' ? 'current' : ''}'>Data breaches</a>
  <a href='/user/data-removal' class='nav-item ${data.partial.name === 'dataRemoval' ? 'current' : ''}'>Data removal</a>
  <a href='/user/settings' class='nav-item ${data.partial.name === 'settings' ? 'current' : ''}'>Settings</a>
</nav>
`

const landingHeader = data => `
<header>
  <a href='/'>
    <img class='monitor-logo' srcset='/images/monitor-logo-transparent.webp 213w, /images/monitor-logo-transparent@2x.webp 425w' width='213' height='33' alt='${getMessage('brand-fx-monitor')}'>
  </a>
  <menu>
    <li><a href='/user/breaches' class='button secondary'>${getMessage('sign-in')}</a></li>
  </menu>
</header>
`

export { mainLayout }

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, getLocale } from '../utils/fluent.js'
7
8	const { SERVER_URL } = AppConstants	×
9
10	const mainLayout = data => `	×
11	<!doctype html>
12	<html lang=${getLocale()}>
13	<head>
14	<title>${getMessage('brand-fx-monitor')}</title>
15	<style>html {display: none;}</style>
16
17	<meta charset='utf-8'>
18	<meta name='viewport' content='width=320, initial-scale=1'>
19	<meta name='description' content='${getMessage('meta-desc')}'>
20	<meta name='twitter:card' content='summary_large_image'>
21	<meta property='og:title' content='${getMessage('brand-fx-monitor')}'>
22	<meta property='og:type' content='website'>
23	<meta property='og:url' content='${SERVER_URL}'>
24	<meta property='og:image' content='${SERVER_URL}/images/og-image.webp'>
25
26	<link rel='preload' href='/fonts/Metropolis-Bold.woff2' as='font' type='font/woff2' crossorigin>
27	<link rel='preload' href='/fonts/Inter-Regular-latin.woff2' as='font' type='font/woff2' crossorigin>
28	<link rel='stylesheet' href='/css/index.css' type='text/css'>
29	<link rel='stylesheet' href='/css/partials/${data.partial.name}.css' type='text/css'>
30	<link rel='icon' href='/images/favicon-16.webp' sizes='16x16'>
31	<link rel='icon' href='/images/favicon-32.webp' sizes='32x32'>
32	<link rel='icon' href='/images/favicon-48.webp' sizes='48x48'>
33	<link rel='icon' href='/images/favicon-96.webp' sizes='96x96'>
34	<link rel='icon' href='/images/favicon-144.webp' sizes='144x144'>
35	<link rel='icon' href='/images/favicon-256.webp' sizes='256x256'>
36	<link rel='apple-touch-icon' href='/images/apple-touch-icon.webp' sizes='180x180'>
37
38	<script src='/js/index.js' type='module'></script>
39	</head>
40	<body>
41	${data.partial.name === 'landing' ? landingHeader(data) : mainHeader(data)}	×
42	<main data-partial='${data.partial.name}'>
43	${data.partial(data)}
44	</main>
45	<footer>
46	<a href='https://www.mozilla.org' target='_blank'>
47	<img src='/images/moz-logo-1color-white-rgb-01.svg' width='100' height='29' loading='lazy' alt='${getMessage('mozilla')}'>
48	</a>
49	<menu>
50	<li><a href='https://support.mozilla.org/kb/firefox-monitor-faq' target='_blank'>FAQ</a></li>
51	<li><a href='https://www.mozilla.org/privacy/firefox-monitor' target='_blank'>${getMessage('terms-and-privacy')}</a></li>
52	<li><a href='https://github.com/mozilla/blurts-server' target='_blank'>${getMessage('github')}</a></li>
53	</menu>
54	</footer>
55	</body>
56	</html>
57	`
58
59	const userMenu = data => `	×
60	<div class='user-menu-wrapper' tabindex='-1'>
61	<button
62	aria-expanded='false'
63	aria-haspopup='true'
64	class='user-menu-button'
65	title='${getMessage('menu-button-title')}'
66	>
67	<img src='${data.fxaProfile?.avatar}' alt='${getMessage('menu-button-alt')}' />
68	</button>
69	<menu class='user-menu-container user-menu-popover' role='navigation' hidden>
70	<li role='menuitem' tabindex='1'>
71	<a href='${AppConstants.FXA_SETTINGS_URL}' target='_blank' class='user-menu-header'>
72	<b class='user-menu-email'>${data.fxaProfile?.email}</b>
73	<div class='user-menu-subtitle'>
74	${getMessage('menu-item-fxa')}
75	<img src='/images/icon-open-in.svg' />
76	</div>
77	</a>
78	</li>
79	<hr>
80	<li role='menuitem'>
81	<a href='/user/settings' class='user-menu-link'>
82	<img src='/images/icon-settings.svg' />
83	${getMessage('menu-item-settings')}
84	</a>
85	</li>
86	<li role='menuitem'>
87	<a href='https://support.mozilla.org/kb/firefox-monitor' target='_blank' class='user-menu-link'>
88	<img src='/images/icon-help.svg' />
89	${getMessage('menu-item-help')}
90	</a>
91	</li>
92	<li role='menuitem'>
93	<a href='/user/logout' class='user-menu-link'>
94	<img src='/images/icon-signout.svg' />
95	${getMessage('menu-item-logout')}
96	</a>
97	</li>
98	</menu>
99	</div>
100	`
101
102	const mainHeader = data => `	×
103	<header>
104	<a href='/user/breaches'>
105	<img class='monitor-logo' srcset='/images/monitor-logo-transparent.webp 213w, /images/monitor-logo-transparent@2x.webp 425w' width='213' height='33' alt='${getMessage('brand-fx-monitor')}'>
106	</a>
107	<div class='nav-wrapper'>
108	<button class='nav-toggle'>
109	<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='20'>
110	<path d='M1 1h8M1 4h8M1 7h8' stroke='#000' stroke-width='1' stroke-linecap='round'/>
111	</svg>
112	</button>
113	${userMenu(data)}
114	</div>
115	</header>
116	<nav>
117	<a href='/user/dashboard' class='nav-item ${data.partial.name === 'dashboard' ? 'current' : ''}'>Dashboard</a>	×
118	<a href='/user/breaches' class='nav-item ${data.partial.name === 'breaches' ? 'current' : ''}'>Data breaches</a>	×
119	<a href='/user/data-removal' class='nav-item ${data.partial.name === 'dataRemoval' ? 'current' : ''}'>Data removal</a>	×
120	<a href='/user/settings' class='nav-item ${data.partial.name === 'settings' ? 'current' : ''}'>Settings</a>	×
121	</nav>
122	`
123
124	const landingHeader = data => `	×
125	<header>
126	<a href='/'>
127	<img class='monitor-logo' srcset='/images/monitor-logo-transparent.webp 213w, /images/monitor-logo-transparent@2x.webp 425w' width='213' height='33' alt='${getMessage('brand-fx-monitor')}'>
128	</a>
129	<menu>
130	<li><a href='/user/breaches' class='button secondary'>${getMessage('sign-in')}</a></li>
131	</menu>
132	</header>
133	`
134
135	export { mainLayout }

mozilla / blurts-server / #11912

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