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 @@ + + +

Advanced Settings Tips & Tricks

+

+ A brief list of advanced capabilities that may not be immediately obvious when using this site: +

+ + +
@@ -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.