feat(LoginForm): create LoginForm component with basic logic, test coverage and storybook placeholder

This commit is contained in:
Ilia Mashkov
2026-03-24 19:30:45 +03:00
parent c41f02f505
commit e4630a7fcb
3 changed files with 110 additions and 1 deletions

View File

@@ -1,5 +1,44 @@
import { selectFormValid, useAuthStore } from "../../model";
import type { SubmitEvent, ChangeEvent } from "react";
/**
* Login form component
*/
export function LoginForm() {
const { formData, setEmail, setPassword, login } = useAuthStore();
const formValid = useAuthStore(selectFormValid);
const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
setEmail(e.target.value);
};
const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
setPassword(e.target.value);
};
const handleSubmit = (e: SubmitEvent<HTMLFormElement>) => {
e.preventDefault();
login();
};
return (
<form>Login Form</form>
<form aria-label="Login form" onSubmit={handleSubmit}>
<input
type="email"
aria-label="Email"
value={formData?.email?.value ?? ""}
onChange={handleEmailChange}
/>
<input
type="password"
aria-label="Password"
value={formData?.password?.value ?? ""}
onChange={handlePasswordChange}
/>
<button type="submit" disabled={!formValid}>
Login
</button>
</form>
);
}