diff --git a/src/features/auth/ui/LoginForm/LoginForm.spec.tsx b/src/features/auth/ui/LoginForm/LoginForm.spec.tsx
index 447259d..df67a4f 100644
--- a/src/features/auth/ui/LoginForm/LoginForm.spec.tsx
+++ b/src/features/auth/ui/LoginForm/LoginForm.spec.tsx
@@ -21,9 +21,20 @@ describe("LoginForm", () => {
expect(screen.getByRole("button", { name: /login/i })).toBeDisabled();
});
- it("enables submit button when form is valid", () => {
+ it("disables submit button when auth store status equals loading", () => {
useAuthStore.getState().setEmail(MOCK_EMAIL);
useAuthStore.getState().setPassword(MOCK_PASSWORD);
+ useAuthStore.setState({ status: "loading" });
+
+ render();
+ expect(screen.getByRole("button", { name: /login/i })).toBeDisabled();
+ });
+
+ it("enables submit button when form is valid and auth store status isn't equal to loading", () => {
+ useAuthStore.getState().setEmail(MOCK_EMAIL);
+ useAuthStore.getState().setPassword(MOCK_PASSWORD);
+ useAuthStore.setState({ status: "idle" });
+
render();
expect(screen.getByRole("button", { name: /login/i })).toBeEnabled();
});
@@ -49,6 +60,7 @@ describe("LoginForm", () => {
useAuthStore.getState().setEmail(MOCK_EMAIL);
useAuthStore.getState().setPassword(MOCK_PASSWORD);
+ useAuthStore.setState({ status: "idle" });
render();
const submitButton = screen.getByRole("button", { name: /login/i });
diff --git a/src/features/auth/ui/LoginForm/LoginForm.tsx b/src/features/auth/ui/LoginForm/LoginForm.tsx
index 530f02e..5b1c8f7 100644
--- a/src/features/auth/ui/LoginForm/LoginForm.tsx
+++ b/src/features/auth/ui/LoginForm/LoginForm.tsx
@@ -1,4 +1,8 @@
-import { selectFormValid, useAuthStore } from "../../model";
+import {
+ selectFormValid,
+ selectStatusIsLoading,
+ useAuthStore,
+} from "../../model";
import type { SubmitEvent, ChangeEvent } from "react";
/**
@@ -8,6 +12,9 @@ export function LoginForm() {
const { formData, setEmail, setPassword, login } = useAuthStore();
const formValid = useAuthStore(selectFormValid);
+ const isLoading = useAuthStore(selectStatusIsLoading);
+
+ const disabled = !formValid || isLoading;
const handleEmailChange = (e: ChangeEvent) => {
setEmail(e.target.value);
@@ -36,7 +43,7 @@ export function LoginForm() {
value={formData?.password?.value ?? ""}
onChange={handlePasswordChange}
/>
-