Merge pull request #303 from silinternational/add-remember-preference…

…-in-localstorage add desiredRememberMeState to local storage
silinternational · Jan 31, 2025 · 96739f0 · 96739f0
2 parents b2fdcda + 0b9535a
commit 96739f0
Show file tree

Hide file tree

Showing 6 changed files with 31 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,8 @@
   <title>{{ '{mfa:title}'|trans }}</title>
 
   {{ include('header.twig') }}
+
+  <script src="{{ remember_me_js_path }}"></script>
 </head>
 <body class="gradient-bg">
 <div class="mdl-layout mdl-layout--fixed-header">
@@ -74,11 +76,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,8 @@
   <title>{{ '{mfa:title}'|trans }}</title>
 
   {{ include('header.twig') }}
+
+  <script src="{{ remember_me_js_path }}"></script>
 </head>
 <body class="gradient-bg">
 <div class="mdl-layout mdl-layout--fixed-header">
@@ -74,11 +76,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,8 @@
   <title>{{ '{mfa:title}'|trans }}</title>
 
   {{ include('header.twig') }}
+
+  <script src="{{ remember_me_js_path }}"></script>
 </head>
 <body class="gradient-bg">
 <div class="mdl-layout mdl-layout--fixed-header">
@@ -72,11 +74,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
@@ -69,6 +69,8 @@
       verifyWebAuthn();
     });
   </script>
+
+  <script src="{{ remember_me_js_path }}"></script>
 </head>
 
 <body class="gradient-bg">
@@ -135,11 +137,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/mfa/public/prompt-for-mfa.php b/modules/mfa/public/prompt-for-mfa.php
@@ -125,6 +125,7 @@
 $t->data['mfa_options'] = $mfaOptions;
 $browserJsHash = md5_file(__DIR__ . '/simplewebauthn/browser.js');
 $t->data['browser_js_path'] = '/module.php/mfa/simplewebauthn/browser.js?v=' . $browserJsHash;
+$t->data['remember_me_js_path'] = '/module.php/mfa/public/remember-me.js';
 $t->data['manager_email'] = $state['managerEmail'];
 $t->data['other_options'] = $otherOptions;
 $t->data['idp_name'] = $t->getEntityDisplayName($state['IdPMetadata']);

diff --git a/modules/mfa/public/remember-me.js b/modules/mfa/public/remember-me.js
@@ -0,0 +1,14 @@
+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);
+    });
+  }
+});