Feat: error handling

src/i18n/resources/zh-cn/common.json

@@ -27,6 +27,7 @@
     "password_placeholder": "请输入密码",
     "password_required": "您必须输入密码",
     "password_min": "密码长度不能少于 {{count}} 个字符",
+    "password_max": "密码长度不能超过 {{count}} 个字符",
     "password_confirmation": "确认密码",
     "password_confirmation_placeholder": "请再次输入密码",
     "password_confirmation_required": "您必须再次输入密码",

src/sections/auth/auth-forms/AuthLogin.tsx

@@ -32,6 +32,7 @@ import AnimateButton from "@/components/@extended/AnimateButton";
 
 // assets
 import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons";
+import lo from "lodash-es";
 
 // ============================|| FIREBASE - LOGIN ||============================ //
 
@@ -90,7 +91,7 @@ const AuthLogin = () => {
               })
               .catch((err: any) => {
                 setStatus({ success: false });
-                setErrors({ submit: err.message });
+                setErrors(lo.isEmpty(err.errors) ? { submit: err.message } : err.errors);
               })
               .finally(() => {
                 setSubmitting(false);
@@ -99,7 +100,7 @@ const AuthLogin = () => {
             console.error(err);
             if (scriptedRef.current) {
               setStatus({ success: false });
-              setErrors({ submit: err.message });
+              setErrors(lo.isEmpty(err.errors) ? { submit: err.message } : err.errors);
               setSubmitting(false);
             }
           }

src/sections/auth/auth-forms/AuthRegister.tsx

@@ -18,7 +18,8 @@ import {
   Typography,
   FormControlLabel,
   Radio,
-  Checkbox
+  Checkbox,
+  CircularProgress
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 
@@ -104,10 +105,11 @@ const AuthRegister = () => {
     return Yup.object().shape({
       email: Yup.string()
         .email(t("register.email_invalid").toString())
-        .max(255, t("register.email_max").toString())
+        .max(255, t("register.email_max", { count: 255 }).toString())
         .required(t("register.email_required").toString()),
       password: Yup.string()
-        .max(255, t("register.password_max").toString())
+        .min(8, t("register.password_min", { count: 8 }).toString())
+        .max(255, t("register.password_max", { count: 255 }).toString())
         .required(t("register.password_required").toString()),
       password_confirm: Yup.string()
         .oneOf([Yup.ref("password"), null], t("register.password_confirm_invalid").toString())
@@ -154,15 +156,14 @@ const AuthRegister = () => {
                 },
                 (error) => {
                   setStatus({ success: false });
-                  setErrors({ submit: error.message });
+                  setErrors(lo.isEmpty(error.errors) ? { submit: error.message } : error.errors);
                 }
               );
           } catch (err: any) {
             console.error(err);
             if (scriptedRef.current) {
               setStatus({ success: false });
-              setErrors({ submit: err.message });
-              setSubmitting(false);
+              setErrors(lo.isEmpty(err.errors) ? { submit: err.message } : err.errors);
             }
           } finally {
             setSubmitting(false);
@@ -409,7 +410,7 @@ const AuthRegister = () => {
                     variant="contained"
                     color="primary"
                   >
-                    Create Account
+                    {isSubmitting ? <CircularProgress size={24} color="inherit" /> : <Trans>{"register.submit"}</Trans>}
                   </Button>
                 </AnimateButton>
               </Grid>

src/store/services/api.ts

@@ -36,7 +36,8 @@ const axiosBaseQuery: () => BaseQueryFn =
       return {
         error: {
           status: err.response?.status || 500,
-          message: err.response?.data?.message || err.message
+          message: err.response?.data?.message || err.message,
+          errors: err.response?.data?.errors || null
         }
       };
     }