chore: simplify js setup (#320)

Author: hperl

src/routes/login.ts

@@ -173,18 +173,6 @@ export const createLoginRoute: RouteCreator =
 
         res.render("login", {
           nodes: flow.ui.nodes,
-          webAuthnHandler: filterNodesByGroups({
-            nodes: flow.ui.nodes,
-            groups: ["webauthn", "passkey"],
-            attributes: ["button"],
-            withoutDefaultAttributes: true,
-            withoutDefaultGroup: true,
-          })
-            .filter(({ attributes }) => isUiNodeInputAttributes(attributes))
-            .map(({ attributes }) => {
-              return (attributes as UiNodeInputAttributes).onclick
-            })
-            .filter((c) => c !== undefined),
           card: UserAuthCard(
             {
               flow,

src/routes/registration.ts

@@ -79,21 +79,9 @@ export const createRegistrationRoute: RouteCreator =
             flow.oauth2_login_request.challenge,
           )
         }
-        const webAuthnHandler = filterNodesByGroups({
-          nodes: flow.ui.nodes,
-          groups: ["webauthn", "passkey"],
-          attributes: ["button"],
-          withoutDefaultAttributes: true,
-          withoutDefaultGroup: true,
-        })
-          .filter(({ attributes }) => isUiNodeInputAttributes(attributes))
-          .map(({ attributes }) => {
-            return (attributes as UiNodeInputAttributes).onclick
-          })
-          .filter((onClickAction) => !!onClickAction)
+
         res.render("registration", {
           nodes: flow.ui.nodes,
-          webAuthnHandler: webAuthnHandler,
           card: UserAuthCard(
             {
               flow,

src/routes/settings.ts

@@ -77,18 +77,6 @@ export const createSettingsRoute: RouteCreator =
           nodes: flow.ui.nodes,
           nav: settingsScreen.Nav,
           settingsScreen: settingsScreen.Body,
-          webAuthnHandler: filterNodesByGroups({
-            nodes: flow.ui.nodes,
-            groups: ["webauthn", "passkey"],
-            attributes: ["button"],
-            withoutDefaultAttributes: true,
-            withoutDefaultGroup: true,
-          })
-            .filter(({ attributes }) => isUiNodeInputAttributes(attributes))
-            .map(({ attributes }) => {
-              return (attributes as UiNodeInputAttributes).onclick
-            })
-            .filter((c) => c !== undefined),
         })
       })
       .catch(redirectOnSoftError(res, next, initFlowUrl))

views/login.hbs

@@ -1,7 +1,6 @@
 <div id="login">
   {{{card}}}
 
-  {{> webauthn_setup nodes=nodes webAuthnHandler=webAuthnHandler webauthnTriggerName="webauthn_login_trigger"}}
   {{> js_setup nodes=nodes}}
   {{#if extraPartial }}
     {{> (extraPartial) }}

views/partials/js_setup.hbs

@@ -1,8 +1,20 @@
+{{! This inserts the webauthn.js script tag}}
+{{#each (onlyNodes nodes "webauthn" "text/javascript")}}
+    <script
+            src="{{attributes.src}}"
+            type="{{attributes.type}}"
+            integrity="{{attributes.integrity}}"
+            referrerpolicy="{{attributes.referrerpolicy}}"
+            crossorigin="{{attributes.crossorigin}}"
+            {{#if attributes.async}}async{{/if}}
+            data-testid="node/script/{{attributes.id}}"
+    ></script>
+{{/each}}
 {{! 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" "")}}
+    {{#each (onlyNodes nodes "passkey,webauthn" "")}}
         {{#if attributes.onclick}}
             // onclick for {{attributes.name}}
             document.getElementsByName("{{attributes.name}}").forEach((el) => {

views/partials/webauthn_setup.hbs

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

views/registration.hbs

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