add desiredRememberMeState to local storage

silinternational · Jan 31, 2025 · 49b6b06 · 49b6b06
1 parent b2fdcda
commit 49b6b06
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 8 deletions.
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig b/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig
@@ -4,6 +4,23 @@
   <title>{{ '{mfa:title}'|trans }}</title>
 
   {{ include('header.twig') }}
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const rememberMeCheckbox = document.getElementById('rememberMe');
+      
+      if (rememberMeCheckbox) {
+        const desiredRememberMeState = localStorage.getItem('desiredRememberMeState');
+        if (desiredRememberMeState === 'true') {
+          rememberMeCheckbox.checked = true;
+        }
+
+        rememberMeCheckbox.addEventListener('change', function() {
+          localStorage.setItem('desiredRememberMeState', rememberMeCheckbox.checked);
+        });
+      }
+    });
+  </script>
 </head>
 <body class="gradient-bg">
 <div class="mdl-layout mdl-layout--fixed-header">
@@ -74,11 +91,11 @@
       </div>
 
       <div>
-        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+        <label for="rememberMe"  class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
           <span class="mdl-checkbox__label">
               {{ '{mfa:remember_this}'|trans }}
           </span>
-          <input type="checkbox" name="rememberMe" {% if rememberMePreference == 'checked' %}checked{% endif %} class="mdl-checkbox__input">
+          <input type="checkbox" id="rememberMe"  name="rememberMe" {% if rememberMePreference == 'checked' %}checked{% endif %} class="mdl-checkbox__input">
         </label>
       </div>
     </form>

diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig b/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig
@@ -4,6 +4,23 @@
   <title>{{ '{mfa:title}'|trans }}</title>
 
   {{ include('header.twig') }}
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const rememberMeCheckbox = document.getElementById('rememberMe');
+      
+      if (rememberMeCheckbox) {
+        const desiredRememberMeState = localStorage.getItem('desiredRememberMeState');
+        if (desiredRememberMeState === 'true') {
+          rememberMeCheckbox.checked = true;
+        }
+
+        rememberMeCheckbox.addEventListener('change', function() {
+          localStorage.setItem('desiredRememberMeState', rememberMeCheckbox.checked);
+        });
+      }
+    });
+  </script>
 </head>
 <body class="gradient-bg">
 <div class="mdl-layout mdl-layout--fixed-header">
@@ -74,11 +91,11 @@
       </div>
 
       <div>
-        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+        <label for="rememberMe"  class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
           <span class="mdl-checkbox__label">
             {{ '{mfa:remember_this}'|trans }}
           </span>
-          <input type="checkbox" name="rememberMe" {% if rememberMePreference == 'checked' %}checked{% endif %} class="mdl-checkbox__input">
+          <input type="checkbox" id="rememberMe"  name="rememberMe" {% if rememberMePreference == 'checked' %}checked{% endif %} class="mdl-checkbox__input">
         </label>
       </div>
     </form>

diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig b/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig
@@ -4,6 +4,23 @@
   <title>{{ '{mfa:title}'|trans }}</title>
 
   {{ include('header.twig') }}
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const rememberMeCheckbox = document.getElementById('rememberMe');
+      
+      if (rememberMeCheckbox) {
+        const desiredRememberMeState = localStorage.getItem('desiredRememberMeState');
+        if (desiredRememberMeState === 'true') {
+          rememberMeCheckbox.checked = true;
+        }
+
+        rememberMeCheckbox.addEventListener('change', function() {
+          localStorage.setItem('desiredRememberMeState', rememberMeCheckbox.checked);
+        });
+      }
+    });
+  </script>
 </head>
 <body class="gradient-bg">
 <div class="mdl-layout mdl-layout--fixed-header">
@@ -72,11 +89,11 @@
       </div>
 
       <div>
-        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+        <label for="rememberMe" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
           <span class="mdl-checkbox__label">
               {{ '{mfa:remember_this}'|trans }}
           </span>
-          <input type="checkbox" name="rememberMe" {% if rememberMePreference == 'checked' %}checked{% endif %} class="mdl-checkbox__input">
+          <input type="checkbox" id="rememberMe" name="rememberMe" {% if rememberMePreference == 'checked' %}checked{% endif %} class="mdl-checkbox__input">
         </label>
       </div>
     </form>

diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig b/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
@@ -9,6 +9,19 @@
 
   <script>
     document.addEventListener('DOMContentLoaded', function() {
+      const rememberMeCheckbox = document.getElementById('rememberMe');
+      
+      if (rememberMeCheckbox) {
+        const desiredRememberMeState = localStorage.getItem('desiredRememberMeState');
+        if (desiredRememberMeState === 'true') {
+          rememberMeCheckbox.checked = true;
+        }
+
+        rememberMeCheckbox.addEventListener('change', function() {
+          localStorage.setItem('desiredRememberMeState', rememberMeCheckbox.checked);
+        });
+      }
+      
       function verifyWebAuthn() {
         const loginChallenge = {{ mfa_option_data|raw }};
         SimpleWebAuthnBrowser.startAuthentication(loginChallenge.publicKey).then(submitForm).catch(handleError);
@@ -135,11 +148,11 @@
       </div>
 
       <div>
-        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+        <label for="rememberMe"  class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
           <span class="mdl-checkbox__label">
             {{ '{mfa:remember_this}'|trans }}
           </span>
-          <input type="checkbox" name="rememberMe" {% if rememberMePreference == 'checked' %}checked{% endif %} class="mdl-checkbox__input">
+          <input type="checkbox" id="rememberMe" name="rememberMe" {% if rememberMePreference == 'checked' %}checked{% endif %} class="mdl-checkbox__input">
         </label>
       </div>
     </form>