fix google analytics and replace inline onclick

modules/material/themes/material/default/other_mfas.twig

@@ -1,3 +1,13 @@
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll(".mdl-menu__item").forEach(function(li) {
+      li.addEventListener('click', function(e) {
+        location.href = li.dataset.callback;
+      });
+    });
+  });
+</script>
+
 {% if other_options|length > 0 %}
   <div layout-children="column" child-spacing="center">
     {# used type=button to avoid form submission on click since this is just used to display the ul #}
@@ -9,7 +19,7 @@
     <ul class="mdl-menu mdl-js-menu mdl-menu--top-left" data-mdl-for="others">
       {% for option in other_options %}
         {# TODO: Non-interactive elements should not be assigned mouse or keyboard event listeners. #}
-        <li class="mdl-menu__item" onclick="location.href = '{{ option.callback|raw }}'">
+        <li class="mdl-menu__item" data-callback="{{ option.callback|raw }}">
           <span class="mdl-list__item-primary-content">
             <img
               class="mdl-list__item-icon"

modules/material/themes/material/default/selectidp-links.twig

@@ -14,12 +14,34 @@
       idpInput.value = id;
 
       document.querySelector('form').appendChild(idpInput);
-
-      ga('send', 'event', 'hub', 'choice', 'IdP', id);
+
+      {% if analytics_tracking_id is not empty %}
+        gtag('event', 'IdP', {
+          'event_category': 'hub',
+          'event_label': 'choice',
+          'value': id
+        });
+      {% endif %}
+
+      document.querySelector('form').submit();
     }
+
+    document.addEventListener('DOMContentLoaded', () => {
+      document.querySelectorAll('button[data-entityid]').forEach((idp) => {
+        idp.addEventListener('click', () => {
+          setSelectedIdp(idp.dataset.entityid);
+        });
+      });
+    });
 
     function clickedAnyway(idpName) {
-      ga('send', 'event', 'hub', 'choice-disabled', 'IdP', idpName);
+      {% if analytics_tracking_id is not empty %}
+        gtag('event', 'IdP', {
+          'event_category': 'hub',
+          'event_label': 'choice-disabled',
+          'value': id
+        });
+      {% endif %}
     }
   </script>
 </head>
@@ -61,7 +83,7 @@
           title="{{ '{selectidp-links:enabled}'|trans({'%idpName%': idp|entityDisplayName}) }}"
         >
           <div class="mdl-card__media white-bg fixed-height">
-            <button class="mdl-button logo-container fill-parent" onclick="setSelectedIdp('{{ idp.entityid|e }}')">
+            <button data-entityid="{{idp.entityid|e}}" type="button" class="mdl-button logo-container fill-parent">
               <div class="image-wrapper">
                 <img
                   class="logo"

modules/material/themes/material/mfa/new-backup-codes.twig

@@ -7,29 +7,63 @@
 
   <script src="bowser.1.9.4.min.js"></script>
   <script>
-    function disableUnsupportedFeatures() {
-      if (bowser.msie) {
-        disablePrint();
-        disableDownload();
-      } else if (bowser.msedge) {
-        disableDownload();
+    document.addEventListener('DOMContentLoaded', function() {
+      function disableUnsupportedFeatures() {
+        if (bowser.msie) {
+          disablePrint();
+          disableDownload();
+        } else if (bowser.msedge) {
+          disableDownload();
+        }
+      }
+
+      function disablePrint() {
+        document.querySelector('button#print').disabled = true;
+        document.querySelector('button#print').classList.add('not-allowed');
+        document.querySelector('button#print').title = '{{ '{mfa:unsupported}'|trans|e('js')|raw }}';
       }
-    }
-
-    function disablePrint() {
-      document.querySelector('button#print').disabled = true;
-      document.querySelector('button#print').classList.add('not-allowed');
-      document.querySelector('button#print').title = '{{ '{mfa:unsupported}'|trans|e('js')|raw }}';
-    }
-
-    function disableDownload() {
-      document.querySelector('a[download]').href = '';
-      document.querySelector('a[download]').classList.add('mdl-button--disabled', 'not-allowed');
-      document.querySelector('a[download]').title = '{{ '{mfa:unsupported}'|trans|e('js')|raw }}';
-    }
+
+      function disableDownload() {
+        document.querySelector('a[download]').href = '';
+        document.querySelector('a[download]').classList.add('mdl-button--disabled', 'not-allowed');
+        document.querySelector('a[download]').title = '{{ '{mfa:unsupported}'|trans|e('js')|raw }}';
+      }
+
+      function copyCodesToClipboard(button) {
+        document.querySelector('textarea').select();
+
+        // FIXME: replace deprecated document.execCommand
+        document.execCommand('copy');
+
+        button.innerHTML = button.innerHTML.replace(
+          '{{ '{mfa:button_copy}'|trans }}',
+          '{{ '{mfa:button_copied}'|trans }}'
+        );
+      }
+
+      function printElement(selector) {
+        let elementToPrint = document.querySelector(selector);
+
+        elementToPrint.classList.add('printable-codes');
+
+        window.print();
+      }
+
+      document.querySelector('body').addEventListener('load', disableUnsupportedFeatures);
+      document.getElementById('print').addEventListener('click', function() {
+        printElement('#code-card');
+      });
+      document.getElementById('copyBtn').addEventListener('click', function() {
+        copyCodesToClipboard(this);
+      });
+      document.getElementById('checkbox').addEventListener('change', function(e) {
+        contBtn = document.querySelector('button[name="continue"]');
+        contBtn.disabled = !e.checked;
+      });
+    });
   </script>
 </head>
-<body class="gradient-bg" onload="disableUnsupportedFeatures()">
+<body class="gradient-bg">
 <div class="mdl-layout mdl-layout--fixed-header">
   <header class="mdl-layout__header">
     <div class="mdl-layout__header-row">
@@ -71,19 +105,9 @@
           </div>
 
           <div class="mdl-card__actions" layout-children="row" child-spacing="space-around">
-            <script>
-              function printElement(selector) {
-                var elementToPrint = document.querySelector(selector);
-
-                elementToPrint.classList.add('printable-codes');
-
-                window.print();
-              }
-            </script>
             <button
               class="mdl-button mdl-button--primary"
               type="button"
-              onclick="printElement('#code-card')"
               id="print"
             >
               {{ '{mfa:button_print}'|trans }}
@@ -97,20 +121,7 @@
               {{ '{mfa:button_download}'|trans }}
             </a>
 
-            <script>
-              function copyCodesToClipboard(button) {
-                document.querySelector('textarea').select();
-
-                {# FIXME: replace deprecated document.execCommand #}
-                document.execCommand('copy');
-
-                button.innerHTML = button.innerHTML.replace(
-                  '{{ '{mfa:button_copy}'|trans }}',
-                  '{{ '{mfa:button_copied}'|trans }}'
-                );
-              }
-            </script>
-            <button class="mdl-button mdl-button--primary" type="button" onclick="copyCodesToClipboard(this)">
+            <button id="copyBtn" class="mdl-button mdl-button--primary" type="button">
               {{ '{mfa:button_copy}'|trans }}
               <textarea class="out-of-sight">{{ codes_for_clipboard }}</textarea>
             </button>
@@ -136,29 +147,26 @@
           </div>
         </div>
 
-        <script>
-          ga('send', 'event', 'error', 'backupcode', 'generation-failed');
-        </script>
+        {% if analytics_tracking_id is not empty %}
+          <script>
+            gtag('event', 'generation-failed', {
+              'event_category': 'error',
+              'event_label': 'backupcode'
+            });
+          </script>
+        {% endif %}
       {% endif %}
 
       <div layout-children="row" class="fill-parent">
         <label class="mdl-checkbox mdl-js-checkbox" flex>
-          <input type="checkbox" onclick="toggleContinue(this)" class="mdl-checkbox__input">
+          <input id="checkbox" type="checkbox" class="mdl-checkbox__input">
           <span class="mdl-checkbox__label">{{ '{mfa:new_codes_saved}'|trans }}</span>
         </label>
 
         <button name="continue" class="mdl-button mdl-button--raised mdl-button--primary" disabled>
           {{ '{mfa:button_continue}'|trans }}
         </button>
       </div>
-
-      <script>
-        function toggleContinue(event) {
-          contBtn = document.querySelector('button[name="continue"]');
-
-          contBtn.disabled = !event.checked;
-        }
-      </script>
     </form>
   </main>
 </div>

modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig

@@ -53,9 +53,14 @@
             </p>
           </div>
 
-          <script>
-            ga('send', 'event', 'error', 'backupcode', '{{ error_message|e('js')|raw }}');
-          </script>
+          {% if analytics_tracking_id is not empty %}
+            <script>
+              gtag('event', '{{ error_message|e('js')|raw }}', {
+                'event_category': 'error',
+                'event_label': 'backupcode'
+              });
+            </script>
+          {% endif %}
         {% endif %}
 
         <div class="mdl-card__actions" layout-children="row">

modules/material/themes/material/mfa/prompt-for-mfa-manager.twig

@@ -53,9 +53,14 @@
             </p>
           </div>
 
-          <script>
-            ga('send', 'event', 'error', 'managercode', '{{ error_message|e('js')|raw }}');
-          </script>
+          {% if analytics_tracking_id is not empty %}
+            <script>
+              gtag('event', '{{ error_message|e('js')|raw }}', {
+                'event_category': 'error',
+                'event_label': 'managercode'
+              });
+            </script>
+          {% endif %}
         {% endif %}
 
         <div class="mdl-card__actions" layout-children="row">

modules/material/themes/material/mfa/prompt-for-mfa-totp.twig

@@ -51,9 +51,14 @@
             </p>
           </div>
 
-          <script>
-            ga('send', 'event', 'error', 'totp', '{{ error_message|e('js')|raw }}');
-          </script>
+          {% if analytics_tracking_id is not empty %}
+            <script>
+              gtag('event', '{{ error_message|e('js')|raw }}', {
+                'event_category': 'error',
+                'event_label': 'totp'
+              });
+            </script>
+          {% endif %}
         {% endif %}
 
         <div class="mdl-card__actions" layout-children="row">