fix: auth loading error and success

src/pages/Auth/Login/Login.tsx

@@ -31,7 +31,9 @@ const Login: React.FC = () => {
   } = useForm<ILoginFormData>();
 
   const dispatch = useAppDispatch();
-  const { loading, error } = useAppSelector((state: RootState) => state.auth);
+  const { loadingLogin, errorLogin } = useAppSelector(
+    (state: RootState) => state.auth
+  );
 
   const onSubmit = async (data: ILoginFormData) => {
     try {
@@ -79,9 +81,9 @@ const Login: React.FC = () => {
           </p>
         </div>
 
-        {error && <p className="text-danger text-center">{error}</p>}
+        {errorLogin && <p className="text-danger text-center">{errorLogin}</p>}
 
-        <CButton title={`${t("button.continue")}`} isLoading={loading} />
+        <CButton title={`${t("button.continue")}`} isLoading={loadingLogin} />
       </form>
     </div>
   );

src/pages/Auth/Recover/Recover.tsx

@@ -23,7 +23,7 @@ const Recover: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
-  const { loading, error, success } = useAppSelector(
+  const { loadingRecover, errorRecover, successRecover } = useAppSelector(
     (state: RootState) => state.auth
   );
 
@@ -74,10 +74,14 @@ const Recover: React.FC = () => {
           error={errors.repeatPassword?.message as string}
         />
 
-        {success && <p className="text-success text-center">{success}</p>}
-        {error && <p className="text-danger text-center">{error}</p>}
+        {successRecover && (
+          <p className="text-success text-center">{successRecover}</p>
+        )}
+        {errorRecover && (
+          <p className="text-danger text-center">{errorRecover}</p>
+        )}
 
-        <CButton title={`${t("button.continue")}`} isLoading={loading} />
+        <CButton title={`${t("button.continue")}`} isLoading={loadingRecover} />
       </form>
     </div>
   );

src/pages/Auth/Register/Register.tsx

@@ -31,7 +31,9 @@ const Register: React.FC = () => {
   } = useForm<IRegisterFormData>();
 
   const dispatch = useAppDispatch();
-  const { loading, error } = useSelector((state: RootState) => state.auth);
+  const { loadingRegister, errorRegister } = useSelector(
+    (state: RootState) => state.auth
+  );
 
   const onSubmit = async (data: IRegisterFormData) => {
     try {
@@ -114,9 +116,14 @@ const Register: React.FC = () => {
           )}
         </div>
 
-        {error && <p className="text-danger text-center">{error}</p>}
+        {errorRegister && (
+          <p className="text-danger text-center">{errorRegister}</p>
+        )}
 
-        <CButton title={`${t("button.continue")}`} isLoading={loading} />
+        <CButton
+          title={`${t("button.continue")}`}
+          isLoading={loadingRegister}
+        />
       </form>
     </div>
   );

src/stores/slices/authSlice.ts

@@ -12,9 +12,15 @@ interface IAuthUser {
 
 interface IAuthState {
   user: IAuthUser | null;
-  loading: boolean;
-  error: string | null;
-  success: boolean | string;
+  loadingLogin: boolean;
+  loadingRegister: boolean;
+  loadingRecover: boolean;
+  errorLogin: string | null;
+  errorRegister: string | null;
+  errorRecover: string | null;
+  successLogin: boolean | string;
+  successRegister: boolean | string;
+  successRecover: boolean | string;
 }
 
 interface IResponseError {
@@ -24,9 +30,15 @@ interface IResponseError {
 
 const initialState: IAuthState = {
   user: null,
-  loading: false,
-  error: null,
-  success: false,
+  loadingLogin: false,
+  loadingRegister: false,
+  loadingRecover: false,
+  errorLogin: null,
+  errorRegister: null,
+  errorRecover: null,
+  successLogin: false,
+  successRegister: false,
+  successRecover: false,
 };
 
 export const authLogin = createAsyncThunk<
@@ -98,54 +110,53 @@ const authSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(authLogin.pending, (state) => {
-        state.loading = true;
-        state.error = null;
+        state.loadingLogin = true;
       })
       .addCase(
         authLogin.fulfilled,
         (state, action: PayloadAction<IAuthUser>) => {
-          state.loading = false;
+          state.loadingLogin = false;
           state.user = action.payload;
-          state.success = true;
+          state.successLogin = true;
         }
       )
       .addCase(authLogin.rejected, (state, action) => {
-        state.loading = false;
-        state.error = action.payload ?? "Login failed";
+        state.loadingLogin = false;
+        state.errorLogin = action.payload ?? "Login failed";
       })
 
       .addCase(authRegister.pending, (state) => {
-        state.loading = true;
-        state.error = null;
+        state.loadingRegister = true;
+        state.errorRegister = null;
       })
       .addCase(
         authRegister.fulfilled,
         (state, action: PayloadAction<IAuthUser>) => {
-          state.loading = false;
+          state.loadingRegister = false;
           state.user = action.payload;
-          state.success = true;
+          state.successRegister = true;
         }
       )
       .addCase(authRegister.rejected, (state, action) => {
-        state.loading = false;
-        state.error = action.payload ?? "Registration failed";
+        state.loadingRegister = false;
+        state.errorRegister = action.payload ?? "Registration failed";
       })
 
       .addCase(authRecover.pending, (state) => {
-        state.loading = true;
-        state.error = null;
+        state.loadingRecover = true;
+        state.errorRecover = null;
       })
       .addCase(
         authRecover.fulfilled,
         (state, action: PayloadAction<IAuthUser>) => {
-          state.loading = false;
+          state.loadingRecover = false;
           state.user = action.payload;
-          state.success = "Confirmation code sent to email";
+          state.successRecover = "Confirmation code sent to email";
         }
       )
       .addCase(authRecover.rejected, (state, action) => {
-        state.loading = false;
-        state.error = action.payload ?? "Recovery failed";
+        state.loadingRecover = false;
+        state.errorRecover = action.payload ?? "Recovery failed";
       });
   },
 });