From 4bea5a09c61ccf50d808b99d0ac664a413f99213 Mon Sep 17 00:00:00 2001
From: firefox341 <64374511+saurabbot@users.noreply.github.com>
Date: Sun, 2 Jul 2023 00:10:19 +0530
Subject: [PATCH] feat: verificationTokenComponent (#9476)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 .../components/TokenHandler/TokenHandler.tsx  | 36 ++++++++++++++++++
 .../TokenHandler/tokenhandler.stories.mdx     | 37 +++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 packages/ui/components/TokenHandler/TokenHandler.tsx
 create mode 100644 packages/ui/components/TokenHandler/tokenhandler.stories.mdx

diff --git a/packages/ui/components/TokenHandler/TokenHandler.tsx b/packages/ui/components/TokenHandler/TokenHandler.tsx
new file mode 100644
index 0000000000..4d41fa5048
--- /dev/null
+++ b/packages/ui/components/TokenHandler/TokenHandler.tsx
@@ -0,0 +1,36 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Label, Input } from "@calcom/ui";
+
+type Digit = {
+  value: number;
+  onChange: () => void;
+};
+type PropType = {
+  digits: Digit[];
+  digitClassName: string;
+};
+
+const TokenHandler = ({ digits, digitClassName }: PropType) => {
+  const { t } = useLocale();
+
+  return (
+    <div>
+      <Label htmlFor="code">{t("code")}</Label>
+      <div className="flex flex-row justify-between">
+        {digits.map((element, index) => (
+          <Input
+            key={index}
+            className={digitClassName}
+            name={`2fa${index + 1}`}
+            inputMode="decimal"
+            {...element}
+            autoFocus={index === 0}
+            autoComplete="one-time-code"
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TokenHandler;
diff --git a/packages/ui/components/TokenHandler/tokenhandler.stories.mdx b/packages/ui/components/TokenHandler/tokenhandler.stories.mdx
new file mode 100644
index 0000000000..6d8fd4741c
--- /dev/null
+++ b/packages/ui/components/TokenHandler/tokenhandler.stories.mdx
@@ -0,0 +1,37 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title,CustomArgsTable } from '@calcom/storybook/components'
+import TokenHandler from './TokenHandler'
+
+<Meta title="UI/TokenHandler" component={TokenHandler} />
+<Title title="TokenHandler"  subtitle="Version 0.1"/>
+
+## Structure
+
+<TokenHandler digits={[
+    {
+      value: "1",
+      onChange: (e) => {},
+    },
+    {
+      value: "2",
+      onChange: (e) => {},
+    },
+    {
+      value: "3",
+      onChange: (e) => {},
+    },
+    {
+      value: "4",
+      onChange: (e) => {},
+    },
+    {
+      value: "5",
+      onChange: (e) => {},
+    },
+    {
+      value: "6",
+      onChange: (e) => {},
+    },
+  ]} digitClassName="digit-input" />
+
+#all the numbers should be visible while the first one is focused
\ No newline at end of file