fix(ui): fix infinite errorhandler loop bug

fix infinite errorhandler loop bug

packages/phrases-ui/src/locales/en.ts

@@ -41,7 +41,7 @@ const translation = {
     terms_of_use: 'Terms of Use',
     create_account: 'Create Account',
     or: 'or',
-    enter_passcode: 'The verification code has been sent to your {{address}}',
+    enter_passcode: 'The verification code has been sent to your {{address}} {{target}}',
     passcode_sent: 'The verification code has been resent',
     resend_after_seconds: 'Resend after <span>{{seconds}}</span> seconds',
     resend_passcode: 'Resend verification code',

packages/phrases-ui/src/locales/fr.ts

@@ -43,7 +43,7 @@ const translation = {
     terms_of_use: "Conditions d'utilisation",
     create_account: 'Créer un compte',
     or: 'ou',
-    enter_passcode: 'Le code a été envoyé à {{address}}',
+    enter_passcode: 'Le code a été envoyé à {{address}} {{target}}',
     passcode_sent: 'Le code a été renvoyé',
     resend_after_seconds: 'Renvoyer après <span>{{seconds}}</span> secondes',
     resend_passcode: 'Renvoyer le code',

packages/phrases-ui/src/locales/ko.ts

@@ -43,7 +43,7 @@ const translation = {
     terms_of_use: '이용약관',
     create_account: '계정 생성',
     or: '또는',
-    enter_passcode: '{{address}} 으로 비밀번호가 전송되었어요.',
+    enter_passcode: '{{address}} {{target}} 으로 비밀번호가 전송되었어요.',
     passcode_sent: '비밀번호가 재전송 되었습니다.',
     resend_after_seconds: '<span>{{seconds}}</span> 초 후에 재전송',
     resend_passcode: '비밀번호 재전송',

packages/phrases-ui/src/locales/pt-pt.ts

@@ -43,7 +43,7 @@ const translation = {
     terms_of_use: 'Termos de uso',
     create_account: 'Criar uma conta',
     or: 'ou',
-    enter_passcode: 'A senha foi enviada para o seu {{address}}',
+    enter_passcode: 'A senha foi enviada para o seu {{address}} {{target}}',
     passcode_sent: 'A senha foi reenviada',
     resend_after_seconds: 'Reenviar após <span>{{seconds}}</span> segundos',
     resend_passcode: 'Reenviar senha',

packages/phrases-ui/src/locales/tr-tr.ts

@@ -43,7 +43,7 @@ const translation = {
     terms_of_use: 'Kullanım Koşulları',
     create_account: 'Hesap Oluştur',
     or: 'veya',
-    enter_passcode: 'Kod {{address}}inize gönderildi.',
+    enter_passcode: 'Kod {{address}} {{target}} inize gönderildi.',
     passcode_sent: 'Kodunuz yeniden gönderildi.',
     resend_after_seconds: '<span>{{seconds}}</span> saniye sonra tekrar gönder',
     resend_passcode: 'Kodu Yeniden Gönder',

packages/phrases-ui/src/locales/zh-cn.ts

@@ -43,7 +43,7 @@ const translation = {
     terms_of_use: '使用条款',
     create_account: '创建帐号',
     or: '或',
-    enter_passcode: '验证码已经发送至你的{{ address }}',
+    enter_passcode: '验证码已经发送至你的{{ address }} {{target}}',
     passcode_sent: '验证码已经发送',
     resend_after_seconds: '在 <span>{{ seconds }}</span> 秒后重发',
     resend_passcode: '重发验证码',

packages/ui/src/containers/PasscodeValidation/index.tsx

@@ -1,6 +1,6 @@
 import type { SignInIdentifier } from '@logto/schemas';
 import classNames from 'classnames';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
 import Passcode, { defaultLength } from '@/components/Passcode';
@@ -23,9 +23,14 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
   const { t } = useTranslation();
   const usePasscodeValidation = getPasscodeValidationHook(type, method);
 
-  const { errorMessage, clearErrorMessage, onSubmit } = usePasscodeValidation(target, () => {
+  const errorCallback = useCallback(() => {
     setCode([]);
-  });
+  }, []);
+
+  const { errorMessage, clearErrorMessage, onSubmit } = usePasscodeValidation(
+    target,
+    errorCallback
+  );
 
   const { seconds, isRunning, onResendPasscode } = useResendPasscode(type, method, target);
 

packages/ui/src/containers/PasscodeValidation/use-identifier-error-alert.ts

@@ -1,4 +1,5 @@
 import { SignInIdentifier } from '@logto/schemas';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -14,7 +15,8 @@ const useIdentifierErrorAlert = (
   const navigate = useNavigate();
   const { t } = useTranslation();
 
-  return async () => {
+  // Have to wrap up in a useCallback hook otherwise the handler updates on every cycle
+  return useCallback(async () => {
     await show({
       type: 'alert',
       ModalContent: t(
@@ -29,7 +31,7 @@ const useIdentifierErrorAlert = (
       cancelText: 'action.got_it',
     });
     navigate(-1);
-  };
+  }, [flow, method, navigate, show, t, value]);
 };
 
 export default useIdentifierErrorAlert;

packages/ui/src/containers/PasscodeValidation/use-shared-error-handler.ts

@@ -1,18 +1,22 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 
 import type { ErrorHandlers } from '@/hooks/use-api';
 
 const useSharedErrorHandler = () => {
   const [errorMessage, setErrorMessage] = useState<string>();
 
-  const sharedErrorHandlers: ErrorHandlers = {
-    'passcode.expired': (error) => {
-      setErrorMessage(error.message);
-    },
-    'passcode.code_mismatch': (error) => {
-      setErrorMessage(error.message);
-    },
-  };
+  // Have to wrap up in a useMemo hook otherwise the handler updates on every cycle
+  const sharedErrorHandlers: ErrorHandlers = useMemo(
+    () => ({
+      'passcode.expired': (error) => {
+        setErrorMessage(error.message);
+      },
+      'passcode.code_mismatch': (error) => {
+        setErrorMessage(error.message);
+      },
+    }),
+    []
+  );
 
   return {
     errorMessage,

packages/ui/src/pages/Passcode/index.tsx

@@ -1,4 +1,5 @@
 import { SignInIdentifier } from '@logto/schemas';
+import { t } from 'i18next';
 import { useParams, useLocation } from 'react-router-dom';
 import { is } from 'superstruct';
 
@@ -35,7 +36,10 @@ const Passcode = () => {
     <SecondaryPageWrapper
       title="action.enter_passcode"
       description="description.enter_passcode"
-      descriptionProps={{ address: `description.${method === 'email' ? 'email' : 'phone_number'}` }}
+      descriptionProps={{
+        address: t(`description.${method === 'email' ? 'email' : 'phone_number'}`),
+        target,
+      }}
     >
       <PasscodeValidation type={type} method={method} target={target} />
     </SecondaryPageWrapper>