From 26f208727d2a433d18de89961579956da5f4efe9 Mon Sep 17 00:00:00 2001
From: Jonas Hungershausen <jonas.hungershausen@ory.sh>
Date: Tue, 26 Nov 2024 11:00:54 +0100
Subject: [PATCH] fix: missing resend button on login & registration (#294)

---
 .../theme/default/components/form/label.tsx   | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/elements-react/src/theme/default/components/form/label.tsx b/packages/elements-react/src/theme/default/components/form/label.tsx
index 1454e7fb..eead86c5 100644
--- a/packages/elements-react/src/theme/default/components/form/label.tsx
+++ b/packages/elements-react/src/theme/default/components/form/label.tsx
@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { FlowType, getNodeLabel } from "@ory/client-fetch"
+import { FlowType, getNodeLabel, UiNode } from "@ory/client-fetch"
 import {
   OryNodeLabelProps,
   messageTestId,
@@ -9,8 +9,18 @@ import {
   useComponents,
   useOryFlow,
 } from "@ory/elements-react"
+import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+function findResendNode(nodes: UiNode[]) {
+  return nodes.find(
+    (n) =>
+      "name" in n.attributes &&
+      ((n.attributes.name === "email" && n.attributes.type === "submit") ||
+        n.attributes.name === "resend"),
+  )
+}
+
 export function DefaultLabel({
   node,
   children,
@@ -21,15 +31,17 @@ export function DefaultLabel({
   const label = getNodeLabel(node)
   const { Message } = useComponents()
   const { config, flowType, flow } = useOryFlow()
+  const { setValue } = useFormContext()
 
   const isPassword = attributes.type === "password"
 
-  const hasResendNode = flow.ui.nodes.some(
-    (n) =>
-      "name" in n.attributes &&
-      n.attributes.name === "email" &&
-      n.attributes.type === "submit",
-  )
+  const resendNode = findResendNode(flow.ui.nodes)
+
+  const handleResend = () => {
+    if (resendNode?.attributes && "name" in resendNode.attributes) {
+      setValue(resendNode.attributes.name, resendNode.attributes.value)
+    }
+  }
 
   return (
     <div className="flex flex-col antialiased gap-1">
@@ -57,11 +69,12 @@ export function DefaultLabel({
                 })}
               </a>
             )}
-          {hasResendNode && (
+          {resendNode?.attributes.node_type === "input" && (
             <button
               type="submit"
-              name="method"
-              value="code"
+              name={resendNode.attributes.name}
+              value={resendNode.attributes.value}
+              onClick={handleResend}
               className="text-links-link-default hover:underline hover:text-link-hover transition-colors text-sm font-medium cursor-pointer"
             >
               {intl.formatMessage({ id: "identities.messages.1070008" })}