feat(LoginForm): create LoginForm component with basic logic, test coverage and storybook placeholder
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user