feat: email otp input

Author: Bccorb

src/components/OtpInput.tsx

@@ -4,16 +4,28 @@ import styles from '@/styles/otpInput.module.css';
 interface Props {
   length?: number;
   value: string;
+  inputMode?: 'numeric' | 'text';
   onChange: (value: string) => void;
 }
 
-const OtpInput: React.FC<Props> = ({ length = 6, value, onChange }) => {
+const OtpInput: React.FC<Props> = ({
+  length = 6,
+  value,
+  inputMode = 'numeric',
+  onChange,
+}) => {
   const inputs = useRef<Array<HTMLInputElement | null>>([]);
 
   const values = value.split('').concat(Array(length).fill('')).slice(0, length);
 
   const handleChange = (index: number, char: string) => {
-    if (!/^\d?$/.test(char)) return;
+    if (inputMode === 'numeric') {
+      if (!/^\d?$/.test(char)) return;
+    }
+
+    if (inputMode === 'text') {
+      if (!/[a-z]/i.test(char)) return;
+    }
 
     const newValue = value.substring(0, index) + char + value.substring(index + 1);
 
@@ -48,7 +60,7 @@ const OtpInput: React.FC<Props> = ({ length = 6, value, onChange }) => {
           key={i}
           ref={el => (inputs.current[i] = el)}
           type="text"
-          inputMode="numeric"
+          inputMode={inputMode}
           maxLength={1}
           value={digit || ''}
           className={styles.otpInput}

src/views/EmailRegistration.tsx

@@ -6,6 +6,7 @@ import styles from '@/styles/verifyOTP.module.css';
 import { createFetchWithAuth } from '@/fetchWithAuth';
 import { isPasskeySupported } from '@/utils';
 import { useInternalAuth } from '@/context/InternalAuthContext';
+import OtpInput from '@/components/OtpInput';
 
 const EmailRegistration: React.FC = () => {
   const navigate = useNavigate();
@@ -129,16 +130,11 @@ const EmailRegistration: React.FC = () => {
                 — Code expires in {formatTime(emailTimeLeft)}
               </span>
             </label>
-
-            <input
-              id="emailCode"
-              type="text"
-              maxLength={6}
+            <OtpInput
+              length={6}
               value={emailOtp}
-              autoComplete="off"
-              onChange={e => setEmailOtp(e.target.value)}
-              className={styles.input}
-              required
+              onChange={setEmailOtp}
+              inputMode="text"
             />
 
             <button type="button" onClick={onResendEmail} className={styles.resend}>

tests/EmailRegistration.test.tsx

@@ -17,6 +17,14 @@ jest.mock('react-router-dom', () => ({
   useNavigate: jest.fn(),
 }));
 
+jest.mock('@/components/OtpInput', () => (props: any) => (
+  <input
+    data-testid="otp-input"
+    value={props.value}
+    onChange={e => props.onChange(e.target.value)}
+  />
+));
+
 describe('EmailRegistration', () => {
   const navigate = jest.fn();
   const validateToken = jest.fn();
@@ -57,12 +65,11 @@ describe('EmailRegistration', () => {
   test('shows validation error if OTP is not 6 digits', async () => {
     render(<EmailRegistration />);
 
-    fireEvent.change(screen.getByLabelText(/email verification code/i), {
-      target: { value: '123' },
+    fireEvent.change(screen.getByTestId('otp-input'), {
+      target: { value: 'ABC' },
     });
 
     fireEvent.click(screen.getByRole('button', { name: /verify & continue/i }));
-
     expect(screen.getByText(/please enter a valid code/i)).toBeInTheDocument();
   });
 
@@ -71,8 +78,8 @@ describe('EmailRegistration', () => {
 
     render(<EmailRegistration />);
 
-    fireEvent.change(screen.getByLabelText(/email verification code/i), {
-      target: { value: '123456' },
+    fireEvent.change(screen.getByTestId('otp-input'), {
+      target: { value: 'ABCDEF' },
     });
 
     await act(async () => {
@@ -124,8 +131,8 @@ describe('EmailRegistration', () => {
       expect(isPasskeySupported).toHaveBeenCalled();
     });
 
-    fireEvent.change(screen.getByLabelText(/email verification code/i), {
-      target: { value: '123456' },
+    fireEvent.change(screen.getByTestId('otp-input'), {
+      target: { value: 'ABCDEF' },
     });
 
     await act(async () => {
@@ -145,8 +152,8 @@ describe('EmailRegistration', () => {
 
     render(<EmailRegistration />);
 
-    fireEvent.change(screen.getByLabelText(/email verification code/i), {
-      target: { value: '123456' },
+    fireEvent.change(screen.getByTestId('otp-input'), {
+      target: { value: 'ABCDEF' },
     });
 
     await act(async () => {