mozilla / blurts-server / 2a75273d-ba0f-41a1-9fbe-94f2c32dbd6e

2a75273d-ba0f-41a1-9fbe-94f2c32dbd6e

push

circleci

Vincent 
Add type definition for FxA account data

282 of 1655 branches covered (17.04%)

Branch coverage included in aggregate %.

959 of 4493 relevant lines covered (21.34%)

3.56 hits per line

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

0.0
/src/views/mainLayout.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 AppConstants from '../app-constants.js'










6



import { getMessage, getLocale } from '../utils/fluent.js'










7












8



/**










9



 * @type {ViewPartial<MainViewPartialData<any>>}










10



 */










11



const mainLayout = data => `




×







12



<!doctype html>










13



<html lang=${getLocale()}>










14



  <head>










15



    <title>${getMessage('brand-fx-monitor')}</title>










16



    <style>html {display: none;}</style>










17












18



    <meta charset='utf-8'>










19



    <meta name='viewport' content='width=320, initial-scale=1'>










20



    <meta name='description' content='${getMessage('meta-desc')}'>










21



    <meta name='twitter:card' content='summary_large_image'>










22



    <meta name='twitter:title' content='${getMessage('brand-fx-monitor')}'>










23



    <meta name='twitter:description' content='${getMessage('meta-desc')}'>










24



    <meta name='twitter:image' content='${AppConstants.SERVER_URL}/images/og-image.webp'>










25



    <meta property='og:title' content='${getMessage('brand-fx-monitor')}'>










26



    <meta property='og:description' content='${getMessage('meta-desc')}'>










27



    <meta property='og:site_name' content='${getMessage('brand-fx-monitor')}'>










28



    <meta property='og:type' content='website'>










29



    <meta property='og:url' content='${AppConstants.SERVER_URL}'>










30



    <meta property='og:image' content='${AppConstants.SERVER_URL}/images/og-image.webp'>










31












32



    <link rel='preload' href='/fonts/Metropolis-Bold.woff2' as='font' type='font/woff2' crossorigin>










33



    <link rel='preload' href='/fonts/Inter-Regular-latin.woff2' as='font' type='font/woff2' crossorigin>










34



    <link rel='stylesheet' href='/css/index.css' type='text/css'>










35



    <link rel='stylesheet' href='/css/partials/${data.partial.name}.css' type='text/css'>










36



    <link rel='icon' href='/images/favicon-16.webp' sizes='16x16'>










37



    <link rel='icon' href='/images/favicon-32.webp' sizes='32x32'>










38



    <link rel='icon' href='/images/favicon-48.webp' sizes='48x48'>










39



    <link rel='icon' href='/images/favicon-96.webp' sizes='96x96'>










40



    <link rel='icon' href='/images/favicon-144.webp' sizes='144x144'>










41



    <link rel='icon' href='/images/favicon-256.webp' sizes='256x256'>










42



    <link rel='apple-touch-icon' href='/images/apple-touch-icon.webp' sizes='180x180'>










43












44



    <script src='/js/index.js' type='module'></script>










45












46



    <!-- Google tag (gtag.js) -->










47



    <script nonce='${data.nonce}'>










48



      if (!navigator.doNotTrack || navigator.doNotTrack !== '1') {










49



        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':










50



        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],










51



        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=










52



        'https://www.googletagmanager.com/gtag/js?id='+i+dl;var n=d.querySelector('[nonce]');










53



        n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);










54



        })(window,document,'script','dataLayer','${AppConstants.GA4_MEASUREMENT_ID}');










55



        function gtag(){dataLayer.push(arguments);}










56



        gtag('js', new Date());










57



        gtag('config', '${AppConstants.GA4_MEASUREMENT_ID}', {










58



          cookie_domain: window.location.hostname,










59



          cookie_flags: "SameSite=None;Secure",










60



          debug_mode: ${Boolean(AppConstants.GA4_DEBUG_MODE)}










61



        });










62



      } else {










63



        function gtag() {q










64



          console.debug("Google Analytics disbled by DNT")










65



        }










66



      }










67



      window.gtag = gtag










68



    </script>










69



    <!-- End Google tag (gtag.js) -->










70



  </head>










71



  <body>










72



    <header>










73



      <a href='/user/breaches'>










74



        <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')}'>










75



      </a>










76



      <div class='nav-wrapper'>










77



        <button class='nav-toggle'>










78



          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='20'>










79



            <path d='M1 1h8M1 4h8M1 7h8' stroke='#000' stroke-width='1' stroke-linecap='round'/>










80



          </svg>










81



        </button>










82



        ${userMenu(data)}










83



      </div>










84



    </header>










85












86



    <nav class='site-nav'>










87



      <div class='pages-nav'>










88



        <a href='/user/breaches' class='nav-item ${data.partial.name === 'breaches' ? 'current' : ''}'>





×







89



          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">










90



            <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"/>










91



            <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"/>










92



            <path d="M16 17V16" stroke="currentcolor" stroke-width="2" stroke-linecap="round"/>










93



            <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"/>










94



            <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"/>










95



          </svg>










96



          ${getMessage('site-nav-breaches-link')}










97



        </a>










98



      </div>










99



      <div class='meta-nav'>










100



        <a href='/user/settings' class='nav-item ${data.partial.name === 'settings' ? 'current' : ''}'>





×







101



          ${getMessage('site-nav-settings-link')}










102



        </a>










103



        <a target="_blank" href='https://support.mozilla.org/kb/firefox-monitor' class='nav-item'>










104



          ${getMessage('site-nav-help-link')}










105



        </a>










106



      </div>










107



      <div class='callouts'>










108



        <p>${getMessage('site-nav-ad-callout')}</p>










109



        <a href='https://relay.firefox.com/?utm_medium=mozilla-websites&utm_source=monitor&utm_campaign=&utm_content=nav-bar-global' target='_blank'><img src='/images/logo-relay.svg' width='416' height='92' alt='${getMessage('brand-relay')}'></a>










110



        <a href='https://www.mozilla.org/products/vpn?utm_medium=mozilla-websites&utm_source=monitor&utm_campaign=&utm_content=nav-bar-global' target='_blank'><img src='/images/logo-vpn.svg' width='232' height='48' alt='${getMessage('brand-mozilla-vpn')}'></a>










111



      </div>










112



    </nav>










113












114



    <main data-partial='${data.partial.name}'>










115



      ${data.partial(data)}










116



    </main>










117



    <footer class='site-footer'>










118



      <a href='https://www.mozilla.org' target='_blank'>










119



        <img src='/images/moz-logo-1color-white-rgb-01.svg' width='100' height='29' loading='lazy' alt='${getMessage('mozilla')}'>










120



      </a>










121



      <menu>










122



        <li><a href='/breaches'>${getMessage('footer-nav-all-breaches')}</a></li>










123



        <li><a href='https://support.mozilla.org/kb/firefox-monitor-faq' target='_blank'>FAQ</a></li>










124



        <li><a href='https://www.mozilla.org/privacy/firefox-monitor' target='_blank'>${getMessage('terms-and-privacy')}</a></li>










125



        <li><a href='https://github.com/mozilla/blurts-server' target='_blank'>${getMessage('github')}</a></li>










126



      </menu>










127



    </footer>










128



  </body>










129



</html>










130



`










131












132



/**










133



 * @type {ViewPartial<MainViewPartialData>}










134



 */










135



const userMenu = data => `




×







136



<div class='user-menu-wrapper' tabindex='-1'>










137



  <button










138



    aria-expanded='false'










139



    aria-haspopup='true'










140



    class='user-menu-button'










141



    title='${getMessage('menu-button-title')}'










142



  >










143



    <img src='${data.fxaProfile?.avatar}' alt='${getMessage('menu-button-alt')}' />










144



  </button>










145



  <menu










146



    aria-label='${getMessage('menu-list-accessible-label')}'










147



    class='user-menu-container user-menu-popover'










148



    role='navigation'










149



    hidden










150



  >










151



    <li tabindex='1'>










152



      <a href='${AppConstants.FXA_SETTINGS_URL}' target='_blank' class='user-menu-header'>










153



        <b class='user-menu-email'>${data.fxaProfile?.email}</b>










154



        <div class='user-menu-subtitle'>










155



          ${getMessage('menu-item-fxa')}










156



          <img src='/images/icon-open-in.svg' />










157



        </div>










158



      </a>










159



    </li>










160



    <hr>










161



    <li>










162



      <a href='/user/settings' class='user-menu-link'>










163



        <img src='/images/icon-settings.svg' />










164



        ${getMessage('menu-item-settings')}










165



      </a>










166



    </li>










167



    <li>










168



      <a href='https://support.mozilla.org/kb/firefox-monitor' target='_blank' class='user-menu-link'>










169



        <img src='/images/icon-help.svg' />










170



        ${getMessage('menu-item-help')}










171



      </a>










172



    </li>










173



    <li>










174



      <a href='/user/logout' class='user-menu-link'>










175



        <img src='/images/icon-signout.svg' />










176



        ${getMessage('menu-item-logout')}










177



      </a>










178



    </li>










179



  </menu>










180



</div>










181



`










182












183



export { mainLayout }
























    

  • 

    •