packages/shared/lib/supported/unsupported.ts

   1 // eslint-disable-next-line import/no-unresolved
   2 import errorImg from '@proton/styles/assets/img/errors/error-generic.svg';
   3 import unsupportedBrowser from '@proton/styles/assets/img/errors/unsupported-browser.svg';
   4
   5 import { SupportedBrowserValue } from './interface';
   6
   7 const showUnsupported = () => {
   8     const isProtonVPN = (document.location.origin || document.location.href).indexOf('protonvpn') !== -1;
   9     const hostname = document.location.hostname;
  10     const kbUrl = isProtonVPN
  11         ? 'https://protonvpn.com/support/browsers-supported/'
  12         : `https://${hostname.slice(hostname.indexOf('.') + 1)}/support/recommended-browsers`;
  13     // Not using getKnowledgeBaseUrl( to minimize the bundle size since it apparently doesn't tree-shake the bundle correctly and adds an extra 40k
  14
  15     document.body.innerHTML = `
  16         <div class='h-full flex items-center pb-14 overflow-auto'>
  17             <div class='m-auto text-center max-w-custom' style='--max-w-custom: 30em'>
  18                 <h1 class='text-bold text-4xl'>Unsupported browser</h1>
  19                 <p>
  20                     You are using an unsupported browser. Please update it to the latest version or use a different browser.
  21                 </p>
  22                 <a class='primary-link bold' target='_blank' rel='noopener noreferrer' href='${kbUrl}'>More info</a>
  23                 <div class='mt-8'>
  24                     <img src='${unsupportedBrowser}' alt='Unsupported browser'/>
  25                 </div>
  26             </div>
  27         </div>
  28     `;
  29
  30     document.title = 'Unsupported browser';
  31 };
  32
  33 const showError = () => {
  34     document.body.innerHTML = `
  35         <div class='h-full flex items-center pb-14 overflow-auto'>
  36             <div class='m-auto text-center max-w-custom' style='--max-w-custom: 30em'>
  37                 <div class='mb-8'>
  38                     <img src='${errorImg}' alt='Error'/>
  39                 </div>
  40                 <h1 class='text-bold text-4xl'>Oops, something went wrong</h1>
  41                 <p>
  42                     Please <button id='refresh' class='link align-baseline'>refresh the page</button> or try again later.
  43                 </p>
  44             </div>
  45         </div>
  46     `;
  47
  48     document.querySelector<HTMLButtonElement>('#refresh')?.addEventListener('click', () => {
  49         window.location.reload();
  50     });
  51
  52     document.title = 'Oops, something went wrong';
  53 };
  54
  55 const run = () => {
  56     if (window.protonSupportedBrowser === SupportedBrowserValue.Unsupported) {
  57         showUnsupported();
  58         /*
  59          * undefined equality is also checked because the `onerror` handler is called immediately on failures in firefox, and not
  60          * after execution has started like it does on webkit. so if the index.js file fails before the pre.js file has
  61          * gotten parsed, the handler never triggers. so it assumes that undefined means network failure. the `onload` behavior seems
  62          * different and is executed in order, so parsing failures should always happen through the onload handler (in pre.js)
  63          * which would set it to 0.
  64          */
  65     } else if (
  66         window.protonSupportedBrowser === SupportedBrowserValue.Other ||
  67         window.protonSupportedBrowser === undefined
  68     ) {
  69         showError();
  70     }
  71 };
  72
  73 // In a timeout to avoid race conditions with the onerror handler
  74 window.setTimeout(run, 33);