add ok button to start webauthn verification

silinternational · Feb 4, 2025 · 4310f3a · 4310f3a
1 parent 69d751a
commit 4310f3a
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/modules/material/locales/en/LC_MESSAGES/material.po b/modules/material/locales/en/LC_MESSAGES/material.po
@@ -137,6 +137,9 @@ msgstr "USB key icon"
 msgid "{mfa:webauthn_instructions}"
 msgstr "You may now insert your security key and press its button."
 
+msgid "{mfa:webauthn_start}"
+msgstr "Click OK when you're ready to start."
+
 msgid "{mfa:webauthn_error_unknown}"
 msgstr "Something went wrong with that request, unable to verify at this time."
 

diff --git a/modules/material/locales/es/LC_MESSAGES/material.po b/modules/material/locales/es/LC_MESSAGES/material.po
@@ -137,6 +137,9 @@ msgstr "Icono de la llave USB"
 msgid "{mfa:webauthn_instructions}"
 msgstr "Ahora puede insertar su clave de seguridad y presionar su botón."
 
+msgid "{mfa:webauthn_start}"
+msgstr "Haga clic en OK cuando esté listo para comenzar."
+
 msgid "{mfa:webauthn_error_unknown}"
 msgstr "Algo salió mal con esa solicitud, no se pudo verificar en este momento."
 

diff --git a/modules/material/locales/fr/LC_MESSAGES/material.po b/modules/material/locales/fr/LC_MESSAGES/material.po
@@ -137,6 +137,9 @@ msgstr "Icône de clé USB"
 msgid "{mfa:webauthn_instructions}"
 msgstr "Vous pouvez maintenant insérer votre clé de sécurité et appuyer sur le bouton."
 
+msgid "{mfa:webauthn_start}"
+msgstr "Cliquez sur OK lorsque vous êtes prêt à commencer."
+
 msgid "{mfa:webauthn_error_unknown}"
 msgstr "Quelque chose s'est mal passé avec cette demande, impossible de vérifier pour le moment."
 

diff --git a/modules/material/locales/ko/LC_MESSAGES/material.po b/modules/material/locales/ko/LC_MESSAGES/material.po
@@ -137,6 +137,9 @@ msgstr "USB 키 아이콘"
 msgid "{mfa:webauthn_instructions}"
 msgstr "이제 보안 키를 삽입하고 단추를 누를 수 있습니다."
 
+msgid "{mfa:webauthn_start}"
+msgstr "시작할 준비가 되면 확인을 클릭하세요."
+
 msgid "{mfa:webauthn_error_unknown}"
 msgstr "요청에 문제가 발생하여 지금은 확인할 수 없습니다."
 

diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig b/modules/material/themes/material/mfa/prompt-for-mfa-webauthn.twig
@@ -10,6 +10,7 @@
   <script>
     document.addEventListener('DOMContentLoaded', function() {
       function verifyWebAuthn() {
+        document.getElementById('instructions').textContent = '{{ '{mfa:webauthn_instructions}'|trans }}';
         const loginChallenge = {{ mfa_option_data|raw }};
         SimpleWebAuthnBrowser.startAuthentication(loginChallenge.publicKey).then(submitForm).catch(handleError);
       }
@@ -37,9 +38,11 @@
       }
 
       function offerRetry() {
-        const retryButton = document.getElementById('retryButton');
+        const verifyBtn = document.getElementById('verifyBtn');
 
-        retryButton.classList.remove('hide');
+        verifyBtn.classList.add('mdl-color-text--red');
+        verifyBtn.classList.remove('mdl-color-text--primary');
+        verifyBtn.textContent = '{{ '{mfa:button_try_again}'|trans }}';
       }
 
       function submitForm(webAuthnResponse) {
@@ -64,9 +67,7 @@
         return input;
       }
 
-      document.getElementById('retryButton').addEventListener('click', verifyWebAuthn);
-
-      verifyWebAuthn();
+      document.getElementById('verifyBtn').addEventListener('click', verifyWebAuthn);
     });
   </script>
 
@@ -97,8 +98,8 @@
         </div>
 
         <div class="mdl-card__title">
-          <p class="mdl-card__subtitle-text">
-            {{ '{mfa:webauthn_instructions}'|trans }}
+          <p id="instructions" class="mdl-card__subtitle-text m-auto">
+            {{ '{mfa:webauthn_start}'|trans }}
           </p>
         </div>
 
@@ -124,11 +125,11 @@
           <span flex></span>
           <!-- used type=button to avoid form submission on click -->
           <button
-            id="retryButton"
+            id="verifyBtn"
             type="button"
-            class="mdl-button mdl-color-text--red {{ error_message is empty ? 'hide' : 'show' }}"
+            class="mdl-button {{ error_message is empty ? 'mdl-color-text--primary' : 'mdl-color-text--red' }}"
           >
-            {{ '{mfa:button_try_again}'|trans }}
+            {{ error_message is empty ? 'ok' : '{mfa:button_try_again}'|trans }}
           </button>
 
         </div>
@@ -149,3 +150,10 @@
 </div>
 </body>
 </html>
+
+<style>
+  #instructions {
+    min-width: 350px;
+    text-align: center;
+  }
+</style>