Improve UX for browsers we don't support U2F in

forevermatt · forevermatt · commit 8a9b76085674 · 2021-07-15T17:30:17.000-04:00
diff --git a/themes/material/mfa/prompt-for-mfa-u2f.php b/themes/material/mfa/prompt-for-mfa-u2f.php
@@ -87,7 +87,9 @@ function createHiddenInput(name) {
     </script>
 </head>
 
-<body class="gradient-bg" onload="verifyU2f()">
+<?php $isU2fSupported = $this->data['supportsU2f']; ?>
+
+<body class="gradient-bg" onload="<?= $isU2fSupported ? 'verifyU2f()' : '' ?>">
 <div class="mdl-layout mdl-layout--fixed-header fill-viewport">
     <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">
@@ -111,11 +113,19 @@ class="icon">
                     </h1>
                 </div>
 
+                <?php if ($isU2fSupported): ?>
                 <div class="mdl-card__title">
                     <p class="mdl-card__subtitle-text">
                         <?= $this->t('{material:mfa:u2f_instructions}') ?>
                     </p>
                 </div>
+                <?php else: ?>
+                <div class="mdl-card__title">
+                    <p class="mdl-typography--text-center mdl-color-text--red">
+                        <?= $this->t('{material:mfa:u2f_unsupported}') ?>
+                    </p>
+                </div>
+                <?php endif; ?>
 
                 <?php
                 $message = $this->data['errorMessage'];
