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} /> -