37 lines
825 B
TypeScript
37 lines
825 B
TypeScript
|
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;
|