diff --git a/_app/homepage/static/css/index.css b/_app/homepage/static/css/index.css
index 0ecc0a1..71a957e 100644
--- 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
index fdba67e..07b6264 100644
--- a/_app/homepage/templates/homepage/sections/webauthn_form.html
+++ b/_app/homepage/templates/homepage/sections/webauthn_form.html
@@ -254,12 +254,47 @@
Reset Settings
+
+ (tips & tricks)
+
+
+ Advanced Settings Tips & Tricks
+
+ A brief list of advanced capabilities that may not be immediately obvious when using this site:
+
+
+
+ Sharing the URL in the address bar after making changes in Advanced Settings enables
+ others to open this site with the same configuration.
+
+
+ Clicking Authenticate without entering a username is supported. This
+ enables testing "usernameless" authentication.
+
+
+ Changing Authentication Settings > User Verification will restart
+ conditional UI using the chosen setting.
+
+
+
+ Close
+
+
@@ -379,21 +414,14 @@
WebAuthn isn't supported. Please consider switching to a modern browser. {
- 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 @@ WebAuthn isn't supported. Please consider switching to a modern browser. WebAuthn isn't supported. Please consider switching to a modern browser. {
+ 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.