Merge pull request #306 from silinternational/improve-mfa-card-layout

move options to card actions so menu doesn't overflow and use mdl-but…
silinternational · Feb 6, 2025 · 59a1dcd · 59a1dcd
2 parents 783252e + 053a2b1
commit 59a1dcd
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 12 deletions.
diff --git a/features/fakes/FakeIdBrokerClient.php b/features/fakes/FakeIdBrokerClient.php
@@ -143,7 +143,7 @@ public function mfaList(string $employee_id): array
             [
                 'id' => 2,
                 'type' => 'totp',
-                'label' => 'Smartphone App',
+                'label' => 'Authenticator App',
                 'created_utc' => '2019-04-02T16:02:14Z',
                 'last_used_utc' => '2019-04-01T00:00:00Z',
                 'data' => [

diff --git a/modules/material/locales/fr/LC_MESSAGES/material.po b/modules/material/locales/fr/LC_MESSAGES/material.po
@@ -120,7 +120,7 @@ msgid "{mfa:totp_header}"
 msgstr "Obtenez un code depuis votre application d'authentification"
 
 msgid "{mfa:totp_icon}"
-msgstr "Icône de l'application Smartphone"
+msgstr "Icône de l'application d'authentification"
 
 msgid "{mfa:totp_input}"
 msgstr "Entrer le code à 6 chiffres"

diff --git a/modules/material/themes/material/default/other_mfas.twig b/modules/material/themes/material/default/other_mfas.twig
@@ -11,7 +11,7 @@
 {% 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 #}
-    <button id="others" type="button" class="mdl-button mdl-js-button">
+    <button id="others" type="button" class="mdl-button mdl-js-button mdl-button--raised">
       <span class="mdl-typography--caption">
         {{ '{mfa:use_others}'|trans }}
       </span>

diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig b/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig
@@ -66,13 +66,14 @@
         {% endif %}
 
         <div class="mdl-card__actions" layout-children="row">
+          {{ include('other_mfas.twig') }}
+
           <span flex></span>
+
           <button name="submitMfa" class="mdl-button mdl-button--raised mdl-button--primary">
             {{ '{mfa:button_verify}'|trans }}
           </button>
         </div>
-
-        {{ include('other_mfas.twig') }}
       </div>
 
       <div>

diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig b/modules/material/themes/material/mfa/prompt-for-mfa-manager.twig
@@ -66,13 +66,14 @@
         {% endif %}
 
         <div class="mdl-card__actions" layout-children="row">
+          {{ include('other_mfas.twig') }}
+
           <span flex></span>
+
           <button name="submitMfa" type="submit" class="mdl-button mdl-button--raised mdl-button--primary">
             {{ '{mfa:button_verify}'|trans }}
           </button>
         </div>
-
-        {{ include('other_mfas.twig') }}
       </div>
 
       <div>

diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig b/modules/material/themes/material/mfa/prompt-for-mfa-totp.twig
@@ -64,13 +64,14 @@
         {% endif %}
 
         <div class="mdl-card__actions" layout-children="row">
+          {{ include('other_mfas.twig') }}
+
           <span flex></span>
+
           <button name="submitMfa" type="submit" class="mdl-button mdl-button--raised mdl-button--primary">
             {{ '{mfa:button_verify}'|trans }}
           </button>
         </div>
-
-        {{ include('other_mfas.twig') }}
       </div>
 
       <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
@@ -123,19 +123,20 @@
         </div>
 
         <div class="mdl-card__actions" layout-children="row">
+          {{ include('other_mfas.twig') }}
+
           <span flex></span>
+
           <!-- used type=button to avoid form submission on click -->
           <button
             id="verifyBtn"
             type="button"
-            class="mdl-button {{ error_message is empty ? 'mdl-color-text--primary' : 'mdl-color-text--red' }}"
+            class="mdl-button mdl-button--raised {{ error_message is empty ? 'mdl-color-text--primary' : 'mdl-color-text--red' }}"
           >
             {{ error_message is empty ? 'ok' : '{mfa:button_try_again}'|trans }}
           </button>
-
         </div>
 
-        {{ include('other_mfas.twig') }}
       </div>
 
       <div>