73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { DEMO_MODE } from "@saleor/config";
|
|
import useForm, { FormChange, SubmitPromise } from "@saleor/hooks/useForm";
|
|
import handleFormSubmit from "@saleor/utils/handlers/handleFormSubmit";
|
|
import React from "react";
|
|
|
|
export interface LoginFormData {
|
|
email: string;
|
|
password: string;
|
|
}
|
|
|
|
export interface UseLoginFormResult {
|
|
change: FormChange;
|
|
data: LoginFormData;
|
|
hasChanged: boolean;
|
|
submit: () => Promise<boolean>;
|
|
}
|
|
|
|
export interface LoginFormProps {
|
|
children: (props: UseLoginFormResult) => React.ReactNode;
|
|
onSubmit: (data: LoginFormData) => SubmitPromise;
|
|
}
|
|
|
|
const getLoginFormData = () => {
|
|
if (DEMO_MODE) {
|
|
return {
|
|
email: "admin@example.com",
|
|
password: "admin"
|
|
};
|
|
}
|
|
return { email: "", password: "" };
|
|
};
|
|
|
|
function useLoginForm(
|
|
onSubmit: (data: LoginFormData) => SubmitPromise
|
|
): UseLoginFormResult {
|
|
const [changed, setChanged] = React.useState(false);
|
|
const triggerChange = () => setChanged(true);
|
|
|
|
const form = useForm(getLoginFormData());
|
|
|
|
const handleChange: FormChange = (event, cb) => {
|
|
form.change(event, cb);
|
|
triggerChange();
|
|
};
|
|
|
|
const data: LoginFormData = {
|
|
...form.data
|
|
};
|
|
|
|
const handleSubmit = async (data: LoginFormData) => {
|
|
const errors = await onSubmit(data);
|
|
|
|
return errors;
|
|
};
|
|
|
|
const submit = async () => handleFormSubmit(data, handleSubmit, setChanged);
|
|
|
|
return {
|
|
change: handleChange,
|
|
data,
|
|
hasChanged: changed,
|
|
submit
|
|
};
|
|
}
|
|
|
|
const LoginForm: React.FC<LoginFormProps> = ({ children, onSubmit }) => {
|
|
const props = useLoginForm(onSubmit);
|
|
|
|
return <form onSubmit={props.submit}>{children(props)}</form>;
|
|
};
|
|
|
|
LoginForm.displayName = "LoginForm";
|
|
export default LoginForm;
|