core&ui: add passkey login support

packages/ui-default/components/signin/signInDialog.page.js

@@ -1,9 +1,12 @@
+import { browserSupportsWebAuthnAutofill, startAuthentication } from '@simplewebauthn/browser';
 import $ from 'jquery';
 import responsiveCutoff from 'vj/breakpoints.json';
 import DomDialog from 'vj/components/dialog/DomDialog';
 import { InfoDialog } from 'vj/components/dialog/index';
 import { AutoloadPage } from 'vj/misc/Page';
-import { i18n, mediaQuery, tpl } from 'vj/utils';
+import {
+  i18n, mediaQuery, request, tpl,
+} from 'vj/utils';
 
 const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
   const signInDialog = DomDialog.getOrConstruct($('.dialog--signin'), {
@@ -11,13 +14,47 @@ const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
     cancelByEsc: true,
   });
 
+  let authnInitialized = false;
+
+  async function initPasskey() {
+    if (authnInitialized) return;
+    authnInitialized = true;
+    const support = await browserSupportsWebAuthnAutofill();
+    if (!support) return;
+    const authnInfo = await request.get('/user/webauthn', { login: true });
+    if (!authnInfo.authOptions) return;
+    const result = await startAuthentication({ optionsJSON: authnInfo.authOptions, useBrowserAutofill: true })
+      .catch((e) => {
+        Notification.error(i18n('Failed to get credential: {0}', e));
+        return null;
+      });
+    if (!result) return;
+    try {
+      const authn = await request.post('/user/webauthn', {
+        result,
+      });
+      if (authn.url) window.location.href = authn.url;
+      else if (authn.error) throw new Error(authn.error);
+    } catch (err) {
+      Notification.error(err.message);
+      console.error(err);
+    }
+  }
+
+  if (window.location.href.endsWith('/login')) initPasskey();
+
+  function show() {
+    signInDialog.show();
+    initPasskey();
+  }
+
   // don't show quick login dialog if in mobile
   if ($('[name="nav_login"]').length > 0) {
     // nav
     $('[name="nav_login"]').on('click', (ev) => {
       if (mediaQuery.isBelow(responsiveCutoff.mobile)) return;
       if (ev.shiftKey || ev.metaKey || ev.ctrlKey) return;
-      signInDialog.show();
+      show();
       ev.preventDefault();
     });
   }
@@ -36,7 +73,7 @@ const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
         return;
       }
     }
-    signInDialog.show();
+    show();
   };
 
   $('[data-lostpass]').on('click', (e) => {