From 8ac7ae8d1f9ee599965c5d468d59b7ef5c27909a Mon Sep 17 00:00:00 2001
From: Jason Jackson <jasonc.jackson@gmail.com>
Date: Wed, 13 Nov 2024 17:10:31 -0500
Subject: [PATCH 1/6] Wrap calls to ga check for analytics_tracking_id

---
 .../themes/material/default/selectidp-links.twig     |  8 ++++++--
 .../themes/material/mfa/new-backup-codes.twig        |  8 +++++---
 .../material/mfa/prompt-for-mfa-backupcode.twig      |  8 +++++---
 .../themes/material/mfa/prompt-for-mfa-manager.twig  |  8 +++++---
 .../themes/material/mfa/prompt-for-mfa-totp.twig     |  8 +++++---
 .../themes/material/mfa/prompt-for-mfa-webauthn.twig |  2 +-
 .../themes/material/silauth/loginuserpass.twig       | 12 ++++++++----
 7 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/modules/material/themes/material/default/selectidp-links.twig b/modules/material/themes/material/default/selectidp-links.twig
index 3609027..1e55d3e 100644
--- a/modules/material/themes/material/default/selectidp-links.twig
+++ b/modules/material/themes/material/default/selectidp-links.twig
@@ -15,11 +15,15 @@
 
       document.querySelector('form').appendChild(idpInput);
 
-      ga('send', 'event', 'hub', 'choice', 'IdP', id);
+      {% if analytics_tracking_id is not empty %}
+        ga('send', 'event', 'hub', 'choice', 'IdP', id);
+      {% endif %}
     }
 
     function clickedAnyway(idpName) {
-      ga('send', 'event', 'hub', 'choice-disabled', 'IdP', idpName);
+      {% if analytics_tracking_id is not empty %}
+        ga('send', 'event', 'hub', 'choice-disabled', 'IdP', idpName);
+      {% endif %}
     }
   </script>
 </head>
diff --git a/modules/material/themes/material/mfa/new-backup-codes.twig b/modules/material/themes/material/mfa/new-backup-codes.twig
index 015b637..12dd59d 100644
--- a/modules/material/themes/material/mfa/new-backup-codes.twig
+++ b/modules/material/themes/material/mfa/new-backup-codes.twig
@@ -136,9 +136,11 @@
           </div>
         </div>
 
-        <script>
-          ga('send', 'event', 'error', 'backupcode', 'generation-failed');
-        </script>
+        {% if analytics_tracking_id is not empty %}
+          <script>
+            ga('send', 'event', 'error', 'backupcode', 'generation-failed');
+          </script>
+        {% endif %}
       {% endif %}
 
       <div layout-children="row" class="fill-parent">
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig b/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig
index 3f6603b..a275153 100644
--- a/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig
+++ b/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig
@@ -53,9 +53,11 @@
             </p>
           </div>
 
-          <script>
-            ga('send', 'event', 'error', 'backupcode', '{{ error_message|e('js')|raw }}');
-          </script>
+          {% if analytics_tracking_id is not empty %}
+            <script>
+              ga('send', 'event', 'error', 'backupcode', '{{ error_message|e('js')|raw }}');
+            </script>
+          {% endif %}
         {% endif %}
 
         <div class="mdl-card__actions" layout-children="row">
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig b/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig
index 0a6197b..d7ab56a 100644
--- a/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig
+++ b/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig
@@ -53,9 +53,11 @@
             </p>
           </div>
 
-          <script>
-            ga('send', 'event', 'error', 'managercode', '{{ error_message|e('js')|raw }}');
-          </script>
+          {% if analytics_tracking_id is not empty %}
+            <script>
+              ga('send', 'event', 'error', 'managercode', '{{ error_message|e('js')|raw }}');
+            </script>
+          {% endif %}
         {% endif %}
 
         <div class="mdl-card__actions" layout-children="row">
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig b/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig
index b6701a5..d8dd51c 100644
--- a/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig
+++ b/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig
@@ -51,9 +51,11 @@
             </p>
           </div>
 
-          <script>
-            ga('send', 'event', 'error', 'totp', '{{ error_message|e('js')|raw }}');
-          </script>
+          {% if analytics_tracking_id is not empty %}
+            <script>
+              ga('send', 'event', 'error', 'totp', '{{ error_message|e('js')|raw }}');
+            </script>
+          {% endif %}
         {% endif %}
 
         <div class="mdl-card__actions" layout-children="row">
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig b/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
index e15c1b4..61370b2 100644
--- a/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
+++ b/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
@@ -94,7 +94,7 @@
           </p>
         </div>
 
-        {% if error_message is not empty %}
+        {% if error_message is not empty and analytics_tracking_id is not empty %}
           <script>
             ga('send', 'event', 'error', 'webauthn', '{{ error_message|e('js')|raw }}');
           </script>
diff --git a/modules/material/themes/material/silauth/loginuserpass.twig b/modules/material/themes/material/silauth/loginuserpass.twig
index f56333d..bfafb71 100644
--- a/modules/material/themes/material/silauth/loginuserpass.twig
+++ b/modules/material/themes/material/silauth/loginuserpass.twig
@@ -28,7 +28,9 @@
         });
       }
 
-      ga('send', 'event', 'reCAPTCHA', 'required');
+      {% if analytics_tracking_id is not empty %}
+        ga('send', 'event', 'reCAPTCHA', 'required');
+      {% endif %}
     </script>
   {% endif %}
 </head>
@@ -100,9 +102,11 @@
             </span>
           </p>
 
-          <script>
-            ga('send', 'event', 'error', '{{ errorcode|e('js') }}', 'message', '{{ message|e('js') }}');
-          </script>
+          {% if analytics_tracking_id is not empty %}
+            <script>
+              ga('send', 'event', 'error', '{{ errorcode|e('js') }}', 'message', '{{ message|e('js') }}');
+            </script>
+          {% endif %}
         {% endif %}
 
         <div class="mdl-card__actions" layout-children="row">

From 81b1ecd431d67ba156b00ba1bff96a2201576f7a Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Wed, 27 Nov 2024 07:32:21 +0930
Subject: [PATCH 2/6] fix google analytics and use don't use inline onclick

---
 .../material/default/selectidp-links.twig      | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/modules/material/themes/material/default/selectidp-links.twig b/modules/material/themes/material/default/selectidp-links.twig
index 3609027..acec01a 100644
--- a/modules/material/themes/material/default/selectidp-links.twig
+++ b/modules/material/themes/material/default/selectidp-links.twig
@@ -14,9 +14,21 @@
       idpInput.value = id;
 
       document.querySelector('form').appendChild(idpInput);
-
-      ga('send', 'event', 'hub', 'choice', 'IdP', id);
+      gtag('event', 'IdP', {
+        'event_category': 'hub',
+        'event_label': 'choice',
+        'value': id
+      });
+      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);
@@ -61,7 +73,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"

From 31ea0077d6697e45bb46ef4f62e5f105016ec1b2 Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Wed, 27 Nov 2024 18:36:00 +0930
Subject: [PATCH 3/6] wrap gtag call

---
 .../themes/material/default/selectidp-links.twig     | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/modules/material/themes/material/default/selectidp-links.twig b/modules/material/themes/material/default/selectidp-links.twig
index acec01a..0c5cd54 100644
--- a/modules/material/themes/material/default/selectidp-links.twig
+++ b/modules/material/themes/material/default/selectidp-links.twig
@@ -14,11 +14,13 @@
       idpInput.value = id;
 
       document.querySelector('form').appendChild(idpInput);
-      gtag('event', 'IdP', {
-        'event_category': 'hub',
-        'event_label': 'choice',
-        'value': id
-      });
+      {% if analytics_tracking_id is not empty %}
+        gtag('event', 'IdP', {
+          'event_category': 'hub',
+          'event_label': 'choice',
+          'value': id
+        });
+      {% endif %}
       document.querySelector('form').submit();
     }
     

From cb9cab65930910225ce594b054cfdb312e08f6f0 Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Thu, 28 Nov 2024 07:38:59 +0930
Subject: [PATCH 4/6] fix other instances of ga being used instead of gtag

---
 .../themes/material/default/selectidp-links.twig       |  6 +++++-
 .../material/themes/material/mfa/new-backup-codes.twig |  5 ++++-
 .../themes/material/mfa/prompt-for-mfa-backupcode.twig |  5 ++++-
 .../themes/material/mfa/prompt-for-mfa-manager.twig    |  5 ++++-
 .../themes/material/mfa/prompt-for-mfa-totp.twig       |  5 ++++-
 .../themes/material/mfa/prompt-for-mfa-webauthn.twig   |  5 ++++-
 .../themes/material/silauth/loginuserpass.twig         | 10 ++++++++--
 7 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/modules/material/themes/material/default/selectidp-links.twig b/modules/material/themes/material/default/selectidp-links.twig
index 83af8f9..9381e88 100644
--- a/modules/material/themes/material/default/selectidp-links.twig
+++ b/modules/material/themes/material/default/selectidp-links.twig
@@ -36,7 +36,11 @@
 
     function clickedAnyway(idpName) {
       {% if analytics_tracking_id is not empty %}
-        ga('send', 'event', 'hub', 'choice-disabled', 'IdP', idpName);
+        gtag('event', 'IdP', {
+          'event_category': 'hub',
+          'event_label': 'choice',
+          'value': id
+        });
       {% endif %}
     }
   </script>
diff --git a/modules/material/themes/material/mfa/new-backup-codes.twig b/modules/material/themes/material/mfa/new-backup-codes.twig
index 12dd59d..c80b378 100644
--- a/modules/material/themes/material/mfa/new-backup-codes.twig
+++ b/modules/material/themes/material/mfa/new-backup-codes.twig
@@ -138,7 +138,10 @@
 
         {% if analytics_tracking_id is not empty %}
           <script>
-            ga('send', 'event', 'error', 'backupcode', 'generation-failed');
+            gtag('event', 'generation-failed', {
+              'event_category': 'error',
+              'event_label': 'backupcode'
+            });
           </script>
         {% endif %}
       {% endif %}
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig b/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig
index a275153..fcbf169 100644
--- a/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig
+++ b/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig
@@ -55,7 +55,10 @@
 
           {% if analytics_tracking_id is not empty %}
             <script>
-              ga('send', 'event', 'error', 'backupcode', '{{ error_message|e('js')|raw }}');
+              gtag('event', '{{ error_message|e('js')|raw }}', {
+                'event_category': 'error',
+                'event_label': 'backupcode'
+              });
             </script>
           {% endif %}
         {% endif %}
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig b/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig
index d7ab56a..ec6d08b 100644
--- a/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig
+++ b/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig
@@ -55,7 +55,10 @@
 
           {% if analytics_tracking_id is not empty %}
             <script>
-              ga('send', 'event', 'error', 'managercode', '{{ error_message|e('js')|raw }}');
+              gtag('event', '{{ error_message|e('js')|raw }}', {
+                'event_category': 'error',
+                'event_label': 'managercode'
+              });
             </script>
           {% endif %}
         {% endif %}
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig b/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig
index d8dd51c..c159c9d 100644
--- a/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig
+++ b/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig
@@ -53,7 +53,10 @@
 
           {% if analytics_tracking_id is not empty %}
             <script>
-              ga('send', 'event', 'error', 'totp', '{{ error_message|e('js')|raw }}');
+              gtag('event', '{{ error_message|e('js')|raw }}', {
+                'event_category': 'error',
+                'event_label': 'totp'
+              });
             </script>
           {% endif %}
         {% endif %}
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig b/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
index 61370b2..b22da50 100644
--- a/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
+++ b/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
@@ -96,7 +96,10 @@
 
         {% if error_message is not empty and analytics_tracking_id is not empty %}
           <script>
-            ga('send', 'event', 'error', 'webauthn', '{{ error_message|e('js')|raw }}');
+           gtag('event', '{{ error_message|e('js')|raw }}', {
+            'event_category': 'error',
+            'event_label': 'webauthn'
+          });
           </script>
         {% endif %}
         <div class="mdl-card__supporting-text" layout-children="column">
diff --git a/modules/material/themes/material/silauth/loginuserpass.twig b/modules/material/themes/material/silauth/loginuserpass.twig
index bfafb71..ed95df6 100644
--- a/modules/material/themes/material/silauth/loginuserpass.twig
+++ b/modules/material/themes/material/silauth/loginuserpass.twig
@@ -29,7 +29,9 @@
       }
 
       {% if analytics_tracking_id is not empty %}
-        ga('send', 'event', 'reCAPTCHA', 'required');
+        gtag('event', 'required', {
+          'event_category': 'reCAPTCHA'
+        });
       {% endif %}
     </script>
   {% endif %}
@@ -104,7 +106,11 @@
 
           {% if analytics_tracking_id is not empty %}
             <script>
-              ga('send', 'event', 'error', '{{ errorcode|e('js') }}', 'message', '{{ message|e('js') }}');
+              gtag('event', '{{ errorcode|e('js') }}', {
+                'event_category': 'error',
+                'event_label': 'message',
+                'value': '{{ message|e('js') }}'
+              });
             </script>
           {% endif %}
         {% endif %}

From 31a93d0a7c7d59d45aa1f7c6a3d7bd6b2a93ebc4 Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Thu, 28 Nov 2024 09:14:23 +0930
Subject: [PATCH 5/6] remove other inline event handlers

---
 .../themes/material/default/other_mfas.twig   |  12 +-
 .../themes/material/mfa/new-backup-codes.twig | 109 +++++++++---------
 .../material/mfa/prompt-for-mfa-webauthn.twig |  96 +++++++--------
 .../themes/material/profilereview/review.twig |  44 ++++---
 4 files changed, 143 insertions(+), 118 deletions(-)

diff --git a/modules/material/themes/material/default/other_mfas.twig b/modules/material/themes/material/default/other_mfas.twig
index 1922a0f..7a13cb4 100644
--- a/modules/material/themes/material/default/other_mfas.twig
+++ b/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"
diff --git a/modules/material/themes/material/mfa/new-backup-codes.twig b/modules/material/themes/material/mfa/new-backup-codes.twig
index c80b378..a9ab149 100644
--- a/modules/material/themes/material/mfa/new-backup-codes.twig
+++ b/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.querySelector('input[type="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>
@@ -148,7 +159,7 @@
 
       <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 type="checkbox" class="mdl-checkbox__input">
           <span class="mdl-checkbox__label">{{ '{mfa:new_codes_saved}'|trans }}</span>
         </label>
 
@@ -156,14 +167,6 @@
           {{ '{mfa:button_continue}'|trans }}
         </button>
       </div>
-
-      <script>
-        function toggleContinue(event) {
-          contBtn = document.querySelector('button[name="continue"]');
-
-          contBtn.disabled = !event.checked;
-        }
-      </script>
     </form>
   </main>
 </div>
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig b/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
index b22da50..42ef14b 100644
--- a/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
+++ b/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
@@ -8,64 +8,69 @@
   <script src="{{ browser_js_path }}"></script>
 
   <script>
-    function verifyWebAuthn() {
-      const loginChallenge = {{ mfa_option_data|raw }};
-      SimpleWebAuthnBrowser.startAuthentication(loginChallenge.publicKey).then(submitForm).catch(handleError);
-    }
-
-    function handleError(error) {
-      console.error(error)
-      const errorMessage = createMessage(error)
-
-      const errorNode = document.querySelector('p.error');
-      errorNode.classList.remove('hide');
-      errorNode.querySelector('span').textContent = errorMessage;
-
-      offerRetry();
-    }
-
-    function createMessage(error) {
-      switch (error.name) {
-        case 'AbortError':
-          return '{{ '{mfa:webauthn_error_abort}'|trans|e('js')|raw }}';
-        case 'NotAllowedError':
-          return '{{ '{mfa:webauthn_error_not_allowed}'|trans|e('js')|raw }}';
-        default:
-          return '{{ '{mfa:webauthn_error_unknown}'|trans|e('js')|raw }}';
+    document.addEventListener('DOMContentLoaded', function() {
+      function verifyWebAuthn() {
+        const loginChallenge = {{ mfa_option_data|raw }};
+        SimpleWebAuthnBrowser.startAuthentication(loginChallenge.publicKey).then(submitForm).catch(handleError);
       }
-    }
 
-    function offerRetry() {
-      const retryButton = document.querySelector('.mdl-button.mdl-color-text--red');
+      function handleError(error) {
+        console.error(error)
+        const errorMessage = createMessage(error)
 
-      retryButton.classList.remove('hide');
-    }
+        const errorNode = document.querySelector('p.error');
+        errorNode.classList.remove('hide');
+        errorNode.querySelector('span').textContent = errorMessage;
 
-    function submitForm(webAuthnResponse) {
-      const form = document.querySelector('form');
-      const submissionInput = createHiddenInput('submitMfa');
-      const webAuthnResponseInput = createHiddenInput('mfaSubmission');
+        offerRetry();
+      }
 
-      webAuthnResponseInput.value = JSON.stringify(webAuthnResponse);
+      function createMessage(error) {
+        switch (error.name) {
+          case 'AbortError':
+            return '{{ '{mfa:webauthn_error_abort}'|trans|e('js')|raw }}';
+          case 'NotAllowedError':
+            return '{{ '{mfa:webauthn_error_not_allowed}'|trans|e('js')|raw }}';
+          default:
+            return '{{ '{mfa:webauthn_error_unknown}'|trans|e('js')|raw }}';
+        }
+      }
 
-      form.appendChild(submissionInput);
-      form.appendChild(webAuthnResponseInput);
+      function offerRetry() {
+        const retryButton = document.querySelector('.mdl-button.mdl-color-text--red');
 
-      form.submit();
-    }
+        retryButton.classList.remove('hide');
+      }
 
-    function createHiddenInput(name) {
-      const input = document.createElement('input');
+      function submitForm(webAuthnResponse) {
+        const form = document.querySelector('form');
+        const submissionInput = createHiddenInput('submitMfa');
+        const webAuthnResponseInput = createHiddenInput('mfaSubmission');
 
-      input.type = 'hidden';
-      input.name = name;
+        webAuthnResponseInput.value = JSON.stringify(webAuthnResponse);
 
-      return input;
-    }
+        form.appendChild(submissionInput);
+        form.appendChild(webAuthnResponseInput);
+
+        form.submit();
+      }
+
+      function createHiddenInput(name) {
+        const input = document.createElement('input');
+
+        input.type = 'hidden';
+        input.name = name;
+
+        return input;
+      }
+      
+      document.querySelector('.mdl-button.mdl-color-text--red').addEventListener('click', verifyWebAuthn);
+      document.querySelector('body').addEventListener{'load', verifyWebAuthn};
+    });
   </script>
 </head>
 
-<body class="gradient-bg" onload="verifyWebAuthn()">
+<body class="gradient-bg">
 <div class="mdl-layout mdl-layout--fixed-header">
   <header class="mdl-layout__header">
     <div class="mdl-layout__header-row">
@@ -117,7 +122,6 @@
           <!-- used type=button to avoid form submission on click -->
           <button
             type="button"
-            onclick="verifyWebAuthn()"
             class="mdl-button mdl-color-text--red {{ error_message is empty ? 'hide' : 'show' }}"
           >
             {{ '{mfa:button_try_again}'|trans }}
diff --git a/modules/material/themes/material/profilereview/review.twig b/modules/material/themes/material/profilereview/review.twig
index 7aab437..a6c6710 100644
--- a/modules/material/themes/material/profilereview/review.twig
+++ b/modules/material/themes/material/profilereview/review.twig
@@ -6,25 +6,33 @@
   {{ include('header.twig') }}
 
   <script>
-    function prettifyDates() {
-      const relevantNodes = Array.from(document.querySelectorAll('span.mdl-list__item-text-body'))
-
-      relevantNodes.filter(hasDate).map(replaceWithLocaleDate)
-    }
-
-    const hasDate = node => node.innerText.includes('Z')
-    const replaceWithLocaleDate = node => {
-      // assuming a string like this but could be in Spanish, French or Korean for example:  "last used: 2019-04-04T13:30:04Z"
-      const matches = node.innerText.match(/(.*: )(.*)/)
-
-      const label = matches[1]
-      const date = new Date(matches[2])
-
-      node.innerText = `${label} ${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
-    }
+    document.addEventListener('DOMContentLoaded', function() {
+      function prettifyDates() {
+        const relevantNodes = Array.from(document.querySelectorAll('span.mdl-list__item-text-body'))
+
+        relevantNodes.filter(hasDate).map(replaceWithLocaleDate)
+      }
+
+      const hasDate = node => node.innerText.includes('Z')
+      const replaceWithLocaleDate = node => {
+        // assuming a string like this but could be in Spanish, French or Korean for example:  "last used: 2019-04-04T13:30:04Z"
+        const matches = node.innerText.match(/(.*: )(.*)/)
+
+        const label = matches[1]
+        const date = new Date(matches[2])
+
+        node.innerText = `${label} ${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
+      }
+
+      document.querySelector('body').addEventListener('load', prettifyDates)
+      document.querySelectorA("mdl-button mdl-button--colored").addEventListener('click', function(e) {
+        e.preventDefault()
+        document.querySelector('button').click()
+      });
+    });
   </script>
 </head>
-<body class="gradient-bg" onload="prettifyDates()">
+<body class="gradient-bg">
 <div class="mdl-layout mdl-layout--fixed-header">
   <header class="mdl-layout__header">
     <div class="mdl-layout__header-row">
@@ -116,7 +124,7 @@
       </section>
 
       <section layout-children="row" child-spacing="end" class="fill-parent margin">
-        <a href="{{ profile_url }}" target="_blank" rel="noopener" onclick="document.querySelector('button').click()"
+        <a href="{{ profile_url }}" target="_blank" rel="noopener"
            class="mdl-button mdl-button--colored" layout-children="row">
           {{ '{review:button_update}'|trans }} <i class="material-icons">launch</i>
         </a>

From 97adfece819d52a700e43affb68c1411a5a04c16 Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Thu, 28 Nov 2024 14:03:58 +0930
Subject: [PATCH 6/6] fix copy paste errors and get by id

---
 .../material/themes/material/default/selectidp-links.twig  | 2 +-
 modules/material/themes/material/mfa/new-backup-codes.twig | 4 ++--
 .../themes/material/mfa/prompt-for-mfa-webauthn.twig       | 3 ++-
 modules/material/themes/material/profilereview/review.twig | 7 +++----
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/modules/material/themes/material/default/selectidp-links.twig b/modules/material/themes/material/default/selectidp-links.twig
index 9381e88..bf540b1 100644
--- a/modules/material/themes/material/default/selectidp-links.twig
+++ b/modules/material/themes/material/default/selectidp-links.twig
@@ -38,7 +38,7 @@
       {% if analytics_tracking_id is not empty %}
         gtag('event', 'IdP', {
           'event_category': 'hub',
-          'event_label': 'choice',
+          'event_label': 'choice-disabled',
           'value': id
         });
       {% endif %}
diff --git a/modules/material/themes/material/mfa/new-backup-codes.twig b/modules/material/themes/material/mfa/new-backup-codes.twig
index a9ab149..1609b3e 100644
--- a/modules/material/themes/material/mfa/new-backup-codes.twig
+++ b/modules/material/themes/material/mfa/new-backup-codes.twig
@@ -56,7 +56,7 @@
       document.getElementById('copyBtn').addEventListener('click', function() {
         copyCodesToClipboard(this);
       });
-      document.querySelector('input[type="checkbox"]').addEventListener('change', function(e) {
+      document.getElementById('checkbox').addEventListener('change', function(e) {
         contBtn = document.querySelector('button[name="continue"]');
         contBtn.disabled = !e.checked;
       });
@@ -159,7 +159,7 @@
 
       <div layout-children="row" class="fill-parent">
         <label class="mdl-checkbox mdl-js-checkbox" flex>
-          <input type="checkbox" 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>
 
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig b/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
index 42ef14b..6ea93dc 100644
--- a/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
+++ b/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
@@ -64,7 +64,7 @@
         return input;
       }
       
-      document.querySelector('.mdl-button.mdl-color-text--red').addEventListener('click', verifyWebAuthn);
+      document.getElementById('showBtn').addEventListener('click', verifyWebAuthn);
       document.querySelector('body').addEventListener{'load', verifyWebAuthn};
     });
   </script>
@@ -121,6 +121,7 @@
           <span flex></span>
           <!-- used type=button to avoid form submission on click -->
           <button
+            id="showBtn"
             type="button"
             class="mdl-button mdl-color-text--red {{ error_message is empty ? 'hide' : 'show' }}"
           >
diff --git a/modules/material/themes/material/profilereview/review.twig b/modules/material/themes/material/profilereview/review.twig
index a6c6710..217c086 100644
--- a/modules/material/themes/material/profilereview/review.twig
+++ b/modules/material/themes/material/profilereview/review.twig
@@ -25,9 +25,8 @@
       }
 
       document.querySelector('body').addEventListener('load', prettifyDates)
-      document.querySelectorA("mdl-button mdl-button--colored").addEventListener('click', function(e) {
-        e.preventDefault()
-        document.querySelector('button').click()
+      document.getElementById('launch').addEventListener('click', function(e) {
+        document.getElementsByName('continue').click()
       });
     });
   </script>
@@ -124,7 +123,7 @@
       </section>
 
       <section layout-children="row" child-spacing="end" class="fill-parent margin">
-        <a href="{{ profile_url }}" target="_blank" rel="noopener"
+        <a id="launch" href="{{ profile_url }}" target="_blank" rel="noopener"
            class="mdl-button mdl-button--colored" layout-children="row">
           {{ '{review:button_update}'|trans }} <i class="material-icons">launch</i>
         </a>