Merge pull request #236 from silinternational/feature/ss2-promptmfa-twig

convert prompt-for-mfa templates to Twig
silinternational · Jun 25, 2024 · 37050ad · 37050ad
2 parents 20a1f00 + 3e1e244
commit 37050ad
Show file tree

Hide file tree

Showing 14 changed files with 441 additions and 471 deletions.
diff --git a/development/idp-local/config/authsources.php b/development/idp-local/config/authsources.php
@@ -11,7 +11,7 @@
 
         'core:AdminPassword',
     ],
-    
+
     // Set up example users for testing expirychecker module.
     'example-userpass' => [
         'exampleauth:UserPass',
@@ -448,6 +448,13 @@
                         'last_used_utc' => null,
                         'data' => [
                             // Response from "POST /webauthn/login" MFA API call.
+                                "id" => 88,
+                                "label" => "My Webauthn Key",
+                                "last_used_utc" => null,
+                                "created_utc" => "2022-12-15 19:42:37",
+                                "publicKey" => [
+                                    "challenge" => "xxxxxxx",
+                                ],
                         ],
                     ],
                 ]

diff --git a/features/bootstrap/MfaContext.php b/features/bootstrap/MfaContext.php
@@ -208,7 +208,7 @@ protected function submitMfaValue($mfaValue)
     public function iSubmitACorrectBackupCode()
     {
         if (! $this->pageContainsElementWithText('h1', 'Printable code')) {
-            // find image of the backup code option presented in other_mfas.php
+            // find image of the backup code option presented in other_mfas.twig
             $printableCodeOption = $this->session->getPage()->find('css', 'img[src=mfa-backupcode\002Esvg]');
             $printableCodeOption->click();
         }

diff --git a/modules/material/themes/material/default/other_mfas.twig b/modules/material/themes/material/default/other_mfas.twig
@@ -0,0 +1,27 @@
+{% if otherOptions|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">
+      <span class="mdl-typography--caption">
+        {{ '{mfa:use_others}'|trans }}
+      </span>
+    </button>
+    <ul class="mdl-menu mdl-js-menu mdl-menu--top-left" data-mdl-for="others">
+      {% for option in otherOptions %}
+        {# TODO: Non-interactive elements should not be assigned mouse or keyboard event listeners. #}
+        <li class="mdl-menu__item" onclick="location.href = '{{ option.callback|raw }}'">
+          <span class="mdl-list__item-primary-content">
+            <img
+              class="mdl-list__item-icon"
+              src="{{ option.image }}"
+              {% set alt = '{mfa:' ~ option.type ~ '_icon}' %}
+              alt="{{ alt|trans }}"
+            >
+            {% set text = '{mfa:use_' ~ option.label ~ '}' %}
+            {{ text|trans }}
+          </span>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+{% endif %}
diff --git a/modules/material/themes/material/mfa/other_mfas.php b/modules/material/themes/material/mfa/other_mfas.php
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.php b/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.php
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig b/modules/material/themes/material/mfa/prompt-for-mfa-backupcode.twig
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="{{ currentLanguage }}">
+<head>
+  <title>{{ '{mfa:title}'|trans }}</title>
+
+  {% include 'header.twig' %}
+</head>
+<body class="gradient-bg">
+<div class="mdl-layout mdl-layout--fixed-header fill-viewport">
+  <header class="mdl-layout__header">
+    <div class="mdl-layout__header-row">
+      <span class="mdl-layout-title">
+          {{ '{mfa:header}'|trans }}
+      </span>
+    </div>
+  </header>
+  <main class="mdl-layout__content" layout-children="column">
+    <form layout-children="column" method="post" autocomplete="off">
+      <div class="mdl-card mdl-shadow--8dp">
+        <div class="mdl-card__media white-bg margin" layout-children="column">
+          <img src="mfa-backupcode.svg" class="icon" alt="{{ '{mfa:backupcode_icon}'|trans }}">
+        </div>
+
+        <div class="mdl-card__title center">
+          <h1 class="mdl-card__title-text">
+            {{ '{mfa:backupcode_header}'|trans }}
+          </h1>
+        </div>
+
+        <div class="mdl-card__title center">
+          <p class="mdl-card__subtitle-text">
+            {{ '{mfa:backupcode_reminder}'|trans }}
+          </p>
+        </div>
+
+        <div class="mdl-card__supporting-text" layout-children="column">
+          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label for="mfaSubmission" class="mdl-textfield__label">
+              {{ '{mfa:backupcode_input}'|trans }}
+            </label>
+            <input name="mfaSubmission" class="mdl-textfield__input mdl-color-text--black" autofocus id="mfaSubmission">
+          </div>
+        </div>
+
+        {% if not errorMessage is empty %}
+          <div class="mdl-card__supporting-text" layout-children="column">
+            <p class="mdl-color-text--red error">
+              <i class="material-icons">error</i>
+
+              <span class="mdl-typography--caption">
+                {{ errorMessage|e }}
+              </span>
+            </p>
+          </div>
+
+          <script>
+            ga('send', 'event', 'error', 'backupcode','{{ errorMessage|e('js')|raw }}');
+          </script>
+        {% endif %}
+
+        <div class="mdl-card__actions" layout-children="row">
+          <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>
+        <label 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" checked class="mdl-checkbox__input">
+        </label>
+      </div>
+    </form>
+  </main>
+</div>
+</body>
+</html>
diff --git a/modules/material/themes/material/mfa/prompt-for-mfa-manager.php b/modules/material/themes/material/mfa/prompt-for-mfa-manager.php