import { createServerForm$, Field, zodForm } from "@modular-forms/solid";
import { z } from "zod";
import { TextInput, Button } from "~/components";
const loginSchema = z.object({
email: z
.string()
.min(1, "Please enter your email.")
.email("The email address is badly formatted."),
password: z
.string()
.min(1, "Please enter your password.")
.min(8, "You password must have 8 characters or more."),
});
export default function LoginRoute() {
const [loginForm, Form] = createServerForm$<z.infer<typeof loginSchema>>({
validate: zodForm(loginSchema),
onSubmit: async (values) => {
// Your code
},
});
return (
<Form>
<Field of={loginForm} name="email">
{(field) => (
<TextInput
{...field.props}
type="email"
label="Email"
value={field.value}
error={field.error}
required
/>
)}
</Field>
<Field of={loginForm} name="password">
{(field) => (
<TextInput
{...field.props}
type="password"
label="Password"
value={field.value}
error={field.error}
required
/>
)}
</Field>
<Button type="submit">Login</Button>
</Form>
);
}
import { createServerForm$, Field, zodForm } from "@modular-forms/solid";
import { z } from "zod";
import { TextInput, Button } from "~/components";
const loginSchema = z.object({
email: z
.string()
.min(1, "Please enter your email.")
.email("The email address is badly formatted."),
password: z
.string()
.min(1, "Please enter your password.")
.min(8, "You password must have 8 characters or more."),
});
export default function LoginRoute() {
const [loginForm, Form] = createServerForm$<z.infer<typeof loginSchema>>({
validate: zodForm(loginSchema),
onSubmit: async (values) => {
// Your code
},
});
return (
<Form>
<Field of={loginForm} name="email">
{(field) => (
<TextInput
{...field.props}
type="email"
label="Email"
value={field.value}
error={field.error}
required
/>
)}
</Field>
<Field of={loginForm} name="password">
{(field) => (
<TextInput
{...field.props}
type="password"
label="Password"
value={field.value}
error={field.error}
required
/>
)}
</Field>
<Button type="submit">Login</Button>
</Form>
);
}