fix and update

apps/frontend/components/ui/pin-input.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import * as React from 'react';
+import { Input } from '@/components/ui/input';
+import { PIN_MAX_LENGTH, sanitizePinInput } from '@/lib/pin-input';
+
+const PIN_ALLOWED_KEYS = new Set([
+  'Backspace',
+  'Delete',
+  'Tab',
+  'Escape',
+  'Enter',
+  'ArrowLeft',
+  'ArrowRight',
+  'Home',
+  'End',
+]);
+
+export interface PinInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'inputMode'> {
+  value: string;
+  onChange: (value: string) => void;
+  maxLength?: number;
+}
+
+export function PinInput({
+  value,
+  onChange,
+  maxLength = PIN_MAX_LENGTH,
+  onKeyDown,
+  onPaste,
+  type = 'password',
+  ...props
+}: PinInputProps) {
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    onChange(sanitizePinInput(event.target.value, maxLength));
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (!PIN_ALLOWED_KEYS.has(event.key) && !event.ctrlKey && !event.metaKey && !/^\d$/.test(event.key)) {
+      event.preventDefault();
+    }
+    onKeyDown?.(event);
+  }
+
+  function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {
+    event.preventDefault();
+    onChange(sanitizePinInput(event.clipboardData.getData('text'), maxLength));
+    onPaste?.(event);
+  }
+
+  return (
+    <Input
+      {...props}
+      type={type}
+      inputMode="numeric"
+      autoComplete="one-time-code"
+      pattern="\d*"
+      maxLength={maxLength}
+      value={value}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
+    />
+  );
+}