Merge branch 'feat/email-update-frontend' into feat/change-user-email

web/app/account/account-page/email-change-modal.tsx

@@ -39,6 +39,7 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
   const [time, setTime] = useState<number>(0)
   const [stepToken, setStepToken] = useState<string>('')
   const [newEmailExited, setNewEmailExited] = useState<boolean>(false)
+  const [isCheckingEmail, setIsCheckingEmail] = useState<boolean>(false)
 
   const startCount = () => {
     setTime(60)
@@ -72,7 +73,7 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
     }
   }
 
-  const verifyEmailAddress = async (email: string, code: string, token: string, callback?: () => void) => {
+  const verifyEmailAddress = async (email: string, code: string, token: string, callback?: (data?: any) => void) => {
     try {
       const res = await verifyEmail({
         email,
@@ -81,7 +82,7 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       })
       if (res.is_valid) {
         setStepToken(res.token)
-        callback?.()
+        callback?.(res.token)
       }
       else {
         notify({
@@ -117,28 +118,24 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
   }
 
   const checkNewEmailExisted = async (email: string) => {
+    setIsCheckingEmail(true)
     try {
       await checkEmailExisted({
         email,
       })
       setNewEmailExited(false)
     }
-    catch (error) {
-      setNewEmailExited(false)
-      if ((error as any)?.code === 'email_already_in_use') {
+    catch {
       setNewEmailExited(true)
     }
-      else {
-        notify({
-          type: 'error',
-          message: `Error checking email existence: ${error ? (error as any).message : ''}`,
-        })
-      }
+    finally {
+      setIsCheckingEmail(false)
     }
   }
 
   const handleNewEmailValueChange = (mailAddress: string) => {
     setMail(mailAddress)
+    setNewEmailExited(false)
     if (isValidEmail(mailAddress))
       checkNewEmailExisted(mailAddress)
   }
@@ -172,11 +169,11 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
     router.push('/signin')
   }
 
-  const updateEmail = async () => {
+  const updateEmail = async (lastToken: string) => {
     try {
       await resetEmail({
         new_email: mail,
-        token: stepToken,
+        token: lastToken,
       })
       handleLogout()
     }
@@ -189,7 +186,7 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
   }
 
   const submitNewEmail = async () => {
-    await verifyEmailAddress(mail, code, stepToken, () => updateEmail())
+    await verifyEmailAddress(mail, code, stepToken, updateEmail)
   }
 
   return (
@@ -302,7 +299,7 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
           </div>
           <div className='mt-3 space-y-2'>
             <Button
-              disabled={!mail}
+              disabled={!mail || newEmailExited || isCheckingEmail || !isValidEmail(mail)}
               className='!w-full'
               variant='primary'
               onClick={sendCodeToNewEmail}

web/i18n/en-US/common.ts

@@ -240,13 +240,13 @@ const translation = {
       verifyNew: 'Verify your new email',
       authTip: 'Once your email is changed, Google or GitHub accounts linked to your old email will no longer be able to log in to this account.',
       content1: 'If you continue, we\'ll send a verification code to <email>{{email}}</email> for re-authentication.',
-      content2: 'Your current email is <email>{{email}}</email> . Verification code has been sent to this email address.',
+      content2: 'Your current email is <email>{{email}}</email>. Verification code has been sent to this email address.',
       content3: 'Enter a new email and we will send you a verification code.',
       content4: 'We just sent you a temporary verification code to <email>{{email}}</email>.',
       codeLabel: 'Verification code',
       codePlaceholder: 'Paste the 6-digit code',
       emailLabel: 'New email',
-      emailPlaceholder: 'Enter new email',
+      emailPlaceholder: 'Enter a new email',
       existingEmail: 'A user with this email already exists.',
       sendVerifyCode: 'Send verification code',
       continue: 'Continue',

web/i18n/ja-JP/common.ts

@@ -238,10 +238,10 @@ const translation = {
       title: 'メールアドレスを変更',
       verifyEmail: '現在のメールアドレスを確認してください',
       newEmail: '新しいメールアドレスを設定する',
-      verifyNew: '新しいメールアドレスを確認する',
+      verifyNew: '新しいメールアドレスを確認してください',
       authTip: 'メールアドレスが変更されると、旧メールアドレスにリンクされている Google または GitHub アカウントは、このアカウントにログインできなくなります。',
-      content1: '続行すると、再認証のために確認コードが <email>{{email}></email> に送信されます。',
-      content2: '現在のメールアドレスは <email>{{email}}</email> です。確認コードはこのメールアドレスに送信されました。',
+      content1: '変更を続ける場合、<email>{{email}}</email> に認証用の確認コードをお送りします。',
+      content2: '現在のメールアドレスは <email>{{email}}</email> です。認証コードはこのメールアドレスに送信されました。',
       content3: '新しいメールアドレスを入力すると、確認コードが送信されます。',
       content4: '一時確認コードを <email>{{email}}</email> に送信しました。',
       codeLabel: 'コード',

web/i18n/zh-Hans/common.ts

@@ -241,7 +241,7 @@ const translation = {
       authTip: '一旦您的电子邮件地址更改，链接到您旧电子邮件地址的 Google 或 GitHub 帐户将无法再登录该帐户。',
       content1: '如果您继续，我们将向 <email>{{email}}</email> 发送验证码以进行重新验证。',
       content2: '你的当前邮箱是 <email>{{email}}</email> 。验证码已发送至该邮箱。',
-      content3: '输入新的电子邮件，我们将向您发送验证码。',
+      content3: '输入新的邮箱，我们将向您发送验证码。',
       content4: '我们已将验证码发送至 <email>{{email}}</email> 。',
       codeLabel: '验证码',
       codePlaceholder: '输入 6 位数字验证码',

web/service/common.ts

@@ -396,4 +396,4 @@ export const resetEmail = (body: { new_email: string; token: string }) =>
   post<CommonResponse>('/account/change-email/reset', { body })
 
 export const checkEmailExisted = (body: { email: string }) =>
-  post<CommonResponse>('/account/change-email/check-email-unique', { body })
+  post<CommonResponse>('/account/change-email/check-email-unique', { body }, { silent: true })