Merge pull request #147 from duo-labs/reset-conditional-ui-auth-uv-ch…

…ange Reset conditional UI on auth UV change
duo-labs · Nov 22, 2024 · 72482fa · 72482fa
2 parents 101557f + 7b9cb27
commit 72482fa
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 15 deletions.
diff --git a/_app/homepage/static/css/index.css b/_app/homepage/static/css/index.css
@@ -608,3 +608,15 @@ footer {
     }
   }
 }
+
+#advanced-settings-tips-tricks {
+  max-width: 42em;
+
+  &[open]::backdrop {
+    background-color: rgb(0 0 0 / 25%);
+  }
+
+  body:has(&[open]) {
+    overflow: hidden;
+  }
+}
diff --git a/_app/homepage/templates/homepage/sections/webauthn_form.html b/_app/homepage/templates/homepage/sections/webauthn_form.html
@@ -254,12 +254,47 @@
                 <button class="btn btn-warning" @click="resetSettings()">
                   Reset Settings
                 </button>
+                <button
+                  id="advanced-settings-tips-tricks-open"
+                  class="btn btn-link float-right"
+                  @click="openTipsTricks()"
+                >
+                  (tips &amp; tricks)
+                </button>
               </section>
             </div>
 
           </div>
         </div>
       </div>
+      <dialog id="advanced-settings-tips-tricks">
+        <p class="h5">Advanced Settings Tips & Tricks</p>
+        <p>
+          A brief list of advanced capabilities that may not be immediately obvious when using this site:
+        </p>
+        <ul>
+          <li>
+            <strong>Sharing the URL</strong> in the address bar after making changes in Advanced Settings enables
+            others to open this site with the same configuration.
+          </li>
+          <li>
+            Clicking <strong>Authenticate</strong> without entering a username is supported. This
+            enables testing "usernameless" authentication.
+          </li>
+          <li>
+            Changing <strong>Authentication Settings > User Verification</strong> will restart
+            conditional UI using the chosen setting.
+          </li>
+        </ul>
+        <button
+          id="advanced-settings-tips-tricks-close"
+          class="btn btn-primary"
+          @click="closeTipsTricks()"
+          autofocus
+        >
+          Close
+        </button>
+      </dialog>
     </section>
   </template>
 
@@ -379,21 +414,14 @@ <h2>WebAuthn isn't supported. Please consider switching to a modern browser.</h2
           this._formatRegHintsForUI();
         });
 
-        // Set up Conditional UI if supported
-        browserSupportsWebAuthnAutofill().then(async (supported) => {
-          if (supported) {
-            console.log('Setting up Conditional UI');
-            try {
-              await this._startAuthentication(true);
-            } catch (err) {
-              if (err.name === 'AbortError') {
-                console.log('Conditional UI request was aborted');
-              } else {
-                console.error('Conditional UI error:', err);
-              }
-            }
-          }
+        /**
+         * Restart conditional UI when auth UV setting changes
+         */
+        this.$watch('options.authUserVerification', () => {
+          this._startConditionalUI();
         });
+
+        this._startConditionalUI();
       },
 
       // Default state
@@ -498,7 +526,13 @@ <h2>WebAuthn isn't supported. Please consider switching to a modern browser.</h2
       handleSelectRegHintsHybrid() {
         this._toggleRegHint('hybrid', this._regHints.hybrid);
       },
-
+      // Tips & Tricks Modal
+      openTipsTricks() {
+        document.getElementById('advanced-settings-tips-tricks').showModal();
+      },
+      closeTipsTricks() {
+        document.getElementById('advanced-settings-tips-tricks').close();
+      },
       // Internal Methods
       async _startRegistration() {
         // Submit options
@@ -629,6 +663,23 @@ <h2>WebAuthn isn't supported. Please consider switching to a modern browser.</h2
           this.showErrorAlert(`Authentication failed: ${verificationJSON.error}`);
         }
       },
+      async _startConditionalUI() {
+        // Set up Conditional UI if supported
+        browserSupportsWebAuthnAutofill().then(async (supported) => {
+          if (supported) {
+            console.log('Setting up Conditional UI');
+            try {
+              await this._startAuthentication(true);
+            } catch (err) {
+              if (err.name === 'AbortError') {
+                console.log('Conditional UI request was aborted');
+              } else {
+                console.error('Conditional UI error:', err);
+              }
+            }
+          }
+        });
+      },
       /**
        * Registration hints can be ordered by preference, but there's no good native HTML element
        * that allows for selection _and_ sorting.