feat: passkey support (#315)

* feat: add onload js setup

* chore: bump ory elements

Author: hperl

package-lock.json

@@ -28,7 +28,7 @@
   "prettier": "ory-prettier-styles",
   "dependencies": {
     "@ory/client": "1.2.10",
-    "@ory/elements-markup": "0.1.0-beta.14",
+    "@ory/elements-markup": "0.1.0-beta.15",
     "@ory/integrations": "1.1.5",
     "accept-language-parser": "1.5.0",
     "axios": "1.2.6",

package.json

@@ -2,6 +2,7 @@
   {{{card}}}
 
   {{> webauthn_setup nodes=nodes webAuthnHandler=webAuthnHandler webauthnTriggerName="webauthn_login_trigger"}}
+  {{> js_setup nodes=nodes}}
   {{#if extraPartial }}
     {{> (extraPartial) }}
   {{/if}}

views/login.hbs

@@ -0,0 +1,18 @@
+{{! This partial sets up the onclick and onload event handlers for each passkey node.}}
+<script type="text/javascript">
+    // register onclick and onload event handlers for each passkey node.
+    window.addEventListener("load", () => {
+    {{#each (onlyNodes nodes "passkey" "")}}
+        {{#if attributes.onclick}}
+            // onclick for {{attributes.name}}
+            document.getElementsByName("{{attributes.name}}").forEach((el) => {
+                el.addEventListener("click", () => { {{{attributes.onclick}}} })
+            })
+        {{/if}}
+        {{#if attributes.onload}}
+            // onload for {{attributes.name}}
+            {{{attributes.onload}}}
+        {{/if}}
+    {{/each}}
+    })
+</script>

views/partials/js_setup.hbs

@@ -3,6 +3,7 @@
   {{{card}}}
 
   {{> webauthn_setup nodes=nodes webAuthnHandler=webAuthnHandler webauthnTriggerName="webauthn_register_trigger"}}
+  {{> js_setup nodes=nodes}}
   {{#if extraPartial }}
     {{> (extraPartial) }}
   {{/if}}

views/registration.hbs

@@ -5,5 +5,5 @@
     </div>
 
   {{> webauthn_setup nodes=nodes webAuthnHandler=webAuthnHandler webauthnTriggerName="webauthn_register_trigger"}}
-
+  {{> js_setup nodes=nodes}}
 </div>