#12688

pending completion

Build # #12688

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #2888 from mozilla/MNTOR-1254/update-layouts

Mntor 1254/update layouts

Run Details

282 of 1421 branches covered (19.85%)

Branch coverage included in aggregate %.

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

959 of 3929 relevant lines covered (24.41%)

2.03 hits per line

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

0.0

/src/views/mainLayout.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 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='${AppConstants.SERVER_URL}'>
    <meta property='og:image' content='${AppConstants.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>

    <!-- Google Tag Manager -->
    <script nonce='${data.nonce}'>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
    n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','${AppConstants.GA4_MEASUREMENT_ID}');</script>
    <!-- End Google Tag Manager -->
  </head>
  <body>
    <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 class='site-nav'>
      <div class='pages-nav'>
        <a href='/user/breaches' class='nav-item ${data.partial.name === 'breaches' ? 'current' : ''}'>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5942 20.049C9.87439 21.3816 10.8394 22.9996 12.3539 22.9996H19.657C21.1692 22.9996 22.1344 21.3862 21.4193 20.0538L17.7796 13.2724C17.0264 11.8689 15.0148 11.8662 14.2577 13.2676L10.5942 20.049Z" fill="white" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16 21C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21Z" fill="currentcolor"/>
            <path d="M16 17V16" stroke="currentcolor" stroke-width="2" stroke-linecap="round"/>
            <path d="M7 22H5C3.89543 22 3 21.1046 3 20V11C3 9.89543 3.89543 9 5 9H19C20.1046 9 21 9.89543 21 11V13" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M7 9V7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7V9" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          ${getMessage('site-nav-breaches-link')}
        </a>
      </div>
      <div class='meta-nav'>
        <a href='/user/settings' class='nav-item ${data.partial.name === 'settings' ? 'current' : ''}'>
          ${getMessage('site-nav-settings-link')}
        </a>
        <a target="_blank" href='https://support.mozilla.org/kb/firefox-monitor' class='nav-item'>
          ${getMessage('site-nav-help-link')}
        </a>
      </div>
    </nav>

    <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
    aria-label='${getMessage('menu-list-accessible-label')}'
    class='user-menu-container user-menu-popover'
    role='navigation'
    hidden
  >
    <li 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>
      <a href='/user/settings' class='user-menu-link'>
        <img src='/images/icon-settings.svg' />
        ${getMessage('menu-item-settings')}
      </a>
    </li>
    <li>
      <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>
      <a href='/user/logout' class='user-menu-link'>
        <img src='/images/icon-signout.svg' />
        ${getMessage('menu-item-logout')}
      </a>
    </li>
  </menu>
</div>
`

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 mainLayout = data => `	×
9	<!doctype html>
10	<html lang=${getLocale()}>
11	<head>
12	<title>${getMessage('brand-fx-monitor')}</title>
13	<style>html {display: none;}</style>
14
15	<meta charset='utf-8'>
16	<meta name='viewport' content='width=320, initial-scale=1'>
17	<meta name='description' content='${getMessage('meta-desc')}'>
18	<meta name='twitter:card' content='summary_large_image'>
19	<meta property='og:title' content='${getMessage('brand-fx-monitor')}'>
20	<meta property='og:type' content='website'>
21	<meta property='og:url' content='${AppConstants.SERVER_URL}'>
22	<meta property='og:image' content='${AppConstants.SERVER_URL}/images/og-image.webp'>
23
24	<link rel='preload' href='/fonts/Metropolis-Bold.woff2' as='font' type='font/woff2' crossorigin>
25	<link rel='preload' href='/fonts/Inter-Regular-latin.woff2' as='font' type='font/woff2' crossorigin>
26	<link rel='stylesheet' href='/css/index.css' type='text/css'>
27	<link rel='stylesheet' href='/css/partials/${data.partial.name}.css' type='text/css'>
28	<link rel='icon' href='/images/favicon-16.webp' sizes='16x16'>
29	<link rel='icon' href='/images/favicon-32.webp' sizes='32x32'>
30	<link rel='icon' href='/images/favicon-48.webp' sizes='48x48'>
31	<link rel='icon' href='/images/favicon-96.webp' sizes='96x96'>
32	<link rel='icon' href='/images/favicon-144.webp' sizes='144x144'>
33	<link rel='icon' href='/images/favicon-256.webp' sizes='256x256'>
34	<link rel='apple-touch-icon' href='/images/apple-touch-icon.webp' sizes='180x180'>
35
36	<script src='/js/index.js' type='module'></script>
37
38	<!-- Google Tag Manager -->
39	<script nonce='${data.nonce}'>(function(w,d,s,l,i){w[l]=w[l]\|\|[];w[l].push({'gtm.start':
40	new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
41	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
42	'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
43	n&&j.setAttribute('nonce',n.nonce\|\|n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
44	})(window,document,'script','dataLayer','${AppConstants.GA4_MEASUREMENT_ID}');</script>
45	<!-- End Google Tag Manager -->
46	</head>
47	<body>
48	<header>
49	<a href='/user/breaches'>
50	<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')}'>
51	</a>
52	<div class='nav-wrapper'>
53	<button class='nav-toggle'>
54	<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='20'>
55	<path d='M1 1h8M1 4h8M1 7h8' stroke='#000' stroke-width='1' stroke-linecap='round'/>
56	</svg>
57	</button>
58	${userMenu(data)}
59	</div>
60	</header>
61
62	<nav class='site-nav'>
63	<div class='pages-nav'>
64	<a href='/user/breaches' class='nav-item ${data.partial.name === 'breaches' ? 'current' : ''}'>	×
65	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
66	<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5942 20.049C9.87439 21.3816 10.8394 22.9996 12.3539 22.9996H19.657C21.1692 22.9996 22.1344 21.3862 21.4193 20.0538L17.7796 13.2724C17.0264 11.8689 15.0148 11.8662 14.2577 13.2676L10.5942 20.049Z" fill="white" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
67	<path fill-rule="evenodd" clip-rule="evenodd" d="M16 21C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21Z" fill="currentcolor"/>
68	<path d="M16 17V16" stroke="currentcolor" stroke-width="2" stroke-linecap="round"/>
69	<path d="M7 22H5C3.89543 22 3 21.1046 3 20V11C3 9.89543 3.89543 9 5 9H19C20.1046 9 21 9.89543 21 11V13" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
70	<path d="M7 9V7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7V9" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
71	</svg>
72	${getMessage('site-nav-breaches-link')}
73	</a>
74	</div>
75	<div class='meta-nav'>
76	<a href='/user/settings' class='nav-item ${data.partial.name === 'settings' ? 'current' : ''}'>	×
77	${getMessage('site-nav-settings-link')}
78	</a>
79	<a target="_blank" href='https://support.mozilla.org/kb/firefox-monitor' class='nav-item'>
80	${getMessage('site-nav-help-link')}
81	</a>
82	</div>
83	</nav>
84
85	<main data-partial='${data.partial.name}'>
86	${data.partial(data)}
87	</main>
88	<footer>
89	<a href='https://www.mozilla.org' target='_blank'>
90	<img src='/images/moz-logo-1color-white-rgb-01.svg' width='100' height='29' loading='lazy' alt='${getMessage('mozilla')}'>
91	</a>
92	<menu>
93	<li><a href='https://support.mozilla.org/kb/firefox-monitor-faq' target='_blank'>FAQ</a></li>
94	<li><a href='https://www.mozilla.org/privacy/firefox-monitor' target='_blank'>${getMessage('terms-and-privacy')}</a></li>
95	<li><a href='https://github.com/mozilla/blurts-server' target='_blank'>${getMessage('github')}</a></li>
96	</menu>
97	</footer>
98	</body>
99	</html>
100	`
101
102	const userMenu = data => `	×
103	<div class='user-menu-wrapper' tabindex='-1'>
104	<button
105	aria-expanded='false'
106	aria-haspopup='true'
107	class='user-menu-button'
108	title='${getMessage('menu-button-title')}'
109	>
110	<img src='${data.fxaProfile?.avatar}' alt='${getMessage('menu-button-alt')}' />
111	</button>
112	<menu
113	aria-label='${getMessage('menu-list-accessible-label')}'
114	class='user-menu-container user-menu-popover'
115	role='navigation'
116	hidden
117	>
118	<li tabindex='1'>
119	<a href='${AppConstants.FXA_SETTINGS_URL}' target='_blank' class='user-menu-header'>
120	<b class='user-menu-email'>${data.fxaProfile?.email}</b>
121	<div class='user-menu-subtitle'>
122	${getMessage('menu-item-fxa')}
123	<img src='/images/icon-open-in.svg' />
124	</div>
125	</a>
126	</li>
127	<hr>
128	<li>
129	<a href='/user/settings' class='user-menu-link'>
130	<img src='/images/icon-settings.svg' />
131	${getMessage('menu-item-settings')}
132	</a>
133	</li>
134	<li>
135	<a href='https://support.mozilla.org/kb/firefox-monitor' target='_blank' class='user-menu-link'>
136	<img src='/images/icon-help.svg' />
137	${getMessage('menu-item-help')}
138	</a>
139	</li>
140	<li>
141	<a href='/user/logout' class='user-menu-link'>
142	<img src='/images/icon-signout.svg' />
143	${getMessage('menu-item-logout')}
144	</a>
145	</li>
146	</menu>
147	</div>
148	`
149
150	export { mainLayout }

mozilla / blurts-server / #12688

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