fix(console): properly handle errors on profile change basic info dialog (#3332)

packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx

@@ -10,8 +10,11 @@ import ModalLayout from '@/components/ModalLayout';
 import TextInput from '@/components/TextInput';
 import { adminTenantEndpoint, meApi } from '@/consts';
 import { useStaticApi } from '@/hooks/use-api';
+import { useConfirmModal } from '@/hooks/use-confirm-modal';
 import * as modalStyles from '@/scss/modal.module.scss';
 
+import { handleError } from '../../utils';
+
 export type BasicUserField = 'avatar' | 'username' | 'name';
 
 type Props = {
@@ -27,13 +30,19 @@ type FormFields = {
 
 const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const api = useStaticApi({ prefixUrl: adminTenantEndpoint, resourceIndicator: meApi.indicator });
+  const { show: showModal } = useConfirmModal();
+  const api = useStaticApi({
+    prefixUrl: adminTenantEndpoint,
+    resourceIndicator: meApi.indicator,
+    hideErrorToast: true,
+  });
   const {
     register,
     clearErrors,
     handleSubmit,
     setValue,
     reset,
+    setError,
     formState: { errors, isSubmitting },
   } = useForm<FormFields>({ reValidateMode: 'onBlur' });
 
@@ -72,9 +81,23 @@ const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose
   const onSubmit = async () => {
     clearErrors();
     void handleSubmit(async (data) => {
-      await api.patch('me', { json: { [field]: data[field] } });
-      toast.success(t('profile.updated', { target: t(`profile.settings.${field}`) }));
-      onClose();
+      try {
+        await api.patch('me', { json: { [field]: data[field] } });
+        toast.success(t('profile.updated', { target: t(`profile.settings.${field}`) }));
+        onClose();
+      } catch (error: unknown) {
+        void handleError(error, async (_, message, status) => {
+          if (status === 422) {
+            await showModal({
+              ModalContent: message,
+              type: 'alert',
+              cancelButtonText: 'general.got_it',
+            });
+
+            return true;
+          }
+        });
+      }
     })();
   };
 

packages/console/src/pages/Profile/containers/VerificationCodeModal/index.tsx

@@ -89,7 +89,7 @@ const VerificationCodeModal = () => {
         }
 
         // Other verification code errors will be displayed in a popup modal.
-        if (code.startsWith('verification_code.')) {
+        if (code.startsWith('verification_code.') || code === 'user.email_already_in_use') {
           await showModal({
             ModalContent: message,
             type: 'alert',

packages/console/src/pages/Profile/utils.ts

@@ -46,13 +46,13 @@ export const popupWindow = (url: string, windowName: string, width: number, heig
 
 export const handleError = async (
   error: unknown,
-  exec?: (errorCode: string, message: string) => Promise<boolean | undefined>
+  exec?: (errorCode: string, message: string, status: number) => Promise<boolean | undefined>
 ) => {
   if (error instanceof HTTPError) {
     const logtoError = await error.response.json<RequestErrorBody>();
     const { code, message } = logtoError;
 
-    const handled = await exec?.(code, message);
+    const handled = await exec?.(code, message, error.response.status);
 
     if (handled) {
       return;