fix: improve email code sign-in experience (#28307)

web/app/(shareLayout)/webapp-signin/check-code/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { useCallback, useState } from 'react'
+import { type FormEvent, useCallback, useEffect, useRef, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useContext } from 'use-context-selector'
 import Countdown from '@/app/components/signin/countdown'
@@ -23,6 +23,7 @@ export default function CheckCode() {
   const [code, setVerifyCode] = useState('')
   const [loading, setIsLoading] = useState(false)
   const { locale } = useContext(I18NContext)
+  const codeInputRef = useRef<HTMLInputElement>(null)
   const redirectUrl = searchParams.get('redirect_url')
   const embeddedUserId = useWebAppStore(s => s.embeddedUserId)
 
@@ -79,6 +80,15 @@ export default function CheckCode() {
     }
   }
 
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    verify()
+  }
+
+  useEffect(() => {
+    codeInputRef.current?.focus()
+  }, [])
+
   const resendCode = async () => {
     try {
       const ret = await sendWebAppEMailLoginCode(email, locale)
@@ -107,10 +117,18 @@ export default function CheckCode() {
       </p>
     </div>
 
-    <form action="">
+    <form onSubmit={handleSubmit}>
       <label htmlFor="code" className='system-md-semibold mb-1 text-text-secondary'>{t('login.checkCode.verificationCode')}</label>
-      <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') || ''} />
-      <Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
+      <Input
+        ref={codeInputRef}
+        id='code'
+        value={code}
+        onChange={e => setVerifyCode(e.target.value)}
+        maxLength={6}
+        className='mt-1'
+        placeholder={t('login.checkCode.verificationCodePlaceholder') || ''}
+      />
+      <Button type='submit' loading={loading} disabled={loading} className='my-3 w-full' variant='primary'>{t('login.checkCode.verify')}</Button>
       <Countdown onResend={resendCode} />
     </form>
     <div className='py-2'>

web/app/components/base/input/index.tsx

@@ -32,12 +32,11 @@ export type InputProps = {
   wrapperClassName?: string
   styleCss?: CSSProperties
   unit?: string
-  ref?: React.Ref<HTMLInputElement>
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants>
 
 const removeLeadingZeros = (value: string) => value.replace(/^(-?)0+(?=\d)/, '$1')
 
-const Input = ({
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   size,
   disabled,
   destructive,
@@ -53,9 +52,8 @@ const Input = ({
   onChange = noop,
   onBlur = noop,
   unit,
-  ref,
   ...props
-}: InputProps) => {
+}, ref) => {
   const { t } = useTranslation()
   const handleNumberChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     if (value === 0) {
@@ -135,7 +133,7 @@ const Input = ({
       }
     </div>
   )
-}
+})
 
 Input.displayName = 'Input'
 

web/app/signin/check-code/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { useState } from 'react'
+import { type FormEvent, useEffect, useRef, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useContext } from 'use-context-selector'
 import Countdown from '@/app/components/signin/countdown'
@@ -23,6 +23,7 @@ export default function CheckCode() {
   const [code, setVerifyCode] = useState('')
   const [loading, setIsLoading] = useState(false)
   const { locale } = useContext(I18NContext)
+  const codeInputRef = useRef<HTMLInputElement>(null)
 
   const verify = async () => {
     try {
@@ -58,6 +59,15 @@ export default function CheckCode() {
     }
   }
 
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    verify()
+  }
+
+  useEffect(() => {
+    codeInputRef.current?.focus()
+  }, [])
+
   const resendCode = async () => {
     try {
       const ret = await sendEMailLoginCode(email, locale)
@@ -86,10 +96,18 @@ export default function CheckCode() {
       </p>
     </div>
 
-    <form action="">
+    <form onSubmit={handleSubmit}>
       <label htmlFor="code" className='system-md-semibold mb-1 text-text-secondary'>{t('login.checkCode.verificationCode')}</label>
-      <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
-      <Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
+      <Input
+        ref={codeInputRef}
+        id='code'
+        value={code}
+        onChange={e => setVerifyCode(e.target.value)}
+        maxLength={6}
+        className='mt-1'
+        placeholder={t('login.checkCode.verificationCodePlaceholder') as string}
+      />
+      <Button type='submit' loading={loading} disabled={loading} className='my-3 w-full' variant='primary'>{t('login.checkCode.verify')}</Button>
       <Countdown onResend={resendCode} />
     </form>
     <div className='py-2'>

web/app/signin/components/mail-and-code-auth.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { type FormEvent, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useContext } from 'use-context-selector'
@@ -9,7 +9,6 @@ import Toast from '@/app/components/base/toast'
 import { sendEMailLoginCode } from '@/service/common'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import I18NContext from '@/context/i18n'
-import { noop } from 'lodash-es'
 
 type MailAndCodeAuthProps = {
   isInvite: boolean
@@ -56,7 +55,12 @@ export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) {
     }
   }
 
-  return (<form onSubmit={noop}>
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    handleGetEMailVerificationCode()
+  }
+
+  return (<form onSubmit={handleSubmit}>
     <input type='text' className='hidden' />
     <div className='mb-2'>
       <label htmlFor="email" className='system-md-semibold my-2 text-text-secondary'>{t('login.email')}</label>
@@ -64,7 +68,7 @@ export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) {
         <Input id='email' type="email" disabled={isInvite} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
       </div>
       <div className='mt-3'>
-        <Button loading={loading} disabled={loading || !email} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.signup.verifyMail')}</Button>
+        <Button type='submit' loading={loading} disabled={loading || !email} variant='primary' className='w-full'>{t('login.signup.verifyMail')}</Button>
       </div>
     </div>
   </form>