users with multiple MFA options configured needed an ability to use them.

Billy Clark · Billy Clark · commit 4e94f897dab7 · 2017-11-07T16:42:45.000-05:00
diff --git a/README.md b/README.md
@@ -190,7 +190,7 @@ If configured, an alert will be shown to the user filled with the content of tha
 5. Click **hub-discovery**
 6. Click **idp4**
 7. Login as a "multiple option" user: `username=`**has_all** `password=`**a**
-7. TODO: add remaining steps
+8. Click **MORE OPTIONS**
 
 ### Announcements functionality
 1. Goto [http://ssp-hub2.local:8081](http://ssp-hub2.local:8081)
diff --git a/dictionaries/mfa.definition.json b/dictionaries/mfa.definition.json
@@ -108,6 +108,30 @@
 		"fr": "TODO",
 		"ko": "TODO"
 	},
+	"use_others": {
+		"en": "More options",
+		"es": "TODO",
+		"fr": "TODO",
+		"ko": "TODO"
+	},
+	"use_u2f": {
+		"en": "Use my security key instead",
+		"es": "TODO",
+		"fr": "TODO",
+		"ko": "TODO"
+	},
+	"use_totp": {
+		"en": "Use my verification app instead",
+		"es": "TODO",
+		"fr": "TODO",
+		"ko": "TODO"
+	},
+	"use_backupcode": {
+		"en": "Use a backup code instead",
+		"es": "TODO",
+		"fr": "TODO",
+		"ko": "TODO"
+	},
 	"button_verify": {
 		"en": "Verify",
 		"es": "TODO",
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,5 +1,4 @@
 version: '2.0'
-#TODO: update README with local mfa testing steps
 
 services:
   hub:
diff --git a/themes/material/mfa/other_mfas.php b/themes/material/mfa/other_mfas.php
@@ -0,0 +1,29 @@
+<!-- used type=button to avoid form submission on click -->
+<button id="others" type="button" class="mdl-button mdl-js-button">
+    <span class="mdl-typography--caption">
+        <?= $this->t('{material:mfa:use_others}') ?>
+    </span>
+</button>
+<ul class="mdl-menu mdl-js-menu mdl-menu--top-left" data-mdl-for="others">
+    <?php
+    $mfaOptions = $this->data['mfaOptions'];
+    $currentMfaId = $this->data['formData']['mfaId'];
+
+    function excludeSelf($others, $selfId) {
+        return array_filter($others, function($option) use ($selfId) {
+            return $option['id'] != $selfId;
+        });
+    }
+
+    foreach (excludeSelf($mfaOptions, $currentMfaId) as $otherOption) {
+    ?>
+    <li class="mdl-menu__item"
+        onclick="location.href += '&mfaId=<?= $otherOption['id'] ?>'">
+        <span class="mdl-typography--caption">
+            <?= $this->t('{material:mfa:use_'.$otherOption['type'].'}') ?>
+        </span>
+    </li>
+    <?php
+    }
+    ?>
+</ul>
diff --git a/themes/material/mfa/prompt-for-mfa-backupcode.php b/themes/material/mfa/prompt-for-mfa-backupcode.php
@@ -68,7 +68,7 @@
                 </div>
 
                 <script>
-                    ga('send','event','error','backupcode', '<?= $message ?>');
+                    ga('send','event','error','backupcode','<?= $message ?>');
                 </script>
                 <?php
                 }
@@ -81,15 +81,18 @@ class="mdl-button mdl-button--raised mdl-button--primary">
                         <?= $this->t('{material:mfa:button_verify}') ?>
                     </button>
                 </div>
+
+                <div layout-children="column" child-spacing="center">
+                    <?php include __DIR__ . '/other_mfas.php' ?>
+                </div>
             </div>
 
             <div>
                 <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                     <span class="mdl-checkbox__label">
                         <?= $this->t('{material:mfa:remember_this}') ?>
                     </span>
-                    <input type="checkbox" name="rememberMe" value="true" checked
-                           class="mdl-checkbox__input"/>
+                    <input type="checkbox" name="rememberMe" checked class="mdl-checkbox__input"/>
                 </label>
             </div>
         </form>
diff --git a/themes/material/mfa/prompt-for-mfa-totp.php b/themes/material/mfa/prompt-for-mfa-totp.php
@@ -68,7 +68,7 @@
                 </div>
 
                 <script>
-                    ga('send','event','error','totp', '<?= $message ?>');
+                    ga('send','event','error','totp','<?= $message ?>');
                 </script>
                 <?php
                 }
@@ -81,15 +81,18 @@ class="mdl-button mdl-button--raised mdl-button--primary">
                         <?= $this->t('{material:mfa:button_verify}') ?>
                     </button>
                 </div>
+
+                <div layout-children="column" child-spacing="center">
+                    <?php include __DIR__ . '/other_mfas.php' ?>
+                </div>
             </div>
 
             <div>
                 <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                     <span class="mdl-checkbox__label">
                         <?= $this->t('{material:mfa:remember_this}') ?>
                     </span>
-                    <input type="checkbox" name="rememberMe" value="true" checked
-                           class="mdl-checkbox__input"/>
+                    <input type="checkbox" name="rememberMe" checked class="mdl-checkbox__input"/>
                 </label>
             </div>
         </form>
diff --git a/themes/material/mfa/prompt-for-mfa-u2f.php b/themes/material/mfa/prompt-for-mfa-u2f.php
@@ -29,7 +29,7 @@ function handleError(u2fResponse) {
 
             var errorNode = document.querySelector('p.error');
 
-            errorNode.classList.add('show');
+            errorNode.classList.remove('hide');
             errorNode.querySelector('span').textContent = message;
 
             offerRetry();
@@ -38,7 +38,7 @@ function handleError(u2fResponse) {
         function offerRetry() {
             var retryButton = document.querySelector('.mdl-button.mdl-color-text--red');
 
-            retryButton.classList.add('show');
+            retryButton.classList.remove('hide');
         }
 
         function submitForm(u2fResponse) {
@@ -73,6 +73,7 @@ function createHiddenInput(name) {
             </span>
         </div>
     </header>
+
     <main class="mdl-layout__content" layout-children="column">
         <form layout-children="column" method="POST">
             <?php
@@ -103,18 +104,17 @@ function createHiddenInput(name) {
 
                 <?php
                 $message = $this->data['errorMessage'];
-
                 if (! empty($message)) {
                 ?>
                 <script>
-                    ga('send','event','error','u2f', '<?= $message ?>');
+                    ga('send','event','error','u2f','<?= $message ?>');
                 </script>
                 <?php
                 }
                 ?>
                 <div class="mdl-card__supporting-text"
                      layout-children="column">
-                    <p class="mdl-color-text--red error  <?= empty($message) ? 'hide' : 'show' ?>">
+                    <p class="mdl-color-text--red error <?= ! empty($message) ? 'show' : 'hide' ?>">
                         <i class="material-icons">error</i>
 
                         <span class="mdl-typography--caption">
@@ -125,11 +125,16 @@ function createHiddenInput(name) {
 
                 <div class="mdl-card__actions" layout-children="row">
                     <span flex></span>
-                    <!-- used input instead of button to avoid form submission on click -->
-                    <input type="button" onclick="verifyU2f()"
-                           class="mdl-button mdl-color-text--red hide"
-                           value="<?= $this->t('{material:mfa:button_try_again}') ?>">
+                    <!-- used type=button to avoid form submission on click -->
+                    <button type="button" onclick="verifyU2f()"
+                           class="mdl-button mdl-color-text--red <?= ! empty($message) ? 'show' : 'hide' ?>">
+                        <?= $this->t('{material:mfa:button_try_again}') ?>
+                    </button>
+
+                </div>
 
+                <div layout-children="column" child-spacing="center">
+                    <?php include __DIR__ . '/other_mfas.php' ?>
                 </div>
             </div>
 
@@ -138,8 +143,7 @@ class="mdl-button mdl-color-text--red hide"
                     <span class="mdl-checkbox__label">
                         <?= $this->t('{material:mfa:remember_this}') ?>
                     </span>
-                    <input type="checkbox" name="rememberMe" value="true" checked
-                           class="mdl-checkbox__input"/>
+                    <input type="checkbox" name="rememberMe" checked class="mdl-checkbox__input"/>
                 </label>
             </div>
         </form>

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`version: '2.0'`
`2`		`-#TODO: update README with local mfa testing steps`
`3`	`2`
`4`	`3`	`services:`
`5`	`4`	`hub:`