From 87d28dafa4a7393f4f9d32ff2d841fc57c826684 Mon Sep 17 00:00:00 2001
From: Jonas Hungershausen <jonas.hungershausen@ory.sh>
Date: Tue, 29 Oct 2024 15:11:26 +0100
Subject: [PATCH] fix: duplicate resend button on recovery & verification
 (#254)

---
 .../src/components/form/nodes/input.tsx       |  2 +-
 .../components/form/pin-code-input.tsx        | 34 ++++++++-----------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/elements-react/src/components/form/nodes/input.tsx b/packages/elements-react/src/components/form/nodes/input.tsx
index e0c88ecdc..cf5d8ffdc 100644
--- a/packages/elements-react/src/components/form/nodes/input.tsx
+++ b/packages/elements-react/src/components/form/nodes/input.tsx
@@ -65,7 +65,7 @@ export const NodeInput = ({
   const isPinCodeInput =
     (attrs.name === "code" && node.group === "code") ||
     (attrs.name === "totp_code" && node.group === "totp")
-  const isResend = attrs.name === "resend" && node.group === "code"
+  const isResend = node.meta.label?.id === 1070008
 
   switch (nodeType) {
     case UiNodeInputAttributesTypeEnum.Submit:
diff --git a/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx b/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx
index 45b5b417b..316d2a183 100644
--- a/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx
+++ b/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx
@@ -18,25 +18,21 @@ export const DefaultPinCodeInput = ({ attributes }: OryNodeInputProps) => {
   const value = watch(name)
 
   return (
-    <div
-      className={`grid grid-flow-col grid-cols-${maxlength} gap-3 auto-cols-fr rtl:space-x-reverse`}
+    <InputOTP
+      maxLength={maxlength ?? 6}
+      onChange={handleInputChange}
+      name={name}
+      value={value}
     >
-      <InputOTP
-        maxLength={maxlength ?? 6}
-        onChange={handleInputChange}
-        name={name}
-        value={value}
-      >
-        <InputOTPGroup className="w-full space-x-2 justify-between">
-          {[...Array(elements)].map((_, index) => (
-            <InputOTPSlot
-              index={index}
-              key={index}
-              className="text-center px-1.5 py-2.5 h-10 w-11 md:w-14 md:h-12 border border-radius border-solid rounded-border-radius-forms border-forms-border-default bg-forms-bg-default"
-            />
-          ))}
-        </InputOTPGroup>
-      </InputOTP>
-    </div>
+      <InputOTPGroup className="w-full space-x-2 justify-between">
+        {[...Array(elements)].map((_, index) => (
+          <InputOTPSlot
+            index={index}
+            key={index}
+            className="text-center px-1.5 py-2.5 h-10 w-11 md:w-14 md:h-12 border border-radius border-solid rounded-border-radius-forms border-forms-border-default bg-forms-bg-default"
+          />
+        ))}
+      </InputOTPGroup>
+    </InputOTP>
   )
 }