Merge pull request #305 from silinternational/ok-btn-webauthn

add ok button to start webauthn verification
silinternational · Feb 5, 2025 · 783252e · 783252e
2 parents 69d751a + fe3d75c
commit 783252e
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 14 deletions.
diff --git a/modules/material/locales/en/LC_MESSAGES/material.po b/modules/material/locales/en/LC_MESSAGES/material.po
@@ -135,7 +135,10 @@ msgid "{mfa:webauthn_icon}"
 msgstr "USB key icon"
 
 msgid "{mfa:webauthn_instructions}"
-msgstr "You may now insert your security key and press its button."
+msgstr "Follow the prompts to use your key."
+
+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
@@ -135,7 +135,10 @@ msgid "{mfa:webauthn_icon}"
 msgstr "Icono de la llave USB"
 
 msgid "{mfa:webauthn_instructions}"
-msgstr "Ahora puede insertar su clave de seguridad y presionar su botón."
+msgstr "Siga las instrucciones para usar su clave."
+
+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
@@ -135,7 +135,10 @@ msgid "{mfa:webauthn_icon}"
 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."
+msgstr "Suivez les instructions pour utiliser votre clé."
+
+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
@@ -135,7 +135,10 @@ msgid "{mfa:webauthn_icon}"
 msgstr "USB 키 아이콘"
 
 msgid "{mfa:webauthn_instructions}"
-msgstr "이제 보안 키를 삽입하고 단추를 누를 수 있습니다."
+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|e('js') }}';
         const loginChallenge = {{ mfa_option_data|raw }};
         SimpleWebAuthnBrowser.startAuthentication(loginChallenge.publicKey).then(submitForm).catch(handleError);
       }
@@ -37,9 +38,12 @@
       }
 
       function offerRetry() {
-        const retryButton = document.getElementById('retryButton');
+        const verifyBtn = document.getElementById('verifyBtn');
+
+        verifyBtn.classList.add('mdl-color-text--red');
+        verifyBtn.classList.remove('mdl-color-text--primary');
+        verifyBtn.textContent = '{{ '{mfa:button_try_again}'|trans|e('js') }}';
 
-        retryButton.classList.remove('hide');
       }
 
       function submitForm(webAuthnResponse) {
@@ -64,9 +68,7 @@
         return input;
       }
 
-      document.getElementById('retryButton').addEventListener('click', verifyWebAuthn);
-
-      verifyWebAuthn();
+      document.getElementById('verifyBtn').addEventListener('click', verifyWebAuthn);
     });
   </script>
 
@@ -97,8 +99,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 +126,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 +151,10 @@
 </div>
 </body>
 </html>
+
+<style>
+  #instructions {
+    min-width: 350px;
+    text-align: center;
+  }
+</style>